kcg-code 0.0.0-stage → 0.1.0

package/src/components/auth/__tests__/WelcomeScreen.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * Welcome screen — render statis langkah pertama.
+ */
+import { expect, test } from "bun:test";
+import { domAnimation, LazyMotion } from "motion/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { AuthStatus } from "@/server/services/auth";
+import { WelcomeScreen } from "../WelcomeScreen";
+
+const status: AuthStatus = {
+  protected: false,
+  authenticated: true,
+  lockKind: null,
+  autoLockMinutes: 15,
+  profile: { nickname: null, avatarUrl: null, avatarPreset: null },
+  retryAfterSec: 0,
+  needsOnboarding: true,
+};
+
+const html = () =>
+  renderToStaticMarkup(
+    <LazyMotion features={domAnimation} strict>
+      <WelcomeScreen status={status} onFinished={() => {}} />
+    </LazyMotion>,
+  );
+
+test("langkah pertama: dialog berlabel, logo, judul, Get started & Skip", () => {
+  const out = html();
+  expect(out).toContain('role="dialog"');
+  expect(out).toContain('aria-labelledby="welcome-title"');
+  expect(out).toContain("Welcome to KCG Code");
+  expect(out).toContain("Get started");
+  expect(out).toContain("Skip for now");
+  // Ringkasan langkah yang akan datang.
+  expect(out).toContain("Protect it with a PIN or password");
+});
+
+test("langkah pertama tanpa tombol Back & titik progres", () => {
+  const out = html();
+  expect(out).not.toContain('aria-label="Back"');
+  expect(out).not.toContain('aria-label="Setup progress"');
+});

package/src/components/auth/avatar-icons.tsx

@@ -0,0 +1,114 @@
+/**
+ * Pemetaan avatar bawaan (id preset) -> ikon lucide + warna latar.
+ * Id-nya didefinisikan di `lib/avatar-presets.ts` (dipakai server juga).
+ */
+import {
+  BirdIcon,
+  BotIcon,
+  CatIcon,
+  CoffeeIcon,
+  DogIcon,
+  FishIcon,
+  Flower2Icon,
+  Gamepad2Icon,
+  GhostIcon,
+  LeafIcon,
+  type LucideIcon,
+  MountainIcon,
+  PandaIcon,
+  RabbitIcon,
+  RocketIcon,
+  SquirrelIcon,
+  TurtleIcon,
+} from "lucide-react";
+import type { AvatarPresetId } from "@/lib/avatar-presets";
+
+export interface AvatarPreset {
+  label: string;
+  Icon: LucideIcon;
+  /** Kelas latar + warna ikon (terang & gelap). */
+  className: string;
+}
+
+export const AVATAR_PRESETS: Record<AvatarPresetId, AvatarPreset> = {
+  cat: {
+    label: "Cat",
+    Icon: CatIcon,
+    className: "bg-orange-500/15 text-orange-600 dark:text-orange-400",
+  },
+  dog: {
+    label: "Dog",
+    Icon: DogIcon,
+    className: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  },
+  rabbit: {
+    label: "Rabbit",
+    Icon: RabbitIcon,
+    className: "bg-pink-500/15 text-pink-600 dark:text-pink-400",
+  },
+  panda: {
+    label: "Panda",
+    Icon: PandaIcon,
+    className: "bg-zinc-500/15 text-zinc-700 dark:text-zinc-300",
+  },
+  bird: {
+    label: "Bird",
+    Icon: BirdIcon,
+    className: "bg-sky-500/15 text-sky-600 dark:text-sky-400",
+  },
+  fish: {
+    label: "Fish",
+    Icon: FishIcon,
+    className: "bg-cyan-500/15 text-cyan-700 dark:text-cyan-400",
+  },
+  turtle: {
+    label: "Turtle",
+    Icon: TurtleIcon,
+    className: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400",
+  },
+  squirrel: {
+    label: "Squirrel",
+    Icon: SquirrelIcon,
+    className: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400",
+  },
+  rocket: {
+    label: "Rocket",
+    Icon: RocketIcon,
+    className: "bg-violet-500/15 text-violet-600 dark:text-violet-400",
+  },
+  bot: {
+    label: "Robot",
+    Icon: BotIcon,
+    className: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+  },
+  ghost: {
+    label: "Ghost",
+    Icon: GhostIcon,
+    className: "bg-indigo-500/15 text-indigo-600 dark:text-indigo-400",
+  },
+  gamepad: {
+    label: "Gamepad",
+    Icon: Gamepad2Icon,
+    className: "bg-fuchsia-500/15 text-fuchsia-600 dark:text-fuchsia-400",
+  },
+  flower: {
+    label: "Flower",
+    Icon: Flower2Icon,
+    className: "bg-rose-500/15 text-rose-600 dark:text-rose-400",
+  },
+  leaf: {
+    label: "Leaf",
+    Icon: LeafIcon,
+    className: "bg-lime-500/15 text-lime-700 dark:text-lime-400",
+  },
+  mountain: {
+    label: "Mountain",
+    Icon: MountainIcon,
+    className: "bg-teal-500/15 text-teal-700 dark:text-teal-400",
+  },
+  coffee: {
+    label: "Coffee",
+    Icon: CoffeeIcon,
+    className: "bg-stone-500/15 text-stone-700 dark:text-stone-300",
+  },
+};

package/src/components/layout/AppShell.tsx

@@ -0,0 +1,142 @@
+/**
+ * Shell aplikasi KCG Code (task 25.1) — layout + routing URL ala kcgcode.
+ *
+ * Navigasi: `/` (daftar Project) -> `/projects/:projectId` (daftar Session)
+ * -> `/projects/:projectId/sessions/:sessionId` (Session view).
+ * - Rute halaman didaftarkan eksplisit di `src/index.ts` (`spaPaths`), lalu
+ *   di sini `useRouter()` (pathname) + `parseRoute()` memilih halaman dari
+ *   `src/pages/*` — tiap halaman me-resolve ulang datanya dari API sehingga
+ *   refresh/direct link tetap berfungsi.
+ * - Toggle tema (`ThemeToggle`, Req 8.2/8.6) ada di footer `AppSidebar`.
+ * - Halaman Session di-`key` per id agar remount saat pindah Session.
+ * - `AppSidebar` (shadcn `sidebar`) menampilkan seluruh Session digroup per
+ *   Project: panel tetap di desktop, Sheet off-canvas di HP (`SidebarTrigger`
+ *   di header shell & header Session).
+ */
+
+import { AppSidebar } from "@/components/layout/AppSidebar";
+import { InstallNotifications } from "@/components/skills/InstallNotifications";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { useRouter } from "@/hooks/useRouter";
+import { useSidebarData } from "@/hooks/useSidebarData";
+import { parseRoute, projectsPath } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+import { ProjectDetailPage } from "@/pages/projects/ProjectDetailPage";
+import { ProjectsPage } from "@/pages/projects/ProjectsPage";
+import { SessionPage } from "@/pages/sessions/SessionPage";
+import { SettingsPage } from "@/pages/settings/SettingsPage";
+import { SkillsPage } from "@/pages/skills/SkillsPage";
+
+import logo from "../../logo.svg";
+
+export function AppShell() {
+  const { pathname } = useRouter();
+  const route = parseRoute(pathname);
+  const sidebarData = useSidebarData(pathname);
+
+  const isHome = route.name === "projects";
+  /**
+   * Session view punya header sendiri (back, nama model, play/stop, menu aksi
+   * berisi tema & hapus), jadi chrome shell disembunyikan di sana — dua header
+   * bertumpuk memakan tinggi layar HP tanpa menambah informasi.
+   */
+  const isSession = route.name === "session";
+
+  return (
+    <TooltipProvider>
+      <SidebarProvider className="h-dvh min-h-0 overflow-hidden">
+        <AppSidebar route={route} data={sidebarData} />
+        <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
+          {/* Area konten memenuhi SidebarInset — sidebar sudah jadi pembatas
+              kiri, jadi tak perlu lagi kolom ber-border di tengah layar. Lebar
+              baca dibatasi per halaman (lihat `<main>` di bawah). */}
+          <div className="relative flex h-full w-full flex-col overflow-x-hidden bg-background">
+            {/* Header (kecuali Session view yang membawa header sendiri) */}
+            {!isSession && (
+              <header className="flex w-full shrink-0 items-center gap-3 px-3 py-3 sm:px-4">
+                <SidebarTrigger className="size-9 shrink-0" />
+                {/* Brand hanya di HP — di desktop sudah ada di header sidebar. */}
+                <span className="flex min-w-0 items-center gap-2 md:hidden">
+                  <span className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary p-1">
+                    <img src={logo} alt="" className="size-full" />
+                  </span>
+                  <span className="truncate text-sm font-semibold tracking-tight">KCG Code</span>
+                </span>
+              </header>
+            )}
+
+            {/* Konten per URL */}
+            {route.name === "session" ? (
+              <SessionPage
+                key={`${route.projectId}/${route.sessionId}`}
+                projectId={route.projectId}
+                sessionId={route.sessionId}
+              />
+            ) : (
+              <main
+                className={cn(
+                  "min-h-0 flex-1 overflow-x-hidden overflow-y-auto bg-background",
+                  // Detail Project lg+: kolom-kolomnya yang scroll, bukan <main>.
+                  route.name === "project" && "lg:overflow-y-hidden",
+                )}
+              >
+                <div
+                  className={
+                    isHome
+                      ? /* Homepage rata atas (bukan center): daftar Project adalah
+                       fokus, jadi baris pertama langsung terlihat tanpa gap
+                       atas besar — dan daftar yang lebih tinggi dari layar
+                       tetap bisa di-scroll seluruhnya. */
+                        "flex min-h-full flex-col px-4 py-6 sm:px-6 sm:py-10"
+                      : route.name === "project"
+                        ? /* Detail Project: dua kolom (Session + panel samping).
+                             Layar lg+: tinggi dikunci ke viewport (`h-full`),
+                             tiap kolom scroll sendiri; lebih sempit: halaman
+                             scroll biasa (panel samping ada di Sheet). */
+                          "mx-auto w-full max-w-6xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16 lg:h-full lg:pb-0"
+                        : route.name === "skills"
+                          ? /* Skills: grid kartu 2 kolom butuh ruang lebih lebar. */
+                            "mx-auto w-full max-w-5xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16"
+                          : "mx-auto w-full max-w-3xl px-4 pt-2 pb-12 sm:px-6 sm:pt-4 sm:pb-16"
+                  }
+                >
+                  {route.name === "projects" && <ProjectsPage />}
+                  {route.name === "project" && (
+                    <ProjectDetailPage key={route.projectId} projectId={route.projectId} />
+                  )}
+                  {route.name === "skills" && <SkillsPage />}
+                  {route.name === "settings" && (
+                    <SettingsPage section={route.section} anchor={route.anchor} />
+                  )}
+                  {route.name === "not-found" && <NotFoundView />}
+                </div>
+              </main>
+            )}
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+      {/* Notifikasi instalasi skill: global agar tetap tampil di halaman mana pun. */}
+      <InstallNotifications />
+    </TooltipProvider>
+  );
+}
+
+function NotFoundView() {
+  const { navigate } = useRouter();
+  return (
+    <div className="flex flex-col items-center gap-4 py-10 text-center">
+      <p className="text-sm text-muted-foreground">Page not found.</p>
+      <a
+        href={projectsPath()}
+        onClick={(e) => {
+          e.preventDefault();
+          navigate(projectsPath());
+        }}
+        className="text-sm font-medium underline underline-offset-4"
+      >
+        Back to projects
+      </a>
+    </div>
+  );
+}