Reuse published collection card on collection detail page

[ebulgakov]

Summary

• Adds an optional #overlay slot to PublishedCollectionCard (rendered as a sibling of the card's own anchor, so overlay content — chips, buttons — never nests inside the card's :to anchor)
• Reuses the card on collections/[id] to replace the ad-hoc h1/p header, with shared/published badges and the "Add link" button overlaid on top
• Homepage and /published-collections call sites unaffected (no #overlay content passed, wrapper renders identically to before)

Test plan

• pnpm type-check clean
• pnpm lint clean
• pnpm test — 189/189 pass
• Dev server smoke test: homepage, /published-collections, and /collections/[id] (auth redirect) render without runtime errors
• Manual visual check in browser (chips/button overlay position, click-through on card body vs overlay)

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added responsive collection cards with images, descriptions, and shared or published badges.
  • Added card-based navigation across collection, homepage, and published collection views.
  • Added contextual edit, delete, and add-link actions through card overlays.
  • Added folder placeholders when collection images are unavailable.

• UI Improvements

  • Replaced the previous collection list and header layouts with a consistent card presentation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
linkfolio	Ready	Preview	Aug 3, 2026 7:22am

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds a shared CollectionCard component and uses it across collection list, detail, homepage, and published-collection views. It removes the feature-specific PublishedCollectionCard component and export.

Changes

Collection card migration

Layer / File(s)	Summary
Shared card foundation app/shared/ui/collection-card.vue, app/shared/ui/index.ts	Adds typed card props, image fallback rendering, conditional descriptions, overlay actions, and the shared UI export.
Published collection card replacement app/pages/index.vue, app/pages/published-collections.vue, app/features/published-collections/index.ts, app/features/published-collections/ui/published-collection-card.vue	Replaces PublishedCollectionCard with CollectionCard and removes the feature-specific component and export.
Collection view integration app/features/collections/ui/collections-list.vue, app/pages/collections/[id]/index.vue	Uses responsive cards for collection navigation, metadata badges, edit/delete overlays, and add-link actions.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• ebulgakov/linkfolio#19: Adds collection data-fetching logic to the collection list later replaced here.
• ebulgakov/linkfolio#22: Also modifies the collection detail page.
• ebulgakov/linkfolio#26: Introduces the PublishedCollectionCard replaced by this PR.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary objective of reusing the collection card on the collection detail page.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/reuse-published-collection-card-vue-on

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[ebulgakov]

Update

Extracted the collection card into shared/ui/collection-card.vue (was feature-owned in published-collections) and reused it on the /collections list page (collections-list.vue), replacing the v-list-item rows with a card grid.

• Prop API changed to primitives (to, title, description, imageUrl) instead of a collection domain object — decouples shared/ui from shared/api types, avoids a feature-to-feature import (collections → published-collections), which FSD forbids.
• /collections cards link to /collections/{id} (owner management page); the other 3 usages (homepage, /published-collections, /collections/[id]) keep linking to /shared/{slug}.
• Edit action changed from a text link to an icon button (mdi-pencil, variant="tonal") for legibility over the overlay/image, matching the existing delete button's style.

Verified: pnpm type-check, pnpm lint, pnpm test (189/189) all pass; smoke-tested homepage, /published-collections, /collections, and /collections/[id] via dev server — no runtime errors, auth redirect intact.

🤖 Generated with Claude Code

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/pages/collections/`[id]/index.vue:
- Around line 82-87: Update the CollectionCard `:to` route so private
collections navigate to the owner-only `/collections/<id>` detail page, while
shared or published collections continue using `/shared/<slug>`. Base the
conditional on the collection’s visibility fields and use the existing
`collection.id` and `collection.slug` symbols.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 32136eb6-3cb4-414c-9dad-5f7c9182817f

📥 Commits

Reviewing files that changed from the base of the PR and between f1a7522 and a504115.

📒 Files selected for processing (8)

• app/features/collections/ui/collections-list.vue
• app/features/published-collections/index.ts
• app/features/published-collections/ui/published-collection-card.vue
• app/pages/collections/[id]/index.vue
• app/pages/index.vue
• app/pages/published-collections.vue
• app/shared/ui/collection-card.vue
• app/shared/ui/index.ts

💤 Files with no reviewable changes (2)

• app/features/published-collections/ui/published-collection-card.vue
• app/features/published-collections/index.ts