feat(projects): redesign /projects/new — layout, hierarchy and density - #12
Merged
Merged
Conversation
The route passed hideHeader to ProjectForm (suppressing its h1) and rendered only the logo in its own header bar, leaving the page with no heading at all — nothing visible saying what the screen is, and no document heading for screen-reader navigation. Render the h1 in the route header next to the logo, separated by a divider, per the issue's preferred option: the heading shares the existing bar instead of stacking a second one.
The Create Project button was disabled the moment /projects/new loaded: name is required, the form validates onChange, and the untouched field showed no validation message — a dead primary button with no explanation. Prefill the name as 'Project N' (N from the loaded project count, store is preloaded in beforeLoad) and focus the field with the text selected, so a first-time visitor can submit immediately or just type over the default. The defaultValues object is memoized once on mount — a stable identity, since ProjectForm resets whenever it changes. Focus + select runs in an effect declared after the reset effect (reset() rewrites the input value, which collapses any earlier selection) and is limited to the create flow (!isEditing) to stay out of the edit dialog's focus management.
Four raw inputs/textareas and five raw labels carried a duplicated inline Tailwind class string while the FPS Select in the same form used the shadcn component — two styling systems side by side, with different heights, backgrounds, and focus rings. Swap them for the existing Input, Textarea, and Label primitives. They forward refs and spread props, so react-hook-form's register() spread, type=number, min, and placeholder all pass through unchanged.
- Header and content share one max-w-5xl column; the header bar carries the title (from the earlier h1 fix) plus an explicit Back to Projects ghost link, so justify-between finally has two sides - Two-column layout (Project Details | Video Settings) driven by a container query (@3xl) rather than viewport breakpoints, because the same form renders inside the narrow-to-wide edit dialog - Density: p-6/mb-6/space-y-8 tightened one step, redundant Separator between the two bordered cards removed; the page now fits 1440x900 with no vertical scroll (was ~1570px tall) - Template cards: compact (h-14 silhouette), platform icon as the primary identifier since three presets share a ~16:9 silhouette; resolution and ratio kept as secondary text - Button hierarchy: Cancel demoted to ghost, Create Project is the only prominent control - Kubeez welcome promo no longer interrupts task surfaces: it skips /projects/new and /editor and shows on the next visit to any other route instead (localStorage once-per-browser behavior unchanged)
MeepCastana
approved these changes
Aug 6, 2026
MeepCastana
left a comment
MeepCastana
left a comment
Collaborator
There was a problem hiding this comment.
Reviewed locally on a combined review branch (all six merged clean, no conflicts). CI green. Approved.
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
2 participants
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.
Fixes #1
What
The remaining items from #1 after the split-out fixes (#2/#3/#4):
max-w-5xl; no more logo pinned 500px away from a floating form column.justify-betweenfinally has two sides.@container+@3xl:), not viewport breakpoints, because the same form renders inside the edit dialog on/projects— the split follows the actual available width. (Turns out the edit dialog is wide enough to get two columns too, and looks better for it — screenshot below note.)<Separator />between two already-bordered cards is gone. Page height at 1440 wide: 900px, zero scroll (was ~1570px).Canceldemoted toghost; Create Project is the only prominent control.KubeezWelcomePromonow skips task surfaces (/projects/new,/editor) and shows on the next visit to any other route instead. Once-per-browser localStorage behavior unchanged. Easy to drop from this PR if you'd rather keep it everywhere.Verification (headless Chromium, dev server)
/projects/new(fresh profile)/projects(same fresh profile)/projectslint✅ ·check:boundaries✅ ·test:run: 1259 passed, only pre-existingeditor.test.tsxenv failure (fixed separately in #8)Screenshots
Can't attach from CLI — the layout is quick to check:
npm run dev→/projects/new.