feat: add recordings, settings, and voice pages with WebSocket integration

- Implemented RecordingsPage to display and manage voice recordings with live updates via WebSocket.
- Created SettingsPage for user preferences, including theme toggling and server configuration display.
- Developed VoicePage for managing voice connections, including guild and channel selection, and active speaker display.
- Introduced GuildSelector component for selecting Discord guilds with error handling and loading states.
- Added utility functions for formatting numbers and bytes, and safely parsing JSON.
- Established navigation structure for the dashboard with relevant links for new features.

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

@@ -1,7 +1,9 @@
 "use client";
 
 import { Moon, Sun } from "lucide-react";
+import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { SidebarTrigger } from "@/components/ui/sidebar";
@@ -10,11 +12,32 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
+function usePageTitle(): string {
+  const pathname = usePathname();
+
+  // Exact match first, then prefix match
+  const item = navItems.find((n) => {
+    if (n.matchPrefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(n.matchPrefix);
+  });
+
+  if (item) return item.label;
+
+  // Fallback: derive from pathname
+  const segment = pathname.split("/").filter(Boolean)[0];
+  if (segment) {
+    return segment.charAt(0).toUpperCase() + segment.slice(1);
+  }
+  return "Dashboard";
+}
+
 export function Header() {
   const { status } = useWebSocket();
+  const pageTitle = usePageTitle();
   const [theme, setTheme] = useState<"light" | "dark">("dark");
 
   useEffect(() => {
@@ -50,6 +73,8 @@ export function Header() {
     <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" />
 
+      <h1 className="text-sm font-semibold hidden sm:block">{pageTitle}</h1>
+
       <div className="flex-1" />
 
       {/* Connection status */}

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

@@ -1,40 +1,41 @@
 "use client";
 
-import { useRouter, useSearchParams } from "next/navigation";
-import { type TabId, tabs } from "@/lib/tabs";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { mobileNavItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
-export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
+export function MobileTabBar() {
+  const pathname = usePathname();
+
+  const isActive = (matchPrefix: string) => {
+    if (matchPrefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(matchPrefix);
+  };
 
   return (
     <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 }) => {
-          const isActive = activeTab === id;
+        {mobileNavItems.map(({ href, label, icon: Icon, matchPrefix }) => {
+          const active = isActive(matchPrefix);
           return (
-            <button
-              key={id}
-              type="button"
-              onClick={() => {
-                const params = new URLSearchParams(searchParams.toString());
-                params.set("tab", id);
-                router.push(`/dashboard?${params}`);
-              }}
+            <Link
+              key={href}
+              href={href}
               className={cn(
                 "flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
-                isActive
+                active
                   ? "text-sky-400"
                   : "text-muted-foreground hover:text-foreground",
               )}
             >
               <Icon className="size-5" />
               <span>{label}</span>
-              {isActive && (
+              {active && (
                 <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>
+            </Link>
           );
         })}
       </div>

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

@@ -1,7 +1,8 @@
 "use client";
 
-import { type LucideIcon, Radio } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Radio } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+
 import {
   SidebarContent,
   SidebarFooter,
@@ -14,21 +15,20 @@ import {
   Sidebar as SidebarPrimitive,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { type TabId, tabs } from "@/lib/tabs";
+import { navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
-export function Sidebar({ activeTab }: { activeTab: TabId }) {
+export function Sidebar() {
+  const pathname = usePathname();
   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());
-    params.set("tab", tabId);
-    router.push(`/dashboard?${params}`);
+  const isActive = (matchPrefix: string) => {
+    if (matchPrefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(matchPrefix);
   };
 
   const connectionLabel = {
@@ -53,6 +53,7 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
             <SidebarMenuButton
               size="lg"
               className="group-data-[collapsible=icon]:!p-0"
+              onClick={() => router.push("/dashboard")}
             >
               <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" />
@@ -79,28 +80,28 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {tabs.map(({ id, label, icon: Icon }) => {
-                const isActive = activeTab === id;
+              {navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
+                const active = isActive(matchPrefix);
                 return (
-                  <SidebarMenuItem key={id}>
+                  <SidebarMenuItem key={href}>
                     <SidebarMenuButton
-                      isActive={isActive}
-                      onClick={() => handleTabClick(id)}
+                      isActive={active}
                       tooltip={collapsed ? label : undefined}
                       className={cn(
                         "relative transition-all duration-200",
-                        isActive &&
+                        active &&
                           "bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
                       )}
+                      onClick={() => router.push(href)}
                     >
                       <Icon
                         className={cn(
                           "size-4 transition-all duration-200",
-                          isActive && "text-sky-400 scale-110",
+                          active && "text-sky-400 scale-110",
                         )}
                       />
                       <span>{label}</span>
-                      {isActive && (
+                      {active && (
                         <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>