Search UI fixes

Shared/Navigation/AppSidebarNavigation.swift

@@ -4,12 +4,23 @@ import SwiftUI
 #endif
 
 struct AppSidebarNavigation: View {
+    enum SidebarGroup: String, Identifiable {
+        case main
+
+        var id: RawValue {
+            rawValue
+        }
+    }
+
     @EnvironmentObject<NavigationState> private var navigationState
     @EnvironmentObject<Playlists> private var playlists
+    @EnvironmentObject<SearchState> private var searchState
     @EnvironmentObject<Subscriptions> private var subscriptions
 
     @State private var didApplyPrimaryViewWorkAround = false
 
+    @State private var searchQuery = ""
+
     var selection: Binding<TabSelection?> {
         navigationState.tabSelectionOptionalBinding
     }
@@ -41,61 +52,94 @@ struct AppSidebarNavigation: View {
 
             Text("Select section")
         }
+        .searchable(text: $searchQuery, placement: .sidebar) {
+            ForEach(searchState.querySuggestions.collection, id: \.self) { suggestion in
+                Text(suggestion)
+                    .searchCompletion(suggestion)
+            }
+        }
+        .onChange(of: searchQuery) { query in
+            searchState.loadQuerySuggestions(query)
+        }
+        .onSubmit(of: .search) {
+            searchState.changeQuery { query in
+                query.query = self.searchQuery
+            }
+
+            navigationState.tabSelection = .search
+        }
     }
 
     var sidebar: some View {
         ScrollViewReader { scrollView in
             List {
-                mainNavigationLinks
-
-                Group {
-                    AppSidebarRecentlyOpened(selection: selection)
-                        .id("recentlyOpened")
-                    AppSidebarSubscriptions(selection: selection)
-                    AppSidebarPlaylists(selection: selection)
+                ForEach(sidebarGroups) { group in
+                    sidebarGroupContent(group)
+                        .id(group)
                 }
+
                 .onChange(of: navigationState.sidebarSectionChanged) { _ in
                     scrollScrollViewToItem(scrollView: scrollView, for: navigationState.tabSelection)
                 }
             }
+            .background {
+                NavigationLink(destination: SearchView(), tag: TabSelection.search, selection: selection) {
+                    Color.clear
+                }
+                .hidden()
+            }
             .listStyle(.sidebar)
         }
-
-        #if os(macOS)
-            .toolbar {
-                Button(action: toggleSidebar) {
-                    Image(systemName: "sidebar.left").help("Toggle Sidebar")
+        .toolbar {
+            #if os(macOS)
+                ToolbarItemGroup {
+                    Button(action: toggleSidebar) {
+                        Image(systemName: "sidebar.left").help("Toggle Sidebar")
+                    }
                 }
+            #endif
+        }
+    }
+
+    var sidebarGroups: [SidebarGroup] {
+        [.main]
+    }
+
+    func sidebarGroupContent(_ group: SidebarGroup) -> some View {
+        switch group {
+        case .main:
+            return Group {
+                mainNavigationLinks
+
+                AppSidebarRecentlyOpened(selection: selection)
+                    .id("recentlyOpened")
+                AppSidebarSubscriptions(selection: selection)
+                AppSidebarPlaylists(selection: selection)
             }
-        #endif
+        }
     }
 
     var mainNavigationLinks: some View {
-        Group {
-            NavigationLink(destination: SubscriptionsView(), tag: TabSelection.subscriptions, selection: selection) {
+        Section("Videos") {
+            NavigationLink(destination: LazyView(SubscriptionsView()), tag: TabSelection.subscriptions, selection: selection) {
                 Label("Subscriptions", systemImage: "star.circle.fill")
                     .accessibility(label: Text("Subscriptions"))
             }
 
-            NavigationLink(destination: PopularView(), tag: TabSelection.popular, selection: selection) {
+            NavigationLink(destination: LazyView(PopularView()), tag: TabSelection.popular, selection: selection) {
                 Label("Popular", systemImage: "chart.bar")
                     .accessibility(label: Text("Popular"))
             }
 
-            NavigationLink(destination: TrendingView(), tag: TabSelection.trending, selection: selection) {
+            NavigationLink(destination: LazyView(TrendingView()), tag: TabSelection.trending, selection: selection) {
                 Label("Trending", systemImage: "chart.line.uptrend.xyaxis")
                     .accessibility(label: Text("Trending"))
             }
 
-            NavigationLink(destination: PlaylistsView(), tag: TabSelection.playlists, selection: selection) {
+            NavigationLink(destination: LazyView(PlaylistsView()), tag: TabSelection.playlists, selection: selection) {
                 Label("Playlists", systemImage: "list.and.film")
                     .accessibility(label: Text("Playlists"))
             }
-
-            NavigationLink(destination: SearchView(), tag: TabSelection.search, selection: selection) {
-                Label("Search", systemImage: "magnifyingglass")
-                    .accessibility(label: Text("Search"))
-            }
         }
     }
 

Shared/Navigation/AppSidebarPlaylists.swift

@@ -10,7 +10,7 @@ struct AppSidebarPlaylists: View {
         Section(header: Text("Playlists")) {
             ForEach(playlists.all) { playlist in
                 NavigationLink(tag: TabSelection.playlist(playlist.id), selection: $selection) {
-                    PlaylistVideosView(playlist)
+                    LazyView(PlaylistVideosView(playlist))
                 } label: {
                     Label(playlist.title, systemImage: AppSidebarNavigation.symbolSystemImage(playlist.title))
                         .badge(Text("\(playlist.videos.count)"))

Shared/Navigation/AppSidebarRecentlyOpened.swift

@@ -14,7 +14,7 @@ struct AppSidebarRecentlyOpened: View {
                 Section(header: Text("Recently Opened")) {
                     ForEach(recentlyOpened) { channel in
                         NavigationLink(tag: TabSelection.channel(channel.id), selection: $selection) {
-                            ChannelVideosView(channel)
+                            LazyView(ChannelVideosView(channel))
                         } label: {
                             HStack {
                                 Label(channel.name, systemImage: AppSidebarNavigation.symbolSystemImage(channel.name))

Shared/Navigation/AppSidebarSubscriptions.swift

@@ -10,7 +10,7 @@ struct AppSidebarSubscriptions: View {
         Section(header: Text("Subscriptions")) {
             ForEach(subscriptions.all) { channel in
                 NavigationLink(tag: TabSelection.channel(channel.id), selection: $selection) {
-                    ChannelVideosView(channel)
+                    LazyView(ChannelVideosView(channel))
                 } label: {
                     Label(channel.name, systemImage: AppSidebarNavigation.symbolSystemImage(channel.name))
                 }

Shared/Navigation/AppTabNavigation.swift

@@ -3,6 +3,9 @@ import SwiftUI
 
 struct AppTabNavigation: View {
     @EnvironmentObject<NavigationState> private var navigationState
+    @EnvironmentObject<SearchState> private var searchState
+
+    @State private var searchQuery = ""
 
     var body: some View {
         TabView(selection: $navigationState.tabSelection) {
@@ -44,6 +47,22 @@ struct AppTabNavigation: View {
 
             NavigationView {
                 SearchView()
+                    .searchable(text: $searchQuery, placement: .navigationBarDrawer(displayMode: .always)) {
+                        ForEach(searchState.querySuggestions.collection, id: \.self) { suggestion in
+                            Text(suggestion)
+                                .searchCompletion(suggestion)
+                        }
+                    }
+                    .onChange(of: searchQuery) { query in
+                        searchState.loadQuerySuggestions(query)
+                    }
+                    .onSubmit(of: .search) {
+                        searchState.changeQuery { query in
+                            query.query = self.searchQuery
+                        }
+
+                        navigationState.tabSelection = .search
+                    }
             }
             .tabItem {
                 Label("Search", systemImage: "magnifyingglass")