Refactor/web UI overhaul#93
Merged
Merged
Conversation
Replace the flat neutral grayscale palette with an indigo/violet brand accent and a full token set (card, popover, accent, destructive, radius, shadow, font stacks). Add a prefers-color-scheme dark variant that overrides the same custom properties on :root so Tailwind v4 utilities pick up dark values at runtime. Move base body styles into @layer base.
Add card, tabs, input, label, badge, separator, dialog, scroll-area via the shadcn CLI and a slimmed sonner Toaster that uses theme="system" directly (no next-themes). Wire <Toaster /> into main.tsx so feature panels can switch to toast feedback. The CLI installed the unified radix-ui package; remove the now-redundant per-component @radix-ui packages and next-themes.
Replace the centered <main> + ghost-button tab toggle with a layout shell: sticky top bar (Froid mark + label) and a shadcn Tabs component driving the section switch. The Tabs component gives proper keyboard navigation and aria semantics that the hand-rolled tablist did not.
Move MessagesPanel and PromptsPanel into per-feature folders and extract their fetch calls into co-located api.ts modules so the panels stop knowing about URL shapes, response parsing, and error wording. Behaviour is unchanged; tests follow the panel to its new location.
Replace the centered button row + small dropzone with two Card surfaces: one for export, one for import. The import card's dropzone is now also the click target (and keyboard-activatable), removing the redundant "Import messages" button. Status banners get colored backgrounds so success and error states are visible at a glance.
Replace the wrapping row of prompt buttons with a real two-pane layout: left sidebar lists prompts in a ScrollArea with a "custom" badge for overridden ones, right pane shows label, version + state badges, an unsaved-changes hint, and a taller resizable editor. The buttons row gains a Save check icon and the Reset action is styled as a destructive ghost so it stops competing with Save for attention.
Swap the blocking window.confirm() for a shadcn Dialog so the reset confirmation matches the rest of the UI and can show formatted copy. Add a global Cmd/Ctrl-S keyboard shortcut that triggers save when the draft is dirty and we are not already busy, and surface the shortcut as a kbd hint next to the action buttons.
Add a unit test that opens the reset dialog, clicks Reset, and asserts the DELETE request is sent. The previous window.confirm() reset path was untested; this keeps that behaviour pinned now that it goes through shadcn Dialog.
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.
No description provided.