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/pages/DashboardPage.tsx

@@ -1,42 +1,22 @@
-import { useAuth } from '../contexts/AuthContext'
-import { ModeToggle } from '../components/ModeToggle'
-import { SocketStatus } from '../components/SocketStatus'
+import { AppLayout } from '@/components/AppLayout'
 
 export function DashboardPage() {
-  const { user, logout } = useAuth()
-  
   return (
-    <div className="min-h-screen">
-      <nav className="shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16 items-center">
-            <h1 className="text-xl font-semibold">Soundboard</h1>
-            <div className="flex items-center space-x-4">
-              <span className="text-sm text-gray-700 dark:text-gray-300">
-                Welcome, {user?.name}
-              </span>
-              <ModeToggle />
-              <button
-                onClick={() => logout()}
-                className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              >
-                Sign out
-              </button>
-            </div>
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/30 p-4">
+        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
+        <div className="grid gap-4">
+          <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg h-64 flex items-center justify-center">
+            <p className="text-muted-foreground">Dashboard content coming soon...</p>
           </div>
         </div>
-      </nav>
-      
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        <div className="px-4 py-6 sm:px-0">
-          <div className="space-y-6">
-            <SocketStatus />
-            <div className="border-4 border-dashed border-gray-200 dark:border-gray-700 rounded-lg h-96 flex items-center justify-center">
-              <p className="text-gray-500 dark:text-gray-400">Dashboard content coming soon...</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
+      </div>
+    </AppLayout>
   )
 }

src/pages/ExtractionsPage.tsx

@@ -0,0 +1,21 @@
+import { AppLayout } from '@/components/AppLayout'
+
+export function ExtractionsPage() {
+  return (
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard', href: '/' },
+          { label: 'Extractions' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <h1 className="text-2xl font-bold mb-4">Audio Extractions</h1>
+        <p className="text-muted-foreground">
+          Audio extraction management interface coming soon...
+        </p>
+      </div>
+    </AppLayout>
+  )
+}

src/pages/PlaylistsPage.tsx

@@ -0,0 +1,21 @@
+import { AppLayout } from '@/components/AppLayout'
+
+export function PlaylistsPage() {
+  return (
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard', href: '/' },
+          { label: 'Playlists' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <h1 className="text-2xl font-bold mb-4">Playlists</h1>
+        <p className="text-muted-foreground">
+          Playlist management interface coming soon...
+        </p>
+      </div>
+    </AppLayout>
+  )
+}

src/pages/SoundsPage.tsx

@@ -0,0 +1,21 @@
+import { AppLayout } from '@/components/AppLayout'
+
+export function SoundsPage() {
+  return (
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard', href: '/' },
+          { label: 'Sounds' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <h1 className="text-2xl font-bold mb-4">Sounds</h1>
+        <p className="text-muted-foreground">
+          Sound management interface coming soon...
+        </p>
+      </div>
+    </AppLayout>
+  )
+}

src/pages/admin/SettingsPage.tsx

@@ -0,0 +1,22 @@
+import { AppLayout } from '@/components/AppLayout'
+
+export function SettingsPage() {
+  return (
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard', href: '/' },
+          { label: 'Admin' },
+          { label: 'Settings' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <h1 className="text-2xl font-bold mb-4">System Settings</h1>
+        <p className="text-muted-foreground">
+          System administration interface coming soon...
+        </p>
+      </div>
+    </AppLayout>
+  )
+}

src/pages/admin/UsersPage.tsx

@@ -0,0 +1,22 @@
+import { AppLayout } from '@/components/AppLayout'
+
+export function UsersPage() {
+  return (
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Dashboard', href: '/' },
+          { label: 'Admin' },
+          { label: 'Users' }
+        ]
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <h1 className="text-2xl font-bold mb-4">User Management</h1>
+        <p className="text-muted-foreground">
+          User administration interface coming soon...
+        </p>
+      </div>
+    </AppLayout>
+  )
+}