feat: enhance MessagesPanel with improved UI components and functionality

- Refactored MessagesPanel to utilize new UI components such as Avatar, Badge, Button, Card, Dialog, Input, Progress, ScrollArea, Select, Skeleton, and Tabs.
- Improved error handling and loading states with enhanced user feedback.
- Updated message rendering logic to support new design patterns and animations.
- Added support for image previews and improved layout for message details.
- Enhanced mobile responsiveness with useIsMobile hook adjustments.
- Cleaned up utility functions for better readability and consistency.

services/frontend/src/components/layout/header.tsx

@@ -1,7 +1,16 @@
 "use client";
 
-import { AlertCircle, Moon, Sun, Wifi, WifiOff } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function Header() {
@@ -21,48 +30,82 @@ export function Header() {
     document.documentElement.classList.add(next);
   };
 
+  const statusVariant =
+    status === "connected"
+      ? "default"
+      : status === "connecting"
+        ? "secondary"
+        : "destructive";
+
+  const statusLabel =
+    status === "connected"
+      ? "Connected"
+      : status === "connecting"
+        ? "Connecting"
+        : status === "error"
+          ? "Error"
+          : "Disconnected";
+
   return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background px-4 md:px-6">
+    <header className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 md:px-6">
+      <SidebarTrigger className="-ml-1 size-8 text-muted-foreground hover:text-foreground" />
+
       <div className="flex-1" />
 
       {/* Connection status */}
-      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-        {status === "connected" ? (
-          <>
-            <Wifi className="size-3 text-green-500" />
-            <span className="hidden sm:inline">Connected</span>
-          </>
-        ) : status === "connecting" ? (
-          <>
-            <Wifi className="size-3 text-yellow-500" />
-            <span className="hidden sm:inline">Connecting</span>
-          </>
-        ) : status === "error" ? (
-          <>
-            <AlertCircle className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Error</span>
-          </>
-        ) : (
-          <>
-            <WifiOff className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Disconnected</span>
-          </>
-        )}
-      </div>
+      <Tooltip>
+        <TooltipTrigger>
+          <span>
+            <Badge
+              variant={statusVariant}
+              className="gap-1.5 px-2.5 py-1 cursor-default select-none"
+            >
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  status === "connected" &&
+                    "bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
+                  status === "connecting" && "bg-yellow-500 animate-pulse",
+                  (status === "disconnected" || status === "error") &&
+                    "bg-destructive",
+                )}
+              />
+              <span className="hidden sm:inline text-xs">{statusLabel}</span>
+            </Badge>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>WebSocket: {statusLabel}</p>
+        </TooltipContent>
+      </Tooltip>
 
       {/* Theme toggle */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={toggleTheme}
-        className="inline-flex size-8 items-center justify-center rounded-lg border hover:bg-muted transition-colors"
         aria-label="Toggle theme"
+        className="size-8"
       >
-        {theme === "dark" ? (
-          <Sun className="size-4" />
-        ) : (
-          <Moon className="size-4" />
-        )}
-      </button>
+        <div className="relative size-4">
+          <Sun
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-0 rotate-90 scale-75"
+                : "opacity-100 rotate-0 scale-100",
+            )}
+          />
+          <Moon
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-100 rotate-0 scale-100"
+                : "opacity-0 -rotate-90 scale-75",
+            )}
+          />
+        </div>
+      </Button>
     </header>
   );
 }

services/frontend/src/components/layout/mobile-tab-bar.tsx

@@ -2,30 +2,41 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";
 
 export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t bg-background">
+    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-lg">
       <div className="flex">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => {
-              const params = new URLSearchParams(searchParams.toString());
-              params.set("tab", id);
-              router.push(`/dashboard?${params}`);
-            }}
-            data-active={activeTab === id ? "" : undefined}
-            className="flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium text-muted-foreground data-[active]:text-primary transition-colors"
-          >
-            <Icon className="size-5" />
-            {label}
-          </button>
-        ))}
+        {tabs.map(({ id, label, icon: Icon }) => {
+          const isActive = activeTab === id;
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => {
+                const params = new URLSearchParams(searchParams.toString());
+                params.set("tab", id);
+                router.push(`/dashboard?${params}`);
+              }}
+              className={cn(
+                "flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
+                isActive
+                  ? "text-sky-400"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" />
+              <span>{label}</span>
+              {isActive && (
+                <span className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" />
+              )}
+            </button>
+          );
+        })}
       </div>
     </nav>
   );

services/frontend/src/components/layout/sidebar.tsx

@@ -1,12 +1,29 @@
 "use client";
 
-import { Radio } from "lucide-react";
+import { type LucideIcon, Radio } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  Sidebar as SidebarPrimitive,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
 
 export function Sidebar({ activeTab }: { activeTab: TabId }) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { state } = useSidebar();
+  const { status } = useWebSocket();
+  const collapsed = state === "collapsed";
 
   const handleTabClick = (tabId: TabId) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -14,29 +31,111 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
     router.push(`/dashboard?${params}`);
   };
 
-  return (
-    <aside className="hidden md:flex md:w-56 md:flex-col md:fixed md:inset-y-0 border-r bg-sidebar">
-      <div className="flex h-14 items-center gap-2 border-b px-4">
-        <div className="size-7 rounded-full bg-primary/10 flex items-center justify-center">
-          <Radio className="size-4 text-primary" />
-        </div>
-        <span className="font-semibold text-sm">Bete</span>
-      </div>
+  const connectionLabel = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error",
+  }[status];
 
-      <nav className="flex-1 space-y-1 p-3">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => handleTabClick(id)}
-            data-active={activeTab === id ? "" : undefined}
-            className="w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground"
-          >
-            <Icon className="size-4 shrink-0" />
-            {label}
-          </button>
-        ))}
-      </nav>
-    </aside>
+  const connectionColor = {
+    connected: "bg-green-500",
+    connecting: "bg-yellow-500",
+    disconnected: "bg-destructive",
+    error: "bg-destructive",
+  }[status];
+
+  return (
+    <SidebarPrimitive variant="sidebar" collapsible="icon">
+      <SidebarHeader className="border-b border-sidebar-border/50">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              size="lg"
+              className="group-data-[collapsible=icon]:!p-0"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-sidebar-primary-foreground">
+                <Radio className="size-4" />
+              </div>
+              <div
+                className={cn(
+                  "flex flex-col gap-0.5 leading-none",
+                  collapsed && "hidden",
+                )}
+              >
+                <span className="text-base font-bold tracking-tight">
+                  <span className="text-gradient">Bete</span>
+                </span>
+                <span className="text-[10px] text-muted-foreground tracking-widest uppercase">
+                  Dashboard
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {tabs.map(({ id, label, icon: Icon }) => {
+                const isActive = activeTab === id;
+                return (
+                  <SidebarMenuItem key={id}>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      onClick={() => handleTabClick(id)}
+                      tooltip={collapsed ? label : undefined}
+                      className={cn(
+                        "relative transition-all duration-200",
+                        isActive &&
+                          "bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-4 transition-all duration-200",
+                          isActive && "text-sky-400 scale-110",
+                        )}
+                      />
+                      <span>{label}</span>
+                      {isActive && (
+                        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
+                      )}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border/50 p-3">
+        <div className="flex items-center gap-2">
+          <span className="relative flex size-2 shrink-0">
+            <span
+              className={cn(
+                "absolute inline-flex size-full rounded-full opacity-75",
+                connectionColor,
+                status === "connected" && "animate-ping",
+              )}
+            />
+            <span
+              className={cn(
+                "relative inline-flex size-2 rounded-full",
+                connectionColor,
+              )}
+            />
+          </span>
+          {!collapsed && (
+            <span className="text-xs text-muted-foreground truncate">
+              {connectionLabel}
+            </span>
+          )}
+        </div>
+      </SidebarFooter>
+    </SidebarPrimitive>
   );
 }