Merged
Conversation
* feat: studio mode collection card * feat: studio page major layout * chore: item amount
|
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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds a Minting Studio feature: new studio layout, header, sidebar, and studio-scoped pages; updates mass-mint flow to support studio context (props, options, dynamic steps); changes card action variant from Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page as Studio Page
participant Layout as Studio Layout
participant Sidebar as Studio Sidebar
participant MassMint
participant Hook as useMassMintForm
participant API as Server/API
User->>Page: navigate to /[chain]/studio/[collection_id]/massmint
Page->>Layout: render with collection context
Layout->>Sidebar: provide collection props & nav callbacks
Layout->>MassMint: render with collectionId & blockchain props
MassMint->>Hook: initialize(useMassMintForm(options)) => isStudioContext
MassMint->>Hook: fetch collections / setup steps
Hook->>API: request user collections (blockchain-aware)
API-->>Hook: return collections
Hook-->>MassMint: provide state & isStudioContext
User->>MassMint: interact with stepper (next/goToStep)
MassMint->>Hook: validate/submit data
Hook->>API: submit mint payload
API-->>Hook: confirm
Hook-->>MassMint: result
MassMint-->>User: show success/failure
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Jarsen136
changed the title
Deploying app with
|
| Latest commit: |
d3bbb3e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d87c3997.app-bzd.pages.dev |
| Branch Preview URL: | https://feat-studio-flow-main.app-bzd.pages.dev |
* feat: delete collection on studio page * feat: studio sidebar adjustment
* feat: delete collection on studio page * feat: studio sidebar adjustment * feat: intergrate massmint into studio
Jarsen136
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
app/composables/massmint/useMassMintForm.ts (1)
5-8: UseSupportedChainfor the new options chain type.Line 7 currently uses
AssetHubChain; this should follow the repository’s standard chain identifier type.♻️ Proposed fix
-import type { AssetHubChain } from '~/plugins/sdk.client' +import type { SupportedChain } from '~/plugins/sdk.client' @@ export interface UseMassMintFormOptions { collectionId?: string - blockchain?: AssetHubChain + blockchain?: SupportedChain } @@ const state = reactive({ collection: '', - blockchain: 'ahp' as AssetHubChain, // Default to Asset Hub Polkadot + blockchain: 'ahp' as SupportedChain, // Default to Asset Hub Polkadot })As per coding guidelines
**/*.{ts,tsx}: UseSupportedChaintype from~/plugins/sdk.clientfor chain identifiers.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/composables/massmint/useMassMintForm.ts` around lines 5 - 8, Update the UseMassMintFormOptions type to use the repository-standard chain identifier: replace the blockchain property type AssetHubChain with SupportedChain in the UseMassMintFormOptions interface (symbol: UseMassMintFormOptions, property: blockchain). Add the appropriate import for SupportedChain from the sdk client module (symbol: SupportedChain from ~/plugins/sdk.client) and remove or replace any now-unused AssetHubChain import/usages so the interface and any consumers use SupportedChain consistently.app/pages/[chain]/studio/[collection_id]/[tab].vue (1)
4-4: Consider centralizingvalidTabsinto a shared constant.
validTabsis duplicated here and inapp/layouts/studio-collection.vue(Line 13 there). A shared source avoids accidental route/UI drift.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/pages/`[chain]/studio/[collection_id]/[tab].vue at line 4, Move the duplicated const validTabs into a single exported constant in a shared module (e.g., export const STUDIO_VALID_TABS = ['preview','details','items'] as const) and replace the local declarations with imports of that constant; update any type usages (e.g., typeof validTabs[number]) to reference the shared symbol and adjust imports in both the page component and the studio layout so they use the same source to prevent drift.app/layouts/studio-collection.vue (1)
48-53: Sidebar tab navigation is currently non-functional due to emptynavItems.With no active entries,
select-tabcannot be used from the sidebar even though tab routes exist. If this is intentionally deferred, I can help add a follow-up issue or wire the three tab items now.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/layouts/studio-collection.vue` around lines 48 - 53, The sidebar is empty because the navItems array (declared as const navItems: StudioNavItem[]) has no entries, so the sidebar can't call select-tab; populate navItems with the three tab objects (ids 'preview', 'details', 'items' — using the same literal ids your tab routes expect), include user-facing labels ('Preview', 'Details', 'Items') and the icon strings (e.g., 'i-heroicons:eye', 'i-heroicons-cog-6-tooth', 'i-heroicons-squares-2x2'), and preserve the literal types (use the same 'as const' pattern used in the commented examples) so the StudioNavItem type and any select-tab calls resolve correctly; ensure the navItems variable (navItems) is then used by the sidebar component so select-tab can activate the corresponding routes.
🤖 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/components/massmint/MassMint.vue`:
- Around line 148-155: The computed stepperMaxStepReached uses canNavigateTo
with hardcoded step indices that assume the non-studio step layout, causing
incorrect gating in studio mode; update the logic to translate the UI step index
into the correct logical step id before calling canNavigateTo (or call a variant
of canNavigateTo that accepts a stepper index and accounts for isStudioMode),
ensure you reference stepperMaxStepReached, canNavigateTo, stepCount and
isStudioMode, and apply the same mapping/fix to the other step-navigation checks
in the same block (the similar logic around the later step checks).
In `@app/components/studio/StudioSidebar.vue`:
- Around line 38-47: The image `@error` handler hides the <img> element but leaves
collectionImage truthy so the UIcon fallback never renders; update the error
handler to mark the component state so the v-else can take over — e.g., set a
reactive flag or clear collectionImage inside the handler (reference the
collectionImage reactive/property and the sanitizeIpfsUrl usage) so that when
the image fails you flip that flag (or set collectionImage = null) and allow the
UIcon fallback to render instead of merely hiding the <img>.
In `@app/layouts/studio-collection.vue`:
- Line 2: The import alias usage in studio-collection.vue is inconsistent with
repo rules: replace any imports using '@/...' with the '~/...' alias (e.g.,
change the import type declaration for StudioNavItem from
'@/components/studio/StudioSidebar.vue' and the other import at line 38 to use
'~/components/studio/StudioSidebar.vue'); update all occurrences in this file so
Vue imports follow the `~/` convention to satisfy the codebase import rule.
In `@app/pages/`[chain]/studio/[collection_id]/index.vue:
- Around line 6-9: The route guard's validate function only checks `chain` and
should also validate `collection_id`; update the `validate: async (route) => {
... }` block to extract `collection_id` from `route.params` and return false
unless `collection_id` is a valid string (e.g. typeof collection_id === 'string'
&& collection_id.trim().length > 0) or matches your project's expected
pattern/validator. Keep the existing `isAssetHubChain(chain)` check and combine
it with the new `collection_id` validation (logical AND) so invalid collection
IDs are rejected before entering downstream logic.
---
Nitpick comments:
In `@app/composables/massmint/useMassMintForm.ts`:
- Around line 5-8: Update the UseMassMintFormOptions type to use the
repository-standard chain identifier: replace the blockchain property type
AssetHubChain with SupportedChain in the UseMassMintFormOptions interface
(symbol: UseMassMintFormOptions, property: blockchain). Add the appropriate
import for SupportedChain from the sdk client module (symbol: SupportedChain
from ~/plugins/sdk.client) and remove or replace any now-unused AssetHubChain
import/usages so the interface and any consumers use SupportedChain
consistently.
In `@app/layouts/studio-collection.vue`:
- Around line 48-53: The sidebar is empty because the navItems array (declared
as const navItems: StudioNavItem[]) has no entries, so the sidebar can't call
select-tab; populate navItems with the three tab objects (ids 'preview',
'details', 'items' — using the same literal ids your tab routes expect), include
user-facing labels ('Preview', 'Details', 'Items') and the icon strings (e.g.,
'i-heroicons:eye', 'i-heroicons-cog-6-tooth', 'i-heroicons-squares-2x2'), and
preserve the literal types (use the same 'as const' pattern used in the
commented examples) so the StudioNavItem type and any select-tab calls resolve
correctly; ensure the navItems variable (navItems) is then used by the sidebar
component so select-tab can activate the corresponding routes.
In `@app/pages/`[chain]/studio/[collection_id]/[tab].vue:
- Line 4: Move the duplicated const validTabs into a single exported constant in
a shared module (e.g., export const STUDIO_VALID_TABS =
['preview','details','items'] as const) and replace the local declarations with
imports of that constant; update any type usages (e.g., typeof
validTabs[number]) to reference the shared symbol and adjust imports in both the
page component and the studio layout so they use the same source to prevent
drift.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f2bbb72e-10df-4139-85c3-f3a5e96ebc4d
📒 Files selected for processing (12)
app/components/common/card/CollectionCard.client.vueapp/components/explore/CollectionsGrid.vueapp/components/massmint/MassMint.vueapp/components/massmint/MassMintUploadStep.vueapp/components/studio/StudioHeader.vueapp/components/studio/StudioSidebar.vueapp/composables/massmint/useMassMintForm.tsapp/layouts/studio-collection.vueapp/pages/[chain]/studio/[collection_id]/[tab].vueapp/pages/[chain]/studio/[collection_id]/index.vueapp/pages/[chain]/studio/[collection_id]/massmint.vueapp/pages/[chain]/studio/index.vue
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/components/massmint/MassMint.vue (1)
96-128: Derive the flow from one config source.
stepsandstepConfignow describe the same studio/non-studio flow in parallel, but onlystepConfigdrives the stepper whilestepsis only used forstepCount. That duplication is easy to desync on the next step change. Consider keeping a single flow definition and deriving both the UI config andstepCountfrom it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/massmint/MassMint.vue` around lines 96 - 128, Unify the step definitions so they come from one computed source instead of duplicating in steps and stepConfig: create a single computed (e.g., flowDefinition or baseSteps) that builds the array of step descriptors based on isStudioContext.value (each entry should include a unique id/title/description and a label/icon key), then derive steps by mapping that flowDefinition to the shape currently expected by steps (id/title/description) and derive stepConfig by mapping the same flowDefinition to StepConfig (label/icon); ensure any uses of stepCount or stepper read flowDefinition.length so you only maintain one source of truth.
🤖 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/components/studio/StudioSidebar.vue`:
- Around line 14-15: The component uses currentTab to mark active items by
comparing currentTab === item.id, but elsewhere
(app/layouts/studio-collection.vue) currentTab is being set to display labels
like "Preview"/"Details"/"Items", causing mismatches; update the code so
currentTab holds the tab id (route segment) instead of the label (e.g.,
"preview", "details", "items") or change the comparison to use item.label
consistently—specifically adjust where currentTab is computed in
app/layouts/studio-collection.vue to pass the nav item id, and ensure
StudioSidebar.vue (and any checks around lines ~77-81) compares currentTab
against StudioNavItem.id (not label) so active state toggles correctly.
In `@app/pages/`[chain]/studio/[collection_id]/index.vue:
- Around line 1-15: The validate function in massmint.vue must mirror index.vue:
update the validate async (route) => { const { chain, collection_id:
collectionId } = route.params } logic to require typeof chain === 'string' &&
isAssetHubChain(chain) && typeof collectionId === 'string' &&
/^\d+$/.test(collectionId); i.e., add the /^\d+$/.test(collectionId) numeric
check to the existing validate function so routing consistently rejects
non-numeric collection_id values; keep the same isAssetHubChain call and param
destructuring as in index.vue.
---
Nitpick comments:
In `@app/components/massmint/MassMint.vue`:
- Around line 96-128: Unify the step definitions so they come from one computed
source instead of duplicating in steps and stepConfig: create a single computed
(e.g., flowDefinition or baseSteps) that builds the array of step descriptors
based on isStudioContext.value (each entry should include a unique
id/title/description and a label/icon key), then derive steps by mapping that
flowDefinition to the shape currently expected by steps (id/title/description)
and derive stepConfig by mapping the same flowDefinition to StepConfig
(label/icon); ensure any uses of stepCount or stepper read flowDefinition.length
so you only maintain one source of truth.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 83321bce-f3d5-4e2a-876e-b427d06da696
📒 Files selected for processing (3)
app/components/massmint/MassMint.vueapp/components/studio/StudioSidebar.vueapp/pages/[chain]/studio/[collection_id]/index.vue
This was referenced Mar 6, 2026
This was referenced Mar 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
close chaotic-art/planning#70 (comment)
part of chaotic-art/planning#19
ref: #791
included:
#830
#832
#834
Summary by CodeRabbit
New Features
UI/UX Improvements