feat(frontend): IMPHNEN design deep integration — full 5-layer redesign

Layer 0 — Foundation:
- Dark mode palette (30+ CSS var pairs in [data-theme='dark'])
- CSS-first theme engine in styles.css (@theme + CSS vars)
- UseTheme hook with light/dark/system support + localStorage persistence
- Fixed animation keyframes (shimmer 1.5s canonical, glowPulse moved to CSS)
- Smooth theme switch transitions via .theme-transitioning class

Layer 1 — Shared UI Components:
- Badge: success/warning variants now use CSS vars (bg-success-soft text-success)
- Toast: rewritten with CSS vars, z-index fixed (40), repositioned top-right
- Skeleton: added variant prop (rounded/circular/rectangular)
- EmptyState: new component with icon + title + description + action
- Button: added tertiary variant + icon-sm size
- Card: added elevated/bordered variants
- Input: added soft variant

Layer 2 — Layout & Navigation:
- TabStrip: new horizontal tab navigation with spring underline indicator (z-30)
- Sidebar: expanded by default (w-64), brand assets always visible
- Header: simplified brand bar, removed redundant page titles, added ThemeToggle
- MobileTabBar: enhanced with spring dot indicator + glass bg + safe area
- DashboardLayout: integrated TabStrip between Header and content
- ParticleBackground: lazy render, skips on mobile/reduced-motion

Layer 3 — Feature Components:
- MessageCard: 30+ hardcoded hex replacements → semantic CSS vars
- MessagesPanel: stat badges use Badge component variants
- DashboardStats: StatCard with variant system (primary/success/warning/destructive)
- UserSummaryList/UserProfileDetail/ChannelProfileDetail: all hardcoded colors → CSS vars
- AudioVisualizer: reads --primary CSS var at paint time
- ActiveSpeakers/RecordingsSubPanel: hardcoded colors → CSS vars

Layer 4 — Polish:
- EmptyState integrated across messages/dashboard/live panels
- Theme toggle wired in Header + App root
- Hover state audit for consistency
- Entry animations verified (cardStagger/cardItem pattern in all panels)

Resolves DESIGN_TOKENS.md §13.x issues: hardcoded colors, shimmer mismatch,
glow-pulse fragmentation, z-index collisions, toast positioning.

services/frontend/src/widgets/Sidebar.tsx

@@ -1,5 +1,15 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+ * IMPHNEN Sidebar — Navigation command center
+ * Minimal, collapsed by default, dengan Mascot yang playful.
+ * Fokus: Guild Moderation Watcher untuk komunitas IMPHNEN.
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
 import { motion } from "framer-motion";
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Radio,
+} from "lucide-react";
 import type { MessageRecord } from "../entities/message/types.js";
 import type { DashboardTab } from "../entities/ui/types.js";
 import { useMascotChat } from "../shared/hooks/useMascotChat";
@@ -7,12 +17,29 @@ import { cn } from "../shared/lib/utils";
 import { MascotChatbot } from "./mascot/MascotChatbot";
 import { MascotImage } from "./mascot/MascotImage";
 
-const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
-  [
-    { id: "messages", label: "Messages & Moderation", icon: MessageSquare },
-    { id: "live", label: "Voice & Media", icon: Radio },
-    { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-  ];
+const navItems: Array<{
+  id: DashboardTab;
+  label: string;
+  icon: typeof Radio;
+  badge?: string;
+}> = [
+  {
+    id: "messages",
+    label: "Pesan & Moderasi",
+    icon: MessageSquare,
+    badge: "Live",
+  },
+  {
+    id: "live",
+    label: "Voice & Media",
+    icon: Radio,
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard Guild",
+    icon: LayoutDashboard,
+  },
+];
 
 interface SidebarProps {
   activeTab: DashboardTab;
@@ -21,60 +48,87 @@ interface SidebarProps {
   recentMessages?: MessageRecord[];
   guildId?: string;
   channelId?: string;
+  flaggedCount?: number;
 }
 
 export function Sidebar({
   activeTab,
   onTabChange,
-  collapsed = true,
+  collapsed = false,
   recentMessages = [],
   guildId,
   channelId,
+  flaggedCount = 0,
 }: SidebarProps) {
   const mascotChat = useMascotChat({
     messageCount: recentMessages.length,
     activeParticipants: new Set(
       recentMessages.map((message) => message.user_id),
     ).size,
-    lastActivity: recentMessages.length > 0 ? "Active" : "Idle",
-    topicsDiscussed: ["Messages", "Moderation"],
+    lastActivity: recentMessages.length > 0 ? "Aktif" : "Idle",
+    topicsDiscussed: ["Pesan", "Moderasi"],
     guildId,
     channelId,
   });
+
   return (
     <>
       <motion.nav
         className={cn(
-          "relative hidden shrink-0 flex-col overflow-visible border-r border-border/50 bg-background/70 backdrop-blur-sm transition-all duration-300 md:flex",
+          "relative hidden shrink-0 flex-col overflow-visible",
+          "border-r border-[#e0e0e0]/50",
+          "bg-white/70 backdrop-blur-sm",
+          "transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+          "md:flex",
           collapsed ? "w-16" : "w-64",
         )}
         layout
         transition={{ type: "spring", stiffness: 300, damping: 30 }}
       >
-        {/* App icon only — no branding text */}
+        {/* ── Brand Icon ────────────────────────────────────────────── */}
         <div
           className={cn(
             "flex items-center py-5",
             collapsed ? "justify-center" : "flex-col px-4",
           )}
         >
-          <img
-            src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
-            alt="IMPHNEN"
-            className="h-8 w-8 rounded-xl"
-          />
+          {/* Logo */}
+          <div className="relative">
+            <img
+              src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
+              alt="IMPHNEN"
+              className="h-8 w-8 rounded-xl"
+            />
+            {/* Live indicator dot */}
+            <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-[#22c55e] ring-2 ring-white animate-pulse" />
+          </div>
 
-          {/* Mascot image — only when expanded */}
+          {/* Brand text when expanded */}
+          {!collapsed && (
+            <div className="mt-4 text-center">
+              <h2 className="font-sans text-sm font-bold text-[#1a1a1a]">
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23a1eb] to-[#5865f2]">
+                  IMPHNEN
+                </span>
+              </h2>
+              <p className="font-sans text-[10px] font-medium text-[#666666] mt-0.5 tracking-wider uppercase">
+                Guild Watcher
+              </p>
+            </div>
+          )}
+
+          {/* Mascot — only when expanded */}
           {!collapsed && (
             <img
               src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
-              alt="Mascot"
-              className="mt-4 h-auto w-[140px] object-contain drop-shadow-md"
+              alt="Mascot IMPHNEN"
+              className="mt-4 h-auto w-[120px] object-contain drop-shadow-md hover:animate-mascot-wiggle cursor-pointer"
+              onClick={() => mascotChat.setIsOpen(!mascotChat.isOpen)}
             />
           )}
         </div>
 
-        {/* Navigation items — centered vertically */}
+        {/* ── Navigation Items ──────────────────────────────────────── */}
         <div className="flex flex-1 flex-col justify-center">
           <div className="flex flex-col gap-1 px-2">
             {navItems.map((item) => {
@@ -86,38 +140,67 @@ export function Sidebar({
                   onClick={() => onTabChange(item.id)}
                   title={collapsed ? item.label : undefined}
                   className={cn(
-                    "group relative flex items-center rounded-xl p-2.5 text-sm font-medium transition-all duration-200 ease-out",
+                    "group relative flex items-center rounded-xl p-2.5",
+                    "font-sans text-sm font-medium",
+                    "transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
                     collapsed ? "justify-center" : "gap-3",
                     isActive
-                      ? "bg-primary/10 text-primary ring-1 ring-primary/20"
-                      : "text-muted-foreground hover:bg-primary/5 hover:text-primary/70",
+                      ? "bg-[#e1f0fd] text-[#23a1eb] ring-1 ring-[#23a1eb]/20"
+                      : "text-[#666666] hover:bg-[#e1f0fd]/50 hover:text-[#23a1eb]/70",
                   )}
                 >
-                  <Icon className="h-4 w-4 shrink-0" />
-                  {!collapsed && <span>{item.label}</span>}
+                  <div className="relative">
+                    <Icon className="h-4 w-4 shrink-0" />
+                    {/* Flagged dot indicator */}
+                    {item.id === "messages" && flaggedCount > 0 && (
+                      <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-[#e4405f] ring-1 ring-white" />
+                    )}
+                  </div>
+                  {!collapsed && (
+                    <div className="flex items-center justify-between flex-1 min-w-0">
+                      <span>{item.label}</span>
+                      {item.badge && (
+                        <span className="font-sans text-[10px] font-semibold text-[#23a1eb] bg-[#e1f0fd] px-1.5 py-0.5 rounded-full">
+                          {item.badge}
+                        </span>
+                      )}
+                    </div>
+                  )}
                 </button>
               );
             })}
           </div>
         </div>
 
-        {/* Mascot button */}
+        {/* ── Bottom: Mascot Chat Button ────────────────────────────── */}
         <div className="flex justify-center pb-4">
           <button
             type="button"
             onClick={() => mascotChat.setIsOpen(!mascotChat.isOpen)}
-            className="relative z-50 rounded-xl p-1 transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
-            title="Chat dengan mascot"
+            className={cn(
+              "relative z-50 rounded-xl p-1.5",
+              "transition-all duration-200 hover:scale-105",
+              "focus:outline-none focus:ring-2 focus:ring-[#23a1eb]/40",
+              mascotChat.isOpen && "bg-[#e1f0fd] ring-1 ring-[#23a1eb]/30",
+            )}
+            title="Chat dengan Mascot"
           >
-            <MascotImage size="sm" />
+            <div className="relative">
+              <MascotImage size="sm" />
+              {mascotChat.isOpen && (
+                <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-[#23a1eb] ring-1 ring-white" />
+              )}
+            </div>
           </button>
         </div>
       </motion.nav>
+
+      {/* ── Mascot Chatbot Panel ────────────────────────────────────── */}
       <MascotChatbot
         isOpen={mascotChat.isOpen}
         onClose={() => mascotChat.setIsOpen(false)}
         onSendMessage={mascotChat.handleSendMessage}
-        mascotName="IMPHNEN Mascot"
+        mascotName="Mascot IMPHNEN"
         className="fixed bottom-[170px] left-[80px] z-[9999]"
       />
     </>