feat: add Dailymotion badge and improve extraction title display in ExtractionsRow

src/components/extractions/ExtractionsRow.tsx

@@ -99,6 +99,7 @@ export function ExtractionsRow({ extraction, onExtractionDeleted }: ExtractionsR
       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',
+      dailymotion: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
     }
 
     const colorClass =
@@ -117,10 +118,10 @@ export function ExtractionsRow({ extraction, onExtractionDeleted }: ExtractionsR
     <TableRow className="hover:bg-muted/50">
       <TableCell>
         <div className="min-w-0">
-          <div className="font-medium truncate">
+          <div className="font-medium truncate max-w-80">
-            {extraction.title || 'Extracting...'}
+            {extraction.title || 'Processing...'}
           </div>
-          <div className="text-sm text-muted-foreground truncate max-w-64">
+          <div className="text-sm text-muted-foreground">
             {extraction.url}
           </div>
         </div>

src/components/player/CompactPlayer.tsx

@@ -1,5 +1,11 @@
 import { Button } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useSidebar } from '@/components/ui/sidebar'
 import { filesService } from '@/lib/api/services/files'
 import {
   type MessageResponse,
@@ -27,6 +33,7 @@ interface CompactPlayerProps {
 }
 
 export function CompactPlayer({ className }: CompactPlayerProps) {
+  const { isMobile, state: sidebarState } = useSidebar()
   const [state, setState] = useState<PlayerState>({
     status: 'stopped',
     mode: 'continuous',
@@ -116,20 +123,30 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
     <div className={cn('w-full', className)}>
       {/* Collapsed state - only play/pause button */}
       <div className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center hidden">
-        <Button
+        <Tooltip>
-          size="sm"
+          <TooltipTrigger asChild>
-          variant="ghost"
+            <Button
-          onClick={handlePlayPause}
+              size="sm"
-          disabled={isLoading}
+              variant="ghost"
-          className="h-8 w-8 p-0"
+              onClick={handlePlayPause}
-          title={state.status === 'playing' ? 'Pause' : 'Play'}
+              disabled={isLoading}
-        >
+              className="h-8 w-8 p-0"
-          {state.status === 'playing' ? (
+            >
-            <Pause className="h-4 w-4" />
+              {state.status === 'playing' ? (
-          ) : (
+                <Pause className="h-4 w-4" />
-            <Play className="h-4 w-4" />
+              ) : (
-          )}
+                <Play className="h-4 w-4" />
-        </Button>
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent
+            side="right"
+            align="center"
+            hidden={sidebarState !== "collapsed" || isMobile}
+          >
+            {state.status === 'playing' ? 'Pause' : 'Play'}
+          </TooltipContent>
+        </Tooltip>
       </div>
 
       {/* Expanded state - full player */}