feat: implement extraction management features including creation, loading states, and filtering

2025-08-17 01:27:51 +02:00
parent 0024f1d647
commit ed888dd8d1
7 changed files with 604 additions and 263 deletions
--- a/src/components/extractions/ExtractionsRow.tsx
+++ b/src/components/extractions/ExtractionsRow.tsx
@@ -0,0 +1,126 @@
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { TableCell, TableRow } from '@/components/ui/table'
+import type { ExtractionInfo } from '@/lib/api/services/extractions'
+import { formatDateDistanceToNow } from '@/utils/format-date'
+import { 
+  AlertCircle, 
+  Calendar, 
+  CheckCircle, 
+  Clock, 
+  ExternalLink, 
+  Loader2 
+} from 'lucide-react'
+
+interface ExtractionsRowProps {
+  extraction: ExtractionInfo
+}
+
+export function ExtractionsRow({ extraction }: ExtractionsRowProps) {
+  const getStatusBadge = (status: ExtractionInfo['status']) => {
+    switch (status) {
+      case 'pending':
+        return (
+          <Badge variant="secondary" className="gap-1">
+            <Clock className="h-3 w-3" />
+            Pending
+          </Badge>
+        )
+      case 'processing':
+        return (
+          <Badge variant="outline" className="gap-1">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            Processing
+          </Badge>
+        )
+      case 'completed':
+        return (
+          <Badge variant="default" className="gap-1">
+            <CheckCircle className="h-3 w-3" />
+            Completed
+          </Badge>
+        )
+      case 'failed':
+        return (
+          <Badge variant="destructive" className="gap-1">
+            <AlertCircle className="h-3 w-3" />
+            Failed
+          </Badge>
+        )
+    }
+  }
+
+  const getServiceBadge = (service: string | undefined) => {
+    if (!service) return <span className="text-muted-foreground">-</span>
+
+    const serviceColors: Record<string, string> = {
+      youtube: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+      soundcloud: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
+      vimeo: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+      tiktok: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+      twitter: 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300',
+      instagram: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    }
+
+    const colorClass =
+      serviceColors[service.toLowerCase()] ||
+      'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
+
+    return (
+      <Badge variant="outline" className={colorClass}>
+        {service.toUpperCase()}
+      </Badge>
+    )
+  }
+
+  return (
+    <TableRow className="hover:bg-muted/50">
+      <TableCell>
+        <div className="min-w-0">
+          <div className="font-medium truncate">
+            {extraction.title || 'Extracting...'}
+          </div>
+          <div className="text-sm text-muted-foreground truncate max-w-64">
+            {extraction.url}
+          </div>
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        {getServiceBadge(extraction.service)}
+      </TableCell>
+      <TableCell>
+        <div className="space-y-1">
+          {getStatusBadge(extraction.status)}
+          {extraction.error && (
+            <div
+              className="text-xs text-destructive max-w-48 truncate"
+              title={extraction.error}
+            >
+              {extraction.error}
+            </div>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center gap-1 text-sm text-muted-foreground">
+          <Calendar className="h-3 w-3" />
+          {formatDateDistanceToNow(extraction.created_at)}
+        </div>
+      </TableCell>
+      <TableCell className="text-center">
+        <div className="flex items-center justify-center gap-1">
+          <Button variant="ghost" size="sm" asChild>
+            <a
+              href={extraction.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Open original URL"
+            >
+              <ExternalLink className="h-4 w-4" />
+            </a>
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  )
+}