feat: studio index page

[Jarsen136]

part of chaotic-art/planning#70
related to #791

Summary by CodeRabbit

• New Features
  • Studio navigation appears when an account is connected.
  • Collection cards now support two display modes: clickable link and view-only with an explicit "View" action.
  • New Studio page to view/manage your collections, including chain selection and a "Create Collection" button.
  • Collection grid shows a wallet connect prompt when no wallet is connected.

[railway-app]

This PR was not deployed automatically as @Jarsen136 does not have access to the Railway project.

In order to get automatic PR deploys, please add @Jarsen136 to your workspace on Railway.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
koda	Ready	Preview, Comment	Mar 4, 2026 10:30am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b11c37e4-8e6f-4f2e-a276-2574ea608105

📥 Commits

Reviewing files that changed from the base of the PR and between 5ebb468 and 12a77bb.

📒 Files selected for processing (1)

• app/pages/[chain]/studio/index.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/[chain]/studio/index.vue

---

📝 Walkthrough

Walkthrough

Adds a Studio page for managing a user’s collections (view-only mode); CollectionCard gains an actionVariant prop to support 'link' and 'view-only' modes; CollectionsGrid forwards this prop; Navbar shows a conditional Studio nav item when an account is connected.

Changes

Cohort / File(s)	Summary
Navigation app/components/Navbar.vue	Added conditional "Studio" nav item rendered only when accountId.value is present.
Card Component app/components/common/card/CollectionCard.client.vue	Added `ActionVariant = 'link'
Grid Component app/components/explore/CollectionsGrid.vue	Added CardActionVariant type and cardActionVariant prop (default 'link'); passes :action-variant="cardActionVariant" to CollectionCard.
Studio Page app/pages/[chain]/studio/index.vue	New Studio page: validates chain, reads auth/account, fetches user collections when connected, renders header (chain switcher, Create Collection), shows connect prompt if disconnected, or CollectionsGrid in view-only mode when connected.

Sequence Diagram

sequenceDiagram
    actor User
    participant Browser
    participant StudioPage as Studio Page
    participant CollectionsGrid as Collections Grid
    participant CollectionCard as Collection Card
    participant API as Collections API

    User->>Browser: Navigate to /{chain}/studio
    Browser->>StudioPage: Mount
    StudioPage->>StudioPage: Validate chain & check auth
    alt Account connected
        StudioPage->>API: Query user's collections
        API-->>StudioPage: Return collections
        StudioPage->>CollectionsGrid: Render with cardActionVariant='view-only'
        CollectionsGrid->>CollectionCard: Render items with actionVariant='view-only'
        CollectionCard-->>Browser: Display view-only cards (View button)
    else Account disconnected
        StudioPage-->>Browser: Show wallet connectEmptyState
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 I hopped to Studio, soft and spry,
Cards that peek but never fly,
Link or view, a gentle choice,
Collections hum with subtle voice,
A rabbit cheers—create, enjoy!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: studio index page' accurately describes the main change—a new studio index page is being added. The PR includes the new page file at app/pages/[chain]/studio/index.vue and related UI component modifications to support it.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/studio-index

---

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 and usage tips.}

[cloudflare-workers-and-pages]

Deploying app with    Cloudflare Pages

Latest commit:	12a77bb
Status:	✅  Deploy successful!
Preview URL:	https://87416b5e.app-bzd.pages.dev
Branch Preview URL:	https://feat-studio-index.app-bzd.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/pages/`[chain]/studio/index.vue:
- Around line 21-33: Destructuring route.params into a plain const chain makes
it non-reactive; replace that with a reactive reference (e.g., use the existing
useChain composable or a computed that returns route.params.chain as
AssetHubChain) and update usages such as gridKey and prefix to read the reactive
value (chain.value or the composable's returned ref) so they update when the
route param changes; update queryVariables if it depends on chain as well.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 208b5f0 and 5ebb468.

📒 Files selected for processing (4)

• app/components/Navbar.vue
• app/components/common/card/CollectionCard.client.vue
• app/components/explore/CollectionsGrid.vue
• app/pages/[chain]/studio/index.vue