fix: correct playlist counts and avatar skeleton

Author: Priveetee

apps/web/src/components/channel-avatar.tsx

@@ -1,5 +1,6 @@
 import { UserRound } from "lucide-react";
 import { useState } from "react";
+import { Skeleton } from "./skeleton";
 
 type Props = {
   src: string;
@@ -37,13 +38,7 @@ export function ChannelAvatar({ src, name, className = "w-8 h-8" }: Props) {
       data-avatar-state={state}
       aria-busy={loading}
     >
-      {loading && (
-        <span
-          className="absolute inset-0 animate-pulse rounded-full bg-fg/10"
-          data-avatar-skeleton
-          aria-hidden="true"
-        />
-      )}
+      {loading && <Skeleton className="absolute inset-0 rounded-full" data-avatar-skeleton />}
       {!loading &&
         (name.trim() ? (
           <span className="text-base leading-none">{getInitial(name)}</span>

apps/web/src/components/skeleton.tsx

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "react";
+
+export function Skeleton({ className = "", ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={`animate-pulse rounded-md bg-fg/15 ${className}`}
+      aria-hidden="true"
+    />
+  );
+}

apps/web/src/lib/playlist-summary.ts

@@ -0,0 +1,15 @@
+import type { PlaylistItem, PlaylistVideoItem } from "../types/user";
+
+export function filterPlaylistSummaries(
+  playlists: PlaylistItem[],
+  filter: (videos: PlaylistVideoItem[]) => PlaylistVideoItem[],
+): PlaylistItem[] {
+  return playlists.map((playlist) => {
+    const videos = playlist.videos ? filter(playlist.videos) : undefined;
+    return {
+      ...playlist,
+      videos,
+      videoCount: playlist.videoCount ?? videos?.length,
+    };
+  });
+}

apps/web/src/routes/playlists.tsx

@@ -13,6 +13,7 @@ import { useFavoriteStreams } from "../hooks/use-favorite-streams";
 import { usePlaylists } from "../hooks/use-playlists";
 import { useSavedPlaylists } from "../hooks/use-saved-playlists";
 import { useWatchLaterStreams } from "../hooks/use-watch-later-streams";
+import { filterPlaylistSummaries } from "../lib/playlist-summary";
 import { m } from "../paraglide/messages.js";
 import type { SavedPlaylistItem } from "../types/playlist";
 
@@ -26,11 +27,7 @@ function PlaylistsPage() {
   const visibleFavorites = useMemo(() => filter(favorites.videos), [favorites.videos, filter]);
   const visibleWatchLater = useMemo(() => filter(watchLater.videos), [filter, watchLater.videos]);
   const visiblePlaylists = useMemo(
-    () =>
-      playlists.map((playlist) => {
-        const videos = filter(playlist.videos ?? []);
-        return { ...playlist, videos, videoCount: videos.length };
-      }),
+    () => filterPlaylistSummaries(playlists, filter),
     [filter, playlists],
   );
   const saved = savedPlaylists.items.filter((playlist) => !isPlaylistBlocked(playlist));

apps/web/tests/channel-avatar.test.tsx

@@ -11,6 +11,7 @@ describe("channel avatar", () => {
     expect(html).toContain('data-avatar-state="loading"');
     expect(html).toContain("data-avatar-skeleton");
     expect(html).toContain("animate-pulse");
+    expect(html).toContain("bg-fg/15");
     expect(html).toContain('loading="lazy"');
   });
 

apps/web/tests/playlist-summary.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "bun:test";
+import { filterPlaylistSummaries } from "../src/lib/playlist-summary";
+import type { PlaylistItem } from "../src/types/user";
+
+describe("playlist summaries", () => {
+  test("keeps the server count when the list response omits videos", () => {
+    const playlist: PlaylistItem = {
+      id: "playlist-1",
+      name: "one piece",
+      description: "",
+      videoCount: 82,
+      createdAt: 1,
+    };
+
+    const result = filterPlaylistSummaries([playlist], (videos) => videos);
+
+    expect(result[0]?.videoCount).toBe(82);
+    expect(result[0]?.videos).toBeUndefined();
+  });
+
+  test("falls back to the visible count when the server count is absent", () => {
+    const playlist: PlaylistItem = {
+      id: "playlist-1",
+      name: "one piece",
+      description: "",
+      videos: [
+        {
+          id: "video-1",
+          url: "https://www.youtube.com/watch?v=video1",
+          title: "Video",
+          thumbnail: "thumbnail",
+          duration: 1,
+          position: 0,
+          watchPosition: 0,
+          watched: false,
+          progressUpdatedAt: 0,
+        },
+      ],
+      createdAt: 1,
+    };
+
+    const result = filterPlaylistSummaries([playlist], (videos) => videos);
+
+    expect(result[0]?.videoCount).toBe(1);
+  });
+});