refactor(projects): use shadcn Input/Textarea/Label in project-form - #11
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.
MeepCastana
changed the base branch from
fix/projects-new-default-name
to
develop
August 6, 2026 14:54
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 #4
What
project-form.tsxhand-rolled its text controls with a duplicated inline Tailwind string while the FPSSelectin the same form used shadcn — two styling systems in one form.How
Mechanical swap to the existing
Input,Textarea,Labelprimitives (they forward refs and spread props, soregister(),type="number",min,valueAsNumber,placeholderpass through unchanged). Also swapped the raw Frame Rate<label>— not in the issue's table, but the acceptance criterion is zero raw<label>s in the file.Net visual change: fields go from
bg-secondary/40px/2px-ring to the primitives'bg-transparent/36px/1px-ring — i.e. they now match theSelectexactly, which is the point of the issue.Verification
grep '<input\|<textarea\|<label'in the file → 0 matchesInputvs FPSSelectTriggercomputed styles — height 36px == 36px, borderoklch(0.24 0 0)== same, background transparent == samelint✅, projects tests ✅