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/AppLayout.tsx

@@ -0,0 +1,62 @@
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { AppSidebar } from './AppSidebar'
+import { Separator } from '@/components/ui/separator'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+
+interface AppLayoutProps {
+  children: React.ReactNode
+  breadcrumb?: {
+    items: Array<{
+      label: string
+      href?: string
+    }>
+  }
+}
+
+export function AppLayout({ children, breadcrumb }: AppLayoutProps) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            {breadcrumb && (
+              <Breadcrumb>
+                <BreadcrumbList>
+                  {breadcrumb.items.map((item, index) => (
+                    <div key={item.label} className="flex items-center gap-2">
+                      <BreadcrumbItem>
+                        {item.href && index < breadcrumb.items.length - 1 ? (
+                          <BreadcrumbLink href={item.href}>
+                            {item.label}
+                          </BreadcrumbLink>
+                        ) : (
+                          <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                        )}
+                      </BreadcrumbItem>
+                      {index < breadcrumb.items.length - 1 && (
+                        <BreadcrumbSeparator />
+                      )}
+                    </div>
+                  ))}
+                </BreadcrumbList>
+              </Breadcrumb>
+            )}
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          {children}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}