feat(ui): Refactor chats drawer with floating search and user sections

lib/features/navigation/widgets/chats_drawer.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io' show Platform;
+import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -113,12 +114,26 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
   // Legacy helper removed: drawer now uses slivers with lazy delegates.
 
   Widget _buildRefreshableScrollableSlivers({required List<Widget> slivers}) {
+    // Add padding at top and bottom for floating elements
+    final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
+    final paddedSlivers = <Widget>[
+      // Top padding for floating search bar area (sm + search height + md)
+      const SliverToBoxAdapter(
+        child: SizedBox(height: Spacing.sm + 48 + Spacing.md),
+      ),
+      ...slivers,
+      // Bottom padding for floating user tile area (xl + tile height + md + safe area)
+      SliverToBoxAdapter(
+        child: SizedBox(height: Spacing.xl + 52 + Spacing.md + bottomPadding),
+      ),
+    ];
+
     final scroll = CustomScrollView(
       key: const PageStorageKey<String>('chats_drawer_scroll'),
       controller: _listController,
       physics: const AlwaysScrollableScrollPhysics(),
       cacheExtent: 800,
-      slivers: slivers,
+      slivers: paddedSlivers,
     );
 
     final refreshableScroll = ConduitRefreshIndicator(
@@ -163,47 +178,136 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
         color: sidebarTheme.background,
         border: Border(right: BorderSide(color: sidebarTheme.border)),
       ),
-      child: Column(
+      child: Stack(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
+          // Main scrollable content - extends behind floating elements
+          Positioned.fill(
+            child: _buildConversationList(context),
+          ),
+          // Floating top area with gradient background (matches app bar pattern)
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  stops: const [0.0, 0.4, 1.0],
+                  colors: [
+                    sidebarTheme.background,
+                    sidebarTheme.background.withValues(alpha: 0.85),
+                    sidebarTheme.background.withValues(alpha: 0.0),
+                  ],
+                ),
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // Small top padding
+                  const SizedBox(height: Spacing.sm),
+                  // Floating search bar
                   Padding(
-            padding: const EdgeInsets.fromLTRB(
+                    padding: const EdgeInsets.symmetric(
-              Spacing.inputPadding,
+                      horizontal: Spacing.inputPadding,
-              Spacing.sm,
+                    ),
-              Spacing.md,
+                    child: _buildFloatingSearchField(context),
-              Spacing.sm,
+                  ),
+                  // Gradient fade area below
+                  const SizedBox(height: Spacing.md),
+                ],
+              ),
+            ),
+          ),
+          // Floating bottom area with gradient background (matches chat input pattern)
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  stops: const [0.0, 0.4, 1.0],
+                  colors: [
+                    sidebarTheme.background.withValues(alpha: 0.0),
+                    sidebarTheme.background.withValues(alpha: 0.85),
+                    sidebarTheme.background,
+                  ],
+                ),
+              ),
+              child: Builder(
+                builder: (context) {
+                  final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
+                  return Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      // Gradient fade area above
+                      const SizedBox(height: Spacing.xl),
+                      // Floating user tile
+                      Padding(
+                        padding: EdgeInsets.fromLTRB(
+                          Spacing.screenPadding,
+                          0,
+                          Spacing.screenPadding,
+                          bottomPadding + Spacing.md,
+                        ),
+                        child: _buildFloatingBottomSection(context),
+                      ),
+                    ],
+                  );
+                },
               ),
-            child: Row(children: [Expanded(child: _buildSearchField(context))]),
             ),
-          Expanded(child: _buildConversationList(context)),
-          Divider(
-            height: 1,
-            color: sidebarTheme.border.withValues(alpha: 0.28),
           ),
-          _buildBottomSection(context),
         ],
       ),
     );
   }
 
-  Widget _buildSearchField(BuildContext context) {
+  Widget _buildFloatingSearchField(BuildContext context) {
-    final sidebarTheme = context.sidebarTheme;
+    final theme = Theme.of(context);
-    return Material(
+    final conduitTheme = context.conduitTheme;
+    final isDark = theme.brightness == Brightness.dark;
+
+    final backgroundColor = isDark
+        ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
+        : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
+
+    final borderColor = conduitTheme.cardBorder.withValues(
+      alpha: isDark ? 0.65 : 0.55,
+    );
+
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(AppBorderRadius.pill),
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+        child: Container(
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: BorderRadius.circular(AppBorderRadius.pill),
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
+          ),
+          child: Material(
             color: Colors.transparent,
             child: TextField(
               controller: _searchController,
               focusNode: _searchFocusNode,
               onChanged: (_) => _onSearchChanged(),
-        style: AppTypography.standard.copyWith(color: sidebarTheme.foreground),
+              style: AppTypography.standard.copyWith(
+                color: conduitTheme.textPrimary,
+              ),
               decoration: InputDecoration(
                 isDense: true,
                 hintText: AppLocalizations.of(context)!.searchConversations,
                 hintStyle: AppTypography.standard.copyWith(
-            color: sidebarTheme.foreground.withValues(alpha: 0.6),
+                  color: conduitTheme.textSecondary.withValues(alpha: 0.6),
                 ),
                 prefixIcon: Icon(
                   Platform.isIOS ? CupertinoIcons.search : Icons.search,
-            color: sidebarTheme.foreground.withValues(alpha: 0.7),
+                  color: conduitTheme.iconSecondary,
                   size: IconSize.input,
                 ),
                 prefixIconConstraints: const BoxConstraints(
@@ -221,7 +325,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                           Platform.isIOS
                               ? CupertinoIcons.clear_circled_solid
                               : Icons.clear,
-                    color: sidebarTheme.foreground.withValues(alpha: 0.7),
+                          color: conduitTheme.iconSecondary,
                           size: IconSize.input,
                         ),
                       )
@@ -230,29 +334,16 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                   minWidth: TouchTarget.minimum,
                   minHeight: TouchTarget.minimum,
                 ),
-          filled: true,
+                filled: false,
-          fillColor: sidebarTheme.accent.withValues(alpha: 0.9),
+                border: InputBorder.none,
-          border: OutlineInputBorder(
+                enabledBorder: InputBorder.none,
-            borderRadius: BorderRadius.circular(AppBorderRadius.md),
+                focusedBorder: InputBorder.none,
-            borderSide: BorderSide.none,
-          ),
-          enabledBorder: OutlineInputBorder(
-            borderRadius: BorderRadius.circular(AppBorderRadius.md),
-            borderSide: BorderSide(
-              color: sidebarTheme.border.withValues(alpha: 0.28),
-              width: BorderWidth.thin,
-            ),
-          ),
-          focusedBorder: OutlineInputBorder(
-            borderRadius: BorderRadius.circular(AppBorderRadius.md),
-            borderSide: BorderSide(
-              color: sidebarTheme.ring.withValues(alpha: 0.6),
-              width: BorderWidth.thin,
-            ),
-          ),
                 contentPadding: const EdgeInsets.symmetric(
                   horizontal: Spacing.md,
-            vertical: Spacing.xs,
+                  vertical: Spacing.sm,
+                ),
+              ),
+            ),
           ),
         ),
       ),
@@ -1608,9 +1699,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
     }
   }
 
-  Widget _buildBottomSection(BuildContext context) {
+  Widget _buildFloatingBottomSection(BuildContext context) {
-    final theme = context.conduitTheme;
+    final theme = Theme.of(context);
-    final sidebarTheme = context.sidebarTheme;
+    final conduitTheme = context.conduitTheme;
+    final isDark = theme.brightness == Brightness.dark;
     final authUser = ref.watch(currentUserProvider2);
     final asyncUser = ref.watch(currentUserProvider);
     final user = asyncUser.maybeWhen(
@@ -1630,22 +1722,29 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
     final initial = initialFor(displayName);
     final avatarUrl = resolveUserAvatarUrlForUser(api, user);
 
-    return Padding(
+    final backgroundColor = isDark
-      padding: const EdgeInsets.fromLTRB(Spacing.sm, 0, Spacing.sm, Spacing.sm),
+        ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
-      child: Column(
+        : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
-        mainAxisSize: MainAxisSize.min,
+
-        children: [
+    final borderColor = conduitTheme.cardBorder.withValues(
-          if (user != null) ...[
+      alpha: isDark ? 0.65 : 0.55,
-            const SizedBox(height: Spacing.sm),
+    );
-            Container(
+
-              padding: const EdgeInsets.all(Spacing.sm),
+    if (user == null) return const SizedBox.shrink();
-              decoration: BoxDecoration(
+
-                color: sidebarTheme.accent.withValues(alpha: 0.6),
+    return ClipRRect(
-                borderRadius: BorderRadius.circular(AppBorderRadius.small),
+      borderRadius: BorderRadius.circular(AppBorderRadius.pill),
-                border: Border.all(
+      child: BackdropFilter(
-                  color: sidebarTheme.border.withValues(alpha: 0.28),
+        filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-                  width: BorderWidth.thin,
+        child: Container(
+          padding: const EdgeInsets.symmetric(
+            horizontal: Spacing.sm,
+            vertical: Spacing.xs,
           ),
+          decoration: BoxDecoration(
+            color: backgroundColor.withValues(alpha: 0.85),
+            borderRadius: BorderRadius.circular(AppBorderRadius.pill),
+            border: Border.all(color: borderColor, width: BorderWidth.thin),
           ),
           child: Row(
             children: [
@@ -1657,12 +1756,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                     AppBorderRadius.avatar,
                   ),
                   border: Border.all(
-                        color: theme.buttonPrimary.withValues(alpha: 0.25),
+                    color: conduitTheme.buttonPrimary.withValues(alpha: 0.25),
                     width: BorderWidth.thin,
                   ),
                 ),
-                    // Hard-edge clipping is cheaper than anti-aliased clipping
-                    // and sufficient for avatar squares with rounded corners.
                 clipBehavior: Clip.hardEdge,
                 child: UserAvatar(
                   size: 36,
@@ -1677,7 +1774,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                   style: AppTypography.bodySmallStyle.copyWith(
-                        color: sidebarTheme.foreground,
+                    color: conduitTheme.textPrimary,
                     fontWeight: FontWeight.w600,
                     decoration: TextDecoration.none,
                   ),
@@ -1696,7 +1793,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                     Platform.isIOS
                         ? CupertinoIcons.doc_text
                         : Icons.note_alt_outlined,
-                        color: sidebarTheme.foreground.withValues(alpha: 0.8),
+                    color: conduitTheme.iconPrimary,
                     size: IconSize.medium,
                   ),
                 ),
@@ -1711,15 +1808,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                   Platform.isIOS
                       ? CupertinoIcons.settings
                       : Icons.settings_rounded,
-                      color: sidebarTheme.foreground.withValues(alpha: 0.8),
+                  color: conduitTheme.iconPrimary,
                   size: IconSize.medium,
                 ),
               ),
             ],
           ),
         ),
-          ],
-        ],
       ),
     );
   }