Playlists and channels in the sidebar

Shared/Navigation/AppSidebarNavigation.swift

@@ -3,17 +3,17 @@ import SwiftUI
     import Introspect
 #endif
 
-typealias TabSelection = AppSidebarNavigation.TabSelection
-
 struct AppSidebarNavigation: View {
-    enum TabSelection: String {
-        case subscriptions, popular, trending, playlists, channel, search
-    }
-
     @EnvironmentObject<NavigationState> private var navigationState
+    @EnvironmentObject<Playlists> private var playlists
+    @EnvironmentObject<Subscriptions> private var subscriptions
 
     @State private var didApplyPrimaryViewWorkAround = false
 
+    var selection: Binding<TabSelection?> {
+        navigationState.tabSelectionOptionalBinding
+    }
+
     var body: some View {
         #if os(iOS)
             content.introspectViewController { viewController in
@@ -38,53 +38,18 @@ struct AppSidebarNavigation: View {
         NavigationView {
             sidebar
                 .frame(minWidth: 180)
-
             Text("Select section")
         }
     }
 
     var sidebar: some View {
         List {
-            NavigationLink(tag: TabSelection.subscriptions, selection: navigationState.tabSelectionOptionalBinding) {
-                SubscriptionsView()
-            }
-            label: {
-                Label("Subscriptions", systemImage: "star.circle.fill")
-                    .accessibility(label: Text("Subscriptions"))
-            }
+            mainNavigationLinks
 
-            NavigationLink(tag: TabSelection.popular, selection: navigationState.tabSelectionOptionalBinding) {
-                PopularView()
-            }
-            label: {
-                Label("Popular", systemImage: "chart.bar")
-                    .accessibility(label: Text("Popular"))
-            }
-
-            NavigationLink(tag: TabSelection.trending, selection: navigationState.tabSelectionOptionalBinding) {
-                TrendingView()
-            }
-            label: {
-                Label("Trending", systemImage: "chart.line.uptrend.xyaxis")
-                    .accessibility(label: Text("Trending"))
-            }
-
-            NavigationLink(tag: TabSelection.playlists, selection: navigationState.tabSelectionOptionalBinding) {
-                PlaylistsView()
-            }
-            label: {
-                Label("Playlists", systemImage: "list.and.film")
-                    .accessibility(label: Text("Playlists"))
-            }
-
-            NavigationLink(tag: TabSelection.search, selection: navigationState.tabSelectionOptionalBinding) {
-                SearchView()
-            }
-            label: {
-                Label("Search", systemImage: "magnifyingglass")
-                    .accessibility(label: Text("Search"))
-            }
+            AppSidebarSubscriptions(selection: selection)
+            AppSidebarPlaylists(selection: selection)
         }
+
         #if os(macOS)
             .toolbar {
                 Button(action: toggleSidebar) {
@@ -94,6 +59,59 @@ struct AppSidebarNavigation: View {
         #endif
     }
 
+    var mainNavigationLinks: some View {
+        Group {
+            NavigationLink(tag: TabSelection.subscriptions, selection: selection) {
+                SubscriptionsView()
+            }
+            label: {
+                Label("Subscriptions", systemImage: "star.circle.fill")
+                    .accessibility(label: Text("Subscriptions"))
+            }
+
+            NavigationLink(tag: TabSelection.popular, selection: selection) {
+                PopularView()
+            }
+            label: {
+                Label("Popular", systemImage: "chart.bar")
+                    .accessibility(label: Text("Popular"))
+            }
+
+            NavigationLink(tag: TabSelection.trending, selection: selection) {
+                TrendingView()
+            }
+            label: {
+                Label("Trending", systemImage: "chart.line.uptrend.xyaxis")
+                    .accessibility(label: Text("Trending"))
+            }
+
+            NavigationLink(tag: TabSelection.playlists, selection: selection) {
+                PlaylistsView()
+            }
+            label: {
+                Label("Playlists", systemImage: "list.and.film")
+                    .accessibility(label: Text("Playlists"))
+            }
+
+            NavigationLink(tag: TabSelection.search, selection: selection) {
+                SearchView()
+            }
+            label: {
+                Label("Search", systemImage: "magnifyingglass")
+                    .accessibility(label: Text("Search"))
+            }
+        }
+    }
+
+    static func symbolSystemImage(_ name: String) -> String {
+        let firstLetter = name.first?.lowercased()
+        let regex = #"^[a-z0-9]$"#
+
+        let symbolName = firstLetter?.range(of: regex, options: .regularExpression) != nil ? firstLetter! : "questionmark"
+
+        return "\(symbolName).square"
+    }
+
     #if os(macOS)
         private func toggleSidebar() {
             NSApp.keyWindow?.contentViewController?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)

Shared/Navigation/AppSidebarPlaylists.swift

@@ -0,0 +1,37 @@
+import SwiftUI
+
+struct AppSidebarPlaylists: View {
+    @EnvironmentObject<NavigationState> private var navigationState
+    @EnvironmentObject<Playlists> private var playlists
+
+    @Binding var selection: TabSelection?
+
+    var body: some View {
+        Section(header: Text("Playlists")) {
+            ForEach(playlists.all) { playlist in
+                NavigationLink(tag: TabSelection.playlist(playlist.id), selection: $selection) {
+                    PlaylistVideosView(playlist)
+                } label: {
+                    Label(playlist.title, systemImage: AppSidebarNavigation.symbolSystemImage(playlist.title))
+                        .badge(Text("\(playlist.videos.count)"))
+                }
+                .contextMenu {
+                    Button("Edit") {
+                        navigationState.presentEditPlaylistForm(playlists.find(id: playlist.id))
+                    }
+                }
+            }
+
+            newPlaylistButton
+                .padding(.top, 8)
+        }
+    }
+
+    var newPlaylistButton: some View {
+        Button(action: { navigationState.presentNewPlaylistForm() }) {
+            Label("New Playlist", systemImage: "plus.square")
+        }
+        .foregroundColor(.secondary)
+        .buttonStyle(.plain)
+    }
+}

Shared/Navigation/AppSidebarSubscriptions.swift

@@ -0,0 +1,40 @@
+import SwiftUI
+
+struct AppSidebarSubscriptions: View {
+    @EnvironmentObject<NavigationState> private var navigationState
+    @EnvironmentObject<Subscriptions> private var subscriptions
+
+    @Binding var selection: TabSelection?
+
+    var body: some View {
+        Section(header: Text("Subscriptions")) {
+            ForEach(subscriptions.all) { channel in
+                NavigationLink(tag: TabSelection.channel(channel.id), selection: $selection) {
+                    ChannelVideosView(channel)
+                } label: {
+                    Label(channel.name, systemImage: AppSidebarNavigation.symbolSystemImage(channel.name))
+                }
+                .contextMenu {
+                    Button("Unsubscribe") {
+                        navigationState.presentUnsubscribeAlert(channel)
+                    }
+                }
+                .alert(unsubscribeAlertTitle, isPresented: $navigationState.presentingUnsubscribeAlert) {
+                    if let channel = navigationState.channelToUnsubscribe {
+                        Button("Unsubscribe", role: .destructive) {
+                            subscriptions.unsubscribe(channel.id)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    var unsubscribeAlertTitle: String {
+        if let channel = navigationState.channelToUnsubscribe {
+            return "Unsubscribe from \(channel.name)"
+        }
+
+        return "Unknown channel"
+    }
+}

Shared/Navigation/ContentView.swift

@@ -5,6 +5,7 @@ struct ContentView: View {
     @StateObject private var playbackState = PlaybackState()
     @StateObject private var searchState = SearchState()
     @StateObject private var subscriptions = Subscriptions()
+    @StateObject private var playlists = Playlists()
 
     #if os(iOS)
         @Environment(\.horizontalSizeClass) private var horizontalSizeClass
@@ -37,11 +38,15 @@ struct ContentView: View {
                     #endif
                 }
             }
+            .sheet(isPresented: $navigationState.presentingPlaylistForm) {
+                PlaylistFormView(playlist: $navigationState.editedPlaylist)
+            }
         #endif
         .environmentObject(navigationState)
             .environmentObject(playbackState)
             .environmentObject(searchState)
             .environmentObject(subscriptions)
+            .environmentObject(playlists)
     }
 }