kcg-code 0.1.0 → 0.2.0

package/src/pages/settings/SettingsPage.tsx

@@ -1,67 +1,130 @@
 /**
- * Halaman Settings (`/settings/:section`) — tata letak ala GNOME Settings
- * (libadwaita): kolom sempit di tengah, grup berjudul berisi "boxed list".
- * Tiap bagian punya URL sendiri. EMPAT tab (muat di desktop & bottom nav HP):
+ * Halaman Settings (`/settings/:section`) — navigasi ala GNOME Settings
+ * (AdwNavigationSplitView, libadwaita). Isi tiap bagian memakai "boxed list"
+ * (`components/settings/prefs`). Tiap bagian punya URL sendiri:
  *
- * - Profile  (`/settings`, `/settings/profile`): avatar, nickname, dan akun
- *   KCG Code (username/email dari akun tunnel).
+ * - Profile  (`/settings`, `/settings/profile`): avatar, nickname, akun.
  * - Security (`/settings/security`): kunci aplikasi, auto-lock, passkey, dan
  *   perangkat yang login (`/settings/devices` lama -> grup ini).
  * - Workspace (`/settings/workspace`): folder tempat semua Project berada.
  * - Remote access (`/settings/remote`): tunnel publik lewat Google sign-in.
+ * - About KCG Code (`/settings/about`): versi & kredit — bukan pengaturan,
+ *   jadi tampil terpisah di akhir navigasi (seperti "About" GNOME Settings).
  *
- * About (`/settings/about`) bukan pengaturan — dibuka dari tombol ⓘ di
- * samping judul, bukan tab.
+ * Tata letak:
+ * - Lebar (lg+): daftar navigasi di kiri (sticky), isi bagian di kanan.
+ * - Sempit: `/settings` = daftar bagian (baris dengan ikon, deskripsi,
+ *   chevron); bagian dibuka sebagai halaman dengan tombol kembali
+ *   "‹ Settings" + judul di tengah (AdwNavigationView).
  */
-import { ArrowLeftIcon, FolderIcon, GlobeIcon, InfoIcon, ShieldIcon, UserIcon } from "lucide-react";
-import { type ComponentType, useCallback, useEffect } from "react";
+import { ChevronLeftIcon, FolderIcon, GlobeIcon, ShieldIcon, UserIcon } from "lucide-react";
+import { type ComponentType, type ReactNode, useCallback, useEffect } from "react";
 import { toast } from "sonner";
 import { AvatarEditor } from "@/components/auth/AvatarEditor";
+import { ProfileAvatar } from "@/components/auth/ProfileAvatar";
 import { AboutGroup } from "@/components/settings/AboutGroup";
 import { AccountGroup } from "@/components/settings/AccountGroup";
-import { EntryRow, PrefsGroup } from "@/components/settings/prefs";
+import { ActionRow, EntryRow, PrefsGroup } from "@/components/settings/prefs";
 import { RemoteAccessGroup } from "@/components/settings/RemoteAccessGroup";
 import { SecurityGroup } from "@/components/settings/SecurityGroup";
 import { WorkspaceGroup } from "@/components/settings/WorkspaceGroup";
 import { Spinner } from "@/components/ui/spinner";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { useRouter } from "@/hooks/useRouter";
 import { ApiError, apiFetch } from "@/lib/api";
 import { refreshAuth, useAuth } from "@/lib/auth";
 import { type SettingsSection, settingsPath } from "@/lib/routes";
 import { cn } from "@/lib/utils";
 import type { AuthStatus } from "@/server/services/auth";
+import logo from "../../logo.svg";
 
-/** Tab Settings — sengaja dibatasi empat agar tidak sesak. */
-export const SETTINGS_TABS: {
-  id: Exclude<SettingsSection, "about">;
+/** Logo aplikasi sebagai ikon navigasi "About KCG Code". */
+function AppIcon({ className }: { className?: string }) {
+  return <img src={logo} alt="" className={cn("rounded-[22%]", className)} />;
+}
+
+export interface SettingsPageInfo {
+  id: SettingsSection;
   label: string;
-  /** Label ringkas untuk bottom nav mobile. */
-  short?: string;
+  /** Subjudul baris di daftar bagian (layar sempit). */
+  description: string;
   icon: ComponentType<{ className?: string }>;
-}[] = [
-  { id: "profile", label: "Profile", icon: UserIcon },
-  { id: "security", label: "Security", icon: ShieldIcon },
-  { id: "workspace", label: "Workspace", icon: FolderIcon },
-  { id: "remote", label: "Remote access", short: "Remote", icon: GlobeIcon },
+}
+
+/** Bagian pengaturan (urutan navigasi). About sengaja terpisah. */
+export const SETTINGS_PANELS: readonly SettingsPageInfo[] = [
+  {
+    id: "profile",
+    label: "Profile",
+    description: "Name, picture & account",
+    icon: UserIcon,
+  },
+  {
+    id: "security",
+    label: "Security",
+    description: "App lock, passkeys & devices",
+    icon: ShieldIcon,
+  },
+  {
+    id: "workspace",
+    label: "Workspace",
+    description: "Where your projects live",
+    icon: FolderIcon,
+  },
+  {
+    id: "remote",
+    label: "Remote access",
+    description: "Open KCG Code from anywhere",
+    icon: GlobeIcon,
+  },
 ];
 
+/** Entri "About" — selalu terakhir, dipisah dari bagian pengaturan. */
+export const SETTINGS_ABOUT: SettingsPageInfo = {
+  id: "about",
+  label: "About KCG Code",
+  description: "Version & credits",
+  icon: AppIcon,
+};
+
+function pageInfo(section: SettingsSection): SettingsPageInfo {
+  return SETTINGS_PANELS.find((p) => p.id === section) ?? SETTINGS_ABOUT;
+}
+
+/** Breakpoint `lg` — di atasnya navigasi & isi berdampingan. */
+const WIDE_QUERY = "(min-width: 1024px)";
+
 function errorText(e: unknown, fallback: string): string {
   return e instanceof ApiError ? e.message : fallback;
 }
 
+/** Tautan SPA (Ctrl/Cmd-klik tetap membuka tab baru). */
+function useNavLink() {
+  const { navigate } = useRouter();
+  return (href: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    navigate(href);
+  };
+}
+
 export function SettingsPage({
   section,
   anchor,
+  root = false,
 }: {
   section: SettingsSection;
   /** Grup yang dituju (mis. URL lama `/settings/devices` -> "devices"). */
   anchor?: string;
+  /** `/settings` tanpa sub-halaman (layar sempit: daftar bagian). */
+  root?: boolean;
 }) {
   const auth = useAuth();
   const status = auth.phase === "ready" ? auth.status : null;
   const ok = useCallback((text: string) => toast.success(text), []);
   const error = useCallback((text: string) => toast.error(text), []);
   const ready = status !== null;
+  const wide = useMediaQuery(WIDE_QUERY);
 
   // Gulir ke grup tujuan setelah kontennya dirender.
   useEffect(() => {
@@ -72,25 +135,42 @@ export function SettingsPage({
     return () => clearTimeout(t);
   }, [anchor, ready]);
 
-  return (
-    // Mobile: ruang ekstra di bawah agar konten tidak tertutup bottom nav.
-    <div className="mx-auto flex w-full max-w-[40rem] flex-col gap-6 pb-[calc(5rem+env(safe-area-inset-bottom))] sm:pb-10">
-      <SettingsNav current={section} />
+  const content = !status ? (
+    <div className="flex justify-center py-16" role="status">
+      <Spinner className="size-6 text-muted-foreground" />
+      <span className="sr-only">Loading settings…</span>
+    </div>
+  ) : (
+    <div className="flex flex-col gap-8">
+      {section === "profile" && <ProfileSection status={status} onOk={ok} onError={error} />}
+      {section === "security" && <SecurityGroup status={status} onOk={ok} />}
+      {section === "workspace" && <WorkspaceGroup status={status} />}
+      {section === "remote" && <RemoteAccessGroup protectedApp={status.protected} />}
+      {section === "about" && <AboutGroup />}
+    </div>
+  );
 
-      {!status ? (
-        <div className="flex justify-center py-16" role="status">
-          <Spinner className="size-6 text-muted-foreground" />
-          <span className="sr-only">Loading settings…</span>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-8">
-          {section === "profile" && <ProfileSection status={status} onOk={ok} onError={error} />}
-          {section === "security" && <SecurityGroup status={status} onOk={ok} />}
-          {section === "workspace" && <WorkspaceGroup status={status} />}
-          {section === "remote" && <RemoteAccessGroup protectedApp={status.protected} />}
-          {section === "about" && <AboutGroup />}
+  // Lebar: AdwNavigationSplitView — sidebar navigasi + isi.
+  if (wide) {
+    return (
+      <div className="grid grid-cols-[14.5rem_minmax(0,1fr)] gap-10 pt-2 pb-10">
+        <SettingsSidebar current={section} />
+        <div className="flex min-w-0 max-w-[40rem] flex-col gap-6">
+          <h2 className="px-1 text-2xl font-semibold tracking-tight">{pageInfo(section).label}</h2>
+          {content}
         </div>
-      )}
+      </div>
+    );
+  }
+
+  // Sempit, `/settings`: daftar bagian.
+  if (root) return <SettingsIndex status={status} />;
+
+  // Sempit, sub-halaman: tombol kembali + judul di tengah.
+  return (
+    <div className="mx-auto flex w-full max-w-[40rem] flex-col gap-6 pb-[max(2.5rem,env(safe-area-inset-bottom))]">
+      <SubpageHeader title={pageInfo(section).label} />
+      {content}
     </div>
   );
 }
@@ -98,120 +178,107 @@ export function SettingsPage({
 // ---------------------------------------------------------------- nav ----
 
 /**
- * Navigasi bagian Settings.
- * - Judul + tombol About (ⓘ) di kanannya. Di halaman About, judul berubah
- *   jadi tombol kembali — About bukan tab.
- * - sm+: deretan pil (4) di bawah judul.
- * - Mobile: bottom navigation (4 kolom, ala Material 3 NavigationBar).
+ * Sidebar navigasi (layar lebar) — gaya `.navigation-sidebar` libadwaita:
+ * baris ikon + label, pilihan aktif berlatar membulat. About di bawah garis
+ * pemisah, dengan logo aplikasi sebagai ikon.
  */
-function SettingsNav({ current }: { current: SettingsSection }) {
-  const { navigate } = useRouter();
-  const go = (href: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
-    e.preventDefault();
-    navigate(href);
+function SettingsSidebar({ current }: { current: SettingsSection }) {
+  const link = useNavLink();
+  const item = ({ id, label, icon: Icon }: SettingsPageInfo) => {
+    const href = settingsPath(id);
+    const active = id === current;
+    return (
+      <li key={id}>
+        <a
+          href={href}
+          onClick={link(href)}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex h-10 items-center gap-3 rounded-lg px-3 text-[15px] transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            active
+              ? "bg-black/[0.08] font-medium text-foreground dark:bg-white/[0.1]"
+              : "text-foreground/80 hover:bg-black/[0.04] hover:text-foreground dark:hover:bg-white/[0.05]",
+          )}
+        >
+          <Icon className="size-[18px] shrink-0" />
+          <span className="truncate">{label}</span>
+        </a>
+      </li>
+    );
   };
-  const onAbout = current === "about";
-  const aboutHref = settingsPath("about");
-  const backHref = settingsPath("profile");
+  return (
+    <nav aria-label="Settings" className="sticky top-2 flex flex-col gap-3 self-start">
+      <h1 className="px-3 text-2xl font-semibold tracking-tight">Settings</h1>
+      <ul className="flex flex-col gap-0.5">{SETTINGS_PANELS.map(item)}</ul>
+      <div className="mx-3 h-px bg-border" aria-hidden />
+      <ul className="flex flex-col gap-0.5">{item(SETTINGS_ABOUT)}</ul>
+    </nav>
+  );
+}
+
+/**
+ * Daftar bagian (layar sempit, `/settings`) — boxed list ala GNOME Settings
+ * mobile: profil di atas (avatar + nama), lalu bagian pengaturan, lalu
+ * About di grup sendiri.
+ */
+function SettingsIndex({ status }: { status: AuthStatus | null }) {
+  const { navigate } = useRouter();
+  const profile = status?.profile;
+  const row = (p: SettingsPageInfo, overrides?: { title?: ReactNode; prefix?: ReactNode }) => (
+    <ActionRow
+      key={p.id}
+      prefix={overrides?.prefix ?? <p.icon className="size-[18px] text-muted-foreground" />}
+      title={overrides?.title ?? p.label}
+      subtitle={p.description}
+      onActivate={() => navigate(settingsPath(p.id))}
+    />
+  );
+  const [profilePanel, ...panels] = SETTINGS_PANELS;
 
   return (
-    <>
-      <div className="flex flex-col gap-3">
-        <div className="flex items-center justify-between gap-3 px-1">
-          {onAbout ? (
-            <a
-              href={backHref}
-              onClick={go(backHref)}
-              className="-ml-2 flex items-center gap-2 rounded-full py-1 pr-3 pl-2 text-2xl font-semibold tracking-tight outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50"
-            >
-              <ArrowLeftIcon className="size-5" aria-hidden />
-              <span>Settings</span>
-            </a>
-          ) : (
-            <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
-          )}
-          <a
-            href={aboutHref}
-            onClick={go(aboutHref)}
-            aria-label="About KCG Code"
-            aria-current={onAbout ? "page" : undefined}
-            title="About KCG Code"
-            className={cn(
-              "flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50",
-              onAbout && "bg-muted text-foreground",
-            )}
-          >
-            <InfoIcon className="size-5" aria-hidden />
-          </a>
-        </div>
-        <nav aria-label="Settings sections" className="hidden sm:block">
-          <ul className="flex gap-1">
-            {SETTINGS_TABS.map(({ id, label, icon: Icon }) => {
-              const active = id === current;
-              const href = settingsPath(id);
-              return (
-                <li key={id} className="shrink-0">
-                  <a
-                    href={href}
-                    aria-current={active ? "page" : undefined}
-                    onClick={go(href)}
-                    className={cn(
-                      "flex items-center gap-2 rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
-                      active
-                        ? "bg-primary text-primary-foreground"
-                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                    )}
-                  >
-                    <Icon className="size-4 shrink-0" aria-hidden />
-                    {label}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-      </div>
+    <div className="mx-auto flex w-full max-w-[40rem] flex-col gap-6 pb-[max(2.5rem,env(safe-area-inset-bottom))]">
+      <h1 className="px-1 text-2xl font-semibold tracking-tight">Settings</h1>
+      {profilePanel && (
+        <PrefsGroup>
+          {row(profilePanel, {
+            title: profile?.nickname ?? "Profile",
+            prefix: (
+              <ProfileAvatar
+                nickname={profile?.nickname ?? null}
+                avatarUrl={profile?.avatarUrl ?? null}
+                avatarPreset={profile?.avatarPreset ?? null}
+                className="size-10"
+                textClassName="text-base"
+              />
+            ),
+          })}
+        </PrefsGroup>
+      )}
+      <PrefsGroup>{panels.map((p) => row(p))}</PrefsGroup>
+      <PrefsGroup>
+        {row(SETTINGS_ABOUT, { prefix: <AppIcon className="size-[22px]" /> })}
+      </PrefsGroup>
+    </div>
+  );
+}
 
-      <nav
-        aria-label="Settings sections"
-        className="fixed inset-x-0 bottom-0 z-30 border-t bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur supports-[backdrop-filter]:bg-background/80 sm:hidden"
+/** Header sub-halaman (layar sempit): "‹ Settings" + judul di tengah. */
+function SubpageHeader({ title }: { title: string }) {
+  const link = useNavLink();
+  const href = settingsPath();
+  return (
+    <header className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
+      <a
+        href={href}
+        onClick={link(href)}
+        className="-ml-2 flex w-fit items-center gap-0.5 rounded-full py-1.5 pr-3 pl-1.5 text-[15px] font-medium outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 active:bg-muted"
       >
-        <ul className="mx-auto grid max-w-md grid-cols-4">
-          {SETTINGS_TABS.map(({ id, label, short, icon: Icon }) => {
-            const active = id === current;
-            const href = settingsPath(id);
-            return (
-              <li key={id} className="min-w-0">
-                <a
-                  href={href}
-                  aria-current={active ? "page" : undefined}
-                  aria-label={short ? label : undefined}
-                  onClick={go(href)}
-                  className={cn(
-                    "group flex min-h-16 flex-col items-center justify-center gap-1 px-1 pt-2 pb-1.5 text-[11.5px] font-medium transition-colors outline-none",
-                    active ? "text-foreground" : "text-muted-foreground active:text-foreground",
-                  )}
-                >
-                  {/* Pil indikator di belakang ikon untuk bagian aktif. */}
-                  <span
-                    className={cn(
-                      "flex h-8 w-14 items-center justify-center rounded-full transition-colors group-focus-visible:ring-[3px] group-focus-visible:ring-ring/50",
-                      active
-                        ? "bg-primary/15 text-primary dark:bg-primary/25"
-                        : "group-active:bg-muted",
-                    )}
-                  >
-                    <Icon className="size-5 shrink-0" aria-hidden />
-                  </span>
-                  <span className="max-w-full truncate">{short ?? label}</span>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-    </>
+        <ChevronLeftIcon className="size-5" aria-hidden />
+        Settings
+      </a>
+      <h1 className="truncate text-center text-[17px] font-bold">{title}</h1>
+      <span aria-hidden />
+    </header>
   );
 }
 

package/src/pages/settings/__tests__/SettingsPage.test.ts

@@ -1,9 +1,16 @@
 /**
- * Navigasi Settings — jumlah tab dibatasi (tidak sesak).
+ * Navigasi Settings — bagian pengaturan dibatasi (tidak sesak), About
+ * terpisah di akhir navigasi.
  */
 import { expect, test } from "bun:test";
-import { SETTINGS_TABS } from "../SettingsPage";
+import { SETTINGS_SECTIONS } from "@/lib/routes";
+import { SETTINGS_ABOUT, SETTINGS_PANELS } from "../SettingsPage";
 
-test("hanya empat tab: Devices bagian dari Security, About bukan tab", () => {
-  expect(SETTINGS_TABS.map((t) => t.id)).toEqual(["profile", "security", "workspace", "remote"]);
+test("empat bagian pengaturan: Devices bagian dari Security", () => {
+  expect(SETTINGS_PANELS.map((p) => p.id)).toEqual(["profile", "security", "workspace", "remote"]);
+});
+
+test("About entri terpisah; navigasi mencakup semua sub-halaman", () => {
+  expect(SETTINGS_ABOUT.id).toBe("about");
+  expect([...SETTINGS_PANELS.map((p) => p.id), SETTINGS_ABOUT.id]).toEqual([...SETTINGS_SECTIONS]);
 });