Navigation restructure: five-tab bottom bar, no phone drawer
Drawer removed (phones only; desktop rail untouched) - MobileSidebar, sidebarOpen/useSidebarOpen, MenuIcon and the drawer's back-gesture layer are gone; the shared nav content now serves only the desktop rail (dead mobile branches deleted). No drawer-specific CSS existed; the three drawer strings (header.openMenu, sidebar.closeMenu, common.menu) and library.importAria are removed. - The header drops the hamburger: logo + name on the left, the single theme chip on the right. Five-tab bottom bar - Library / Progress / New deck (prominent centre +) / Exam / Settings, in that order; Progress and Exam reuse the existing /stats and /exam screens, Settings keeps opening the dialog. Sliding pill, icon bounce, press feedback, re-tap-to-top and safe-area padding kept; every item is >=44px (72px wide at 360px). - New short tab.* keys (EN + CS) so all five labels stay on one line at 360px — 'Zkouškový režim' became 'Zkouška'. No ellipsis anywhere. - The bar is mounted once in AppHeader so library, progress, exam and share get it; the wizards keep their own bottom action bar and the tab bar steps aside there, exactly as before. Re-homed drawer destinations - Smart Review card loses the Exam link (it is a tab now); Review due and Mistakes stay. - New deck screen (and /homework) get a Study deck / Make my homework segmented switch; the library's homework empty-state button stays. - The phone import icon becomes a ... button opening a sheet with Import JSON and New folder (back-gesture and Escape close it); folder chips still appear only once at least one folder exists, and folder creation stays in the New deck options step. Verified: mobile suite 134 checks (no hamburger/drawer, tab order and 44px targets, label matrix at 360/390 x EN/CS x dark/light x reduced motion, per-tab routing, deep links, Back from every tab, the ... sheet with folder creation) plus regression 74/74, wizard 83/83, declutter 116/116, animation 8/8, native 35/35, i18n 25/25, phase1 38/38, phase2 43/43, phase3 20/20, freeze-loading 6/6. Key parity 740/740. Lint + build clean. SW freezmo-v28.
This commit is contained in:
parent
4513364019
commit
8557b04621
19 changed files with 357 additions and 325 deletions
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState, useSyncExternalStore, type ReactNode } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
|
|
@ -21,26 +20,19 @@ import { useTheme } from "@/components/ThemeToggle";
|
|||
import { createFolder, folderStore } from "@/lib/folders";
|
||||
import { haptic } from "@/lib/haptics";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { springSheet } from "@/lib/motion";
|
||||
import { ALL_FOLDERS, folderSelection, sidebarOpen, useSelectedFolder, useSidebarOpen } from "@/lib/nav";
|
||||
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
|
||||
import { UNORGANIZED_ID } from "@/lib/schemas";
|
||||
import { deckStore } from "@/lib/storage";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
import { useBackClose } from "@/lib/use-back-close";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const COLLAPSE_KEY = "freezmo.sidebarCollapsed";
|
||||
|
||||
/** Shared nav content for the desktop rail and the mobile drawer. */
|
||||
function NavContent({
|
||||
collapsed = false,
|
||||
onNavigate,
|
||||
desktop = false,
|
||||
}: {
|
||||
collapsed?: boolean;
|
||||
onNavigate?: () => void;
|
||||
desktop?: boolean;
|
||||
}) {
|
||||
/**
|
||||
* Desktop navigation rail (lg and up). Phones use the bottom tab bar instead —
|
||||
* there is no drawer any more, so this is the only consumer of the rail.
|
||||
*/
|
||||
function NavContent({ collapsed = false }: { collapsed?: boolean }) {
|
||||
const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
|
||||
const folders = useSyncExternalStore(
|
||||
folderStore.subscribe,
|
||||
|
|
@ -60,16 +52,6 @@ function NavContent({
|
|||
[folders],
|
||||
);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const map: Record<string, number> = { [UNORGANIZED_ID]: 0 };
|
||||
for (const folder of sortedFolders) map[folder.id] = 0;
|
||||
for (const deck of decks) {
|
||||
const key = deck.folderId && map[deck.folderId] !== undefined ? deck.folderId : UNORGANIZED_ID;
|
||||
map[key] = (map[key] ?? 0) + 1;
|
||||
}
|
||||
return map;
|
||||
}, [decks, sortedFolders]);
|
||||
|
||||
const submit = () => {
|
||||
const result = createFolder(draft);
|
||||
if ("error" in result) {
|
||||
|
|
@ -82,20 +64,15 @@ function NavContent({
|
|||
setCreating(false);
|
||||
};
|
||||
|
||||
const select = (id: string) => {
|
||||
folderSelection.set(id);
|
||||
onNavigate?.();
|
||||
};
|
||||
|
||||
/** Counts of 0 are noise — only show a count when there is something in it. */
|
||||
const count = (value: number) =>
|
||||
!collapsed && value > 0 ? <span className="text-[12px] tabular-nums opacity-60">{value}</span> : null;
|
||||
|
||||
/** One shared view row (All decks / Unorganized) for both nav layouts. */
|
||||
/** One shared view row (All decks / Unorganized). */
|
||||
const viewRow = (id: string, label: string, icon: ReactNode, trailing: ReactNode) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => select(id)}
|
||||
onClick={() => folderSelection.set(id)}
|
||||
aria-pressed={selected === id}
|
||||
title={label}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
|
|
@ -112,7 +89,6 @@ function NavContent({
|
|||
<div className={cn("mb-1 flex items-center", collapsed ? "justify-center" : "justify-between")}>
|
||||
<Link
|
||||
href="/"
|
||||
onClick={onNavigate}
|
||||
className={cn("nav-row gap-2.5", collapsed ? "w-auto px-2" : "flex-1")}
|
||||
aria-label={t("header.home")}
|
||||
title="Freezmo"
|
||||
|
|
@ -144,7 +120,6 @@ function NavContent({
|
|||
{/* new deck: a quiet row, not a competing primary button ---------- */}
|
||||
<Link
|
||||
href="/create"
|
||||
onClick={onNavigate}
|
||||
className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
|
||||
title={t("common.newDeck")}
|
||||
>
|
||||
|
|
@ -155,7 +130,6 @@ function NavContent({
|
|||
{/* make my homework: same quiet row --------------------------------- */}
|
||||
<Link
|
||||
href="/homework"
|
||||
onClick={onNavigate}
|
||||
className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
|
||||
title={t("homework.nav")}
|
||||
>
|
||||
|
|
@ -163,29 +137,7 @@ function NavContent({
|
|||
{!collapsed ? <span className="flex-1 truncate text-left">{t("homework.nav")}</span> : null}
|
||||
</Link>
|
||||
|
||||
{/* folders --------------------------------------------------------- */}
|
||||
{/* Mobile keeps the original layout: one Folders label above the list. */}
|
||||
{!desktop && !collapsed ? (
|
||||
<div className="flex items-center justify-between px-2 pb-1">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
|
||||
{t("common.folders")}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreating(true)}
|
||||
aria-label={t("common.newFolder")}
|
||||
title={t("common.newFolder")}
|
||||
className="grid size-6 place-items-center rounded-md text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<nav
|
||||
aria-label={desktop ? t("sidebar.library") : t("common.folders")}
|
||||
className="thin-scroll min-h-0 flex-1 space-y-0.5 overflow-y-auto"
|
||||
>
|
||||
<nav aria-label={t("sidebar.library")} className="thin-scroll min-h-0 flex-1 space-y-0.5 overflow-y-auto">
|
||||
{collapsed ? (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -198,42 +150,23 @@ function NavContent({
|
|||
</button>
|
||||
) : null}
|
||||
|
||||
{/* Desktop: All decks + Unorganized are views, so they sit above the
|
||||
Folders label; mobile keeps them inside the folder list. */}
|
||||
{desktop ? (
|
||||
<div className={cn("space-y-0.5", !collapsed && "mb-1")}>
|
||||
{viewRow(
|
||||
ALL_FOLDERS,
|
||||
t("common.allDecks"),
|
||||
<LayersIcon className="size-4 shrink-0 opacity-70" />,
|
||||
count(decks.length),
|
||||
)}
|
||||
{viewRow(
|
||||
UNORGANIZED_ID,
|
||||
t("common.unorganized"),
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />,
|
||||
null,
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{viewRow(
|
||||
ALL_FOLDERS,
|
||||
t("common.allDecks"),
|
||||
<LayersIcon className="size-4 shrink-0 opacity-70" />,
|
||||
count(decks.length),
|
||||
)}
|
||||
{viewRow(
|
||||
UNORGANIZED_ID,
|
||||
t("common.unorganized"),
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />,
|
||||
count(counts[UNORGANIZED_ID] ?? 0),
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* All decks + Unorganized are views, so they sit above Folders. */}
|
||||
<div className={cn("space-y-0.5", !collapsed && "mb-1")}>
|
||||
{viewRow(
|
||||
ALL_FOLDERS,
|
||||
t("common.allDecks"),
|
||||
<LayersIcon className="size-4 shrink-0 opacity-70" />,
|
||||
count(decks.length),
|
||||
)}
|
||||
{viewRow(
|
||||
UNORGANIZED_ID,
|
||||
t("common.unorganized"),
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />,
|
||||
null,
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Desktop: the Folders label sits between the views and the folders. */}
|
||||
{desktop && !collapsed ? (
|
||||
{!collapsed ? (
|
||||
<div className="flex items-center justify-between px-2 pb-1 pt-1">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
|
||||
{t("common.folders")}
|
||||
|
|
@ -254,14 +187,13 @@ function NavContent({
|
|||
<button
|
||||
key={folder.id}
|
||||
type="button"
|
||||
onClick={() => select(folder.id)}
|
||||
onClick={() => folderSelection.set(folder.id)}
|
||||
aria-pressed={selected === folder.id}
|
||||
title={folder.name}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">{folder.name}</span> : null}
|
||||
{desktop ? null : count(counts[folder.id] ?? 0)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
|
|
@ -298,7 +230,6 @@ function NavContent({
|
|||
<div className="mt-2 space-y-0.5 border-t border-[var(--hairline)] pt-2">
|
||||
<Link
|
||||
href="/stats"
|
||||
onClick={onNavigate}
|
||||
title={t("nav.stats")}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
|
|
@ -307,7 +238,6 @@ function NavContent({
|
|||
</Link>
|
||||
<Link
|
||||
href="/exam"
|
||||
onClick={onNavigate}
|
||||
title={t("nav.exam")}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
|
|
@ -350,7 +280,7 @@ function NavContent({
|
|||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Collapsed state (shared between rail and drawer) */
|
||||
/* Collapsed state (desktop rail) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
let collapsed = false;
|
||||
|
|
@ -395,7 +325,7 @@ function useCollapsed(): boolean {
|
|||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Desktop rail + mobile drawer */
|
||||
/* Desktop rail */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function Sidebar() {
|
||||
|
|
@ -412,61 +342,12 @@ export function Sidebar() {
|
|||
>
|
||||
{/* One tall inset glass panel, so the ice scene shows around it. */}
|
||||
<div className="sidebar-surface flex min-h-0 flex-1 flex-col px-2.5 py-3">
|
||||
<NavContent collapsed={isCollapsed} desktop />
|
||||
<NavContent collapsed={isCollapsed} />
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export function MobileSidebar() {
|
||||
const open = useSidebarOpen();
|
||||
const { t } = useI18n();
|
||||
/* Back closes the drawer before it navigates away. */
|
||||
const { skipRewind } = useBackClose(open, () => sidebarOpen.set(false));
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open ? (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex lg:hidden"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("sidebar.closeMenu")}
|
||||
onClick={() => sidebarOpen.set(false)}
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.aside
|
||||
aria-label={t("common.menu")}
|
||||
initial={{ x: -280 }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: -280 }}
|
||||
transition={springSheet}
|
||||
drag="x"
|
||||
dragConstraints={{ left: -280, right: 0 }}
|
||||
dragElastic={{ left: 0.45, right: 0 }}
|
||||
dragMomentum={false}
|
||||
onDragEnd={(_, gesture) => {
|
||||
if (gesture.offset.x < -80 || gesture.velocity.x < -500) sidebarOpen.set(false);
|
||||
}}
|
||||
className="sidebar-surface relative z-10 flex h-full w-[272px] flex-col rounded-l-none rounded-r-[1.5rem] px-2.5 py-3 pb-safe"
|
||||
>
|
||||
<NavContent
|
||||
onNavigate={() => {
|
||||
skipRewind();
|
||||
sidebarOpen.set(false);
|
||||
}}
|
||||
/>
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
/** Spacer so page content clears the fixed rail (desktop only). */
|
||||
export function SidebarOffset() {
|
||||
const isCollapsed = useCollapsed();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue