feat: update dependencies and improve dashboard functionality

- Added new dependencies for Next.js and lucide-react in pnpm-workspace.yaml.
- Refactored DashboardPage component to improve readability and error handling.
- Enhanced Header component to display error status with an alert icon.
- Updated MobileTabBar and Sidebar components to use a centralized tabs definition.
- Improved ChannelsView in dashboard-panel to handle channel fetching more cleanly.
- Fixed ActiveSpeaker type to use camelCase for userId.
- Updated MessagesPanel to handle guildId checks more gracefully.
- Adjusted API calls in dashboard and messages to align with backend expectations.
- Refined type definitions across various interfaces for consistency and clarity.

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Moon, Sun, Wifi, WifiOff } from "lucide-react";
+import { AlertCircle, Moon, Sun, Wifi, WifiOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useWebSocket } from "@/lib/ws/context";
 
@@ -37,6 +37,11 @@ export function Header() {
             <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" />

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

@@ -1,18 +1,11 @@
 "use client";
 
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-const tabs = [
-  { id: "messages", label: "Messages", icon: MessageSquare },
-  { id: "live", label: "Live", icon: Radio },
-  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-] as const;
-
-type TabId = (typeof tabs)[number]["id"];
+import { useRouter, useSearchParams } from "next/navigation";
+import { type TabId, tabs } from "@/lib/tabs";
 
 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">
@@ -21,7 +14,11 @@ export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
           <button
             key={id}
             type="button"
-            onClick={() => router.push(`/dashboard?tab=${id}`)}
+            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"
           >

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

@@ -1,21 +1,17 @@
 "use client";
 
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-const tabs = [
-  { id: "messages", label: "Messages", icon: MessageSquare },
-  { id: "live", label: "Live", icon: Radio },
-  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-] as const;
-
-type TabId = (typeof tabs)[number]["id"];
+import { Radio } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { type TabId, tabs } from "@/lib/tabs";
 
 export function Sidebar({ activeTab }: { activeTab: TabId }) {
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   const handleTabClick = (tabId: TabId) => {
-    router.push(`/dashboard?tab=${tabId}`);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", tabId);
+    router.push(`/dashboard?${params}`);
   };
 
   return (