feat: add Sequencer navigation item to AppSidebar and wrap SequencerPage in AppLayout for improved structure

src/components/AppSidebar.tsx

@@ -15,6 +15,7 @@ import {
   PlayCircle,
   Settings,
   Users,
+  AudioLines,
 } from 'lucide-react'
 import { CreditsNav } from './nav/CreditsNav'
 import { NavGroup } from './nav/NavGroup'
@@ -48,6 +49,7 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
           <NavItem href="/" icon={Home} title="Dashboard" />
           <NavItem href="/sounds" icon={Music} title="Sounds" />
           <NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
+          <NavItem href="/sequencer" icon={AudioLines} title="Sequencer" />
           <NavItem href="/extractions" icon={Download} title="Extractions" />
           <NavItem href="/schedulers" icon={CalendarClock} title="Schedulers" />
         </NavGroup>

src/pages/SequencerPage.tsx

@@ -1,12 +1,9 @@
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Slider } from '@/components/ui/slider'
 import { TrackControls } from '@/components/sequencer/TrackControls'
 import { TimelineControls } from '@/components/sequencer/TimelineControls'
 import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
 import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
-import { DndContext, DragEndEvent, DragStartEvent, DragOverEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
+import { AppLayout } from '@/components/AppLayout'
-import { Play, Square, RotateCcw } from 'lucide-react'
+import { DndContext, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
 import { useState, useRef, useCallback, useEffect } from 'react'
 
 export interface Track {
@@ -288,14 +285,17 @@ export function SequencerPage() {
   }, [state.isPlaying, state.duration])
 
   return (
-    <div className="h-screen flex flex-col bg-background">
+    <AppLayout 
-      {/* Header */}
+      breadcrumb={{
-      <div className="flex items-center justify-between p-4 border-b">
+        items: [
-        <h1 className="text-2xl font-bold">Sequencer</h1>
+          { label: 'Home', href: '/' },
-      </div>
+          { label: 'Sequencer' }
-
+        ]
-      {/* Main Content */}
+      }}
-      <div className="flex-1 flex overflow-hidden">
+    >
+      <div className="h-[calc(100vh-8rem)] flex flex-col">
+        {/* Main Content */}
+        <div className="flex-1 flex overflow-hidden">
         <DndContext
           sensors={sensors}
           onDragStart={handleDragStart}
@@ -353,7 +353,8 @@ export function SequencerPage() {
             </div>
           </div>
         </DndContext>
+        </div>
       </div>
-    </div>
+    </AppLayout>
   )
 }