Martin Dvorak
3aae6f3199
Layout (desktop / lg+ only): - 40px top padding above the page title. - Deck grid uses minmax(320px, 1fr), so two cards fill the content width and share a right edge with the header (same max-width container). - Group headings only render once real folders exist; with none, a single quiet "All decks" label replaces "Unorganized". - Import JSON becomes a plain text button (mobile keeps the pill). Deck cards (desktop): - The whole card is a link; Study is a compact secondary button instead of a full-width solid pill. - The ... control is a 32px ghost button with a real ellipsis icon, aligned to the title's centre. - Meta line always shows the same fields (activities · runs / Not played yet); the score is a separate quiet "Best 53%" stat. - 12px rhythm between title/meta/tags/summary, 16px before the actions. - Hover: lighter surface, stronger border, soft shadow and a 2px lift in light mode (pointer devices only, so touch has no sticky hover). Sidebar (desktop rail): - All decks + Unorganized are views above the FOLDERS label; only user-created folders sit under it. - Count only on All decks. The mobile drawer is unchanged. Theme: - Dark: sidebar is a step darker (#181818 to #141414 vs #212121 page). - Light: cards get a slightly stronger border (#e2e2e2) and a soft shadow; the sidebar divider and edge shadow are stronger too. - Medium difficulty darkened to #7a5300 (6.2:1 on the light chip). Mobile is untouched: layout changes are behind lg: (or the desktop prop); theme tweaks are shared tokens. Verified: key-gate 49/49, install sheet 64/64, retry 14/14, zoom 6/6, deck chrome 15/15, deck fixes 15/15, final ux 12/12, contrast 20/20, security 8/8, pwa 16/16.
24 lines
798 B
TypeScript
24 lines
798 B
TypeScript
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
|
import { AppHeader } from "@/components/AppHeader";
|
|
import { LibraryScreen } from "@/components/LibraryScreen";
|
|
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
|
|
import { TabBar } from "@/components/TabBar";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ApiKeyGate>
|
|
<div className="flex min-h-dvh bg-[var(--page)]">
|
|
<Sidebar />
|
|
<SidebarOffset />
|
|
<MobileSidebar />
|
|
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
|
<AppHeader />
|
|
<div className="mx-auto w-full max-w-6xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16 lg:pt-10">
|
|
<LibraryScreen />
|
|
</div>
|
|
<TabBar />
|
|
</main>
|
|
</div>
|
|
</ApiKeyGate>
|
|
);
|
|
}
|