Add top fade to detail pages (#221)

Author: sozercan

Sources/Kaset/Views/ArtistDetailView.swift

@@ -33,6 +33,7 @@ struct ArtistDetailView: View { // swiftlint:disable:this type_body_length
         .accentBackground(from: self.viewModel.artistDetail?.thumbnailURL?.highQualityThumbnailURL)
         .navigationTitle(self.artist.name)
         .toolbarBackgroundVisibility(.hidden, for: .automatic)
+        .topFade()
         .safeAreaInset(edge: .bottom, spacing: 0) {
             if case .error = self.viewModel.loadingState {} else {
                 PlayerBar()

Sources/Kaset/Views/ArtistDiscographyView.swift

@@ -24,6 +24,7 @@ struct ArtistDiscographyView: View {
         }
         .navigationTitle(self.viewModel.destination.sectionTitle)
         .toolbarBackgroundVisibility(.hidden, for: .automatic)
+        .topFade()
         .safeAreaInset(edge: .bottom, spacing: 0) {
             if case .error = self.viewModel.loadingState {} else {
                 PlayerBar()

Sources/Kaset/Views/ArtistEpisodesListView.swift

@@ -32,6 +32,7 @@ struct ArtistEpisodesListView: View {
         }
         .navigationTitle(self.viewModel.destination.sectionTitle)
         .toolbarBackgroundVisibility(.hidden, for: .automatic)
+        .topFade()
         .safeAreaInset(edge: .bottom, spacing: 0) {
             if case .error = self.viewModel.loadingState {} else {
                 PlayerBar()

Sources/Kaset/Views/PlaylistDetailView.swift

@@ -64,6 +64,7 @@ struct PlaylistDetailView: View {
         )
         .navigationTitle(self.playlist.title)
         .toolbarBackgroundVisibility(.hidden, for: .automatic)
+        .topFade()
         .safeAreaInset(edge: .bottom, spacing: 0) {
             if case .error = self.viewModel.loadingState {
             } else {

Sources/Kaset/Views/TopFade.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+// MARK: - TopFade
+
+/// A lightweight top overlay that fades scrolling content beneath hidden toolbar backgrounds.
+@available(macOS 26.0, *)
+struct TopFade: View {
+    let height: CGFloat
+
+    var body: some View {
+        LinearGradient(
+            colors: [
+                Color(nsColor: .windowBackgroundColor).opacity(0.98),
+                Color(nsColor: .windowBackgroundColor).opacity(0.72),
+                Color(nsColor: .windowBackgroundColor).opacity(0),
+            ],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+        .frame(height: self.height)
+        .frame(maxWidth: .infinity)
+        .ignoresSafeArea(edges: .top)
+        .allowsHitTesting(false)
+        .accessibilityHidden(true)
+    }
+}
+
+// MARK: - TopFadeModifier
+
+@available(macOS 26.0, *)
+struct TopFadeModifier: ViewModifier {
+    let height: CGFloat
+
+    func body(content: Content) -> some View {
+        content
+            .overlay(alignment: .top) {
+                TopFade(height: self.height)
+            }
+    }
+}
+
+@available(macOS 26.0, *)
+extension View {
+    /// Adds the same top fade treatment used by toolbar-backed pages when the toolbar background is hidden.
+    /// - Parameter height: The height of the fade overlay.
+    /// - Returns: A view with a non-interactive top fade overlay.
+    func topFade(height: CGFloat = 96) -> some View {
+        modifier(TopFadeModifier(height: height))
+    }
+}

Sources/Kaset/Views/TopSongsView.swift

@@ -38,6 +38,7 @@ struct TopSongsView: View {
         }
         .navigationTitle(self.viewModel.title)
         .toolbarBackgroundVisibility(.hidden, for: .automatic)
+        .topFade()
         .safeAreaInset(edge: .bottom, spacing: 0) {
             if case .error = self.viewModel.loadingState {} else {
                 PlayerBar()