From 5f42c17caa17b20954f567bd8ef301b8ff88bd0f Mon Sep 17 00:00:00 2001
From: asepharyana <asepharyana@users.noreply.github.com>
Date: Mon, 24 Aug 2026 17:35:51 +0700
Subject: [PATCH] feat(frontend): tema monokrom + sidebar animasi game-menu +
 gate ringan mobile

---
 .../plans/2026-08-24_mono-gamemenu-mobile.md  |  39 +++++
 .../src/app/(dashboard)/dashboard/view.tsx    |   2 +-
 services/frontend/src/app/globals.css         | 150 ++++++++++++++++--
 .../src/components/ambient/ambient-canvas.tsx |  13 ++
 .../components/ambient/ambient-context.tsx    |  11 +-
 .../src/components/shell/mobile-nav.tsx       |  19 ++-
 .../src/components/shell/nav-rail.tsx         |  24 ++-
 7 files changed, 231 insertions(+), 27 deletions(-)
 create mode 100644 .hermes/plans/2026-08-24_mono-gamemenu-mobile.md

diff --git a/.hermes/plans/2026-08-24_mono-gamemenu-mobile.md b/.hermes/plans/2026-08-24_mono-gamemenu-mobile.md
new file mode 100644
index 00000000..a0dc088b
--- /dev/null
+++ b/.hermes/plans/2026-08-24_mono-gamemenu-mobile.md
@@ -0,0 +1,39 @@
+# GMW FE — Monokrom Hitam-Putih + Sidebar Ala Menu Game + Ringan di Mobile
+
+Tanggal: 2026-08-24 · Basis: `eda5c75` (shell usable hasil revert)
+
+## Tujuan
+1. Tema **monokrom murni** (hitam-putih, tanpa warna) di dark & light.
+2. Sidebar (desktop NavRail + mobile dock) beranimasi **ala menu game** — corner
+   brackets, sweep, stagger masuk, marker segitiga.
+3. **Ringan di mobile**: matikan WebGL ambient di layar kecil, kurangi biaya
+   blur/backdrop, animasi transform/opacity saja.
+
+## Non-goals
+- Tidak menyentuh backend, endpoint, hooks/data-flow, struktur route.
+- Tidak menambah dependensi baru (CSS murni untuk semua animasi).
+
+## File yang disentuh
+| File | Perubahan |
+|---|---|
+| `src/app/globals.css` | Token mono (dark+light): signal/amber/vermilion → skala putih-abu; `.glass` blur adaptif; kelas baru `.game-nav-item` (bracket ::before/::after, sweep, stagger via `--i`), `.game-frame` (panel sudut terpotong + garis tergambar), keyframes `sweep-x`, `draw-line`, `nav-in`; media query `<md`: blur 18→8px, hambat animasi berat |
+| `src/components/shell/nav-rail.tsx` | Item pakai `.game-nav-item` + `style={{'--i': n}}`; marker aktif jadi segitiga ▸ putih; hapus box-shadow glow besar (ganti sweep) |
+| `src/components/shell/mobile-nav.tsx` | Dock mono: tab aktif = bar atas putih + sweep sekali; target sentuh ≥44px; hapus glow blob |
+| `src/components/shell/topbar.tsx` | Aksen mono + `.game-frame` pada container (cek markup dulu) |
+| `src/components/ambient/ambient-canvas.tsx` | Early-return WebGL bila `(pointer: coarse)` / lebar <768 / `saveData` / core ≤4; fallback statik CSS tetap |
+| `src/components/ambient/status/signal tone` (`SIGNAL_RGB`) | Semua tone jadi grayscale (putih; intensitas beda per tone) |
+| `src/app/(dashboard)/dashboard/view.tsx` | Hero + kartu metrik pakai `.game-frame`/cut-corner sebagai showcase |
+
+## Keputusan desain
+- **Full monokrom termasuk danger**: flag/moderation tidak lagi merah —
+  ditandai badge putih-di-atlas-hitam inversi + pulse. Kalau user kangen merah,
+  tinggal isi ulang `--color-vermilion`.
+- Semua animasi hanya `transform`/`opacity` (compositor-friendly), hormati
+  `prefers-reduced-motion` (sudah ada kill-switch global).
+
+## Verifikasi (gerbang)
+1. `tsc --noEmit` bersih; biome 0 error 0 warning.
+2. `pnpm build` sukses; smoke lokal 4024 → 9 route 200.
+3. Push → GHA "Build & Deploy (Nix)" hijau → live 9×200.
+4. Visual check live: desktop (rail game-menu terlihat) + cek rule mobile
+   (media query & gate kode) — screenshot disimpan.
diff --git a/services/frontend/src/app/(dashboard)/dashboard/view.tsx b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
index 5e870ee7..e403f5c3 100644
--- a/services/frontend/src/app/(dashboard)/dashboard/view.tsx
+++ b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
@@ -87,7 +87,7 @@ export function DashboardView({
   return (
     <div className="space-y-5">
       {/* Hero */}
-      <GlassPanel glow className="relative overflow-hidden">
+      <GlassPanel glow className="game-frame relative overflow-hidden">
         <div className="scan-line absolute inset-x-0 top-0" />
         <div className="flex flex-wrap items-end justify-between gap-4">
           <div>
diff --git a/services/frontend/src/app/globals.css b/services/frontend/src/app/globals.css
index e37ca79e..7a138c5b 100644
--- a/services/frontend/src/app/globals.css
+++ b/services/frontend/src/app/globals.css
@@ -29,13 +29,13 @@
   --color-hairline: oklch(1 0 0 / 0.1);
   --hairline-w: 1px;
 
-  /* ── Semantic signals ── */
-  --color-signal: oklch(0.86 0.19 128);
-  --color-signal-ink: oklch(0.18 0.03 70);
-  --color-signal-glow: oklch(0.86 0.19 128 / 0.4);
-  --color-amber: oklch(0.85 0.15 72);
-  --color-vermilion: oklch(0.68 0.21 25);
-  --color-vermilion-glow: oklch(0.68 0.21 25 / 0.4);
+  /* ── Semantic signals (monochrome: tone = luminance steps) ── */
+  --color-signal: oklch(0.97 0 0);
+  --color-signal-ink: oklch(0.1 0 0);
+  --color-signal-glow: oklch(1 0 0 / 0.35);
+  --color-amber: oklch(0.72 0 0);
+  --color-vermilion: oklch(0.85 0 0);
+  --color-vermilion-glow: oklch(1 0 0 / 0.45);
 
   --color-ring: var(--color-signal);
 
@@ -74,8 +74,8 @@
   background: oklch(0.22 0.02 70 / 0.34);
 }
 .light ::selection {
-  background: var(--color-signal-glow);
-  color: var(--color-ink);
+  background: oklch(0.2 0 0 / 0.9);
+  color: oklch(1 0 0);
 }
 
 @layer base {
@@ -300,6 +300,138 @@
   }
 }
 
+/* ═══ Game-menu nav (monochrome) ═══
+   Corner brackets + one-shot light sweep + staggered entrance.
+   Pure transform/opacity — compositor only. */
+
+.game-nav-item {
+  --i: 0;
+  position: relative;
+  isolation: isolate;
+  animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--i) * 45ms);
+}
+/* corner brackets on hover/active */
+.game-nav-item::before,
+.game-nav-item::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.game-nav-item::before {
+  border-left: 1.5px solid currentColor;
+  border-top: 1.5px solid currentColor;
+  border-top-left-radius: 13px;
+  clip-path: polygon(0 0, 55% 0, 55% 28%, 28% 28%, 28% 100%, 0 100%);
+}
+.game-nav-item::after {
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  border-bottom-right-radius: 13px;
+  clip-path: polygon(100% 100%, 45% 100%, 45% 72%, 72% 72%, 72% 0, 100% 0);
+}
+.game-nav-item:hover::before,
+.game-nav-item:hover::after,
+.game-nav-item.is-active::before,
+.game-nav-item.is-active::after {
+  opacity: 0.9;
+}
+/* one-shot sweep */
+.game-nav-item .game-sweep {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.game-nav-item .game-sweep > i {
+  position: absolute;
+  top: -20%;
+  bottom: -20%;
+  width: 34%;
+  left: -60%;
+  background: linear-gradient(
+    105deg,
+    transparent,
+    oklch(1 0 0 / 0.16),
+    transparent
+  );
+  transform: skewX(-14deg);
+}
+.game-nav-item:hover .game-sweep > i,
+.game-nav-item.is-active .game-sweep > i {
+  animation: sweep-x 0.55s ease-out both;
+}
+/* active triangle marker (game cursor) */
+.game-marker {
+  position: absolute;
+  top: 50%;
+  width: 0;
+  height: 0;
+  border-block: 5px solid transparent;
+  border-left: 7px solid currentColor;
+  transform: translateY(-50%);
+  filter: drop-shadow(0 0 4px var(--color-signal-glow));
+}
+
+@keyframes sweep-x {
+  from { left: -60%; }
+  to   { left: 130%; }
+}
+@keyframes nav-in {
+  from { opacity: 0; transform: translateX(-10px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
+.game-frame {
+  position: relative;
+}
+.game-frame::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
+      26px 1.5px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
+      26px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
+      26px 1.5px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
+      26px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
+      26px 1.5px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
+      1.5px 26px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
+      26px 1.5px,
+    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
+      1.5px 26px;
+  background-repeat: no-repeat;
+}
+
+/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
+@media (max-width: 767px) {
+  .glass {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+  .game-nav-item {
+    animation-duration: 0.25s;
+    animation-delay: calc(var(--i) * 18ms);
+  }
+  .scan-line::after,
+  .animate-shimmer {
+    display: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .scan-line::after,
   .scan-line,
diff --git a/services/frontend/src/components/ambient/ambient-canvas.tsx b/services/frontend/src/components/ambient/ambient-canvas.tsx
index 98cafe1b..5d6ae230 100644
--- a/services/frontend/src/components/ambient/ambient-canvas.tsx
+++ b/services/frontend/src/components/ambient/ambient-canvas.tsx
@@ -67,6 +67,19 @@ export function AmbientCanvas({
     const mount = mountRef.current;
     if (!mount) return;
 
+    // Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
+    // devices — the static CSS fallback below stays. Desktop keeps the haze.
+    const nav = navigator as Navigator & {
+      connection?: { saveData?: boolean; deviceMemory?: number };
+      deviceMemory?: number;
+    };
+    const lightDevice =
+      window.matchMedia("(max-width: 767px)").matches ||
+      window.matchMedia("(pointer: coarse)").matches ||
+      nav.connection?.saveData === true ||
+      (nav.deviceMemory ?? 8) <= 4;
+    if (lightDevice) return;
+
     let renderer: THREE.WebGLRenderer;
     try {
       renderer = new THREE.WebGLRenderer({
diff --git a/services/frontend/src/components/ambient/ambient-context.tsx b/services/frontend/src/components/ambient/ambient-context.tsx
index 1cbc9d57..a1bab656 100644
--- a/services/frontend/src/components/ambient/ambient-context.tsx
+++ b/services/frontend/src/components/ambient/ambient-context.tsx
@@ -12,11 +12,14 @@ import { AmbientCanvas } from "./ambient-canvas";
 
 export type SignalTone = "signal" | "amber" | "vermilion";
 
-/** sRGB triplets for the three semantic signals (matches globals.css). */
+/**
+ * sRGB triplets for the three semantic signals — MONOCHROME build:
+ * tone is expressed as luminance/intensity, not hue (black & white theme).
+ */
 export const SIGNAL_RGB: Record<SignalTone, [number, number, number]> = {
-  signal: [0.42, 1.0, 0.52],
-  amber: [1.0, 0.76, 0.28],
-  vermilion: [1.0, 0.34, 0.28],
+  signal: [0.92, 0.94, 0.96], // nominal — near-white
+  amber: [0.62, 0.64, 0.68], // warn — mid grey
+  vermilion: [0.78, 0.8, 0.84], // danger — bright flash grey
 };
 
 export interface AmbientState {
diff --git a/services/frontend/src/components/shell/mobile-nav.tsx b/services/frontend/src/components/shell/mobile-nav.tsx
index 04ba5b4e..70a5b66b 100644
--- a/services/frontend/src/components/shell/mobile-nav.tsx
+++ b/services/frontend/src/components/shell/mobile-nav.tsx
@@ -24,16 +24,25 @@ export function MobileNav() {
             aria-label={item.label}
             aria-current={active ? "page" : undefined}
             className={cn(
-              "relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
+              "game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
               active
-                ? "bg-signal/15 text-signal"
-                : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+                ? "is-active text-white"
+                : "text-ink-faint hover:text-ink-soft",
             )}
           >
             {active && (
-              <span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
+              <span
+                aria-hidden="true"
+                className="absolute inset-x-4 top-0 h-[2px] bg-white shadow-[0_0_8px_var(--color-signal-glow)]"
+              />
             )}
-            <item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
+            <span className="game-sweep" aria-hidden="true">
+              <i />
+            </span>
+            <item.icon
+              className="relative z-10 size-[20px]"
+              strokeWidth={active ? 2.4 : 2}
+            />
             {item.label}
           </Link>
         );
diff --git a/services/frontend/src/components/shell/nav-rail.tsx b/services/frontend/src/components/shell/nav-rail.tsx
index 59cf9bc8..ec752bb0 100644
--- a/services/frontend/src/components/shell/nav-rail.tsx
+++ b/services/frontend/src/components/shell/nav-rail.tsx
@@ -9,30 +9,37 @@ function NavItem({
   label,
   active,
   Icon,
+  index,
 }: {
   href: string;
   label: string;
   active: boolean;
   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  index: number;
 }) {
   return (
     <a
       href={href}
       aria-label={label}
       aria-current={active ? "page" : undefined}
+      style={{ "--i": index } as React.CSSProperties}
       className={cn(
-        "group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
+        "game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
         active
-          ? "bg-signal/15 text-signal"
+          ? "is-active bg-white/10 text-white"
           : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
       )}
     >
-      {active && (
-        <span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
-      )}
-      <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
+      {active && <span className="game-marker -left-3.5" />}
+      <span className="game-sweep" aria-hidden="true">
+        <i />
+      </span>
+      <Icon
+        className="relative z-10 size-[18px]"
+        strokeWidth={active ? 2.4 : 2}
+      />
       {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
         {label}
       </span>
     </a>
@@ -46,11 +53,12 @@ export function NavRail() {
   return (
     <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
       <div className="flex flex-1 flex-col gap-1">
-        {navItems.map((item) => (
+        {navItems.map((item, i) => (
           <NavItem
             key={item.href}
             href={item.href}
             label={item.label}
+            index={i}
             active={isActivePath(path, item.matchPrefix)}
             Icon={item.icon}
           />