feat: add new pages and layout components for improved navigation and structure

- Added AppLayout component to standardize page layout with breadcrumb support.
- Introduced AppSidebar for navigation with user-specific links and admin options.
- Created new pages: SoundsPage, PlaylistsPage, ExtractionsPage, UsersPage, and SettingsPage.
- Removed obsolete SocketStatus component and replaced it with SocketBadge for connection status.
- Updated DashboardPage to utilize the new layout and sidebar components.
- Added NavGroup and NavItem components for better organization of sidebar navigation.
- Included SocketBadge to display real-time connection status.
- Updated package.json to include vitest and coverage-v8 for testing and coverage reporting.

src/components/AppSidebar.tsx

@@ -0,0 +1,58 @@
+import { 
+  Home, 
+  Music, 
+  Users, 
+  Settings, 
+  Download,
+  PlayCircle
+} from 'lucide-react'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from '@/components/ui/sidebar'
+import { NavGroup } from './nav/NavGroup'
+import { NavItem } from './nav/NavItem'
+import { UserNav } from './nav/UserNav'
+import { useAuth } from '@/contexts/AuthContext'
+
+export function AppSidebar() {
+  const { user, logout } = useAuth()
+
+  if (!user) return null
+
+  return (
+    <Sidebar variant="sidebar" collapsible="icon">
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-2 py-2">
+          <Music className="h-6 w-6" />
+          <span className="font-semibold text-lg group-data-[collapsible=icon]:hidden">Soundboard</span>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <NavGroup label="Application">
+          <NavItem href="/" icon={Home} title="Dashboard" />
+          <NavItem href="/sounds" icon={Music} title="Sounds" />
+          <NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
+          <NavItem href="/extractions" icon={Download} title="Extractions" />
+        </NavGroup>
+
+        {user.role === "admin" && (
+          <NavGroup label="Admin">
+            <NavItem href="/admin/users" icon={Users} title="Users" />
+            <NavItem href="/admin/settings" icon={Settings} title="Settings" />
+          </NavGroup>
+        )}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <UserNav user={user} logout={logout} />
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}