Yattee v2 rewrite

Yattee/Views/Toast/ToastCardView.swift

@@ -0,0 +1,162 @@
+//
+//  ToastCardView.swift
+//  Yattee
+//
+//  Individual toast notification card component.
+//
+
+import SwiftUI
+
+/// A single toast notification card.
+struct ToastCardView: View {
+    let toast: Toast
+    let onDismiss: () -> Void
+    let onAction: (() async -> Void)?
+
+    @State private var isAnimating = false
+
+    var body: some View {
+        HStack(spacing: 12) {
+            // Leading icon or progress indicator
+            leadingIcon
+
+            // Title and optional subtitle
+            VStack(alignment: .leading, spacing: 2) {
+                Text(toast.title)
+                    .font(.subheadline)
+                    .fontWeight(.semibold)
+                if let subtitle = toast.subtitle {
+                    Text(subtitle)
+                        .font(.caption)
+                        .foregroundStyle(.secondary)
+                        .lineLimit(1)
+                }
+            }
+
+            // Action button (if present)
+            if let action = toast.action {
+                actionButton(action)
+            }
+
+            // Dismiss button (macOS only - iOS uses swipe)
+            #if os(macOS)
+            dismissButton
+            #endif
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 12)
+        .frame(maxWidth: 400, alignment: .leading)
+        .glassBackground(.regular, in: .capsule, fallback: .regularMaterial)
+        .shadow(color: .black.opacity(0.15), radius: 10, y: 4)
+        .scaleEffect(isAnimating ? 1 : 0.9)
+        .onAppear {
+            withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
+                isAnimating = true
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var leadingIcon: some View {
+        // Use fixed frame to prevent size changes when switching between spinner and icon
+        Group {
+            // If icon is explicitly set, show it (used for success/error states after update)
+            if let icon = toast.icon {
+                Image(systemName: icon)
+                    .foregroundStyle(toast.iconColor ?? .primary)
+                    .font(.title3)
+            } else if toast.category == .loading || toast.category == .remoteControl {
+                // Show spinner for loading/remoteControl when no icon is set
+                ProgressView()
+                    .controlSize(.small)
+                    #if os(iOS) || os(macOS)
+                    .tint(.primary)
+                    #endif
+            }
+        }
+        .frame(width: 22, height: 22)
+    }
+
+    @ViewBuilder
+    private func actionButton(_ action: ToastAction) -> some View {
+        Button {
+            Task {
+                await onAction?()
+            }
+        } label: {
+            HStack(spacing: 4) {
+                if let systemImage = action.systemImage {
+                    Image(systemName: systemImage)
+                        .font(.caption)
+                }
+                Text(action.label)
+                    .font(.caption)
+                    .fontWeight(.semibold)
+            }
+            .foregroundStyle(.white)
+            .padding(.horizontal, 10)
+            .padding(.vertical, 6)
+            .background(Color.accentColor)
+            .clipShape(Capsule())
+        }
+        .buttonStyle(.plain)
+    }
+
+    #if os(macOS)
+    private var dismissButton: some View {
+        Button {
+            onDismiss()
+        } label: {
+            Image(systemName: "xmark")
+                .font(.caption.weight(.medium))
+                .foregroundStyle(.secondary)
+        }
+        .buttonStyle(.plain)
+    }
+    #endif
+}
+
+// MARK: - Preview
+
+#Preview {
+    VStack(spacing: 16) {
+        ToastCardView(
+            toast: Toast(
+                category: .loading,
+                title: "Loading Video"
+            ),
+            onDismiss: {},
+            onAction: nil
+        )
+
+        ToastCardView(
+            toast: Toast(
+                category: .success,
+                title: "Download Completed",
+                subtitle: "My Awesome Video Title",
+                icon: "checkmark.circle.fill",
+                iconColor: .green
+            ),
+            onDismiss: {},
+            onAction: nil
+        )
+
+        ToastCardView(
+            toast: Toast(
+                category: .sponsorBlock,
+                title: "Skipping Sponsor",
+                subtitle: "30 seconds",
+                icon: "forward.fill",
+                iconColor: .green,
+                action: ToastAction(
+                    label: "Undo",
+                    systemImage: "arrow.uturn.backward"
+                ) {}
+            ),
+            onDismiss: {},
+            onAction: {}
+        )
+    }
+    .padding()
+    .background(Color.gray.opacity(0.3))
+}

Yattee/Views/Toast/ToastOverlayView.swift

@@ -0,0 +1,102 @@
+//
+//  ToastOverlayView.swift
+//  Yattee
+//
+//  Overlay container for displaying toast notifications at the top of the screen.
+//
+
+import SwiftUI
+
+/// Overlay that displays toast notifications at the top of the screen.
+struct ToastOverlayView: View {
+    @Environment(\.appEnvironment) private var appEnvironment
+
+    /// The scope of toasts to display in this overlay.
+    let scope: ToastScope
+
+    private var toastManager: ToastManager? {
+        appEnvironment?.toastManager
+    }
+
+    /// Toasts filtered by scope
+    private var scopedToasts: [Toast] {
+        toastManager?.toasts(for: scope) ?? []
+    }
+
+    var body: some View {
+        VStack(spacing: 8) {
+            ForEach(scopedToasts) { toast in
+                ToastCardView(
+                    toast: toast,
+                    onDismiss: {
+                        toastManager?.dismiss(id: toast.id)
+                    },
+                    onAction: toast.action?.handler
+                )
+                .transition(.move(edge: .top).combined(with: .opacity))
+                #if !os(tvOS)
+                .gesture(swipeGesture(for: toast))
+                #endif
+            }
+        }
+        .padding(.top, topPadding)
+        .padding(.horizontal, 16)
+        .animation(.spring(response: 0.3, dampingFraction: 0.7), value: scopedToasts.count)
+    }
+
+    private var topPadding: CGFloat {
+        #if os(iOS)
+        // In player scope (sheet), only need minimal padding since safe area is handled by sheet
+        // In main scope, account for Dynamic Island / notch
+        return scope == .player ? 8 : 60
+        #elseif os(macOS)
+        return 16
+        #elseif os(tvOS)
+        // TV safe area
+        return 60
+        #endif
+    }
+
+    #if !os(tvOS)
+    private func swipeGesture(for toast: Toast) -> some Gesture {
+        DragGesture()
+            .onEnded { value in
+                // Swipe up to dismiss
+                if value.translation.height < -50 {
+                    toastManager?.dismiss(id: toast.id)
+                }
+            }
+    }
+    #endif
+}
+
+// MARK: - View Extension
+
+extension View {
+    /// Adds a toast overlay for the main window scope.
+    func toastOverlay() -> some View {
+        overlay(alignment: .top) {
+            ToastOverlayView(scope: .main)
+        }
+    }
+
+    /// Adds a toast overlay for the player scope.
+    func playerToastOverlay() -> some View {
+        overlay(alignment: .top) {
+            ToastOverlayView(scope: .player)
+        }
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    ZStack {
+        Color.gray.opacity(0.3)
+            .ignoresSafeArea()
+
+        Text("Main Content")
+    }
+    .toastOverlay()
+    .appEnvironment(.preview)
+}