Merge pull request #195 from cogwheel0/improve-chat-drawer-ux

improve-chat-drawer-ux

lib/core/persistence/persistence_keys.dart

@@ -30,6 +30,11 @@ final class PreferenceKeys {
   static const String ttsServerVoiceName = 'tts_server_voice_name';
   static const String voiceSilenceDuration = 'voice_silence_duration';
   static const String androidAssistantTrigger = 'android_assistant_trigger';
+
+  // Drawer section collapsed states
+  static const String drawerShowPinned = 'drawer_show_pinned';
+  static const String drawerShowFolders = 'drawer_show_folders';
+  static const String drawerShowRecent = 'drawer_show_recent';
 }
 
 final class LegacyPreferenceKeys {

lib/features/chat/views/chat_page.dart

@@ -709,12 +709,13 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                 ?.cast<String, dynamic>();
                             final name =
                                 meta?['name']?.toString() ?? parsed.host;
-                            final collectionName =
+                            final collectionName = result?['collection_name']
-                                result?['collection_name']?.toString();
+                                ?.toString();
 
                             // Add as appropriate type
-                            final notifier =
+                            final notifier = ref.read(
-                                ref.read(contextAttachmentsProvider.notifier);
+                              contextAttachmentsProvider.notifier,
+                            );
                             if (isYoutube) {
                               notifier.addYoutube(
                                 displayName: name,
@@ -1680,13 +1681,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                 constraints: BoxConstraints(
                                   maxWidth: constraints.maxWidth,
                                 ),
-                                child: FittedBox(
-                                  fit: BoxFit.scaleDown,
-                                  alignment: Alignment.center,
                                 child: Column(
                                   mainAxisSize: MainAxisSize.min,
-                                    crossAxisAlignment:
+                                  crossAxisAlignment: CrossAxisAlignment.center,
-                                        CrossAxisAlignment.center,
                                   children: [
                                     AnimatedSwitcher(
                                       duration: const Duration(
@@ -1701,7 +1698,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                               ),
                                               mainAxisSize: MainAxisSize.min,
                                               children: [
-                                                  StreamingTitleText(
+                                                ConstrainedBox(
+                                                  constraints: BoxConstraints(
+                                                    maxWidth:
+                                                        constraints.maxWidth,
+                                                  ),
+                                                  child: StreamingTitleText(
                                                     title:
                                                         displayConversationTitle,
                                                     style: AppTypography
@@ -1720,6 +1722,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                                         .textPrimary
                                                         .withValues(alpha: 0.8),
                                                   ),
+                                                ),
                                                 const SizedBox(
                                                   height: Spacing.xs,
                                                 ),
@@ -1734,12 +1737,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                     Transform.translate(
                                       offset: const Offset(0, 0),
                                       child: () {
-                                          const double iconPaddingX =
+                                        const double iconPaddingX = Spacing.xs;
-                                              Spacing.xs;
+                                        const double iconPaddingY = Spacing.xxs;
-                                          const double iconPaddingY =
+                                        const double iconWidth = IconSize.small;
-                                              Spacing.xxs;
-                                          const double iconWidth =
-                                              IconSize.small;
                                         const double iconBoxWidth =
                                             (iconPaddingX * 2) +
                                             (BorderWidth.thin * 2) +
@@ -1763,8 +1763,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                               child: Container(
                                                 padding:
                                                     const EdgeInsets.symmetric(
-                                                        horizontal:
+                                                      horizontal: iconPaddingX,
-                                                            iconPaddingX,
                                                       vertical: iconPaddingY,
                                                     ),
                                                 decoration: BoxDecoration(
@@ -1835,8 +1834,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                                 Platform.isIOS
                                                     ? CupertinoIcons
                                                           .chevron_down
-                                                      : Icons
+                                                    : Icons.keyboard_arrow_down,
-                                                            .keyboard_arrow_down,
                                                 color: context
                                                     .conduitTheme
                                                     .iconSecondary,
@@ -1870,12 +1868,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                             vertical: 1.0,
                                           ),
                                           decoration: BoxDecoration(
-                                              color: context
+                                            color: context.conduitTheme.success
-                                                  .conduitTheme
-                                                  .success
                                                 .withValues(alpha: 0.1),
-                                              borderRadius:
+                                            borderRadius: BorderRadius.circular(
-                                                  BorderRadius.circular(
                                               AppBorderRadius.badge,
                                             ),
                                             border: Border.all(
@@ -1902,7 +1897,6 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                   ],
                                 ),
                               ),
-                              ),
                             );
                           },
                         ),

lib/features/chat/widgets/streaming_title_text.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import '../../../shared/widgets/middle_ellipsis_text.dart';
+
 /// Displays a chat title that reveals characters with a streaming animation
 /// whenever the title changes.
 class StreamingTitleText extends StatefulWidget {
@@ -141,17 +143,33 @@ class _StreamingTitleTextState extends State<StreamingTitleText>
             ? widget.style.fontSize! * (widget.style.height ?? 1.1)
             : 18.0);
 
-    return Row(
+    // When animation is complete, use middle ellipsis for overflow.
+    // During animation, show partial text with standard Text widget.
+    final bool animationComplete = revealedGlyphs >= totalGlyphs;
+
+    // Use middle ellipsis when animation is complete
+    if (animationComplete) {
+      return MiddleEllipsisText(
+        _activeTitle,
+        style: widget.style,
+        textAlign: TextAlign.center,
+        semanticsLabel: _activeTitle,
+      );
+    }
+
+    // During animation, use IntrinsicWidth to size the row to the text,
+    // then clip any overflow from the cursor
+    return ClipRect(
+      child: Row(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Flexible(
             child: Text(
-            // When the animation completes we fall back to the full string.
+              visibleText,
-            revealedGlyphs >= totalGlyphs ? _activeTitle : visibleText,
               maxLines: 1,
-            overflow: TextOverflow.fade,
+              overflow: TextOverflow.clip,
               softWrap: false,
               textAlign: TextAlign.center,
               style: widget.style,
@@ -171,6 +189,7 @@ class _StreamingTitleTextState extends State<StreamingTitleText>
               ),
             ),
         ],
+      ),
     );
   }
 

lib/features/navigation/widgets/chats_drawer.dart

@@ -26,6 +26,13 @@ import '../../../shared/widgets/responsive_drawer_layout.dart';
 import '../../../core/models/model.dart';
 import '../../../core/models/conversation.dart';
 import '../../../core/models/folder.dart';
+import '../../../core/persistence/persistence_keys.dart';
+import '../../../core/persistence/hive_boxes.dart';
+import 'package:hive_ce/hive.dart';
+import '../../../shared/widgets/middle_ellipsis_text.dart';
+
+/// Defines the section types that can be collapsed in the chats drawer
+enum _SectionType { pinned, recent }
 
 class ChatsDrawer extends ConsumerStatefulWidget {
   const ChatsDrawer({super.key});
@@ -49,6 +56,12 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
   // UI state providers for sections
   static final _showArchivedProvider =
       NotifierProvider<_ShowArchivedNotifier, bool>(_ShowArchivedNotifier.new);
+  static final _showPinnedProvider =
+      NotifierProvider<_ShowPinnedNotifier, bool>(_ShowPinnedNotifier.new);
+  static final _showFoldersProvider =
+      NotifierProvider<_ShowFoldersNotifier, bool>(_ShowFoldersNotifier.new);
+  static final _showRecentProvider =
+      NotifierProvider<_ShowRecentNotifier, bool>(_ShowRecentNotifier.new);
   static final _expandedFoldersProvider =
       NotifierProvider<_ExpandedFoldersNotifier, Map<String, bool>>(
         _ExpandedFoldersNotifier.new,
@@ -318,6 +331,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
 
           final archived = list.where((c) => c.archived == true).toList();
 
+          final showPinned = ref.watch(_showPinnedProvider);
+          final showFolders = ref.watch(_showFoldersProvider);
+          final showRecent = ref.watch(_showRecentProvider);
+
           final slivers = <Widget>[
             if (pinned.isNotEmpty) ...[
               SliverPadding(
@@ -326,11 +343,14 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                   child: _buildSectionHeader(
                     AppLocalizations.of(context)!.pinned,
                     pinned.length,
+                    sectionType: _SectionType.pinned,
                   ),
                 ),
               ),
+              if (showPinned) ...[
                 const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
                 _conversationsSliver(pinned, modelsById: modelsById),
+              ],
               const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
             ],
 
@@ -339,6 +359,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
               padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
               sliver: SliverToBoxAdapter(child: _buildFoldersSectionHeader()),
             ),
+            if (showFolders) ...[
               const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
               if (_isDragging && _draggingHasFolder) ...[
                 SliverPadding(
@@ -361,7 +382,8 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
 
                       final out = <Widget>[];
                       for (final folder in folders) {
-                      final existing = grouped[folder.id] ?? const <dynamic>[];
+                        final existing =
+                            grouped[folder.id] ?? const <dynamic>[];
                         final convs = _resolveFolderConversations(
                           folder,
                           existing,
@@ -399,19 +421,23 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                           );
                           out.add(
                             const SliverToBoxAdapter(
-                            child: SizedBox(height: Spacing.xs),
+                              child: SizedBox(height: Spacing.sm),
                             ),
                           );
-                      }
+                        } else {
+                          // Only add spacing after collapsed folders
                           out.add(
                             const SliverToBoxAdapter(
                               child: SizedBox(height: Spacing.xs),
                             ),
                           );
                         }
+                      }
                       return out.isEmpty
                           ? <Widget>[
-                            const SliverToBoxAdapter(child: SizedBox.shrink()),
+                              const SliverToBoxAdapter(
+                                child: SizedBox.shrink(),
+                              ),
                             ]
                           : out;
                     },
@@ -422,6 +448,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                       const SliverToBoxAdapter(child: SizedBox.shrink()),
                     ],
                   ),
+            ],
             const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
 
             if (regular.isNotEmpty) ...[
@@ -431,12 +458,15 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                   child: _buildSectionHeader(
                     AppLocalizations.of(context)!.recent,
                     regular.length,
+                    sectionType: _SectionType.recent,
                   ),
                 ),
               ),
+              if (showRecent) ...[
                 const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
                 _conversationsSliver(regular, modelsById: modelsById),
               ],
+            ],
 
             if (archived.isNotEmpty) ...[
               const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
@@ -525,6 +555,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
 
         final archived = list.where((c) => c.archived == true).toList();
 
+        final showPinned = ref.watch(_showPinnedProvider);
+        final showFolders = ref.watch(_showFoldersProvider);
+        final showRecent = ref.watch(_showRecentProvider);
+
         final slivers = <Widget>[
           SliverPadding(
             padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
@@ -543,22 +577,33 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                 child: _buildSectionHeader(
                   AppLocalizations.of(context)!.pinned,
                   pinned.length,
+                  sectionType: _SectionType.pinned,
                 ),
               ),
             ),
+          ]);
+          if (showPinned) {
+            slivers.addAll([
               const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
               _conversationsSliver(pinned, modelsById: modelsById),
-            const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
             ]);
           }
+          slivers.add(
+            const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
+          );
+        }
 
-        slivers.addAll([
+        slivers.add(
           SliverPadding(
             padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
             sliver: SliverToBoxAdapter(child: _buildFoldersSectionHeader()),
           ),
+        );
+
+        if (showFolders) {
+          slivers.add(
             const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
-        ]);
+          );
 
           if (_isDragging && _draggingHasFolder) {
             slivers.add(
@@ -623,6 +668,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                           child: SizedBox(height: Spacing.sm),
                         ),
                       );
+                    } else {
+                      // Only add spacing after collapsed folders
+                      out.add(
+                        const SliverToBoxAdapter(
+                          child: SizedBox(height: Spacing.xs),
+                        ),
+                      );
                     }
                   }
                   return out.isEmpty
@@ -639,23 +691,32 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                 ],
               );
           slivers.addAll(folderSlivers);
+        }
+
+        slivers.add(
+          const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
+        );
 
         if (regular.isNotEmpty) {
-          slivers.addAll([
+          slivers.add(
-            const SliverToBoxAdapter(child: SizedBox(height: Spacing.md)),
             SliverPadding(
               padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
               sliver: SliverToBoxAdapter(
                 child: _buildSectionHeader(
                   AppLocalizations.of(context)!.recent,
                   regular.length,
+                  sectionType: _SectionType.recent,
                 ),
               ),
             ),
+          );
+          if (showRecent) {
+            slivers.addAll([
               const SliverToBoxAdapter(child: SizedBox(height: Spacing.xs)),
               _conversationsSliver(regular, modelsById: modelsById),
             ]);
           }
+        }
 
         if (archived.isNotEmpty) {
           slivers.addAll([
@@ -693,10 +754,41 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
     );
   }
 
-  Widget _buildSectionHeader(String title, int count) {
+  Widget _buildSectionHeader(
+    String title,
+    int count, {
+    _SectionType? sectionType,
+  }) {
     final sidebarTheme = context.sidebarTheme;
-    return Row(
+
+    // Get the collapsed state for the section type
+    bool isExpanded = true;
+    VoidCallback? onToggle;
+
+    if (sectionType == _SectionType.pinned) {
+      isExpanded = ref.watch(_showPinnedProvider);
+      onToggle = () => ref.read(_showPinnedProvider.notifier).toggle();
+    } else if (sectionType == _SectionType.recent) {
+      isExpanded = ref.watch(_showRecentProvider);
+      onToggle = () => ref.read(_showRecentProvider.notifier).toggle();
+    }
+
+    final headerContent = Row(
       children: [
+        if (onToggle != null) ...[
+          Icon(
+            isExpanded
+                ? (Platform.isIOS
+                      ? CupertinoIcons.chevron_down
+                      : Icons.expand_more)
+                : (Platform.isIOS
+                      ? CupertinoIcons.chevron_right
+                      : Icons.chevron_right),
+            color: sidebarTheme.foreground.withValues(alpha: 0.6),
+            size: IconSize.sm,
+          ),
+          const SizedBox(width: Spacing.xxs),
+        ],
         Text(
           title,
           style: AppTypography.labelStyle.copyWith(
@@ -726,13 +818,49 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
         ),
       ],
     );
+
+    if (onToggle == null) {
+      return headerContent;
+    }
+
+    return InkWell(
+      onTap: onToggle,
+      borderRadius: BorderRadius.circular(AppBorderRadius.xs),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: Spacing.xxs),
+        child: headerContent,
+      ),
+    );
   }
 
   /// Header for the Folders section with a create button on the right
   Widget _buildFoldersSectionHeader() {
     final theme = context.conduitTheme;
+    final sidebarTheme = context.sidebarTheme;
+    final isExpanded = ref.watch(_showFoldersProvider);
+
     return Row(
       children: [
+        InkWell(
+          onTap: () => ref.read(_showFoldersProvider.notifier).toggle(),
+          borderRadius: BorderRadius.circular(AppBorderRadius.xs),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: Spacing.xxs),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  isExpanded
+                      ? (Platform.isIOS
+                            ? CupertinoIcons.chevron_down
+                            : Icons.expand_more)
+                      : (Platform.isIOS
+                            ? CupertinoIcons.chevron_right
+                            : Icons.chevron_right),
+                  color: sidebarTheme.foreground.withValues(alpha: 0.6),
+                  size: IconSize.sm,
+                ),
+                const SizedBox(width: Spacing.xxs),
                 Text(
                   AppLocalizations.of(context)!.folders,
                   style: AppTypography.labelStyle.copyWith(
@@ -740,6 +868,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
                     decoration: TextDecoration.none,
                   ),
                 ),
+              ],
+            ),
+          ),
+        ),
         const Spacer(),
         IconButton(
           visualDensity: VisualDensity.compact,
@@ -1580,6 +1712,51 @@ class _ShowArchivedNotifier extends Notifier<bool> {
   void set(bool value) => state = value;
 }
 
+class _ShowPinnedNotifier extends Notifier<bool> {
+  Box<dynamic> get _box => Hive.box<dynamic>(HiveBoxNames.preferences);
+
+  @override
+  bool build() {
+    return _box.get(PreferenceKeys.drawerShowPinned, defaultValue: true)
+        as bool;
+  }
+
+  void toggle() {
+    state = !state;
+    _box.put(PreferenceKeys.drawerShowPinned, state);
+  }
+}
+
+class _ShowFoldersNotifier extends Notifier<bool> {
+  Box<dynamic> get _box => Hive.box<dynamic>(HiveBoxNames.preferences);
+
+  @override
+  bool build() {
+    return _box.get(PreferenceKeys.drawerShowFolders, defaultValue: true)
+        as bool;
+  }
+
+  void toggle() {
+    state = !state;
+    _box.put(PreferenceKeys.drawerShowFolders, state);
+  }
+}
+
+class _ShowRecentNotifier extends Notifier<bool> {
+  Box<dynamic> get _box => Hive.box<dynamic>(HiveBoxNames.preferences);
+
+  @override
+  bool build() {
+    return _box.get(PreferenceKeys.drawerShowRecent, defaultValue: true)
+        as bool;
+  }
+
+  void toggle() {
+    state = !state;
+    _box.put(PreferenceKeys.drawerShowRecent, state);
+  }
+}
+
 class _ExpandedFoldersNotifier extends Notifier<Map<String, bool>> {
   @override
   Map<String, bool> build() => {};
@@ -1736,11 +1913,10 @@ class _ConversationTileContent extends StatelessWidget {
             ],
             Flexible(
               fit: textFit,
-              child: Text(
+              child: MiddleEllipsisText(
                 title,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
                 style: textStyle,
+                semanticsLabel: title,
               ),
             ),
             ...trailing,

lib/shared/theme/tweakcn_themes.dart

@@ -210,7 +210,7 @@ class TweakcnThemes {
     border: const Color(0xFF282828),
     input: const Color(0xFF343434),
     ring: const Color(0xFF737373),
-    sidebarBackground: const Color(0xFF171717),
+    sidebarBackground: const Color(0xFF0A0A0A),
     sidebarForeground: const Color(0xFFFAFAFA),
     sidebarPrimary: const Color(0xFF1447E6),
     sidebarPrimaryForeground: const Color(0xFFFAFAFA),