From 74dfec2e29ee78c111d2456258ec636b60d1540a Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Wed, 3 Sep 2025 15:30:46 +0200
Subject: [PATCH] feat: add Sequencer navigation item to AppSidebar and wrap
 SequencerPage in AppLayout for improved structure

---
 src/components/AppSidebar.tsx |  2 ++
 src/pages/SequencerPage.tsx   | 29 +++++++++++++++--------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 982aa95..da2e2fc 100644
--- a/src/components/AppSidebar.tsx
+++ b/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>
diff --git a/src/pages/SequencerPage.tsx b/src/pages/SequencerPage.tsx
index 099f0f4..cf4b0b2 100644
--- a/src/pages/SequencerPage.tsx
+++ b/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>
   )
 }
\ No newline at end of file