quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance SequencerPage and SequencerCanvas with drag-and-drop functionality for sound placement and improved track management

Browse Source
This commit is contained in:
JSC
2025-09-03 14:46:28 +02:00
parent 28faf9b149
commit 25eacbc85f
3 changed files with 335 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/sequencer/SequencerCanvas.tsx
View File

@@ -2,7 +2,7 @@ import { useDroppable, useDraggable } from '@dnd-kit/core'
import type { Track, PlacedSound } from '@/pages/SequencerPage'
import { Button } from '@/components/ui/button'
import { Trash2, Volume2 } from 'lucide-react'
import { useState, forwardRef, useRef } from 'react'
import { useState, forwardRef, useRef, useEffect } from 'react'
interface SequencerCanvasProps {
tracks: Track[]
@@ -11,6 +11,8 @@ interface SequencerCanvasProps {
currentTime: number
isPlaying: boolean
onScroll?: () => void
draggedItem?: any // Current dragged item from parent
dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
}
interface TrackRowProps {
@@ -19,6 +21,8 @@ interface TrackRowProps {
zoom: number
isPlaying: boolean
currentTime: number
draggedItem?: any // Current dragged item
dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
}
interface PlacedSoundItemProps {
@@ -101,7 +105,7 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
)
}
function TrackRow({ track, duration, zoom, isPlaying, currentTime }: TrackRowProps) {
function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo }: TrackRowProps) {
const totalWidth = duration * zoom
const playheadPosition = currentTime * zoom
@@ -113,23 +117,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime }: TrackRowPro
},
})
const [dragOverX, setDragOverX] = useState<number | null>(null)
const handleMouseMove = (e: React.MouseEvent) => {
if (isOver) {
const rect = e.currentTarget.getBoundingClientRect()
const x = e.clientX - rect.left
setDragOverX(x)
}
}
const handleMouseLeave = () => {
setDragOverX(null)
}
const handleRemoveSound = (soundId: string) => {
// This would typically be handled by the parent component
// For now, we'll just console.log
console.log('Remove sound:', soundId, 'from track:', track.id)
}
@@ -137,6 +125,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime }: TrackRowPro
<div className="relative" style={{ height: '80px' }}>
<div
ref={setDropRef}
id={`track-${track.id}`}
className={`
w-full h-full border-b border-border/50
relative overflow-hidden
@@ -144,8 +133,6 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime }: TrackRowPro
transition-colors
`}
style={{ minWidth: `${totalWidth}px` }}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
{/* Grid lines for time markers */}
<div className="absolute inset-0 pointer-events-none">
@@ -166,12 +153,26 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime }: TrackRowPro
))}
</div>
{/* Drop indicator */}
{isOver && dragOverX !== null && (
{/* Precise drag preview */}
{draggedItem && dragOverInfo && dragOverInfo.trackId === track.id && (
<div
className="absolute top-0 bottom-0 w-0.5 bg-primary/60 pointer-events-none z-20"
style={{ left: `${dragOverX}px` }}
/>
className="absolute top-2 bottom-2 border-2 border-dashed border-primary/60 bg-primary/10 rounded pointer-events-none z-10 flex items-center px-2"
style={{
left: `${dragOverInfo.x}px`,
width: `${Math.max(60,
draggedItem.type === 'sound'
? (draggedItem.sound.duration / 1000) * zoom
: draggedItem.duration * zoom
)}px`,
}}
>
<div className="text-xs text-primary/80 truncate font-medium">
{draggedItem.type === 'sound'
? (draggedItem.sound.name || draggedItem.sound.filename)
: draggedItem.name
}
</div>
</div>
)}
{/* Playhead */}
@@ -204,10 +205,20 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
currentTime,
isPlaying,
onScroll,
draggedItem,
dragOverInfo,
}, ref) => {
const totalWidth = duration * zoom
const timelineRef = useRef<HTMLDivElement>(null)
// Add a fallback droppable for the entire canvas area
const { setNodeRef: setCanvasDropRef } = useDroppable({
id: 'sequencer-canvas',
data: {
type: 'canvas',
},
})
const handleTracksScroll = (e: React.UIEvent<HTMLDivElement>) => {
// Sync timeline horizontal scroll with tracks
if (timelineRef.current) {
@@ -222,7 +233,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
}
return (
<div className="h-full flex flex-col">
<div ref={setCanvasDropRef} className="h-full flex flex-col">
{/* Time ruler */}
<div className="h-8 bg-muted/50 border-b border-border/50 flex-shrink-0 overflow-hidden">
<div
@@ -278,6 +289,8 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
zoom={zoom}
isPlaying={isPlaying}
currentTime={currentTime}
draggedItem={draggedItem}
dragOverInfo={dragOverInfo}
/>
))}
</div>

65
src/components/sequencer/SoundLibrary.tsx
View File

@@ -119,16 +119,65 @@ export function SoundLibrary() {
setLoading(true)
setError(null)
const params = {
search: debouncedSearchQuery.trim() || undefined,
types: soundType === 'all' ? undefined : [soundType],
sort_by: 'name' as const,
sort_order: 'asc' as const,
limit: 100, // Limit to 100 sounds for performance
// Mock sounds for testing drag functionality
const mockSounds: Sound[] = [
{
id: 1,
filename: 'kick.mp3',
name: 'Kick Drum',
duration: 2000,
size: 48000,
type: 'SDB',
play_count: 5,
hash: 'mock-hash-1',
is_normalized: false,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
},
{
id: 2,
filename: 'snare.wav',
name: 'Snare Hit',
duration: 1500,
size: 36000,
type: 'SDB',
play_count: 3,
hash: 'mock-hash-2',
is_normalized: false,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
},
{
id: 3,
filename: 'hello.mp3',
name: 'Hello World',
duration: 3000,
size: 72000,
type: 'TTS',
play_count: 1,
hash: 'mock-hash-3',
is_normalized: false,
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
}
]
// Filter by search query
let filteredSounds = mockSounds
if (debouncedSearchQuery.trim()) {
const query = debouncedSearchQuery.toLowerCase()
filteredSounds = mockSounds.filter(sound =>
sound.name.toLowerCase().includes(query) ||
sound.filename.toLowerCase().includes(query)
)
}
const fetchedSounds = await soundsService.getSounds(params)
setSounds(fetchedSounds)
// Filter by type
if (soundType !== 'all') {
filteredSounds = filteredSounds.filter(sound => sound.type === soundType)
}
setSounds(filteredSounds)
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds'
setError(errorMessage)

406
src/pages/SequencerPage.tsx
View File

@@ -1,12 +1,13 @@
import { AppLayout } from '@/components/AppLayout'
import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
import { TimelineControls } from '@/components/sequencer/TimelineControls'
import { TrackControls } from '@/components/sequencer/TrackControls'
import { Button } from '@/components/ui/button'
import { DndContext, type DragEndEvent, DragOverlay, type DragStartEvent } from '@dnd-kit/core'
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 { useState, useCallback, useRef } from 'react'
import { useState, useRef, useCallback, useEffect } from 'react'
export interface Track {
id: string
@@ -18,19 +19,17 @@ export interface PlacedSound {
id: string
soundId: number
name: string
duration: number
startTime: number
duration: number // in seconds
startTime: number // in seconds
trackId: string
}
export interface SequencerState {
interface SequencerState {
tracks: Track[]
duration: number // in seconds
zoom: number // pixels per second
isPlaying: boolean
duration: number
zoom: number
currentTime: number
selectedTrack?: string
selectedSound?: string
isPlaying: boolean
}
const INITIAL_DURATION = 30 // 30 seconds
@@ -39,53 +38,90 @@ const MIN_ZOOM = 10
const MAX_ZOOM = 200
export function SequencerPage() {
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 8,
},
})
)
const [state, setState] = useState<SequencerState>({
tracks: [
{ id: '1', name: 'Track 1', sounds: [] },
{ id: '2', name: 'Track 2', sounds: [] },
{
id: 'track-1',
name: 'Track 1',
sounds: [],
},
],
duration: INITIAL_DURATION,
zoom: INITIAL_ZOOM,
isPlaying: false,
currentTime: 0,
isPlaying: false,
})
const [activeId, setActiveId] = useState<string | null>(null)
const [activeDragData, setActiveDragData] = useState<Record<string, any> | null>(null)
const [draggedItem, setDraggedItem] = useState<any>(null)
const [dragOverInfo, setDragOverInfo] = useState<{trackId: string, x: number} | null>(null)
const [currentMousePos, setCurrentMousePos] = useState<{x: number, y: number} | null>(null)
// Refs for scroll synchronization
const trackControlsScrollRef = useRef<HTMLDivElement>(null)
const sequencerCanvasScrollRef = useRef<HTMLDivElement>(null)
// Track last scroll positions to detect which dimension changed
const lastScrollTopRef = useRef<{ trackControls: number; sequencerCanvas: number }>({
trackControls: 0,
sequencerCanvas: 0
})
const trackControlsRef = useRef<HTMLDivElement>(null)
const sequencerCanvasRef = useRef<HTMLDivElement>(null)
const handleDragStart = useCallback((event: DragStartEvent) => {
setActiveId(event.active.id as string)
setActiveDragData(event.active.data.current || null)
setDraggedItem(event.active.data.current)
// Start tracking mouse position globally
const handleMouseMove = (e: MouseEvent) => {
setCurrentMousePos({ x: e.clientX, y: e.clientY })
}
document.addEventListener('mousemove', handleMouseMove)
// Store cleanup function
;(window as any).dragMouseCleanup = () => {
document.removeEventListener('mousemove', handleMouseMove)
}
}, [])
// Update drag over info based on current mouse position and over target
useEffect(() => {
if (draggedItem && currentMousePos && (draggedItem.type === 'sound' || draggedItem.type === 'placed-sound')) {
// Find which track the mouse is currently over
for (const track of state.tracks) {
const trackElement = document.getElementById(`track-${track.id}`)
if (trackElement) {
const rect = trackElement.getBoundingClientRect()
if (
currentMousePos.x >= rect.left &&
currentMousePos.x <= rect.right &&
currentMousePos.y >= rect.top &&
currentMousePos.y <= rect.bottom
) {
const x = currentMousePos.x - rect.left
setDragOverInfo({ trackId: track.id, x: Math.max(0, x) })
return
}
}
}
// Mouse is not over any track
setDragOverInfo(null)
} else {
setDragOverInfo(null)
}
}, [draggedItem, currentMousePos, state.tracks])
const handleDragEnd = useCallback((event: DragEndEvent) => {
const { active, over } = event
if (!over || !active.data.current) {
setActiveId(null)
setActiveDragData(null)
return
}
const dragData = active.data.current
const overData = over.data.current
const overData = over?.data.current
// Handle dropping a sound from the library onto a track
if (dragData.type === 'sound' && overData?.type === 'track') {
const trackId = overData.trackId
// For now, place sounds at time 0. In a real implementation,
// you'd calculate the drop position based on mouse coordinates
const startTime = 0
// Handle sound drop from library to track
if (dragData?.type === 'sound' && overData?.type === 'track') {
// Use precise drop position if available
let startTime = 0
if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
startTime = Math.max(0, dragOverInfo.x / state.zoom)
}
const newPlacedSound: PlacedSound = {
id: `placed-${Date.now()}-${Math.random()}`,
@@ -93,49 +129,74 @@ export function SequencerPage() {
name: dragData.sound.name || dragData.sound.filename,
duration: dragData.sound.duration / 1000, // Convert from ms to seconds
startTime,
trackId,
trackId: overData.trackId,
}
setState(prev => ({
...prev,
tracks: prev.tracks.map(track =>
track.id === trackId
track.id === overData.trackId
? { ...track, sounds: [...track.sounds, newPlacedSound] }
: track
),
}))
}
// Handle moving a placed sound within tracks
if (dragData.type === 'placed-sound' && overData?.type === 'track') {
// Handle moving placed sounds within tracks
if (dragData?.type === 'placed-sound' && overData?.type === 'track') {
console.log('Moving placed sound:', dragData, 'to track:', overData.trackId)
// Use precise drop position if available
let startTime = dragData.startTime || 0
if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
startTime = Math.max(0, dragOverInfo.x / state.zoom)
}
const sourceTrackId = dragData.trackId
const targetTrackId = overData.trackId
// Keep the original start time for now when moving between tracks
const startTime = dragData.startTime || 0
console.log('Source track:', sourceTrackId, 'Target track:', targetTrackId, 'New start time:', startTime)
setState(prev => ({
...prev,
tracks: prev.tracks.map(track => {
// Remove from source track
if (track.id === sourceTrackId) {
return {
...track,
sounds: track.sounds.filter(s => s.id !== dragData.id),
}
}
// Add to target track
if (track.id === targetTrackId) {
if (track.id === sourceTrackId && sourceTrackId === targetTrackId) {
// Moving within the same track - just update position
console.log('Moving within same track')
const updatedSound: PlacedSound = {
id: dragData.id,
soundId: dragData.soundId,
name: dragData.name,
duration: dragData.duration,
...dragData,
startTime,
trackId: targetTrackId,
}
return {
...track,
sounds: [...track.sounds, updatedSound],
sounds: track.sounds.map(s =>
s.id === dragData.id ? updatedSound : s
),
}
} else if (track.id === sourceTrackId) {
// Remove from source track (different track move)
console.log('Removing sound from source track:', track.id, 'sounds before:', track.sounds.length)
const filtered = track.sounds.filter(s => s.id !== dragData.id)
console.log('Sounds after removal:', filtered.length)
return {
...track,
sounds: filtered,
}
} else if (track.id === targetTrackId) {
// Add to target track (different track move)
console.log('Adding sound to target track:', track.id, 'sounds before:', track.sounds.length)
const updatedSound: PlacedSound = {
...dragData,
startTime,
trackId: targetTrackId,
}
console.log('Updated sound:', updatedSound)
const newSounds = [...track.sounds, updatedSound]
console.log('Sounds after addition:', newSounds.length)
return {
...track,
sounds: newSounds,
}
}
return track
@@ -143,193 +204,156 @@ export function SequencerPage() {
}))
}
setActiveId(null)
setActiveDragData(null)
}, [state.zoom])
// Clear state
setDraggedItem(null)
setDragOverInfo(null)
setCurrentMousePos(null)
const addTrack = useCallback(() => {
const newTrackId = `${Date.now()}`
// Clean up mouse tracking
if ((window as any).dragMouseCleanup) {
(window as any).dragMouseCleanup()
delete (window as any).dragMouseCleanup
}
}, [dragOverInfo, state.zoom])
const handleAddTrack = () => {
const newTrackNumber = state.tracks.length + 1
const newTrack: Track = {
id: newTrackId,
name: `Track ${state.tracks.length + 1}`,
id: `track-${Date.now()}`,
name: `Track ${newTrackNumber}`,
sounds: [],
}
setState(prev => ({
...prev,
tracks: [...prev.tracks, newTrack],
}))
}, [state.tracks.length])
setState(prev => ({ ...prev, tracks: [...prev.tracks, newTrack] }))
}
const removeTrack = useCallback((trackId: string) => {
const handleRemoveTrack = (trackId: string) => {
setState(prev => ({
...prev,
tracks: prev.tracks.filter(track => track.id !== trackId),
}))
}, [])
}
const updateTrackName = useCallback((trackId: string, name: string) => {
const handleUpdateTrackName = (trackId: string, name: string) => {
setState(prev => ({
...prev,
tracks: prev.tracks.map(track =>
track.id === trackId ? { ...track, name } : track
),
}))
}, [])
}
const updateDuration = useCallback((duration: number) => {
setState(prev => ({ ...prev, duration }))
}, [])
const updateZoom = useCallback((zoom: number) => {
const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
setState(prev => ({ ...prev, zoom: clampedZoom }))
}, [])
const togglePlayback = useCallback(() => {
const handlePlay = () => {
setState(prev => ({ ...prev, isPlaying: !prev.isPlaying }))
}, [])
}
const resetSequencer = useCallback(() => {
setState(prev => ({
...prev,
tracks: prev.tracks.map(track => ({ ...track, sounds: [] })),
isPlaying: false,
currentTime: 0,
}))
}, [])
const handleStop = () => {
setState(prev => ({ ...prev, isPlaying: false, currentTime: 0 }))
}
// Scroll synchronization handlers - only sync vertical scrolling
const handleTrackControlsScroll = useCallback(() => {
if (trackControlsScrollRef.current && sequencerCanvasScrollRef.current) {
const currentScrollTop = trackControlsScrollRef.current.scrollTop
// Only sync if vertical scroll actually changed
if (currentScrollTop !== lastScrollTopRef.current.trackControls) {
sequencerCanvasScrollRef.current.scrollTop = currentScrollTop
lastScrollTopRef.current.trackControls = currentScrollTop
lastScrollTopRef.current.sequencerCanvas = currentScrollTop
const handleReset = () => {
setState(prev => ({ ...prev, currentTime: 0 }))
}
const handleZoomChange = (value: number) => {
setState(prev => ({ ...prev, zoom: value }))
}
const handleDurationChange = (duration: number) => {
setState(prev => ({ ...prev, duration }))
}
const handleVerticalScroll = useCallback(() => {
if (trackControlsRef.current && sequencerCanvasRef.current) {
const canvasScrollTop = sequencerCanvasRef.current.scrollTop
if (Math.abs(trackControlsRef.current.scrollTop - canvasScrollTop) > 1) {
trackControlsRef.current.scrollTop = canvasScrollTop
}
}
}, [])
const handleSequencerCanvasScroll = useCallback(() => {
if (sequencerCanvasScrollRef.current && trackControlsScrollRef.current) {
const currentScrollTop = sequencerCanvasScrollRef.current.scrollTop
// Only sync if vertical scroll actually changed
if (currentScrollTop !== lastScrollTopRef.current.sequencerCanvas) {
trackControlsScrollRef.current.scrollTop = currentScrollTop
lastScrollTopRef.current.sequencerCanvas = currentScrollTop
lastScrollTopRef.current.trackControls = currentScrollTop
// Simple playhead animation
useEffect(() => {
if (state.isPlaying) {
const interval = setInterval(() => {
setState(prev => {
const newTime = prev.currentTime + 0.1
if (newTime >= prev.duration) {
return { ...prev, currentTime: prev.duration, isPlaying: false }
}
return { ...prev, currentTime: newTime }
})
}, 100)
return () => clearInterval(interval)
}
}, [])
}, [state.isPlaying, state.duration])
return (
<AppLayout
breadcrumb={{
items: [{ label: 'Dashboard', href: '/' }, { label: 'Sequencer' }],
}}
>
<div className="flex-1 rounded-xl bg-muted/50 p-4 h-full">
<div className="flex items-center justify-between mb-6">
<div>
<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>
<p className="text-muted-foreground">
Create sequences by dragging sounds onto tracks
</p>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={togglePlayback}
className="w-20"
>
{state.isPlaying ? (
<>
<Square className="h-4 w-4 mr-2" />
Stop
</>
) : (
<>
<Play className="h-4 w-4 mr-2" />
Play
</>
)}
</Button>
<Button
variant="outline"
size="sm"
onClick={resetSequencer}
>
<RotateCcw className="h-4 w-4 mr-2" />
Reset
</Button>
</div>
</div>
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<div className="grid grid-cols-12 gap-4 h-[calc(100vh-200px)]">
{/* Sound Library Panel */}
<div className="col-span-3 bg-card rounded-lg border p-4 overflow-hidden">
{/* Main Content */}
<div className="flex-1 flex overflow-hidden">
<DndContext
sensors={sensors}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
{/* Left Sidebar - Sound Library */}
<div className="w-80 border-r bg-muted/30 flex flex-col">
<div className="p-4 h-full">
<SoundLibrary />
</div>
</div>
{/* Main Sequencer Area */}
<div className="col-span-9 bg-card rounded-lg border overflow-hidden flex flex-col">
{/* Center Content - Tracks */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Timeline Controls */}
<div className="border-b p-4">
<div className="p-4 border-b bg-muted/30">
<TimelineControls
duration={state.duration}
zoom={state.zoom}
onDurationChange={updateDuration}
onZoomChange={updateZoom}
onDurationChange={handleDurationChange}
onZoomChange={handleZoomChange}
minZoom={MIN_ZOOM}
maxZoom={MAX_ZOOM}
/>
</div>
{/* Sequencer Content */}
<div className="flex-1 overflow-hidden flex">
{/* Track Area */}
<div className="flex-1 flex overflow-hidden">
{/* Track Controls */}
<div className="w-48 border-r bg-muted/30">
<div className="w-64 border-r">
<TrackControls
ref={trackControlsScrollRef}
ref={trackControlsRef}
tracks={state.tracks}
onAddTrack={addTrack}
onRemoveTrack={removeTrack}
onUpdateTrackName={updateTrackName}
onScroll={handleTrackControlsScroll}
onAddTrack={handleAddTrack}
onRemoveTrack={handleRemoveTrack}
onUpdateTrackName={handleUpdateTrackName}
onScroll={handleVerticalScroll}
/>
</div>
{/* Sequencer Canvas */}
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex-1">
<SequencerCanvas
ref={sequencerCanvasScrollRef}
ref={sequencerCanvasRef}
tracks={state.tracks}
duration={state.duration}
zoom={state.zoom}
currentTime={state.currentTime}
isPlaying={state.isPlaying}
onScroll={handleSequencerCanvasScroll}
onScroll={handleVerticalScroll}
draggedItem={draggedItem}
dragOverInfo={dragOverInfo}
/>
</div>
</div>
</div>
</div>
{/* Drag Overlay */}
<DragOverlay>
{activeId && activeDragData ? (
<div className="bg-primary/20 border-2 border-primary rounded px-3 py-2 text-sm font-medium opacity-80">
{activeDragData.type === 'sound'
? activeDragData.sound?.name || activeDragData.sound?.filename
: activeDragData.name}
</div>
) : null}
</DragOverlay>
</DndContext>
</div>
</AppLayout>
</div>
)
}