freezmo/components/Sidebar.tsx

"use client";

import Link from "next/link";
import { useMemo, useState, useSyncExternalStore, type ReactNode } from "react";
import { AnimatePresence, motion } from "framer-motion";

import {
  ChevronLeftIcon,
  ChevronRightIcon,
  FolderIcon,
  GearIcon,
  LayersIcon,
  MoonIcon,
  PlusIcon,
  SunIcon,
} from "@/components/icons";
import { useTheme } from "@/components/ThemeToggle";
import { createFolder, folderStore } from "@/lib/folders";
import { ALL_FOLDERS, folderSelection, sidebarOpen, useSelectedFolder, useSidebarOpen } from "@/lib/nav";
import { UNORGANIZED_ID } from "@/lib/schemas";
import { deckStore } from "@/lib/storage";
import { openSettings } from "@/lib/ui-events";
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;
}) {
  const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
  const folders = useSyncExternalStore(
    folderStore.subscribe,
    folderStore.getSnapshot,
    folderStore.getServerSnapshot,
  );
  const selected = useSelectedFolder();
  const { theme, toggle } = useTheme();

  const [creating, setCreating] = useState(false);
  const [draft, setDraft] = useState("");
  const [error, setError] = useState<string | null>(null);

  const sortedFolders = useMemo(
    () => [...folders].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" })),
    [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) {
      setError(result.error);
      return;
    }
    folderSelection.set(result.folder.id);
    setDraft("");
    setError(null);
    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. */
  const viewRow = (id: string, label: string, icon: ReactNode, trailing: ReactNode) => (
    <button
      type="button"
      onClick={() => select(id)}
      aria-pressed={selected === id}
      title={label}
      className={cn("nav-row", collapsed && "justify-center px-2")}
    >
      {icon}
      {!collapsed ? <span className="flex-1 truncate text-left">{label}</span> : null}
      {trailing}
    </button>
  );

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      {/* brand ---------------------------------------------------------- */}
      <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="Freezmo home"
          title="Freezmo"
        >
          {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
          <img
            src="/icons/icon-192.png"
            alt=""
            aria-hidden
            className="size-7 shrink-0 rounded-lg shadow-[0_1px_3px_rgb(14_21_40/0.35)]"
          />
          {!collapsed ? (
            <span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">Freezmo</span>
          ) : null}
        </Link>
        {!collapsed ? (
          <button
            type="button"
            onClick={() => sidebarCollapse.set(true)}
            aria-label="Collapse sidebar"
            title="Collapse sidebar"
            className="grid size-8 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
          >
            <ChevronLeftIcon className="size-4" />
          </button>
        ) : null}
      </div>

      {/* 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="New deck"
      >
        <PlusIcon className="size-4 shrink-0" />
        {!collapsed ? <span className="flex-1 truncate text-left">New deck</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)]">
            Folders
          </span>
          <button
            type="button"
            onClick={() => setCreating(true)}
            aria-label="New folder"
            title="New folder"
            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 ? "Library" : "Folders"}
        className="thin-scroll min-h-0 flex-1 space-y-0.5 overflow-y-auto"
      >
        {collapsed ? (
          <button
            type="button"
            onClick={() => sidebarCollapse.set(false)}
            aria-label="Expand sidebar"
            title="Expand sidebar"
            className="nav-row justify-center px-2"
          >
            <ChevronRightIcon className="size-4" />
          </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,
              "All decks",
              <LayersIcon className="size-4 shrink-0 opacity-70" />,
              count(decks.length),
            )}
            {viewRow(
              UNORGANIZED_ID,
              "Unorganized",
              <FolderIcon className="size-4 shrink-0 opacity-70" />,
              null,
            )}
          </div>
        ) : (
          <>
            {viewRow(
              ALL_FOLDERS,
              "All decks",
              <LayersIcon className="size-4 shrink-0 opacity-70" />,
              count(decks.length),
            )}
            {viewRow(
              UNORGANIZED_ID,
              "Unorganized",
              <FolderIcon className="size-4 shrink-0 opacity-70" />,
              count(counts[UNORGANIZED_ID] ?? 0),
            )}
          </>
        )}

        {/* Desktop: the Folders label sits between the views and the folders. */}
        {desktop && !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)]">
              Folders
            </span>
            <button
              type="button"
              onClick={() => setCreating(true)}
              aria-label="New folder"
              title="New folder"
              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}

        {sortedFolders.map((folder) => (
          <button
            key={folder.id}
            type="button"
            onClick={() => select(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>
        ))}

        {creating && !collapsed ? (
          <div className="flex items-center gap-1 px-1 pt-1">
            <input
              autoFocus
              value={draft}
              onChange={(event) => setDraft(event.target.value)}
              onKeyDown={(event) => {
                event.stopPropagation();
                if (event.key === "Enter") submit();
                if (event.key === "Escape") {
                  setCreating(false);
                  setDraft("");
                  setError(null);
                }
              }}
              placeholder="Folder name"
              aria-label="New folder name"
              maxLength={60}
              className="min-w-0 flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-2.5 py-1.5 text-[13px] text-[var(--text)] outline-none focus:border-[var(--text-subtle)]"
            />
            <button type="button" onClick={submit} className="btn-primary h-8 px-3 text-[12px]">
              Add
            </button>
          </div>
        ) : null}

        {error ? <p className="px-2 pt-1 text-[12px] text-rose-600 dark:text-rose-300">{error}</p> : null}
      </nav>

      {/* footer ---------------------------------------------------------- */}
      <div className="mt-2 space-y-0.5 border-t border-[var(--hairline)] pt-2">
        <button
          type="button"
          onClick={openSettings}
          title="Settings"
          className={cn("nav-row", collapsed && "justify-center px-2")}
        >
          <GearIcon className="size-4 shrink-0 opacity-70" />
          {!collapsed ? <span className="flex-1 truncate text-left">Settings</span> : null}
        </button>
        <button
          type="button"
          onClick={toggle}
          title={theme === "dark" ? "Light mode" : "Dark mode"}
          className={cn("nav-row", collapsed && "justify-center px-2")}
        >
          {theme === "dark" ? (
            <SunIcon className="size-4 shrink-0 opacity-70" />
          ) : (
            <MoonIcon className="size-4 shrink-0 opacity-70" />
          )}
          {!collapsed ? (
            <span className="flex-1 truncate text-left">{theme === "dark" ? "Light mode" : "Dark mode"}</span>
          ) : null}
        </button>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* Collapsed state (shared between rail and drawer)                    */
/* ------------------------------------------------------------------ */

let collapsed = false;
const collapseListeners = new Set<() => void>();

export const sidebarCollapse = {
  subscribe(listener: () => void): () => void {
    collapseListeners.add(listener);
    return () => collapseListeners.delete(listener);
  },
  getSnapshot(): boolean {
    return collapsed;
  },
  getServerSnapshot(): boolean {
    return false;
  },
  set(value: boolean): void {
    collapsed = value;
    try {
      window.localStorage.setItem(COLLAPSE_KEY, value ? "1" : "0");
    } catch {
      /* private mode */
    }
    collapseListeners.forEach((listener) => listener());
  },
  hydrate(): void {
    try {
      collapsed = window.localStorage.getItem(COLLAPSE_KEY) === "1";
    } catch {
      collapsed = false;
    }
    collapseListeners.forEach((listener) => listener());
  },
};

function useCollapsed(): boolean {
  return useSyncExternalStore(
    sidebarCollapse.subscribe,
    sidebarCollapse.getSnapshot,
    sidebarCollapse.getServerSnapshot,
  );
}

/* ------------------------------------------------------------------ */
/* Desktop rail + mobile drawer                                        */
/* ------------------------------------------------------------------ */

export function Sidebar() {
  const isCollapsed = useCollapsed();

  return (
    <aside
      aria-label="Sidebar"
      className={cn(
        "fixed inset-y-0 left-0 z-40 hidden p-3 transition-[width] duration-200 lg:flex",
        isCollapsed ? "w-[84px]" : "w-[268px]",
      )}
    >
      {/* 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 />
      </div>
    </aside>
  );
}

export function MobileSidebar() {
  const open = useSidebarOpen();

  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="Close menu"
            onClick={() => sidebarOpen.set(false)}
            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
          />
          <motion.aside
            aria-label="Menu"
            initial={{ x: -280 }}
            animate={{ x: 0 }}
            exit={{ x: -280 }}
            transition={{ type: "spring", stiffness: 380, damping: 36 }}
            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={() => 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();
  return (
    <div
      aria-hidden
      className={cn("hidden shrink-0 transition-[width] duration-200 lg:block", isCollapsed ? "w-[84px]" : "w-[268px]")}
    />
  );
}