✅ Address playlist review feedback

Author: nbsp1221

app/entities/video/ui/VideoCard.tsx

@@ -55,30 +55,6 @@ export function VideoCard({ video, onQuickView, onTagClick }: VideoCardProps) {
                 <Clock className="h-3 w-3" />
                 {formatDuration(video.duration)}
               </div>
-
-              {hasActions && (
-                <div className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        className="h-8 w-8 p-0 rounded-full bg-black/60 hover:bg-black/80 text-white border-0"
-                      >
-                        <MoreVertical className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-48">
-                      {onQuickView && (
-                        <DropdownMenuItem onClick={handleQuickView}>
-                          <Eye className="mr-2 h-4 w-4" />
-                          Quick view
-                        </DropdownMenuItem>
-                      )}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              )}
             </AspectRatio>
           </div>
 
@@ -94,6 +70,31 @@ export function VideoCard({ video, onQuickView, onTagClick }: VideoCardProps) {
         </div>
       </Link>
 
+      {hasActions && (
+        <div className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100 pointer-events-none">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="secondary"
+                size="sm"
+                aria-label="Open actions menu"
+                className="h-8 w-8 p-0 rounded-full bg-black/60 hover:bg-black/80 text-white border-0 pointer-events-auto"
+              >
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              {onQuickView && (
+                <DropdownMenuItem onClick={handleQuickView}>
+                  <Eye className="mr-2 h-4 w-4" />
+                  Quick view
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+
       <div className="flex flex-wrap gap-1 mt-2">
         {video.tags.slice(0, 3).map(tag => (
           <Badge

app/features/playlist/add-to-playlist/model/useAddToPlaylistDialog.ts

@@ -93,7 +93,10 @@ export function useAddToPlaylistDialog({ open, video }: UseAddToPlaylistDialogOp
       const rawPlaylists = (Array.isArray(data.playlists) ? data.playlists : []) as RawPlaylist[];
 
       const ownedPlaylists = rawPlaylists
-        .filter(raw => String(raw.ownerId ?? '') === user.id)
+        .filter((raw) => {
+          const rawId = String(raw.id ?? '').trim();
+          return rawId.length > 0 && String(raw.ownerId ?? '') === user.id;
+        })
         .map(raw => toSummary(raw, video.id));
 
       setPlaylists(ownedPlaylists);
@@ -127,6 +130,14 @@ export function useAddToPlaylistDialog({ open, video }: UseAddToPlaylistDialogOp
   const handleAdd = useCallback(async (playlistId: string) => {
     if (!video) return;
 
+    const currentPlaylist = playlists.find(playlist => playlist.id === playlistId);
+    if (!currentPlaylist) return;
+
+    const currentState = actionStates[playlistId];
+    if (currentState === 'loading' || currentPlaylist.containsVideo) {
+      return;
+    }
+
     setActionStates(prev => ({ ...prev, [playlistId]: 'loading' }));
 
     try {
@@ -161,7 +172,7 @@ export function useAddToPlaylistDialog({ open, video }: UseAddToPlaylistDialogOp
       setActionStates(prev => ({ ...prev, [playlistId]: 'error' }));
       setError(addError instanceof Error ? addError.message : 'Failed to add video to playlist');
     }
-  }, [video]);
+  }, [video, playlists, actionStates]);
 
   const refresh = useCallback(async () => {
     await loadPlaylists();

app/features/playlist/add-to-playlist/ui/AddToPlaylistDialog.tsx

@@ -87,11 +87,16 @@ export function AddToPlaylistDialog({ video, open, onOpenChange }: AddToPlaylist
               <Button
                 variant={isAdded ? 'outline' : 'secondary'}
                 size="sm"
-                disabled={isAdded && !isErrored}
+                disabled={isBusy || (isAdded && !isErrored)}
                 className="w-24 justify-center"
-                onClick={() => handleAdd(playlist.id)}
+                onClick={() => {
+                  if (isBusy) return;
+                  void handleAdd(playlist.id);
+                }}
               >
-                {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : buttonLabel}
+                {isBusy
+                  ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+                  : buttonLabel}
               </Button>
             </div>
           );