Repository navigation
UI overhaul: shadcn/ui + Tailwind v4, resizable layout, accordion sidebar - #36
Merged
Merged
Conversation
Tailwind via @tailwindcss/vite, dark-only theme variables mapped to the existing palette, shadcn radix-nova preset, eslint exemption for generated ui files. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
button, input, label, select, switch, checkbox, accordion, resizable, scroll-area, dialog, slider, toggle-group, separator. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- EditorLayout: resizable panels (player / bottom filmstrip / right sidebar) - StoryboardFilmstrip replaces StoryboardGrid (horizontal, drag-reorder kept) - EditorSidebar: collapsible accordions for Settings, Soundtrack, Find Music - JamendoPanel results in fixed-height scroll area with compact rows - Dialogs on shadcn Dialog with shared OverrideField row - useProject hook extracts folder/persistence state to meet 300-line cap - App.css deleted; styling is Tailwind + shadcn primitives Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
react-resizable-panels v4 treats numeric sizes as pixels, so the defaultSize/minSize numbers collapsed the sidebar and filmstrip to a sliver and the player could only grow. Use percentage strings and add min-w-0/min-h-0/overflow-hidden to every panel so content can shrink. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Three fixes for the Find Music panel: - Radix ScrollArea sizes content to intrinsic width (display: table), so a long audio filename pushed every right-aligned control off-panel and made focusing the search input scroll the sidebar sideways. Vertical scroll containers (sidebar, results list) now use native overflow-y-auto. - The accordion content wrapper pinned its height to --radix-accordion-content-height, which Radix only measures on open/close; results appearing later were clipped to the stale (form-only) height. Height now applies only via the open/close animation keyframes. - The Find Music accordion content is forceMount-ed so collapsing the section no longer wipes in-progress search state. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <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
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
Replaces the one-off-CSS editor UI with a design system and a new layout:
src/components/ui/, dark-only theme mapped to the existing palette (#111background,#2563ebprimary).standards/slideshow.mdupdated accordingly (owner-approved reversal of the old "not Tailwind" rule), including a new guardrail:src/composition/stays inline-styles-only so rendered video never depends on editor stylesheets.Dialog(focus trap, Escape, proper aria) with a sharedOverrideFieldrow component.useProject; presentational pieces toAppHeader/EmptyState/PlayerPane/EditorLayout/EditorSidebar.Bug fixes found while verifying live: react-resizable-panels v4 pixel-vs-percent sizing (panels could only grow), Radix ScrollArea intrinsic-width overflow (long filenames pushed controls off-panel and made focus jump the sidebar), and stale Radix accordion height clipping search results to 38px (
forceMountalso preserves search state across collapse).One intentional rendering delta: the Remotion Player now mounts only after a folder is open; the empty state stands alone before that.
Review
code-revieweragent: 5/5, APPROVE, zero blocking findings. Non-blocking follow-ups noted: move build-time packages to devDependencies; converge the duplicatedFPSconstant onto thePlayerPaneexport.Test plan
pnpm lint,pnpm build,pnpm test(198 tests) green at every commit🤖 Generated with Claude Code