feat: add Studio page for AI generation#53
Open
Abhishekucs wants to merge 8 commits intomainfrom
Open
Conversation
Protected creative workspace with prompt bar, image/video mode switching, contextual settings panels, and mock generation flow. Auth-gated with redirect to sign-in for unauthenticated users. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… bar - Prompt bar and mode switcher now stretch to equal height via flex items-stretch - Settings moved inside the prompt bar at bottom-left below the textarea - Submit button enlarged to 48x48 squircle (rounded-2xl) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Prompt bar is now a tall container (180px default) with a drag handle at the top for vertical resizing (140px-400px range) - Textarea fills the top area, settings sit at bottom-left as compact pills - Large "Generate" button with label at bottom-right - Mode switcher updated to icon+label vertical stack aligned to bottom - Settings use rounded-full pill style matching reference design Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… generate - Replace lucide icons with hugeicons throughout studio components - Image count uses plus/minus buttons instead of toggle group - Aspect ratio and resolution use Select dropdowns with icons - Video mode adds audio on/off toggle with volume icon - Generate button fills right side as a squircle column - Textarea background matches prompt bar (transparent) - Add imageResolution and videoAudio to Zustand store Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add subtle background to Image/Video mode toggle - Remove textarea background color (transparent) - Use rounded-md for all settings controls - Replace style presets with AI model selector (Invook V2, Flux Pro, etc.) - Uploaded images shown at top inside prompt bar with plus icon for more - Generate button at bottom-right, half prompt bar height, no icon - Add subtle upward gradient glow behind prompt + toggle bar - Add attachments support to Zustand store Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…olor - Mode toggle background wraps content (self-end, no stretch) - Prompt bar widened to max-w-4xl - Aspect ratio dropdowns show numbers only (1:1, 16:9, etc.) - Audio toggle uses neutral foreground color instead of red - Gradient uses inline style with CSS var for proper rendering - Gradient covers 320px upward from bottom Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.
Summary
/studiopage with auth guard (redirects unauthenticated users to sign-in)Test plan
/studiowhile logged out — verify redirect to/sign-in?redirect=/studio/studio— verify Studio UI loadsnpm run build— no errors🤖 Generated with Claude Code