feat(ux): theming foundation + dark mode + visual polish #620
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| // SPDX-FileCopyrightText: 2026 soundminds.ai | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import { Alert } from '@/components/ui/alert'; | ||
|
|
||
| const setTheme = vi.fn(); | ||
| let mockResolvedTheme = 'light'; | ||
| vi.mock('next-themes', () => ({ | ||
| useTheme: () => ({ resolvedTheme: mockResolvedTheme, theme: mockResolvedTheme, setTheme }), | ||
| })); | ||
|
|
||
| describe('Alert primitive', () => { | ||
| it('renders role=alert and dark-safe variant classes', () => { | ||
| render( | ||
| <Alert variant="destructive" data-testid="a"> | ||
| boom | ||
| </Alert>, | ||
| ); | ||
| const el = screen.getByTestId('a'); | ||
| expect(el).toHaveAttribute('role', 'alert'); | ||
| // Keeps the light family AND a dark: pair (dark-safe). | ||
| expect(el.className).toContain('bg-red-50'); | ||
| expect(el.className).toContain('dark:bg-red-950'); | ||
| }); | ||
|
|
||
| it('defaults to the info variant', () => { | ||
| render(<Alert data-testid="b">note</Alert>); | ||
| expect(screen.getByTestId('b').className).toContain('bg-blue-50'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('ThemeToggle', () => { | ||
| it('toggles resolved light → dark on click (always a visible change)', async () => { | ||
| mockResolvedTheme = 'light'; | ||
| const { ThemeToggle } = await import('@/components/layout/theme-toggle'); | ||
| render(<ThemeToggle />); | ||
| fireEvent.click(screen.getByTestId('theme-toggle')); | ||
| expect(setTheme).toHaveBeenCalledWith('dark'); | ||
| }); | ||
| }); |
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| // SPDX-FileCopyrightText: 2026 soundminds.ai | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| 'use client'; | ||
|
|
||
| import { Moon, Sun } from 'lucide-react'; | ||
| import { useTheme } from 'next-themes'; | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import { Button } from '@/components/ui/button'; | ||
|
|
||
| /** | ||
| * Light ↔ dark theme toggle for the nav. next-themes is already wired | ||
| * (attribute="class", enableSystem); this is the missing user-facing control. | ||
| * | ||
| * Toggles off `resolvedTheme` (the actually-displayed theme, whether from an | ||
| * explicit choice or the system preference) so every click produces a visible | ||
| * change — a blind light→dark→system cycle can no-op on the first click when | ||
| * system already resolves to the theme it lands on (Gemini review). Renders a | ||
| * stable placeholder until mounted to avoid a hydration mismatch (the resolved | ||
| * theme is only known client-side). | ||
| */ | ||
| export function ThemeToggle() { | ||
| const { resolvedTheme, setTheme } = useTheme(); | ||
| const [mounted, setMounted] = useState(false); | ||
| // Canonical next-themes hydration guard: the resolved theme is only known | ||
| // client-side, so render a stable placeholder until mount. The synchronous | ||
| // set-on-mount is intentional (one-shot, empty deps). | ||
| // eslint-disable-next-line react-hooks/set-state-in-effect | ||
| useEffect(() => setMounted(true), []); | ||
|
|
||
| const isDark = resolvedTheme === 'dark'; | ||
| const next = isDark ? 'light' : 'dark'; | ||
| const Icon = isDark ? Moon : Sun; | ||
|
|
||
| return ( | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| className="shrink-0" | ||
| onClick={() => setTheme(next)} | ||
| aria-label={mounted ? `Switch to ${next} theme` : 'Toggle theme'} | ||
| data-testid="theme-toggle" | ||
| > | ||
| {mounted ? <Icon className="size-4" aria-hidden="true" /> : <Sun className="size-4" />} | ||
| </Button> | ||
| ); | ||
| } |
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| // SPDX-FileCopyrightText: 2026 soundminds.ai | ||
| // | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| /** | ||
| * Token-driven inline callout. Replaces the hand-rolled `border-*-200 bg-*-50` | ||
| * boxes scattered across the app (which were light-only and drifted in | ||
| * padding/weight). Variants keep the semantic color families but carry `dark:` | ||
| * pairs so they read correctly on a dark surface. | ||
| */ | ||
| const alertVariants = cva('rounded-md border p-3 text-sm', { | ||
| variants: { | ||
| variant: { | ||
| info: 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200', | ||
| warning: | ||
| 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200', | ||
| destructive: | ||
| 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200', | ||
| }, | ||
| }, | ||
| defaultVariants: { variant: 'info' }, | ||
| }); | ||
|
|
||
| export interface AlertProps | ||
| extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {} | ||
|
|
||
| export function Alert({ className, variant, ...props }: AlertProps) { | ||
| return <div role="alert" className={cn(alertVariants({ variant }), className)} {...props} />; | ||
| } | ||
|
|
||
| export { alertVariants }; |
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
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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
warningDismissedstate is initialized by reading fromsessionStoragedirectly during the initial render:Because this component is rendered on the server (where
typeof window === 'undefined'is true),warningDismissedwill always initialize tofalseon the server. If a user has previously dismissed the warning, the client will initialize it totrueon the initial render. This mismatch between the server-rendered HTML (which includes theAlertbanner) and the client-rendered HTML (which does not) will cause a hydration mismatch error in Next.js.Recommended Fix
Initialize the state to
falseand read fromsessionStorageinside auseEffecthook after the component has mounted: