feat: Refactor gallery-related UI components for consistency and improve drawer navigation

lib/screens/gallery_action_sheet.dart

···
           ),
           ListTile(
             leading: const Icon(Icons.sort),
-            title: const Text('Change sort order'),
+            title: const Text('Edit sort order'),
             onTap: () {
               Navigator.of(context).pop();
               if (onChangeSortOrder != null) onChangeSortOrder!();

lib/screens/gallery_edit_photos_sheet.dart

···
         backgroundColor: theme.colorScheme.surface,
         border: Border(bottom: BorderSide(color: theme.dividerColor, width: 1)),
         middle: Text(
-          'Edit Gallery Photos',
+          'Edit photos',
           style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600),
         ),
-        leading: CupertinoButton(
+        trailing: CupertinoButton(
           padding: EdgeInsets.zero,
           onPressed: (_loading || _deletingPhotoIndex != null)
               ? null
-              : () => Navigator.of(context).maybePop(),
+              : () {
+                  widget.onSave(_photos);
+                  Navigator.of(context).maybePop();
+                },
           child: Text(
-            'Cancel',
+            'Done',
             style: TextStyle(
               color: _deletingPhotoIndex != null ? theme.disabledColor : theme.colorScheme.primary,
               fontWeight: FontWeight.w600,

lib/screens/gallery_sort_order_sheet.dart

···
         backgroundColor: theme.colorScheme.surface,
         border: Border(bottom: BorderSide(color: theme.dividerColor, width: 1)),
         middle: Text(
-          'Change Sort Order',
+          'Edit sort order',
           style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600),
         ),
         leading: CupertinoButton(

lib/screens/home_page.dart

···
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:grain/api.dart';
 import 'package:grain/screens/create_gallery_page.dart';
-import 'package:grain/widgets/app_version_text.dart';
+import 'package:grain/widgets/app_drawer.dart';
 import 'package:grain/widgets/bottom_nav_bar.dart';
 import 'package:grain/widgets/timeline_item.dart';
 
 import '../providers/gallery_cache_provider.dart';
 import 'explore_page.dart';
-import 'log_page.dart';
+// ...existing code...
 import 'notifications_page.dart';
 import 'profile_page.dart';
 
···
 }
 
 class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
+  PreferredSizeWidget _buildAppBar(ThemeData theme, {required String title}) {
+    return AppBar(
+      backgroundColor: theme.appBarTheme.backgroundColor,
+      surfaceTintColor: theme.appBarTheme.backgroundColor,
+      elevation: 0.5,
+      title: Text(title, style: theme.appBarTheme.titleTextStyle),
+      leading: Builder(
+        builder: (context) => IconButton(
+          color: theme.colorScheme.onSurfaceVariant,
+          iconSize: 20,
+          icon: const Icon(FontAwesomeIcons.bars),
+          onPressed: () => Scaffold.of(context).openDrawer(),
+        ),
+      ),
+      actions: [
+        IconButton(
+          color: theme.colorScheme.onSurfaceVariant,
+          iconSize: 20,
+          icon: const Icon(FontAwesomeIcons.arrowRightFromBracket),
+          tooltip: 'Sign Out',
+          onPressed: widget.onSignOut,
+        ),
+      ],
+    );
+  }
+
   bool showProfile = false;
   bool showNotifications = false;
   bool showExplore = false;
···
     );
   }
 
-  Widget _buildAppDrawer(ThemeData theme, String? avatarUrl) {
-    return Drawer(
-      child: ListView(
-        padding: EdgeInsets.zero,
-        children: [
-          Container(
-            height: 250,
-            decoration: BoxDecoration(
-              color: theme.colorScheme.surface,
-              border: Border(bottom: BorderSide(color: theme.dividerColor, width: 1)),
-            ),
-            padding: const EdgeInsets.fromLTRB(16, 115, 16, 16),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                CircleAvatar(
-                  radius: 22,
-                  backgroundColor: theme.scaffoldBackgroundColor,
-                  backgroundImage: (avatarUrl != null && avatarUrl.isNotEmpty)
-                      ? NetworkImage(avatarUrl)
-                      : null,
-                  child: (avatarUrl == null || avatarUrl.isEmpty)
-                      ? Icon(Icons.person, size: 44, color: theme.hintColor)
-                      : null,
-                ),
-                const SizedBox(height: 6),
-                Text(
-                  apiService.currentUser?.displayName ?? '',
-                  style: theme.textTheme.bodyLarge?.copyWith(
-                    fontWeight: FontWeight.bold,
-                    color: theme.colorScheme.onSurface,
-                  ),
-                ),
-                if (apiService.currentUser?.handle != null)
-                  Text(
-                    '@${apiService.currentUser!.handle}',
-                    style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
-                  ),
-                const SizedBox(height: 6),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  children: [
-                    Text(
-                      (apiService.currentUser?.followersCount ?? 0).toString(),
-                      style: theme.textTheme.bodyMedium?.copyWith(
-                        fontWeight: FontWeight.bold,
-                        color: theme.colorScheme.onSurface,
-                      ),
-                    ),
-                    const SizedBox(width: 4),
-                    Text(
-                      'Followers',
-                      style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
-                    ),
-                    const SizedBox(width: 16),
-                    Text(
-                      (apiService.currentUser?.followsCount ?? 0).toString(),
-                      style: theme.textTheme.bodyMedium?.copyWith(
-                        fontWeight: FontWeight.bold,
-                        color: theme.colorScheme.onSurface,
-                      ),
-                    ),
-                    const SizedBox(width: 4),
-                    Text(
-                      'Following',
-                      style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-          ListTile(
-            leading: const Icon(FontAwesomeIcons.house),
-            title: const Text('Home'),
-            onTap: () {
-              Navigator.pop(context);
-              setState(() {
-                showProfile = false;
-                showNotifications = false;
-                showExplore = false;
-              });
-            },
-          ),
-          ListTile(
-            leading: const Icon(FontAwesomeIcons.magnifyingGlass),
-            title: const Text('Explore'),
-            onTap: () {
-              Navigator.pop(context);
-              setState(() {
-                showExplore = true;
-                showProfile = false;
-                showNotifications = false;
-              });
-            },
-          ),
-          ListTile(
-            leading: const Icon(FontAwesomeIcons.user),
-            title: const Text('Profile'),
-            onTap: () {
-              Navigator.pop(context);
-              setState(() {
-                showProfile = true;
-                showNotifications = false;
-                showExplore = false;
-              });
-            },
-          ),
-          ListTile(
-            leading: const Icon(FontAwesomeIcons.list),
-            title: const Text('Logs'),
-            onTap: () {
-              Navigator.pop(context);
-              Navigator.of(context).push(MaterialPageRoute(builder: (context) => const LogPage()));
-            },
-          ),
-          const SizedBox(height: 16),
-          Padding(
-            padding: const EdgeInsets.only(bottom: 16.0),
-            child: Center(child: AppVersionText()),
-          ),
-        ],
-      ),
-    );
-  }
+  // ...existing code...
 
   @override
   Widget build(BuildContext context) {
···
         onDrawerChanged: (isOpen) {
           setState(() {});
         },
-        drawer: _buildAppDrawer(theme, avatarUrl),
-        appBar: AppBar(
-          backgroundColor: theme.appBarTheme.backgroundColor,
-          surfaceTintColor: theme.appBarTheme.backgroundColor,
-          elevation: 0.5,
-          title: Text(widget.title),
-          leading: Builder(
-            builder: (context) => IconButton(
-              icon: const Icon(Icons.menu),
-              onPressed: () => Scaffold.of(context).openDrawer(),
-            ),
-          ),
-          actions: [
-            IconButton(
-              icon: const Icon(Icons.logout),
-              tooltip: 'Sign Out',
-              onPressed: widget.onSignOut,
-            ),
-          ],
+        drawer: AppDrawer(
+          theme: theme,
+          avatarUrl: avatarUrl,
+          activeIndex: _navIndex,
+          onHome: () {
+            setState(() {
+              showProfile = false;
+              showNotifications = false;
+              showExplore = false;
+            });
+          },
+          onExplore: () {
+            setState(() {
+              showProfile = false;
+              showNotifications = false;
+              showExplore = true;
+            });
+          },
+          onNotifications: () {
+            setState(() {
+              showProfile = false;
+              showNotifications = true;
+              showExplore = false;
+            });
+          },
+          onProfile: () {
+            setState(() {
+              showProfile = true;
+              showNotifications = false;
+              showExplore = false;
+            });
+          },
         ),
+        appBar: _buildAppBar(theme, title: widget.title),
         body: _buildTimelineSliver(context),
         bottomNavigationBar: BottomNavBar(
           navIndex: _navIndex,
···
             });
           },
         ),
-        floatingActionButton: (!showProfile && !showNotifications && !showExplore)
+        floatingActionButton: (!showNotifications && !showExplore)
             ? FloatingActionButton(
                 shape: const CircleBorder(),
                 onPressed: () async {
···
       );
     }
     // Explore, Notifications, Profile: no tabs, no TabController
+    String pageTitle = showExplore
+        ? 'Explore'
+        : showNotifications
+        ? 'Notifications'
+        : '';
     return Scaffold(
-      drawer: _buildAppDrawer(theme, avatarUrl),
-      appBar: (showExplore || showNotifications)
-          ? AppBar(
-              backgroundColor: theme.appBarTheme.backgroundColor,
-              surfaceTintColor: theme.appBarTheme.backgroundColor,
-              elevation: 0.5,
-              title: Text(
-                showExplore ? 'Explore' : 'Notifications',
-                style: theme.appBarTheme.titleTextStyle,
-              ),
-              leading: Builder(
-                builder: (context) => IconButton(
-                  icon: const Icon(Icons.menu),
-                  onPressed: () => Scaffold.of(context).openDrawer(),
-                ),
-              ),
-              actions: [
-                IconButton(
-                  icon: const Icon(Icons.logout),
-                  tooltip: 'Sign Out',
-                  onPressed: widget.onSignOut,
-                ),
-              ],
-            )
-          : null,
+      drawer: AppDrawer(
+        theme: theme,
+        avatarUrl: avatarUrl,
+        activeIndex: _navIndex,
+        onHome: () {
+          setState(() {
+            showProfile = false;
+            showNotifications = false;
+            showExplore = false;
+          });
+        },
+        onExplore: () {
+          setState(() {
+            showProfile = false;
+            showNotifications = false;
+            showExplore = true;
+          });
+        },
+        onNotifications: () {
+          setState(() {
+            showProfile = false;
+            showNotifications = true;
+            showExplore = false;
+          });
+        },
+        onProfile: () {
+          setState(() {
+            showProfile = true;
+            showNotifications = false;
+            showExplore = false;
+          });
+        },
+      ),
+      appBar: (showExplore || showNotifications) ? _buildAppBar(theme, title: pageTitle) : null,
       body: Stack(
         children: [
           if (showExplore)

lib/screens/notifications_page.dart

···
     );
   }
 
+  Widget _buildSkeletonTile(BuildContext context) {
+    final theme = Theme.of(context);
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+      leading: Container(
+        width: 40,
+        height: 40,
+        decoration: BoxDecoration(
+          color: theme.colorScheme.surfaceContainerHighest.withAlpha(128),
+          shape: BoxShape.circle,
+        ),
+      ),
+      title: Container(
+        width: 120,
+        height: 16,
+        color: theme.colorScheme.surfaceContainerHighest.withAlpha(128),
+        margin: const EdgeInsets.only(bottom: 4),
+      ),
+      subtitle: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            width: 180,
+            height: 14,
+            color: theme.colorScheme.surfaceContainerHighest.withAlpha(128),
+            margin: const EdgeInsets.only(bottom: 8),
+          ),
+          Container(
+            width: 140,
+            height: 12,
+            color: theme.colorScheme.surfaceContainerHighest.withAlpha(128),
+          ),
+        ],
+      ),
+      isThreeLine: true,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     return Scaffold(
       backgroundColor: theme.scaffoldBackgroundColor,
       body: _loading
-          ? Center(
-              child: CircularProgressIndicator(strokeWidth: 2, color: theme.colorScheme.primary),
+          ? ListView.separated(
+              itemCount: 6,
+              separatorBuilder: (context, index) => Divider(height: 1, color: theme.dividerColor),
+              itemBuilder: (context, index) => _buildSkeletonTile(context),
             )
           : _error
           ? Center(child: Text('Failed to load notifications.', style: theme.textTheme.bodyMedium))

lib/widgets/app_drawer.dart

···
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:grain/api.dart';
+import 'package:grain/screens/log_page.dart';
+import 'package:grain/widgets/app_version_text.dart';
+
+class AppDrawer extends StatelessWidget {
+  final ThemeData theme;
+  final String? avatarUrl;
+  final int activeIndex; // 0: Home, 1: Explore, 2: Notifications, 3: Profile
+  final VoidCallback onHome;
+  final VoidCallback onExplore;
+  final VoidCallback onNotifications;
+  final VoidCallback onProfile;
+
+  const AppDrawer({
+    super.key,
+    required this.theme,
+    required this.avatarUrl,
+    required this.activeIndex,
+    required this.onHome,
+    required this.onExplore,
+    required this.onNotifications,
+    required this.onProfile,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          Container(
+            height: 250,
+            decoration: BoxDecoration(
+              color: theme.colorScheme.surface,
+              border: Border(bottom: BorderSide(color: theme.dividerColor, width: 1)),
+            ),
+            padding: const EdgeInsets.fromLTRB(16, 115, 16, 16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                CircleAvatar(
+                  radius: 22,
+                  backgroundColor: theme.scaffoldBackgroundColor,
+                  backgroundImage: (avatarUrl?.isNotEmpty ?? false)
+                      ? NetworkImage(avatarUrl!)
+                      : null,
+                  child: (avatarUrl?.isEmpty ?? true)
+                      ? Icon(Icons.person, size: 44, color: theme.hintColor)
+                      : null,
+                ),
+                const SizedBox(height: 6),
+                Text(
+                  apiService.currentUser?.displayName ?? '',
+                  style: theme.textTheme.bodyLarge?.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: theme.colorScheme.onSurface,
+                  ),
+                ),
+                if (apiService.currentUser?.handle != null)
+                  Text(
+                    '@${apiService.currentUser!.handle}',
+                    style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
+                  ),
+                const SizedBox(height: 6),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  children: [
+                    Text(
+                      (apiService.currentUser?.followersCount ?? 0).toString(),
+                      style: theme.textTheme.bodyMedium?.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: theme.colorScheme.onSurface,
+                      ),
+                    ),
+                    const SizedBox(width: 4),
+                    Text(
+                      'Followers',
+                      style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
+                    ),
+                    const SizedBox(width: 16),
+                    Text(
+                      (apiService.currentUser?.followsCount ?? 0).toString(),
+                      style: theme.textTheme.bodyMedium?.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: theme.colorScheme.onSurface,
+                      ),
+                    ),
+                    const SizedBox(width: 4),
+                    Text(
+                      'Following',
+                      style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+          ListTile(
+            leading: Icon(
+              FontAwesomeIcons.house,
+              size: 18,
+              color: activeIndex == 0 ? theme.colorScheme.primary : theme.iconTheme.color,
+            ),
+            title: Text(
+              'Home',
+              style: TextStyle(
+                color: activeIndex == 0 ? theme.colorScheme.primary : theme.textTheme.bodyLarge?.color,
+                fontWeight: activeIndex == 0 ? FontWeight.bold : FontWeight.normal,
+              ),
+            ),
+            onTap: () {
+              Navigator.pop(context);
+              onHome();
+            },
+          ),
+          ListTile(
+            leading: Icon(
+              FontAwesomeIcons.magnifyingGlass,
+              size: 18,
+              color: activeIndex == 1 ? theme.colorScheme.primary : theme.iconTheme.color,
+            ),
+            title: Text(
+              'Explore',
+              style: TextStyle(
+                color: activeIndex == 1 ? theme.colorScheme.primary : theme.textTheme.bodyLarge?.color,
+                fontWeight: activeIndex == 1 ? FontWeight.bold : FontWeight.normal,
+              ),
+            ),
+            onTap: () {
+              Navigator.pop(context);
+              onExplore();
+            },
+          ),
+          ListTile(
+            leading: Icon(
+              FontAwesomeIcons.solidBell,
+              size: 18,
+              color: activeIndex == 2 ? theme.colorScheme.primary : theme.iconTheme.color,
+            ),
+            title: Text(
+              'Notifications',
+              style: TextStyle(
+                color: activeIndex == 2 ? theme.colorScheme.primary : theme.textTheme.bodyLarge?.color,
+                fontWeight: activeIndex == 2 ? FontWeight.bold : FontWeight.normal,
+              ),
+            ),
+            onTap: () {
+              Navigator.pop(context);
+              onNotifications();
+            },
+          ),
+          ListTile(
+            leading: Icon(
+              FontAwesomeIcons.user,
+              size: 18,
+              color: activeIndex == 3 ? theme.colorScheme.primary : theme.iconTheme.color,
+            ),
+            title: Text(
+              'Profile',
+              style: TextStyle(
+                color: activeIndex == 3 ? theme.colorScheme.primary : theme.textTheme.bodyLarge?.color,
+                fontWeight: activeIndex == 3 ? FontWeight.bold : FontWeight.normal,
+              ),
+            ),
+            onTap: () {
+              Navigator.pop(context);
+              onProfile();
+            },
+          ),
+          ListTile(
+            leading: const Icon(FontAwesomeIcons.list, size: 18),
+            title: const Text('Logs'),
+            onTap: () {
+              Navigator.pop(context);
+              Navigator.of(context).push(MaterialPageRoute(builder: (context) => const LogPage()));
+            },
+          ),
+          const SizedBox(height: 16),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 16.0),
+            child: Center(child: AppVersionText()),
+          ),
+        ],
+      ),
+    );
+  }
+}