feat: ability to change library (#77)

* feat: add AbsIcons font and update pubspec.yaml for font integration

* feat: implement library selection in YouPage

* fix: optimize authenticatedApi provider to not rebuild unnecessarily

* feat: add LibrarySwitchChip widget and integrate it into YouPage and ScaffoldWithNavBar

* feat: enhance library selection UI with refresh functionality and error handling

* fix: change library switcher activation from long press to double tap

* feat: show current library on nav bar

* feat: refactor LibraryBrowserPage to use CustomScrollView and enhance app bar with dynamic library icon and title

lib/features/library_browser/view/library_browser_page.dart

@@ -1,47 +1,83 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:vaani/router/router.dart';
+import 'package:vaani/api/library_provider.dart' show currentLibraryProvider;
+import 'package:vaani/features/you/view/widgets/library_switch_chip.dart'
+    show showLibrarySwitcher;
+import 'package:vaani/router/router.dart' show Routes;
+import 'package:vaani/shared/icons/abs_icons.dart' show AbsIcons;
+import 'package:vaani/shared/widgets/not_implemented.dart'
+    show showNotImplementedToast;
 
 class LibraryBrowserPage extends HookConsumerWidget {
   const LibraryBrowserPage({super.key});
-
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final currentLibrary = ref.watch(currentLibraryProvider).valueOrNull;
+
+    // Determine the icon to use, with a fallback
+    final IconData libraryIconData =
+        AbsIcons.getIconByName(currentLibrary?.icon) ?? Icons.library_books;
+
+    // Determine the title text
+    final String appBarTitle = '${currentLibrary?.name ?? 'Your'} Library';
+
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Library'),
-        backgroundColor: Colors.transparent,
-      ),
-      // a list redirecting to authors, genres, and series pages
-      body: ListView(
-        children: [
-          ListTile(
-            title: const Text('Authors'),
-            leading: const Icon(Icons.person),
-            trailing: const Icon(Icons.chevron_right),
-            onTap: () {},
+      // Use CustomScrollView to enable slivers
+      body: CustomScrollView(
+        slivers: <Widget>[
+          SliverAppBar(
+            pinned: true,
+            // floating: true, // Optional: uncomment if you want floating behavior
+            // snap:
+            //     true, // Optional: uncomment if you want snapping behavior (usually with floating: true)
+            leading: IconButton(
+              icon: Icon(libraryIconData),
+              tooltip: 'Switch Library', // Helpful tooltip for users
+              onPressed: () {
+                showLibrarySwitcher(context, ref);
+              },
+            ),
+            title: Text(appBarTitle),
           ),
-          ListTile(
-            title: const Text('Genres'),
-            leading: const Icon(Icons.category),
-            trailing: const Icon(Icons.chevron_right),
-            onTap: () {},
-          ),
-          ListTile(
-            title: const Text('Series'),
-            leading: const Icon(Icons.list),
-            trailing: const Icon(Icons.chevron_right),
-            onTap: () {},
-          ),
-          // Downloads
-          ListTile(
-            title: const Text('Downloads'),
-            leading: const Icon(Icons.download),
-            trailing: const Icon(Icons.chevron_right),
-            onTap: () {
-              GoRouter.of(context).pushNamed(Routes.downloads.name);
-            },
+          SliverList(
+            delegate: SliverChildListDelegate(
+              [
+                ListTile(
+                  title: const Text('Authors'),
+                  leading: const Icon(Icons.person),
+                  trailing: const Icon(Icons.chevron_right),
+                  onTap: () {
+                    showNotImplementedToast(context);
+                  },
+                ),
+                ListTile(
+                  title: const Text('Genres'),
+                  leading: const Icon(Icons.category),
+                  trailing: const Icon(Icons.chevron_right),
+                  onTap: () {
+                    showNotImplementedToast(context);
+                  },
+                ),
+                ListTile(
+                  title: const Text('Series'),
+                  leading: const Icon(Icons.list),
+                  trailing: const Icon(Icons.chevron_right),
+                  onTap: () {
+                    showNotImplementedToast(context);
+                  },
+                ),
+                // Downloads
+                ListTile(
+                  title: const Text('Downloads'),
+                  leading: const Icon(Icons.download),
+                  trailing: const Icon(Icons.chevron_right),
+                  onTap: () {
+                    GoRouter.of(context).pushNamed(Routes.downloads.name);
+                  },
+                ),
+              ],
+            ),
           ),
         ],
       ),

lib/features/logging/view/logs_page.dart

@@ -1,15 +1,10 @@
-import 'dart:io';
-
-import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:logging/logging.dart';
-import 'package:permission_handler/permission_handler.dart';
 import 'package:share_plus/share_plus.dart';
 import 'package:vaani/features/logging/providers/logs_provider.dart';
 import 'package:vaani/main.dart';
-import 'package:vaani/settings/metadata/metadata_provider.dart';
 
 class LogsPage extends HookConsumerWidget {
   const LogsPage({super.key});

lib/features/you/view/widgets/library_switch_chip.dart

@@ -0,0 +1,224 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shelfsdk/audiobookshelf_api.dart' show Library;
+import 'package:vaani/api/library_provider.dart';
+import 'package:vaani/settings/api_settings_provider.dart'
+    show apiSettingsProvider;
+import 'package:vaani/shared/icons/abs_icons.dart';
+import 'dart:io' show Platform;
+
+import 'package:flutter/foundation.dart';
+import 'package:vaani/main.dart' show appLogger;
+
+class LibrarySwitchChip extends HookConsumerWidget {
+  const LibrarySwitchChip({
+    super.key,
+    required this.libraries,
+  });
+  final List<Library> libraries;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final apiSettings = ref.watch(apiSettingsProvider);
+
+    return ActionChip(
+      avatar: Icon(
+        AbsIcons.getIconByName(
+          apiSettings.activeLibraryId != null
+              ? libraries
+                  .firstWhere(
+                    (lib) => lib.id == apiSettings.activeLibraryId,
+                  )
+                  .icon
+              : libraries.first.icon,
+        ),
+      ), // Replace with your icon
+      label: const Text('Change Library'),
+      // Enable only if libraries are loaded and not empty
+      onPressed: libraries.isNotEmpty
+          ? () => showLibrarySwitcher(
+                context,
+                ref,
+              )
+          : null, // Disable if no libraries
+    );
+  }
+}
+
+// --- Helper Function to Show the Switcher ---
+void showLibrarySwitcher(
+  BuildContext context,
+  WidgetRef ref,
+) {
+  final content = _LibrarySelectionContent();
+
+  // --- Platform-Specific UI ---
+  bool isDesktop = false;
+  if (!kIsWeb) {
+    // dart:io Platform is not available on web
+    isDesktop = Platform.isLinux || Platform.isMacOS || Platform.isWindows;
+  } else {
+    // Basic web detection (might need refinement based on screen size)
+    // Consider using MediaQuery for a size-based check instead for web/tablet
+    final size = MediaQuery.of(context).size;
+    isDesktop = size.width > 600; // Example threshold for "desktop-like" layout
+  }
+
+  if (isDesktop) {
+    // --- Desktop: Use AlertDialog ---
+    showDialog(
+      context: context,
+      builder: (dialogContext) => AlertDialog(
+        title: const Text('Select Library'),
+        content: SizedBox(
+          // Constrain size for dialogs
+          width: 300, // Adjust as needed
+          // Make content scrollable if list is long
+          child: Scrollbar(child: content),
+        ),
+        actions: [
+          TextButton(
+            onPressed: () {
+              // Invalidate the provider to trigger a refetch
+              ref.invalidate(librariesProvider);
+              Navigator.pop(dialogContext);
+            },
+            child: const Text('Refresh'),
+          ),
+          TextButton(
+            onPressed: () => Navigator.pop(dialogContext),
+            child: const Text('Cancel'),
+          ),
+        ],
+      ),
+    );
+  } else {
+    // --- Mobile/Tablet: Use BottomSheet ---
+    showModalBottomSheet(
+      context: context,
+      // Make it scrollable and control height
+      isScrollControlled: true,
+      constraints: BoxConstraints(
+        maxHeight:
+            MediaQuery.of(context).size.height * 0.6, // Max 60% of screen
+      ),
+      builder: (sheetContext) => Padding(
+        // Add padding within the bottom sheet
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min, // Take minimum necessary height
+          children: [
+            const Text(
+              'Select Library',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            const Divider(),
+            Flexible(
+              // Allow the list to take remaining space and scroll
+              child: Scrollbar(child: content),
+            ),
+            const SizedBox(height: 10),
+            ElevatedButton.icon(
+              icon: const Icon(Icons.refresh),
+              label: const Text('Refresh'),
+              onPressed: () {
+                // Invalidate the provider to trigger a refetch
+                ref.invalidate(librariesProvider);
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+// --- Widget for the Selection List Content (Reusable) ---
+class _LibrarySelectionContent extends ConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final librariesAsyncValue = ref.watch(librariesProvider);
+    final currentLibraryId = ref.watch(
+      apiSettingsProvider.select((settings) => settings.activeLibraryId),
+    );
+    final errorColor = Theme.of(context).colorScheme.error;
+    return librariesAsyncValue.when(
+      // --- Loading State ---
+      loading: () => const Center(child: CircularProgressIndicator()),
+
+      // --- Error State ---
+      error: (error, stackTrace) => Center(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(Icons.error_outline, color: errorColor),
+              const SizedBox(height: 10),
+              Text(
+                'Error loading libraries: $error',
+                textAlign: TextAlign.center,
+                style: TextStyle(color: errorColor),
+              ),
+              const SizedBox(height: 16),
+              ElevatedButton.icon(
+                icon: const Icon(Icons.refresh),
+                label: const Text('Retry'),
+                onPressed: () {
+                  // Invalidate the provider to trigger a refetch
+                  ref.invalidate(librariesProvider);
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+
+      // --- Data State ---
+      data: (libraries) {
+        // Handle case where data loaded successfully but is empty
+        if (libraries.isEmpty) {
+          return const Center(
+            child: Padding(
+              padding: EdgeInsets.all(16.0),
+              child: Text('No libraries available.'),
+            ),
+          );
+        }
+
+        // Build the list if libraries are available
+        return Scrollbar(
+          // Add scrollbar for potentially long lists
+          child: ListView.builder(
+            shrinkWrap: true, // Important for Dialog/BottomSheet sizing
+            itemCount: libraries.length,
+            itemBuilder: (context, index) {
+              final library = libraries[index];
+              final bool isSelected = library.id == currentLibraryId;
+
+              return ListTile(
+                title: Text(library.name),
+                leading: Icon(AbsIcons.getIconByName(library.icon)),
+                selected: isSelected,
+                trailing: isSelected ? const Icon(Icons.check) : null,
+                onTap: () {
+                  appLogger.info(
+                      'Selected library: ${library.name} (ID: ${library.id})');
+                  // Get current settings state
+                  final currentSettings = ref.read(apiSettingsProvider);
+                  // Update the active library ID
+                  ref.read(apiSettingsProvider.notifier).updateState(
+                        currentSettings.copyWith(activeLibraryId: library.id),
+                      );
+                  // Close the dialog/bottom sheet
+                  Navigator.pop(context);
+                },
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
+}

lib/features/you/view/you_page.dart

@@ -2,11 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:vaani/api/api_provider.dart';
+import 'package:vaani/api/library_provider.dart' show librariesProvider;
 import 'package:vaani/features/player/view/mini_player_bottom_padding.dart';
+import 'package:vaani/features/you/view/widgets/library_switch_chip.dart';
 import 'package:vaani/router/router.dart';
 import 'package:vaani/settings/constants.dart';
 import 'package:vaani/shared/utils.dart';
 import 'package:vaani/shared/widgets/not_implemented.dart';
+import 'package:vaani/shared/widgets/vaani_logo.dart';
 
 class YouPage extends HookConsumerWidget {
   const YouPage({
@@ -16,6 +19,7 @@ class YouPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final api = ref.watch(authenticatedApiProvider);
+    final librariesAsyncValue = ref.watch(librariesProvider);
     return Scaffold(
       appBar: AppBar(
         // title: const Text('You'),
@@ -63,7 +67,35 @@ class YouPage extends HookConsumerWidget {
                           context.pushNamed(Routes.userManagement.name);
                         },
                       ),
-                      // ActionChip(
+                      librariesAsyncValue.when(
+                        data: (libraries) =>
+                            LibrarySwitchChip(libraries: libraries),
+                        loading: () => const ActionChip(
+                          avatar: SizedBox(
+                            width: 18,
+                            height: 18,
+                            child: CircularProgressIndicator(strokeWidth: 2),
+                          ),
+                          label: Text('Loading Libs...'),
+                          onPressed: null, // Disable while loading
+                        ),
+                        error: (error, stack) => ActionChip(
+                          avatar: Icon(
+                            Icons.error_outline,
+                            color: Theme.of(context).colorScheme.error,
+                          ),
+                          label: const Text('Error Loading Libs'),
+                          onPressed: () {
+                            // Maybe show error details or allow retry
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content:
+                                    Text('Failed to load libraries: $error'),
+                              ),
+                            );
+                          },
+                        ),
+                      ), // ActionChip(
                       //   avatar: const Icon(Icons.logout),
                       //   label: const Text('Logout'),
                       //   onPressed: () {
@@ -185,29 +217,3 @@ class UserBar extends HookConsumerWidget {
     );
   }
 }
-
-class VaaniLogo extends StatelessWidget {
-  const VaaniLogo({
-    super.key,
-    this.size,
-    this.duration = const Duration(milliseconds: 750),
-    this.curve = Curves.fastOutSlowIn,
-  });
-
-  final double? size;
-  final Duration duration;
-  final Curve curve;
-
-  @override
-  Widget build(BuildContext context) {
-    final IconThemeData iconTheme = IconTheme.of(context);
-    final double? iconSize = size ?? iconTheme.size;
-    return AnimatedContainer(
-      width: iconSize,
-      height: iconSize,
-      duration: duration,
-      curve: curve,
-      child: Image.asset('assets/images/vaani_logo_foreground.png'),
-    );
-  }
-}