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

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 { Play, Square, RotateCcw } from 'lucide-react'
+import { AppLayout } from '@/components/AppLayout'
+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">
-      {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b">
-        <h1 className="text-2xl font-bold">Sequencer</h1>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 flex overflow-hidden">
+    <AppLayout 
+      breadcrumb={{
+        items: [
+          { label: 'Home', href: '/' },
+          { label: 'Sequencer' }
+        ]
+      }}
+    >
+      <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>
   )
 }