Add more contacts button in popup

apps/browser/src/cozy/components/view-more-contacts/view-more-contacts.component.html

@@ -0,0 +1,27 @@
+<div>
+  <header>
+    <div class="left">
+      <button type="button" appBlurClick (click)="back()" title="{{ 'back_shortcut' | i18n }}">
+        <span class="header-icon" title="{{ 'back' | i18n }}"
+          ><i class="icon-cozy icon-back"></i
+        ></span>
+      </button>
+    </div>
+    <h1 class="center">
+      <span class="title">{{ "viewMoreContact" | i18n }}</span>
+    </h1>
+    <div class="right"></div>
+  </header>
+  <main tabindex="-1">
+    <div class="box list">
+      <div class="box-content single-line">
+        <p>{{ "viewMoreContactInfo1" | i18n }}</p>
+        <p>{{ "viewMoreContactInfo2" | i18n }}</p>
+        <span class="view-more-contacts-redirect" (click)="openContacts()">
+          <div class="icon"><i class="icon-cozy icon-contacts"></i></div>
+          {{ "viewMoreContactRedirect" | i18n }}
+        </span>
+      </div>
+    </div>
+  </main>
+</div>

apps/browser/src/cozy/components/view-more-contacts/view-more-contacts.component.ts

@@ -0,0 +1,24 @@
+import { Location } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import { CozyClientService } from "../../../popup/services/cozyClient.service";
+
+@Component({
+  selector: "app-vault-view-more-contacts",
+  templateUrl: "view-more-contacts.component.html",
+})
+export class ViewMoreContactsComponent {
+  constructor(
+    private cozyClientService: CozyClientService,
+    private location: Location,
+  ) {}
+
+  back() {
+    this.location.back();
+  }
+
+  protected async openContacts() {
+    await BrowserApi.createNewTab(this.cozyClientService.getAppURL("contacts", ""));
+  }
+}

apps/browser/src/popup/app-routing.module.ts

@@ -52,6 +52,7 @@ import { NotificationsSettingsComponent } from "../autofill/popup/settings/notif
 import { PremiumV2Component } from "../billing/popup/settings/premium-v2.component";
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import { AddGenericComponent } from "../cozy/components/add-generic/add-generic.component";
+import { ViewMoreContactsComponent } from "../cozy/components/view-more-contacts/view-more-contacts.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
 import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
@@ -266,6 +267,13 @@ const routes: Routes = [
     data: { state: "add-generic" },
     runGuardsAndResolvers: "always",
   },
+  {
+    path: "view-more-contacts",
+    component: ViewMoreContactsComponent,
+    canActivate: [authGuard, debounceNavigationGuard()],
+    data: { state: "view-more-contacts" },
+    runGuardsAndResolvers: "always",
+  },
   {
     path: "collections",
     component: CollectionsComponent,

apps/browser/src/popup/app.module.ts

@@ -94,6 +94,7 @@ import { TabsComponent } from "./tabs.component";
 import { FlagConditionalComponent } from "../cozy/components/flag-conditional/flag-conditional.component";
 import { IfFlagDirective } from "../cozy/components/flag-conditional/if-flag.directive";
 import { AddGenericComponent } from "../cozy/components/add-generic/add-generic.component";
+import { ViewMoreContactsComponent } from "../cozy/components/view-more-contacts/view-more-contacts.component";
 import { ViewExpirationDateComponent } from "../vault/popup/components/vault/view-expiration-date.component";
 import { ViewLabelComponent } from "../vault/popup/components/vault/view-label.component";
 import { ContactAvatarComponent } from "../vault/popup/components/vault/contact-avatar.component";
@@ -204,6 +205,7 @@ import "../platform/popup/locales";
     FlagConditionalComponent,
     IfFlagDirective,
     AddGenericComponent,
+    ViewMoreContactsComponent,
     ViewExpirationDateComponent,
     ViewLabelComponent,
     ContactAvatarComponent,

apps/browser/src/popup/scss/pages.scss

@@ -237,6 +237,43 @@ app-vault-share {
 
 /* Cozy custo */
 
+app-vault-view-more-contacts {
+  .box {
+    margin: 10px;
+    width: 90%;
+  }
+
+  .view-more-contacts-redirect {
+    cursor: pointer;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 1.5rem;
+    width: fit-content;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+
+    &:hover {
+      @include themify($themes) {
+        background-color: themed("boxBackgroundHoverColor");
+      }
+    }
+
+    @include themify($themes) {
+      background-color: themed("boxBackgroundColor");
+      border-color: themed("boxBorderColor");
+    }
+  }
+
+  .icon,
+  .icon-contacts {
+    line-height: 1rem;
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 app-help-and-feedback .box-content {
   padding-top: 25px;
 }

apps/browser/src/vault/popup/components/vault/vault-filter.component.html

@@ -79,7 +79,7 @@ <h2 class="box-header">
       </h2>
       <div class="box-content">
         <div class="box-content-row box-content-row-flex">
-          <button type="button" appStopClick (click)="addCipher()" class="row-main">
+          <button type="button" appStopClick (click)="addLoginCipher()" class="row-main">
             <div class="icon" aria-hidden="true">
               <i class="icon-cozy icon-plus-2"></i>
             </div>

apps/browser/src/vault/popup/components/vault/vault-filter.component.ts

@@ -447,6 +447,27 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     /* end custo */
   }
 
+  // Cozy customization; navigating to "/add-cipher" with a login type when adding a suggestion
+  async addLoginCipher() {
+    const tab = await BrowserApi.getTabFromCurrentWindow();
+    let url = "",
+      hostname = "";
+    if (tab != null) {
+      url = tab.url;
+      hostname = Utils.getHostname(url);
+    }
+
+    this.router.navigate(["/add-cipher"], {
+      queryParams: {
+        cloneMode: true, // we need this in order to go back twice after creation
+        type: CipherType.Login,
+        uri: url,
+        name: hostname,
+      },
+    });
+  }
+  // Cozy customization end
+
   async vaultFilterChanged() {
     if (this.showSearching) {
       await this.search();

apps/browser/src/vault/popup/components/vault/vault-items.component.html

@@ -194,6 +194,13 @@ <h2 class="box-header">
           ></app-cipher-row>
         </div>
       </div>
+      <!-- Cozy customization, open view more contacts page -->
+      <ng-container *ngIf="type === cipherType.Contact">
+        <button type="button" (click)="viewMoreContacts()" class="btn primary link tw-mt-2">
+          {{ "viewMoreContact" | i18n }}
+        </button>
+      </ng-container>
+      <!-- Cozy customization end -->
     </cdk-virtual-scroll-viewport>
   </ng-container>
 </main>

apps/browser/src/vault/popup/components/vault/vault-items.component.ts

@@ -493,6 +493,12 @@ export class VaultItemsComponent extends BaseVaultItemsComponent implements OnIn
   }
   // end custo
 
+  // Cozy customization, open view more contacts page
+  protected viewMoreContacts() {
+    this.router.navigate(["/view-more-contacts"]);
+  }
+  // Cozy customization end
+
   // Cozy customization, override search method to always sort by date for papers
   protected async doSearch(indexedCiphers?: CipherView[]) {
     await super.doSearch(indexedCiphers);