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

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>
   );
 }