style(frontend): refactor UI components with rounded corners, light theme, and design polish

services/frontend/src/widgets/DashboardLayout.tsx

@@ -1,8 +1,11 @@
+import { motion } from "framer-motion";
 import type { ReactNode } from "react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { VoiceStatus } from "../shared/api/client";
+import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
 import type { WsStatus } from "../shared/ws/socket";
 import { Header } from "./Header";
+import { ParticleBackground } from "./particles/ParticleBackground";
 import { Sidebar } from "./Sidebar";
 
 interface DashboardLayoutProps {
@@ -21,8 +24,11 @@ export function DashboardLayout({
   children,
 }: DashboardLayoutProps) {
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <div className="flex min-h-screen">
+    <div className="relative min-h-screen bg-background text-foreground">
+      {/* Sakura particle layer */}
+      <ParticleBackground />
+
+      <div className="relative flex min-h-screen">
         <Sidebar activeTab={activeTab} onTabChange={onTabChange} />
         <main className="flex min-w-0 flex-1 flex-col">
           <Header
@@ -30,9 +36,16 @@ export function DashboardLayout({
             wsStatus={wsStatus}
             voiceStatus={voiceStatus}
           />
-          <div className="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
+          <motion.main
+            key={activeTab}
+            variants={fadeSlideUp}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            className="flex-1 overflow-auto p-4 md:p-6 lg:p-8"
+          >
             {children}
-          </div>
+          </motion.main>
         </main>
       </div>
     </div>

services/frontend/src/widgets/Header.tsx

@@ -1,6 +1,9 @@
+import { motion } from "framer-motion";
 import { Wifi, WifiOff } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { VoiceStatus } from "../shared/api/client";
+import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
+import { cn } from "../shared/lib/utils";
 import { Badge } from "../shared/ui";
 import type { WsStatus } from "../shared/ws/socket";
 
@@ -22,14 +25,59 @@ interface HeaderProps {
   voiceStatus: VoiceStatus;
 }
 
+/** Dot indicator colour for WS badge */
+function wsDotColor(status: WsStatus): string {
+  switch (status) {
+    case "connected":
+      return "bg-emerald-400";
+    case "error":
+      return "bg-red-400";
+    case "connecting":
+    case "disconnected":
+      return "bg-gray-400";
+  }
+}
+
+function WsIndicator({ status }: { status: WsStatus }) {
+  const dot = wsDotColor(status);
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium capitalize">{status}</span>
+    </div>
+  );
+}
+
+/** Voice status indicator dot */
+function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
+  const isConnected = voiceStatus.connected;
+  const dot = isConnected ? "bg-[#7EC8E3]" : "bg-gray-300";
+  const label = isConnected
+    ? voiceStatus.activeChannelName || "connected"
+    : "idle";
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium">{label}</span>
+    </div>
+  );
+}
+
 export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-10 border-b border-border bg-background/80 px-4 py-4 backdrop-blur md:px-8">
+    <header className="sticky top-0 z-10 border-b border-[#7EC8E3]/20 bg-white/70 px-4 py-4 backdrop-blur-md md:px-8">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="flex items-center gap-3">
+        {/* Left: animated tab title + subtitle */}
+        <motion.div
+          key={activeTab}
+          variants={fadeSlideUp}
+          initial="initial"
+          animate="animate"
+          className="flex items-center gap-3"
+        >
           <div>
             <h1 className="text-xl font-bold tracking-tight">
-              <span className="text-primary">GMW</span>
+              <span className="text-[#7EC8E3]">GMW</span>
               <span className="mx-2 text-muted-foreground">·</span>
               {titles[activeTab]}
             </h1>
@@ -37,29 +85,34 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
               {subtitles[activeTab]}
             </p>
           </div>
-        </div>
-        <div className="flex flex-wrap gap-2">
+        </motion.div>
+
+        {/* Right: status badges */}
+        <div className="flex flex-wrap items-center gap-2">
+          {/* WS Badge */}
           <Badge
-            variant={
-              wsStatus === "connected"
-                ? "success"
-                : wsStatus === "error"
-                  ? "destructive"
-                  : "warning"
-            }
+            variant="outline"
+            className="border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs text-muted-foreground"
           >
             {wsStatus === "connected" ? (
-              <Wifi className="mr-1 h-3 w-3" />
+              <Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
             ) : (
-              <WifiOff className="mr-1 h-3 w-3" />
+              <WifiOff className="mr-1.5 h-3 w-3 text-red-400" />
             )}
-            WebSocket {wsStatus}
+            <WsIndicator status={wsStatus} />
           </Badge>
-          <Badge variant={voiceStatus.connected ? "success" : "secondary"}>
-            Voice{" "}
-            {voiceStatus.connected
-              ? voiceStatus.activeChannelName || "connected"
-              : "idle"}
+
+          {/* Voice Badge */}
+          <Badge
+            variant="outline"
+            className={cn(
+              "border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs",
+              voiceStatus.connected
+                ? "text-[#7EC8E3]"
+                : "text-muted-foreground",
+            )}
+          >
+            <VoiceIndicator voiceStatus={voiceStatus} />
           </Badge>
         </div>
       </div>

services/frontend/src/widgets/Sidebar.tsx

@@ -1,7 +1,8 @@
+import { motion } from "framer-motion";
 import { BarChart3, MessageSquare, Radio } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import { cn } from "../shared/lib/utils";
-import { Button } from "../shared/ui";
+import { ChibiMascot } from "./mascot/ChibiMascot";
 
 const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
   [
@@ -16,62 +17,69 @@ interface SidebarProps {
   collapsed?: boolean;
 }
 
-export function Sidebar({ activeTab, onTabChange, collapsed }: SidebarProps) {
+export function Sidebar({
+  activeTab,
+  onTabChange,
+  collapsed = true,
+}: SidebarProps) {
   return (
-    <aside
+    <motion.nav
       className={cn(
-        "hidden shrink-0 border-r border-border bg-card/60 p-5 backdrop-blur transition-all duration-300 md:block",
+        "hidden shrink-0 flex-col border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
         collapsed ? "w-16" : "w-64",
       )}
+      layout
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
     >
+      {/* App icon only — no branding text */}
       <div
         className={cn(
-          "mb-8 flex items-center gap-3",
-          collapsed && "justify-center",
+          "flex items-center py-5",
+          collapsed ? "justify-center" : "px-4",
         )}
       >
-        {!collapsed && (
-          <div>
-            <div className="flex items-baseline gap-2">
-              <img
-                src="/logo.svg"
-                alt="GMW"
-                className="h-10 w-10 rounded-2xl"
-              />
-              <span className="font-bold tracking-tight text-primary text-lg">
-                GMW
-              </span>
-            </div>
-            <div className="text-xs text-muted-foreground">
-              Discord Moderation Watcher
-            </div>
-          </div>
-        )}
-        {collapsed && (
-          <img src="/logo.svg" alt="GMW" className="h-9 w-9 rounded-xl" />
-        )}
+        <img src="/logo.svg" alt="GMW" className="h-8 w-8 rounded-xl" />
       </div>
-      <nav className="space-y-2">
+
+      {/* Navigation items */}
+      <div className="flex flex-col gap-1 px-2">
         {navItems.map((item) => {
           const Icon = item.icon;
+          const isActive = activeTab === item.id;
           return (
-            <Button
+            <button
               key={item.id}
-              variant={activeTab === item.id ? "secondary" : "ghost"}
-              className={cn(
-                "w-full justify-start",
-                activeTab === item.id && "bg-primary/15 text-primary",
-                collapsed && "justify-center px-0",
-              )}
               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",
+                collapsed ? "justify-center" : "gap-3",
+                isActive
+                  ? "bg-primary-soft text-primary ring-2 ring-primary/20"
+                  : "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
+              )}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform =
+                  "translateX(2px) scale(1.1)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = "translateX(0) scale(1)";
+              }}
             >
-              <Icon className="h-4 w-4" />
-              {!collapsed && item.label}
-            </Button>
+              <Icon className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>{item.label}</span>}
+            </button>
           );
         })}
-      </nav>
-    </aside>
+      </div>
+
+      {/* Spacer pushes mascot to bottom */}
+      <div className="flex-1" />
+
+      {/* Chibi mascot */}
+      <div className="flex justify-center pb-4">
+        <ChibiMascot size="sm" variant="idle" />
+      </div>
+    </motion.nav>
   );
 }