[PM-40848] Add the shared folder card grid component (libs/vault)

apps/desktop/src/locales/en/messages.json

@@ -110,6 +110,64 @@
   "sharedFolders": {
     "message": "Shared folders"
   },
+  "collectionsInParent": {
+    "message": "Collections in $NAME$",
+    "description": "Titles the grid of collections nested directly inside the collection being viewed.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Engineering"
+      }
+    }
+  },
+  "sharedFoldersInParent": {
+    "message": "Shared folders in $NAME$",
+    "description": "Titles the grid of shared folders nested directly inside the shared folder being viewed.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Engineering"
+      }
+    }
+  },
+  "collectionCount": {
+    "message": "$COUNT$ collections",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "16"
+      }
+    }
+  },
+  "sharedFolderCount": {
+    "message": "$COUNT$ shared folders",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "16"
+      }
+    }
+  },
+  "moreCollectionsShownAbove": {
+    "message": "$COUNT$ more collections shown above this button",
+    "description": "Announced to screen readers when a collapsed grid of collections is expanded. The revealed collections render above the button that expanded them.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
+  "moreSharedFoldersShownAbove": {
+    "message": "$COUNT$ more shared folders shown above this button",
+    "description": "Announced to screen readers when a collapsed grid of shared folders is expanded. The revealed shared folders render above the button that expanded them.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
   "myFolder": {
     "message": "My folder"
   },

apps/web/src/locales/en/messages.json

@@ -1200,6 +1200,64 @@
   "sharedFolders": {
     "message": "Shared folders"
   },
+  "collectionsInParent": {
+    "message": "Collections in $NAME$",
+    "description": "Titles the grid of collections nested directly inside the collection being viewed.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Engineering"
+      }
+    }
+  },
+  "sharedFoldersInParent": {
+    "message": "Shared folders in $NAME$",
+    "description": "Titles the grid of shared folders nested directly inside the shared folder being viewed.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Engineering"
+      }
+    }
+  },
+  "collectionCount": {
+    "message": "$COUNT$ collections",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "16"
+      }
+    }
+  },
+  "sharedFolderCount": {
+    "message": "$COUNT$ shared folders",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "16"
+      }
+    }
+  },
+  "moreCollectionsShownAbove": {
+    "message": "$COUNT$ more collections shown above this button",
+    "description": "Announced to screen readers when a collapsed grid of collections is expanded. The revealed collections render above the button that expanded them.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
+  "moreSharedFoldersShownAbove": {
+    "message": "$COUNT$ more shared folders shown above this button",
+    "description": "Announced to screen readers when a collapsed grid of shared folders is expanded. The revealed shared folders render above the button that expanded them.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "3"
+      }
+    }
+  },
   "myFolder": {
     "message": "My folder"
   },
@@ -15341,6 +15399,9 @@
   "providersubCanceledmessage": {
     "message": "To resubscribe, contact Bitwarden Customer Support."
   },
+  "showAll": {
+    "message": "Show all"
+  },
   "showMore": {
     "message": "Show more"
   },

libs/vault/src/components/shared-folder-card-grid/shared-folder-card-grid.component.html

@@ -0,0 +1,82 @@
+@let overflow = overflowCards();
+
+@if (count() > 0) {
+  <section [attr.aria-labelledby]="headingId">
+    <div class="tw-mb-3 tw-flex tw-items-baseline tw-justify-between tw-gap-4">
+      <h2 [id]="headingId" bitTypography="h4" class="tw-mb-0">
+        {{ "collectionsInParent" | vfo1I18n: "sharedFoldersInParent" : parentName() }}
+      </h2>
+      @let countText = countSegments();
+      <span bitTypography="body2" class="tw-shrink-0 tw-text-muted"
+        >{{ countText.before
+        }}<strong class="tw-text-main tw-font-bold">{{ countText.count }}</strong
+        >{{ countText.after }}</span
+      >
+    </div>
+
+    <ul
+      class="tw-m-0 tw-grid tw-list-none tw-gap-3 tw-p-0"
+      [style.grid-template-columns]="gridTemplateColumns"
+    >
+      @for (folder of visibleCards(); track folder.id) {
+        <ng-container
+          [ngTemplateOutlet]="card"
+          [ngTemplateOutletContext]="{ $implicit: folder }"
+        ></ng-container>
+      }
+    </ul>
+
+    @if (overflow.length > 0) {
+      <bit-disclosure #overflowRows [(open)]="expanded">
+        <ul
+          class="tw-m-0 tw-mt-3 tw-grid tw-list-none tw-gap-3 tw-p-0"
+          [style.grid-template-columns]="gridTemplateColumns"
+        >
+          @for (folder of overflow; track folder.id) {
+            <ng-container
+              [ngTemplateOutlet]="card"
+              [ngTemplateOutletContext]="{ $implicit: folder }"
+            ></ng-container>
+          }
+        </ul>
+      </bit-disclosure>
+
+      <button
+        id="shared-folder-card-grid_button_toggle-overflow"
+        type="button"
+        bitLink
+        linkType="primary"
+        class="tw-mt-3"
+        [endIcon]="expanded() ? 'bwi-angle-up' : 'bwi-angle-down'"
+        [bitDisclosureTriggerFor]="overflowRows"
+      >
+        {{ (expanded() ? "showLess" : "showAll") | i18n }}
+      </button>
+    }
+  </section>
+}
+
+<ng-template #card let-folder>
+  <li>
+    <!--
+      `bit-item` gives the interactive row composition these cards need (start/end slots, hover,
+      focus-visible-within, truncation) but is styled to stack as a list: `tw-border-0 tw-border-b`,
+      so only a bottom divider shows. Promote the border to all four sides using the same token
+      `BaseCardDirective` applies, so these match every other card in the system.
+      Remove once CL-1281 ships a first-class card variant.
+    -->
+    <bit-item class="!tw-mb-0 !tw-border !tw-border-border-base">
+      <a
+        bit-item-content
+        [routerLink]="folder.commands"
+        [queryParams]="folder.queryParams"
+        [queryParamsHandling]="folder.queryParamsHandling"
+        [state]="folder.state"
+      >
+        <bit-icon-tile slot="start" [icon]="'bwi-collection-shared' | vfo1Icon"></bit-icon-tile>
+        {{ folder.name }}
+        <bit-icon slot="end" name="bwi-angle-right" class="tw-text-main bwi-lg" />
+      </a>
+    </bit-item>
+  </li>
+</ng-template>