feat: add playlist management components including header, table, loading states, and dialog

src/components/playlists/PlaylistRow.tsx

@@ -0,0 +1,104 @@
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { TableCell, TableRow } from '@/components/ui/table'
+import type { Playlist } from '@/lib/api/services/playlists'
+import { formatDuration } from '@/utils/format-duration'
+import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'
+
+interface PlaylistRowProps {
+  playlist: Playlist
+  onEdit: (playlist: Playlist) => void
+  onSetCurrent: (playlist: Playlist) => void
+}
+
+export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString()
+  }
+
+  return (
+    <TableRow className="hover:bg-muted/50">
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+          <div className="min-w-0">
+            <div className="font-medium truncate">{playlist.name}</div>
+            {playlist.description && (
+              <div className="text-sm text-muted-foreground truncate">
+                {playlist.description}
+              </div>
+            )}
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        {playlist.genre ? (
+          <Badge variant="secondary">{playlist.genre}</Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )}
+      </TableCell>
+      <TableCell>
+        {playlist.user_name ? (
+          <div className="flex items-center gap-2">
+            <User className="h-4 w-4 text-muted-foreground" />
+            <span>{playlist.user_name}</span>
+          </div>
+        ) : (
+          <span className="text-muted-foreground">System</span>
+        )}
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          <Music className="h-3 w-3 text-muted-foreground" />
+          {playlist.sound_count}
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          <Clock className="h-3 w-3 text-muted-foreground" />
+          {formatDuration(playlist.total_duration || 0)}
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          <Calendar className="h-3 w-3 text-muted-foreground" />
+          {formatDate(playlist.created_at)}
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          {playlist.is_current && <Badge variant="default">Current</Badge>}
+          {playlist.is_main && <Badge variant="outline">Main</Badge>}
+          {!playlist.is_current && !playlist.is_main && (
+            <span className="text-muted-foreground">-</span>
+          )}
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => onEdit(playlist)}
+            className="h-8 w-8 p-0"
+            title={`Edit "${playlist.name}"`}
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          {!playlist.is_current && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onSetCurrent(playlist)}
+              className="h-8 w-8 p-0"
+              title={`Set "${playlist.name}" as current playlist`}
+            >
+              <Play className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  )
+}