diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 223a2be7ef..b12dd25831 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -36,6 +36,14 @@ const desktopLinks = computed(() => [ external: false, iconClass: 'i-lucide:git-compare', }, + { + name: 'Collections', + label: $t('nav.collections'), + to: { name: 'collections' }, + type: 'link', + external: false, + iconClass: 'i-lucide:library', + }, { name: 'Settings', label: $t('nav.settings'), diff --git a/app/components/Collection/Card.stories.ts b/app/components/Collection/Card.stories.ts index 1ba304a672..ad3aa755b3 100644 --- a/app/components/Collection/Card.stories.ts +++ b/app/components/Collection/Card.stories.ts @@ -14,6 +14,27 @@ type Story = StoryObj export const Default: Story = {} +/** Collections from allowlisted accounts, such as npmx's own, get a badge. */ +export const Curated: Story = { + args: { + collection: { + ...mockCollectionSummary, + did: 'did:plc:u5zp7npt5kpueado77kuihyz', + handle: 'npmx.dev', + }, + }, +} + export const WithoutDescription: Story = { args: { collection: { ...mockCollectionSummary, description: undefined } }, } + +/** Browse adds counts and when the collection was last edited. */ +export const WithStats: Story = { + args: { + collection: { + ...mockCollectionSummary, + stats: { likes: 12, follows: 5, updatedAt: '2026-11-03T00:00:00.000Z' }, + }, + }, +} diff --git a/app/components/Collection/Card.vue b/app/components/Collection/Card.vue index c1734969dc..6c6ec1f4e6 100644 --- a/app/components/Collection/Card.vue +++ b/app/components/Collection/Card.vue @@ -1,11 +1,16 @@