refactor: remove transparent background color from app bars

* 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

docs/images_and_logos.md

@@ -0,0 +1,8 @@
+this is how i converted my png to svg
+
+`convert -background White vaani_logo.png vaani_logo.pbm`
+
+
+`potrace -b svg -i vaani_logo.pbm -o vaani_logo.svg`
+
+`-i` flag was needed so that it took white as the svgs and black as background

images/vaani_logo.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="192.000000pt" height="192.000000pt"
+        viewBox="0 0 192.000000 192.000000" preserveAspectRatio="xMidYMid meet">
+        <metadata>
+                Created by potrace 1.16, written by Peter Selinger 2001-2019
+        </metadata>
+        <g transform="translate(0.000000,192.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
+                <path d="M602 1678 c-18 -18 -17 -689 1 -741 17 -48 30 -61 55 -53 25 8 38 57
+23 85 -6 11 -11 75 -11 144 0 284 -13 548 -27 563 -18 17 -25 18 -41 2z" />
+                <path d="M897 1683 c-4 -3 -7 -176 -7 -383 l0 -377 23 -22 c30 -28 53 -19 67
+25 10 29 9 39 -4 59 -14 21 -16 69 -16 353 0 242 -3 331 -12 340 -13 13 -41
+16 -51 5z" />
+                <path d="M1329 1668 c-8 -15 -10 -104 -7 -311 4 -288 4 -289 27 -308 16 -13
+28 -16 39 -10 13 8 15 46 13 312 -1 169 -7 311 -12 321 -13 25 -46 23 -60 -4z" />
+                <path d="M1035 1568 c-3 -7 -6 -123 -8 -258 l-2 -245 27 -3 c36 -4 36 -5 43
+266 7 234 4 252 -37 252 -10 0 -21 -6 -23 -12z" />
+                <path d="M1474 1467 c-2 -7 -3 -60 -2 -118 3 -100 4 -104 26 -107 42 -6 49 10
+45 105 -5 123 -8 133 -39 133 -13 0 -27 -6 -30 -13z" />
+                <path d="M443 1408 c-13 -23 -3 -251 13 -275 28 -45 88 -19 64 27 -6 10 -10
+64 -10 120 0 56 -5 110 -10 121 -12 21 -45 25 -57 7z" />
+                <path d="M777 1407 c-12 -9 -16 -39 -19 -132 l-3 -120 30 0 c37 0 43 18 44
+147 1 85 -1 99 -18 107 -13 7 -23 7 -34 -2z" />
+                <path d="M1182 1398 c-8 -8 -12 -48 -12 -115 0 -93 2 -103 21 -113 39 -21 49
+2 49 111 0 75 -4 101 -16 113 -19 19 -26 20 -42 4z" />
+                <path d="M1505 1048 c-11 -6 -25 -14 -31 -17 -56 -30 -192 -131 -223 -164 -57
+-62 -134 -166 -158 -214 -12 -23 -26 -50 -32 -60 -9 -17 -30 -66 -60 -138
+l-12 -29 -21 34 c-114 189 -151 238 -243 316 -44 38 -107 95 -141 127 -33 31
+-66 57 -73 57 -8 0 -30 8 -50 19 -20 10 -55 27 -79 37 -39 16 -44 16 -58 2
+-29 -29 -8 -52 84 -93 51 -23 106 -57 132 -81 25 -23 65 -58 90 -78 59 -49
+152 -147 186 -199 15 -23 35 -53 44 -67 10 -14 35 -63 56 -108 28 -61 45 -84
+61 -88 28 -7 49 8 57 41 8 33 106 246 128 279 7 11 27 40 43 66 51 79 135 167
+192 202 30 18 67 42 81 53 15 11 44 29 65 39 31 16 37 24 35 45 -3 29 -38 38
+-73 19z" />
+        </g>
+</svg>

lib/api/api_provider.dart

@@ -49,8 +49,7 @@ AudiobookshelfApi audiobookshelfApi(Ref ref, Uri? baseUrl) {
 /// if the user is not authenticated throw an error
 @Riverpod(keepAlive: true)
 AudiobookshelfApi authenticatedApi(Ref ref) {
-  final apiSettings = ref.watch(apiSettingsProvider);
+  final user = ref.watch(apiSettingsProvider.select((s) => s.activeUser));
-  final user = apiSettings.activeUser;
   if (user == null) {
     _logger.severe('No active user can not provide authenticated api');
     throw StateError('No active user');

lib/api/api_provider.g.dart

@@ -170,7 +170,7 @@ class _AudiobookshelfApiProviderElement
   Uri? get baseUrl => (origin as AudiobookshelfApiProvider).baseUrl;
 }
 
-String _$authenticatedApiHash() => r'5cf3329fe3074e3a09e266b4bae78b53e9c01220';
+String _$authenticatedApiHash() => r'284be2c39823c20fb70035a136c430862c28fa27';
 
 /// get the api instance for the authenticated user
 ///

lib/api/library_provider.dart

@@ -0,0 +1,58 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart' show Ref;
+import 'package:logging/logging.dart' show Logger;
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import 'package:shelfsdk/audiobookshelf_api.dart' show Library;
+import 'package:vaani/api/api_provider.dart' show authenticatedApiProvider;
+import 'package:vaani/settings/api_settings_provider.dart'
+    show apiSettingsProvider;
+part 'library_provider.g.dart';
+
+final _logger = Logger('LibraryProvider');
+
+@riverpod
+Future<Library?> library(Ref ref, String id) async {
+  final api = ref.watch(authenticatedApiProvider);
+  final library = await api.libraries.get(libraryId: id);
+  if (library == null) {
+    _logger.warning('No library found through id: $id');
+    //  try to get the library from the list of libraries
+    final libraries = await ref.watch(librariesProvider.future);
+    for (final lib in libraries) {
+      if (lib.id == id) {
+        return lib;
+      }
+    }
+    _logger.warning('No library found in the list of libraries');
+    return null;
+  }
+  _logger.fine('Fetched library: ${library}');
+  return library.library;
+}
+
+@riverpod
+Future<Library?> currentLibrary(Ref ref) async {
+  final libraryId =
+      ref.watch(apiSettingsProvider.select((s) => s.activeLibraryId));
+  if (libraryId == null) {
+    _logger.warning('No active library id found');
+    return null;
+  }
+  return await ref.watch(libraryProvider(libraryId).future);
+}
+
+@riverpod
+class Libraries extends _$Libraries {
+  @override
+  FutureOr<List<Library>> build() async {
+    final api = ref.watch(authenticatedApiProvider);
+    final libraries = await api.libraries.getAll();
+    if (libraries == null) {
+      _logger.warning('Failed to fetch libraries');
+      return [];
+    }
+    _logger.fine('Fetched ${libraries.length} libraries');
+    ref.keepAlive();
+    return libraries;
+  }
+}

lib/api/library_provider.g.dart

@@ -0,0 +1,192 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'library_provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$libraryHash() => r'b62d976f8ab83b2f5823a0fb7dac52fde8fcbffc';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+/// See also [library].
+@ProviderFor(library)
+const libraryProvider = LibraryFamily();
+
+/// See also [library].
+class LibraryFamily extends Family<AsyncValue<Library?>> {
+  /// See also [library].
+  const LibraryFamily();
+
+  /// See also [library].
+  LibraryProvider call(
+    String id,
+  ) {
+    return LibraryProvider(
+      id,
+    );
+  }
+
+  @override
+  LibraryProvider getProviderOverride(
+    covariant LibraryProvider provider,
+  ) {
+    return call(
+      provider.id,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'libraryProvider';
+}
+
+/// See also [library].
+class LibraryProvider extends AutoDisposeFutureProvider<Library?> {
+  /// See also [library].
+  LibraryProvider(
+    String id,
+  ) : this._internal(
+          (ref) => library(
+            ref as LibraryRef,
+            id,
+          ),
+          from: libraryProvider,
+          name: r'libraryProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$libraryHash,
+          dependencies: LibraryFamily._dependencies,
+          allTransitiveDependencies: LibraryFamily._allTransitiveDependencies,
+          id: id,
+        );
+
+  LibraryProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.id,
+  }) : super.internal();
+
+  final String id;
+
+  @override
+  Override overrideWith(
+    FutureOr<Library?> Function(LibraryRef provider) create,
+  ) {
+    return ProviderOverride(
+      origin: this,
+      override: LibraryProvider._internal(
+        (ref) => create(ref as LibraryRef),
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        id: id,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeFutureProviderElement<Library?> createElement() {
+    return _LibraryProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is LibraryProvider && other.id == id;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, id.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+@Deprecated('Will be removed in 3.0. Use Ref instead')
+// ignore: unused_element
+mixin LibraryRef on AutoDisposeFutureProviderRef<Library?> {
+  /// The parameter `id` of this provider.
+  String get id;
+}
+
+class _LibraryProviderElement extends AutoDisposeFutureProviderElement<Library?>
+    with LibraryRef {
+  _LibraryProviderElement(super.provider);
+
+  @override
+  String get id => (origin as LibraryProvider).id;
+}
+
+String _$currentLibraryHash() => r'658498a531e04a01e2b3915a3319101285601118';
+
+/// See also [currentLibrary].
+@ProviderFor(currentLibrary)
+final currentLibraryProvider = AutoDisposeFutureProvider<Library?>.internal(
+  currentLibrary,
+  name: r'currentLibraryProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$currentLibraryHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+@Deprecated('Will be removed in 3.0. Use Ref instead')
+// ignore: unused_element
+typedef CurrentLibraryRef = AutoDisposeFutureProviderRef<Library?>;
+String _$librariesHash() => r'95ebd4d1ac0cc2acf7617dc22895eff0ca30600f';
+
+/// See also [Libraries].
+@ProviderFor(Libraries)
+final librariesProvider =
+    AutoDisposeAsyncNotifierProvider<Libraries, List<Library>>.internal(
+  Libraries.new,
+  name: r'librariesProvider',
+  debugGetCreateSourceHash:
+      const bool.fromEnvironment('dart.vm.product') ? null : _$librariesHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$Libraries = AutoDisposeAsyncNotifier<List<Library>>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

lib/features/downloads/view/downloads_page.dart

@@ -13,7 +13,6 @@ class DownloadsPage extends HookConsumerWidget {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Downloads'),
-        backgroundColor: Colors.transparent,
       ),
       body: Center(
         // history of downloads

lib/features/explore/view/explore_page.dart

@@ -30,7 +30,6 @@ class ExplorePage extends HookConsumerWidget {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Explore'),
-        backgroundColor: Colors.transparent,
       ),
       body: const MySearchBar(),
     );

lib/features/item_viewer/view/library_item_sliver_app_bar.dart

@@ -8,7 +8,6 @@ class LibraryItemSliverAppBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SliverAppBar(
-      backgroundColor: Colors.transparent,
       elevation: 0,
       floating: true,
       primary: true,

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(
+      // Use CustomScrollView to enable slivers
-        title: const Text('Library'),
+      body: CustomScrollView(
-        backgroundColor: Colors.transparent,
+        slivers: <Widget>[
-      ),
+          SliverAppBar(
-      // a list redirecting to authors, genres, and series pages
+            pinned: true,
-      body: ListView(
+            // floating: true, // Optional: uncomment if you want floating behavior
-        children: [
+            // snap:
-          ListTile(
+            //     true, // Optional: uncomment if you want snapping behavior (usually with floating: true)
-            title: const Text('Authors'),
+            leading: IconButton(
-            leading: const Icon(Icons.person),
+              icon: Icon(libraryIconData),
-            trailing: const Icon(Icons.chevron_right),
+              tooltip: 'Switch Library', // Helpful tooltip for users
-            onTap: () {},
+              onPressed: () {
+                showLibrarySwitcher(context, ref);
+              },
+            ),
+            title: Text(appBarTitle),
           ),
-          ListTile(
+          SliverList(
-            title: const Text('Genres'),
+            delegate: SliverChildListDelegate(
-            leading: const Icon(Icons.category),
+              [
-            trailing: const Icon(Icons.chevron_right),
+                ListTile(
-            onTap: () {},
+                  title: const Text('Authors'),
-          ),
+                  leading: const Icon(Icons.person),
-          ListTile(
+                  trailing: const Icon(Icons.chevron_right),
-            title: const Text('Series'),
+                  onTap: () {
-            leading: const Icon(Icons.list),
+                    showNotImplementedToast(context);
-            trailing: const Icon(Icons.chevron_right),
+                  },
-            onTap: () {},
+                ),
-          ),
+                ListTile(
-          // Downloads
+                  title: const Text('Genres'),
-          ListTile(
+                  leading: const Icon(Icons.category),
-            title: const Text('Downloads'),
+                  trailing: const Icon(Icons.chevron_right),
-            leading: const Icon(Icons.download),
+                  onTap: () {
-            trailing: const Icon(Icons.chevron_right),
+                    showNotImplementedToast(context);
-            onTap: () {
+                  },
-              GoRouter.of(context).pushNamed(Routes.downloads.name);
+                ),
-            },
+                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,10 +19,10 @@ 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'),
-        backgroundColor: Colors.transparent,
         actions: [
           IconButton(
             tooltip: 'Logs',
@@ -63,7 +66,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 +216,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'),
-    );
-  }
-}

lib/pages/home_page.dart

@@ -19,7 +19,6 @@ class HomePage extends HookConsumerWidget {
     final scrollController = useScrollController();
     return Scaffold(
       appBar: AppBar(
-        backgroundColor: Colors.transparent,
         title: GestureDetector(
           child: Text(
             'Vaani',

lib/router/scaffold_with_nav_bar.dart

@@ -2,12 +2,15 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:miniplayer/miniplayer.dart';
+import 'package:vaani/api/library_provider.dart' show currentLibraryProvider;
 import 'package:vaani/features/explore/providers/search_controller.dart';
 import 'package:vaani/features/player/providers/player_form.dart';
 import 'package:vaani/features/player/view/audiobook_player.dart';
 import 'package:vaani/features/player/view/player_when_expanded.dart';
+import 'package:vaani/features/you/view/widgets/library_switch_chip.dart';
 import 'package:vaani/main.dart';
 import 'package:vaani/router/router.dart';
+import 'package:vaani/shared/icons/abs_icons.dart' show AbsIcons;
 
 // stack to track changes in navigationShell.currentIndex
 // home is always at index 0 and at the start and should be the last before popping
@@ -111,17 +114,39 @@ class ScaffoldWithNavBar extends HookConsumerWidget {
             // world scenario, the items would most likely be generated from the
             // branches of the shell route, which can be fetched using
             // `navigationShell.route.branches`.
-            destinations: _navigationItems
+            destinations: _navigationItems.map((item) {
-                .map(
+              final isDestinationLibrary = item.name == 'Library';
-                  (item) => NavigationDestination(
+              var currentLibrary =
-                    icon: Icon(item.icon),
+                  ref.watch(currentLibraryProvider).valueOrNull;
-                    selectedIcon: item.activeIcon != null
+              final libraryIcon = AbsIcons.getIconByName(
-                        ? Icon(item.activeIcon)
+                currentLibrary?.icon,
-                        : Icon(item.icon),
+              );
-                    label: item.name,
+              final destinationWidget = NavigationDestination(
-                  ),
+                icon: Icon(
-                )
+                  isDestinationLibrary ? libraryIcon ?? item.icon : item.icon,
-                .toList(),
+                ),
+                selectedIcon: Icon(
+                  isDestinationLibrary
+                      ? libraryIcon ?? item.activeIcon
+                      : item.activeIcon,
+                ),
+                label: isDestinationLibrary
+                    ? currentLibrary?.name ?? item.name
+                    : item.name,
+                tooltip: item.tooltip,
+              );
+              if (isDestinationLibrary) {
+                return GestureDetector(
+                  onSecondaryTap: () => showLibrarySwitcher(context, ref),
+                  onDoubleTap: () => showLibrarySwitcher(context, ref),
+                  child:
+                      destinationWidget, // Wrap the actual NavigationDestination
+                );
+              } else {
+                // Return the unwrapped destination for other items
+                return destinationWidget;
+              }
+            }).toList(),
             selectedIndex: navigationShell.currentIndex,
             onDestinationSelected: (int index) => _onTap(context, index, ref),
           ),
@@ -191,16 +216,19 @@ const _navigationItems = [
     name: 'Library',
     icon: Icons.book_outlined,
     activeIcon: Icons.book,
+    tooltip: 'Browse your library',
   ),
   _NavigationItem(
     name: 'Explore',
     icon: Icons.search_outlined,
     activeIcon: Icons.search,
+    tooltip: 'Search and Explore',
   ),
   _NavigationItem(
     name: 'You',
     icon: Icons.account_circle_outlined,
     activeIcon: Icons.account_circle,
+    tooltip: 'Your Profile and Settings',
   ),
 ];
 
@@ -208,10 +236,12 @@ class _NavigationItem {
   const _NavigationItem({
     required this.name,
     required this.icon,
-    this.activeIcon,
+    required this.activeIcon,
+    this.tooltip,
   });
 
   final String name;
   final IconData icon;
-  final IconData? activeIcon;
+  final IconData activeIcon;
+  final String? tooltip;
 }

lib/shared/icons/abs_icons.dart

@@ -0,0 +1,103 @@
+/// Flutter icons AbsIcons
+/// Copyright (C) 2025 by original authors @ fluttericon.com, fontello.com
+/// This font was generated by FlutterIcon.com, which is derived from Fontello.
+///
+/// To use this font, place it in your fonts/ directory and include the
+/// following in your pubspec.yaml
+///
+/// flutter:
+///   fonts:
+///    - family:  AbsIcons
+///      fonts:
+///       - asset: fonts/AbsIcons.ttf
+///
+///
+///
+library;
+// ignore_for_file: constant_identifier_names
+
+import 'package:flutter/widgets.dart' show IconData;
+
+class AbsIcons {
+  AbsIcons._();
+
+  static const _kFontFam = 'AbsIcons';
+  static const String? _kFontPkg = null;
+
+  static const IconData audiobookshelf =
+      IconData(0xe900, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData microphone_2 =
+      IconData(0xe901, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData microphone_1 =
+      IconData(0xe902, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData radio =
+      IconData(0xe903, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData podcast =
+      IconData(0xe904, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData books_1 =
+      IconData(0xe905, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData database_2 =
+      IconData(0xe906, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData headphones =
+      IconData(0xe910, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData music =
+      IconData(0xe911, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData video =
+      IconData(0xe914, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData microphone_3 =
+      IconData(0xe91e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData book =
+      IconData(0xe91f, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData books_2 =
+      IconData(0xe920, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData file_picture =
+      IconData(0xe927, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData database_1 =
+      IconData(0xe964, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData rocket =
+      IconData(0xe9a5, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData power =
+      IconData(0xe9b5, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData star =
+      IconData(0xe9d9, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData heart =
+      IconData(0xe9da, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData rss =
+      IconData(0xea9b, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+
+  static final Map<String, IconData> _iconMap = {
+    'audiobookshelf': audiobookshelf,
+    'microphone_2': microphone_2,
+    'microphone_1': microphone_1,
+    'radio': radio,
+    'podcast': podcast,
+    'books_1': books_1,
+    'database_2': database_2,
+    'headphones': headphones,
+    'music': music,
+    'video': video,
+    'microphone_3': microphone_3,
+    'book': book,
+    'books_2': books_2,
+    'file_picture': file_picture,
+    'database_1': database_1,
+    'rocket': rocket,
+    'power': power,
+    'star': star,
+    'heart': heart,
+    'rss': rss,
+  };
+
+  /// Returns the IconData corresponding to the [iconName] string.
+  ///
+  /// If the [iconName] is not found in the map, returns null.
+  /// Considers null or empty strings as invalid.
+  static IconData? getIconByName(String? iconName) {
+    if (iconName == null || iconName.isEmpty) {
+      return null;
+    }
+    return _iconMap[iconName.toLowerCase()];
+  }
+
+  static Map<String, IconData> get iconMap => _iconMap;
+}

lib/shared/widgets/vaani_logo.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+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'),
+    );
+  }
+}

pubspec.yaml

@@ -122,6 +122,7 @@ flutter:
     - assets/animations/
     - assets/sounds/
     - assets/images/
+    - assets/fonts/
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
   # An image asset can refer to one or more resolution-specific "variants", see
@@ -147,3 +148,7 @@ flutter:
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages
+  fonts:
+    - family: AbsIcons
+      fonts:
+        - asset: assets/fonts/AbsIcons.ttf

shelfsdk

@@ -1 +1 @@
-Subproject commit 5cc545ca87c05615473ab9c363cfa29e341d1e2a
+Subproject commit e1848a42c27257146015a33e9427f197f522fe03