ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance chat page layout and improve drawer search functionality

Browse Source
This commit is contained in:
cogwheel0
2025-08-25 14:31:45 +05:30
parent eec2f7b8d7
commit d6f96ff5c5
2 changed files with 393 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
lib/features/chat/views/chat_page.dart
View File

@@ -1025,19 +1025,55 @@ class _ChatPageState extends ConsumerState<ChatPage> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( Transform.translate(
offset: const Offset(-6, 0),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Opacity(
opacity: 0.0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: context
.conduitTheme
.surfaceBackground
.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(
AppBorderRadius.badge,
),
border: Border.all(
color:
context.conduitTheme.dividerColor,
width: BorderWidth.thin,
),
),
child: Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
size: IconSize.small,
),
),
),
const SizedBox(width: Spacing.xs),
Flexible( Flexible(
child: Text( child: Text(
_formatModelDisplayName(selectedModel.name), _formatModelDisplayName(selectedModel.name),
style: AppTypography.headlineSmallStyle style: AppTypography.headlineSmallStyle
.copyWith( .copyWith(
color: context.conduitTheme.textPrimary, color:
context.conduitTheme.textPrimary,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
), ),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
), ),
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
@@ -1047,7 +1083,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
vertical: Spacing.xxs, vertical: Spacing.xxs,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground color: context
.conduitTheme
.surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
@@ -1067,6 +1105,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
], ],
), ),
),
),
if (ref.watch(reviewerModeProvider)) if (ref.watch(reviewerModeProvider))
Padding( Padding(
padding: const EdgeInsets.only(top: 2.0), padding: const EdgeInsets.only(top: 2.0),
@@ -1111,16 +1151,50 @@ class _ChatPageState extends ConsumerState<ChatPage> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( Transform.translate(
offset: const Offset(-6, 0),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Opacity(
opacity: 0.0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: context
.conduitTheme
.surfaceBackground
.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(
AppBorderRadius.badge,
),
border: Border.all(
color:
context.conduitTheme.dividerColor,
width: BorderWidth.thin,
),
),
child: Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
size: IconSize.small,
),
),
),
const SizedBox(width: Spacing.xs),
Flexible( Flexible(
child: Text( child: Text(
'Choose Model', 'Choose Model',
style: AppTypography.headlineSmallStyle style: AppTypography.headlineSmallStyle
.copyWith( .copyWith(
color: context.conduitTheme.textPrimary, color:
context.conduitTheme.textPrimary,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
), ),
maxLines: 1, maxLines: 1,
@@ -1135,7 +1209,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
vertical: Spacing.xxs, vertical: Spacing.xxs,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground color: context
.conduitTheme
.surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
@@ -1155,6 +1231,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
], ],
), ),
),
),
if (ref.watch(reviewerModeProvider)) if (ref.watch(reviewerModeProvider))
Padding( Padding(
padding: const EdgeInsets.only(top: 2.0), padding: const EdgeInsets.only(top: 2.0),

124
lib/features/navigation/widgets/chats_drawer.dart
View File

@@ -26,6 +26,7 @@ class ChatsDrawer extends ConsumerStatefulWidget {
class _ChatsDrawerState extends ConsumerState<ChatsDrawer> { class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
final TextEditingController _searchController = TextEditingController(); final TextEditingController _searchController = TextEditingController();
final FocusNode _searchFocusNode = FocusNode(debugLabel: 'drawer_search'); final FocusNode _searchFocusNode = FocusNode(debugLabel: 'drawer_search');
final ScrollController _listController = ScrollController();
Timer? _debounce; Timer? _debounce;
String _query = ''; String _query = '';
bool _isLoadingConversation = false; bool _isLoadingConversation = false;
@@ -44,6 +45,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
_debounce?.cancel(); _debounce?.cancel();
_searchController.dispose(); _searchController.dispose();
_searchFocusNode.dispose(); _searchFocusNode.dispose();
_listController.dispose();
super.dispose(); super.dispose();
} }
@@ -86,18 +88,23 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.bubble_left ? CupertinoIcons.bubble_left
: Icons.add_comment, : Icons.add_comment,
color: theme.iconPrimary, color: theme.iconPrimary,
size: IconSize.listItem,
), ),
onPressed: () { onPressed: () {
chat.startNewChat(ref); chat.startNewChat(ref);
if (mounted) Navigator.of(context).maybePop(); if (mounted) Navigator.of(context).maybePop();
}, },
tooltip: AppLocalizations.of(context)!.newChat, tooltip: AppLocalizations.of(context)!.newChat,
constraints: const BoxConstraints(
minWidth: TouchTarget.listItem,
minHeight: TouchTarget.listItem,
),
), ),
], ],
), ),
), ),
Expanded(child: _buildConversationList(context)), Expanded(child: _buildConversationList(context)),
const Divider(height: 1), Divider(height: 1, color: theme.dividerColor),
_buildBottomSection(context), _buildBottomSection(context),
], ],
), ),
@@ -106,25 +113,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Widget _buildSearchField(BuildContext context) { Widget _buildSearchField(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
return Container( return TextField(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
theme.inputBackground.withValues(alpha: 0.6),
theme.inputBackground.withValues(alpha: 0.3),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: _searchFocusNode.hasFocus
? theme.buttonPrimary.withValues(alpha: 0.8)
: theme.inputBorder.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
child: TextField(
controller: _searchController, controller: _searchController,
focusNode: _searchFocusNode, focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(), onChanged: (_) => _onSearchChanged(),
@@ -135,13 +124,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
decoration: InputDecoration( decoration: InputDecoration(
hintText: AppLocalizations.of(context)!.searchConversations, hintText: AppLocalizations.of(context)!.searchConversations,
hintStyle: TextStyle( hintStyle: TextStyle(
color: theme.inputPlaceholder.withValues(alpha: 0.8), color: theme.inputPlaceholder,
fontSize: AppTypography.bodyMedium, fontSize: AppTypography.bodyMedium,
), ),
prefixIcon: Icon( prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search, Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: theme.iconSecondary, color: theme.iconSecondary,
size: IconSize.md, size: IconSize.input,
), ),
suffixIcon: _query.isNotEmpty suffixIcon: _query.isNotEmpty
? IconButton( ? IconButton(
@@ -155,15 +144,27 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.clear_circled_solid ? CupertinoIcons.clear_circled_solid
: Icons.clear, : Icons.clear,
color: theme.iconSecondary, color: theme.iconSecondary,
size: IconSize.md, size: IconSize.input,
), ),
) )
: null, : null,
border: InputBorder.none, filled: true,
contentPadding: const EdgeInsets.symmetric( fillColor: theme.inputBackground,
horizontal: 16, border: OutlineInputBorder(
vertical: 12, borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide.none,
), ),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(color: theme.inputBorder, width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(color: theme.buttonPrimary, width: 1),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.md,
), ),
), ),
); );
@@ -213,7 +214,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
.toList(); .toList();
final archived = list.where((c) => c.archived == true).toList(); final archived = list.where((c) => c.archived == true).toList();
return ListView( return Scrollbar(
controller: _listController,
child: ListView(
controller: _listController,
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
Spacing.md, Spacing.md,
Spacing.sm, Spacing.sm,
@@ -250,7 +254,9 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
// Show all folders (including empty) // Show all folders (including empty)
final sections = folders.map((folder) { final sections = folders.map((folder) {
final expandedMap = ref.watch(_expandedFoldersProvider); final expandedMap = ref.watch(
_expandedFoldersProvider,
);
final isExpanded = expandedMap[folder.id] ?? false; final isExpanded = expandedMap[folder.id] ?? false;
final convs = grouped[folder.id] ?? const <dynamic>[]; final convs = grouped[folder.id] ?? const <dynamic>[];
return Column( return Column(
@@ -294,6 +300,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
_buildArchivedSection(archived), _buildArchivedSection(archived),
], ],
], ],
),
); );
}, },
loading: () => loading: () =>
@@ -350,7 +357,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
.toList(); .toList();
final archived = list.where((c) => c.archived == true).toList(); final archived = list.where((c) => c.archived == true).toList();
return ListView( return Scrollbar(
controller: _listController,
child: ListView(
controller: _listController,
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
Spacing.md, Spacing.md,
Spacing.sm, Spacing.sm,
@@ -429,6 +439,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
_buildArchivedSection(archived), _buildArchivedSection(archived),
], ],
], ],
),
); );
}, },
loading: () => loading: () =>
@@ -453,17 +464,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
children: [ children: [
Text( Text(
title, title,
style: AppTypography.bodySmallStyle.copyWith( style: AppTypography.labelStyle.copyWith(color: theme.textSecondary),
fontWeight: FontWeight.w600,
color: theme.textSecondary,
letterSpacing: 0.2,
),
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.surfaceBackground.withValues(alpha: 0.6), color: theme.surfaceContainer.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.xs), borderRadius: BorderRadius.circular(AppBorderRadius.xs),
border: Border.all( border: Border.all(
color: theme.dividerColor, color: theme.dividerColor,
@@ -472,9 +479,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
), ),
child: Text( child: Text(
'$count', '$count',
style: AppTypography.bodySmallStyle.copyWith( style: AppTypography.tiny.copyWith(color: theme.textSecondary),
color: theme.textSecondary,
),
), ),
), ),
], ],
@@ -488,11 +493,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
children: [ children: [
Text( Text(
AppLocalizations.of(context)!.folders, AppLocalizations.of(context)!.folders,
style: AppTypography.bodySmallStyle.copyWith( style: AppTypography.labelStyle.copyWith(color: theme.textSecondary),
fontWeight: FontWeight.w600,
color: theme.textSecondary,
letterSpacing: 0.2,
),
), ),
const Spacer(), const Spacer(),
IconButton( IconButton(
@@ -615,7 +616,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
return Material( return Material(
color: isHover color: isHover
? theme.buttonPrimary.withValues(alpha: 0.08) ? theme.buttonPrimary.withValues(alpha: 0.08)
: theme.surfaceBackground.withValues(alpha: 0.05), : theme.surfaceContainer.withValues(alpha: 0.05),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
side: BorderSide( side: BorderSide(
@@ -652,6 +653,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.folder ? CupertinoIcons.folder
: Icons.folder), : Icons.folder),
color: theme.iconPrimary, color: theme.iconPrimary,
size: IconSize.listItem,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
Expanded( Expanded(
@@ -679,6 +681,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.chevron_down ? CupertinoIcons.chevron_down
: Icons.expand_more), : Icons.expand_more),
color: theme.iconSecondary, color: theme.iconSecondary,
size: IconSize.listItem,
), ),
], ],
), ),
@@ -890,7 +893,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: isHover color: isHover
? theme.buttonPrimary.withValues(alpha: 0.08) ? theme.buttonPrimary.withValues(alpha: 0.08)
: theme.surfaceBackground.withValues(alpha: 0.03), : theme.surfaceContainer.withValues(alpha: 0.03),
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all( border: Border.all(
color: isHover color: isHover
@@ -931,6 +934,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Widget _buildTileFor(dynamic conv, {bool inFolder = false}) { Widget _buildTileFor(dynamic conv, {bool inFolder = false}) {
final isActive = ref.watch(activeConversationProvider)?.id == conv.id; final isActive = ref.watch(activeConversationProvider)?.id == conv.id;
final title = conv.title?.isEmpty == true ? 'Chat' : (conv.title ?? 'Chat'); final title = conv.title?.isEmpty == true ? 'Chat' : (conv.title ?? 'Chat');
final theme = context.conduitTheme;
final tile = _ConversationTile( final tile = _ConversationTile(
title: title, title: title,
pinned: conv.pinned == true, pinned: conv.pinned == true,
@@ -938,14 +942,12 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
onTap: _isLoadingConversation onTap: _isLoadingConversation
? null ? null
: () => _selectConversation(context, conv.id), : () => _selectConversation(context, conv.id),
// Remove long-press context menu to avoid conflict with drag gesture
onLongPress: null, onLongPress: null,
onMorePressed: () { onMorePressed: () {
HapticFeedback.selectionClick(); HapticFeedback.selectionClick();
_showConversationContextMenu(context, conv); _showConversationContextMenu(context, conv);
}, },
); );
return Padding( return Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
bottom: Spacing.xs, bottom: Spacing.xs,
@@ -966,12 +968,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
vertical: Spacing.sm, vertical: Spacing.sm,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).cardColor, color: theme.cardBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all( border: Border.all(
color: Theme.of(context).dividerColor, color: theme.dividerColor,
width: BorderWidth.regular, width: BorderWidth.regular,
), ),
boxShadow: ConduitShadows.card,
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@@ -980,7 +983,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.chat_bubble_2 ? CupertinoIcons.chat_bubble_2
: Icons.chat_bubble_outline, : Icons.chat_bubble_outline,
size: IconSize.md, size: IconSize.listItem,
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Text(title, maxLines: 1, overflow: TextOverflow.ellipsis), Text(title, maxLines: 1, overflow: TextOverflow.ellipsis),
@@ -1019,7 +1022,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Material( Material(
color: theme.surfaceBackground.withValues(alpha: 0.05), color: theme.surfaceContainer.withValues(alpha: 0.05),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
side: BorderSide( side: BorderSide(
@@ -1042,6 +1045,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.archivebox ? CupertinoIcons.archivebox
: Icons.archive_rounded, : Icons.archive_rounded,
color: theme.iconPrimary, color: theme.iconPrimary,
size: IconSize.listItem,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
Expanded( Expanded(
@@ -1069,6 +1073,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
? CupertinoIcons.chevron_down ? CupertinoIcons.chevron_down
: Icons.expand_more), : Icons.expand_more),
color: theme.iconSecondary, color: theme.iconSecondary,
size: IconSize.listItem,
), ),
], ],
), ),
@@ -1179,12 +1184,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Container( Container(
padding: const EdgeInsets.all(Spacing.sm), padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.surfaceBackground.withValues(alpha: 0.04), color: theme.surfaceContainer.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all( border: Border.all(
color: theme.dividerColor, color: theme.dividerColor,
width: BorderWidth.regular, width: BorderWidth.regular,
), ),
boxShadow: ConduitShadows.card,
), ),
child: Row( child: Row(
children: [ children: [
@@ -1506,9 +1512,7 @@ class _ConversationTile extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
return Material( return Material(
color: selected color: Colors.transparent,
? theme.buttonPrimary.withValues(alpha: 0.08)
: theme.surfaceBackground.withValues(alpha: 0.03),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
side: BorderSide( side: BorderSide(
@@ -1534,7 +1538,7 @@ class _ConversationTile extends StatelessWidget {
title, title,
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: AppTypography.bodyLargeStyle.copyWith( style: AppTypography.standard.copyWith(
color: theme.textPrimary, color: theme.textPrimary,
fontWeight: selected ? FontWeight.w600 : FontWeight.w500, fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
), ),
@@ -1546,15 +1550,15 @@ class _ConversationTile extends StatelessWidget {
visualDensity: VisualDensity.compact, visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
constraints: const BoxConstraints( constraints: const BoxConstraints(
minWidth: 36, minWidth: TouchTarget.listItem,
minHeight: 36, minHeight: TouchTarget.listItem,
), ),
icon: Icon( icon: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.ellipsis ? CupertinoIcons.ellipsis
: Icons.more_vert_rounded, : Icons.more_vert_rounded,
color: theme.iconSecondary, color: theme.iconSecondary,
size: IconSize.md, size: IconSize.listItem,
), ),
onPressed: onMorePressed, onPressed: onMorePressed,
tooltip: AppLocalizations.of(context)!.more, tooltip: AppLocalizations.of(context)!.more,