Add view options to playlists list view

List/grid layout toggle with row size and grid columns options, persisted per-view. PlaylistRowView now scales with VideoRowStyle; new LocalPlaylistCardView provides the grid card with edit/delete context menu.
2026-08-06 07:11:28 +00:00 · 2026-08-01 21:34:50 +02:00
parent 3f3709a37e
commit 25f15a1b3e
3 changed files with 241 additions and 18 deletions
--- a/Yattee/Views/Home/LocalPlaylistCardView.swift
+++ b/Yattee/Views/Home/LocalPlaylistCardView.swift
@@ -0,0 +1,97 @@
+//
+//  LocalPlaylistCardView.swift
+//  Yattee
+//
+//  A local playlist card component for grid layouts.
+//
+
+import SwiftUI
+import NukeUI
+
+/// A local playlist card for grid layouts.
+///
+/// Displays thumbnail with video count badge, title, and count/duration line.
+struct LocalPlaylistCardView: View {
+    let playlist: LocalPlaylist
+    var isCompact: Bool = false
+
+    private var titleFont: Font { isCompact ? .caption : .subheadline }
+    private var metadataFont: Font { isCompact ? .caption2 : .caption }
+
+    private var metadataHeight: CGFloat {
+        #if os(tvOS)
+        isCompact ? 90 : 110
+        #else
+        isCompact ? 50 : 58
+        #endif
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: isCompact ? 4 : 8) {
+            // Thumbnail with video count badge - fixed 16:9 aspect ratio container
+            Color.clear
+                .aspectRatio(16/9, contentMode: .fit)
+                .overlay {
+                    LazyImage(url: playlist.thumbnailURL) { state in
+                        if let image = state.image {
+                            image
+                                .resizable()
+                                .aspectRatio(contentMode: .fill)
+                        } else {
+                            thumbnailPlaceholder
+                        }
+                    }
+                }
+                .clipped()
+                .clipShape(RoundedRectangle(cornerRadius: isCompact ? 6 : 8))
+                .overlay(alignment: .bottomTrailing) {
+                    if playlist.videoCount > 0 {
+                        HStack(spacing: 4) {
+                            Image(systemName: "play.square.stack")
+                                .font(.caption2)
+                            Text("\(playlist.videoCount)")
+                                .font(.caption2)
+                                .fontWeight(.medium)
+                        }
+                        .padding(.horizontal, 6)
+                        .padding(.vertical, 3)
+                        .background(.black.opacity(0.75))
+                        .foregroundStyle(.white)
+                        .clipShape(RoundedRectangle(cornerRadius: 4))
+                        .padding(6)
+                    }
+                }
+
+            // Metadata - fixed height to ensure consistent card sizes in grid
+            VStack(alignment: .leading, spacing: 2) {
+                Text(playlist.title)
+                    .font(titleFont)
+                    .fontWeight(.medium)
+                    .lineLimit(2)
+                    .multilineTextAlignment(.leading)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                Text("playlist.videoCountDuration \(playlist.videoCount) \(playlist.formattedTotalDuration)")
+                    .font(metadataFont.monospacedDigit())
+                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
+
+                Spacer(minLength: 0)
+            }
+            .frame(height: metadataHeight)
+        }
+        .contentShape(Rectangle())
+    }
+
+    private var thumbnailPlaceholder: some View {
+        RoundedRectangle(cornerRadius: isCompact ? 6 : 8)
+            .fill(.quaternary)
+            .aspectRatio(16/9, contentMode: .fill)
+            .overlay {
+                Image(systemName: "music.note.list")
+                    .font(.title2)
+                    .foregroundStyle(.secondary)
+            }
+    }
+}