araemer/recipe-app
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases 39 Packages Wiki Activity Actions

refactor(ui) Use the global input style, Badge and a contained header bee in older code #51

Merged
araemer merged 3 commits from cleanup-inputs-badges-bee into 001-shopping-lists 2026-10-03 07:32:38 +00:00
Conversation 0 Commits 3 Files changed 8 +35 -17
araemer commented 2026-10-03 07:09:03 +00:00
Owner
Copy link

Follow-up to the review of #47: applies the same cleanups to older code outside the shopping list feature. Targets 001-shopping-lists (stacked on #47) on request.

Inputs rely on the global input style (6eef550)

index.css styles every input/textarea globally. These three restated that style; they now keep only their deliberate differences:

  • SearchField: room for its two icons, plus the compact toolbar look that matches FilterDropDown. Unchanged visually; it gains the global hover border.
  • LinkInput: the tiny editor-toolbar size and thinner focus ring. Unchanged size; when focused it now gets the accent border like every other input.
  • MealPlanDayNoteEditor: small text, no resize. Corners go from 8 px to the global 6 px.

FilterDropDown stays as is: it styles a <button>, which the global input style doesn't cover.

Badge for the older pills (4ceed4e)

  • Badge gains success and neutral variants. The settings menu's dev-console "an"/"aus" uses them.
  • Badge gains a colorClassName override for domain palettes. The AI analytics import status uses it, so its colours stay in aiAnalyticsColors.ts, shared with the chart.

Header bee on long titles (c395ea5)

HeaderSwitchTitle's plain title put the bee outside its box, so a long list name that wrapped to the full width on a phone pushed the bee past the screen edge (20 px of sideways scrolling). It now reserves the bee's width as padding, as LogoHeading does. One-line titles look the same. The switcher variant (two or more lists) doesn't overflow, because its chevron already takes that space, so it's unchanged.

Verification

  • npm run build, npm run lint (only the 2 existing warnings in MealPlanDayProvider) and npm run test (368 tests) pass.
  • /verify-ui:
    • recipe list search field (user)
    • comment editor link input, without submitting a comment
    • meal plan note editor, on a throwaway plan that was deleted afterwards
    • settings menu dev-console pill and AI analytics status pills (admin; the analytics page only reads stored stats, no AI calls)
    • long list names with one and with two lists, on phone, phone landscape and desktop: no sideways overflow

🤖 Generated with Claude Code

Follow-up to the review of #47: applies the same cleanups to older code outside the shopping list feature. Targets `001-shopping-lists` (stacked on #47) on request. ## Inputs rely on the global input style (6eef550) `index.css` styles every `input`/`textarea` globally. These three restated that style; they now keep only their deliberate differences: - `SearchField`: room for its two icons, plus the compact toolbar look that matches `FilterDropDown`. Unchanged visually; it gains the global hover border. - `LinkInput`: the tiny editor-toolbar size and thinner focus ring. Unchanged size; when focused it now gets the accent border like every other input. - `MealPlanDayNoteEditor`: small text, no resize. Corners go from 8 px to the global 6 px. `FilterDropDown` stays as is: it styles a `<button>`, which the global input style doesn't cover. ## Badge for the older pills (4ceed4e) - `Badge` gains `success` and `neutral` variants. The settings menu's dev-console "an"/"aus" uses them. - `Badge` gains a `colorClassName` override for domain palettes. The AI analytics import status uses it, so its colours stay in `aiAnalyticsColors.ts`, shared with the chart. ## Header bee on long titles (c395ea5) `HeaderSwitchTitle`'s plain title put the bee outside its box, so a long list name that wrapped to the full width on a phone pushed the bee past the screen edge (20 px of sideways scrolling). It now reserves the bee's width as padding, as `LogoHeading` does. One-line titles look the same. The switcher variant (two or more lists) doesn't overflow, because its chevron already takes that space, so it's unchanged. ## Verification - `npm run build`, `npm run lint` (only the 2 existing warnings in `MealPlanDayProvider`) and `npm run test` (368 tests) pass. - `/verify-ui`: - recipe list search field (`user`) - comment editor link input, without submitting a comment - meal plan note editor, on a throwaway plan that was deleted afterwards - settings menu dev-console pill and AI analytics status pills (`admin`; the analytics page only reads stored stats, no AI calls) - long list names with one and with two lists, on phone, phone landscape and desktop: no sideways overflow 🤖 Generated with [Claude Code](https://claude.com/claude-code) 
SearchField, LinkInput and MealPlanDayNoteEditor restated the global
input/textarea style from index.css (border, background, focus ring).
They now keep only their deliberate differences: the search field's icon
padding and compact toolbar look, the link input's tiny toolbar size and
thinner ring, the note's small text and fixed size.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Badge gains success and neutral variants (dev console an/aus) and a
colorClassName override for domain palettes; the AI import status keeps
its colours in aiAnalyticsColors.ts, shared with the chart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
HeaderSwitchTitle's plain title positioned the bee outside its box
(-right-12), so a long title that wrapped to the full width on a phone
pushed the bee past the screen edge. It now reserves the bee's width as
padding, as LogoHeading does; one-line titles look the same as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
araemer merged commit b6f75de022 into 001-shopping-lists 2026-10-03 07:32:38 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
araemer/recipe-app!51
No description provided.