pastilhasandClaude Opus 5
105766a4eb
The application no longer knows what it looks like. It imports one stylesheet and
mounts one provider; every colour, surface and radius lives in `src/workspaces/theme`.
Proven both directions, because either alone would be worthless:
Duck renders IDENTICALLY to before — checked against screenshots taken before
anything was touched, not asserted.
Plain renders as white with black ink, no component edits — panels turn white, the
teal avatar turns black, the grid fills vanish.
── What moved ──
`globals.css` held three unrelated things: Tailwind wiring, the token contract, and
the Duck brand's hex values. Split along those seams. `base.css` is structure and
names no colour; a theme file is values and nothing else, scoped to
`[data-theme='<id>']`. Adding a theme is a CSS file plus one registry line.
Light and dark are separate themes rather than a mode — the owner's call, and it
removes a concept from the app. Each is written out in full: a theme that only makes
sense as a diff against another cannot be authored by a stranger or sold to a
customer. `.dark` survives only as a per-theme flag, because 396 `dark:` utilities in
33 components resolve against it; retiring those retires the flag.
The `duck-*` utility names are kept for now and pointed at neutral variables, so a
non-Duck theme can define them sensibly. Renaming 1,470 occurrences in the same commit
as the extraction would make any visual difference impossible to attribute. Worth
recording that `duck-dark` was never a brand colour — `#14532d` in light, near-white
in dark, used by 946 components to mean "text". It is `--ink` now.
Surfaces are complete CSS values rather than HSL triplets: `--panel-bg` has to be able
to be a gradient or an image, or the glass the app already has would be unthemeable.
The old provider is a re-export, so its six call sites are untouched and the
extraction stays one variable.
── Bug found by the Plain theme ──
`useThemeSync` stamped the server's `appearance.colorMode` over the local theme on
every load, so choosing Plain and reloading silently reverted it. Diagnosed by asking
the page what it was wearing rather than reasoning: `stored` said `duck-dark` when the
script had written `plain`. The server value is now a starting point for a browser
that has never chosen, not a continuous instruction.
── Tools ──
Two, both of which lied to me before they worked. The snapshot script photographed
light twice and called it a clean run (one browser context, accumulated init scripts);
it now warns when a light/dark pair is identical. The preview server returned the
shell for missing assets, so the logo and wallpaper vanished and read as regressions
in the comparison — it falls through to upstream now.
Dead Tailwind v3 residue deleted: `components/ui/tailwind.{config.ts,css}`, referenced
by nothing, with content globs pointing at a directory that does not exist.
── Not done, deliberately ──
`THEMES-NOTES.md` has the full list. The headlines: the reference repo has not been
read, so the switching mechanism is deliberately the dumbest thing that works; the
wallpaper, panel radius and logo are still component-owned and Plain proves it; and
~985 raw Tailwind palette usages remain, worst in Soulseek.
tsgo clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
105 lines
4.6 KiB
TypeScript
105 lines
4.6 KiB
TypeScript
import { Link } from 'react-router';
|
|
import * as Dropdown from '@/components/ui/dropdown-menu';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { User, LogOut, Settings, Puzzle, Sun, Moon, Bot, UserCog, Palette } from 'lucide-react';
|
|
import { useAuth } from 'hooks/useAuth';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
import { useColorMode, useTheme } from '@/components/ui/ThemeProvider';
|
|
import { useSettings } from 'state/useSettings';
|
|
|
|
const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } = Dropdown;
|
|
|
|
export function UserMenu() {
|
|
const { user, isLoading } = useAuth();
|
|
const { t } = useTranslation();
|
|
const { colorMode, setColorMode } = useColorMode();
|
|
const { themeId, setTheme, themes } = useTheme();
|
|
const { settings, saveSettings } = useSettings();
|
|
if (isLoading) return null;
|
|
|
|
const toggleColorMode = () => {
|
|
const next = colorMode === 'dark' ? 'light' : 'dark';
|
|
setColorMode(next);
|
|
saveSettings({ ...settings, appearance: { ...settings.appearance, colorMode: next } });
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
|
|
<Avatar className="h-9 w-9 rounded-full">
|
|
<AvatarImage src={user?.avatar ?? undefined} />
|
|
<AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
|
|
{user?.name?.charAt(0).toUpperCase() ?? '?'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="z-10 w-48">
|
|
{/*
|
|
Every theme this build ships, listed. Deliberately the crudest possible control: the point tonight
|
|
is proving the app can wear a different skin at all, not designing a picker. A real one belongs in
|
|
an appearance settings screen, which does not exist yet.
|
|
*/}
|
|
{themes.map((theme) => (
|
|
<DropdownMenuItem key={theme.id} onClick={() => setTheme(theme.id)} className="cursor-pointer">
|
|
<Palette className={`mr-2 h-4 w-4 ${theme.id === themeId ? 'opacity-100' : 'opacity-30'}`} />
|
|
{theme.name}
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/profile">
|
|
<User className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.profile')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/system">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.systemSettings')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{/* No Resources entry. `/settings/resources` has never been a route, so this item sent you to
|
|
the catch-all and out to `/` — a menu entry that looks like navigation and is a bounce.
|
|
(navigation-audit M8.) */}
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/ai">
|
|
<Bot className="mr-2 h-4 w-4" />
|
|
AI
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/integrations">
|
|
<Puzzle className="mr-2 h-4 w-4" />
|
|
Integrations
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{/* Owner only. This is tidiness, not access control — the route stays reachable and its
|
|
endpoints are gated server-side by ownerGate, because a hidden menu item is not a permission
|
|
and anything relying on it being hidden is already wrong. */}
|
|
{user?.role === 'Super Admin' && (
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/user-management">
|
|
<UserCog className="mr-2 h-4 w-4" />
|
|
User Management
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={toggleColorMode} className="cursor-pointer">
|
|
{colorMode === 'dark' ? <Sun className="mr-2 h-4 w-4" /> : <Moon className="mr-2 h-4 w-4" />}
|
|
{colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/auth/signout">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.signOut')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|