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

Merge pull request #156 from cogwheel0/navigation-drawer-and-dropdown-refactor

Browse Source 
navigation-drawer-and-dropdown-refactor
This commit is contained in:
cogwheel
2025-11-21 12:22:15 +05:30
committed by GitHub
parent 7dd4c156fd dd3fe42216
commit f11f9c6558
3 changed files with 375 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1331,8 +1331,6 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
onPressed: _clearSelection, onPressed: _clearSelection,
) )
: (isTablet
? null // Hide menu button on tablets (drawer is always visible)
: Builder( : Builder(
builder: (ctx) => Padding( builder: (ctx) => Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
@@ -1340,7 +1338,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
child: IconButton( child: IconButton(
onPressed: () { onPressed: () {
// Suppress auto-focus and dismiss keyboard, then open drawer final layout = ResponsiveDrawerLayout.of(ctx);
if (layout == null) return;
final isDrawerOpen = layout.isOpen;
if (!isDrawerOpen) {
try { try {
ref ref
.read( .read(
@@ -1354,7 +1356,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
'TextInput.hide', 'TextInput.hide',
); );
} catch (_) {} } catch (_) {}
ResponsiveDrawerLayout.of(ctx)?.open(); }
layout.toggle();
}, },
icon: Icon( icon: Icon(
Platform.isIOS Platform.isIOS
@@ -1365,7 +1368,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
), ),
)), ),
title: _isSelectionMode title: _isSelectionMode
? Text( ? Text(
'${_selectedMessageIds.length} selected', '${_selectedMessageIds.length} selected',
@@ -1374,7 +1377,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
), ),
) )
: GestureDetector( : LayoutBuilder(
builder: (context, constraints) {
return GestureDetector(
onTap: () async { onTap: () async {
final modelsAsync = ref.read(modelsProvider); final modelsAsync = ref.read(modelsProvider);
@@ -1385,7 +1390,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
final models = await ref.read( final models = await ref.read(
modelsProvider.future, modelsProvider.future,
); );
// Check mounted and use context immediately together // Check mounted and use context immediately
// together
if (!mounted) return; if (!mounted) return;
// ignore: use_build_context_synchronously // ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models); _showModelDropdown(context, ref, models);
@@ -1397,20 +1403,23 @@ class _ChatPageState extends ConsumerState<ChatPage> {
); );
} }
} else if (modelsAsync.hasValue) { } else if (modelsAsync.hasValue) {
// If we have data, show immediately (no async gap) // If we have data, show immediately (no async
// gap)
_showModelDropdown( _showModelDropdown(
context, context,
ref, ref,
modelsAsync.value!, modelsAsync.value!,
); );
} else if (modelsAsync.hasError) { } else if (modelsAsync.hasError) {
// If there's an error, try to refresh and load // If there's an error, try to refresh and
// load
try { try {
ref.invalidate(modelsProvider); ref.invalidate(modelsProvider);
final models = await ref.read( final models = await ref.read(
modelsProvider.future, modelsProvider.future,
); );
// Check mounted and use context immediately together // Check mounted and use context immediately
// together
if (!mounted) return; if (!mounted) return;
// ignore: use_build_context_synchronously // ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models); _showModelDropdown(context, ref, models);
@@ -1434,12 +1443,22 @@ class _ChatPageState extends ConsumerState<ChatPage> {
conversation: conversation, conversation: conversation,
); );
}, },
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center,
children: [ children: [
AnimatedSwitcher( AnimatedSwitcher(
duration: const Duration(milliseconds: 250), duration: const Duration(
milliseconds: 250,
),
switchInCurve: Curves.easeOutCubic, switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeInCubic, switchOutCurve: Curves.easeInCubic,
child: displayConversationTitle != null child: displayConversationTitle != null
@@ -1450,14 +1469,16 @@ class _ChatPageState extends ConsumerState<ChatPage> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
StreamingTitleText( StreamingTitleText(
title: displayConversationTitle, title:
displayConversationTitle,
style: AppTypography style: AppTypography
.headlineSmallStyle .headlineSmallStyle
.copyWith( .copyWith(
color: context color: context
.conduitTheme .conduitTheme
.textPrimary, .textPrimary,
fontWeight: FontWeight.w600, fontWeight:
FontWeight.w600,
fontSize: 18, fontSize: 18,
height: 1.3, height: 1.3,
), ),
@@ -1466,33 +1487,60 @@ class _ChatPageState extends ConsumerState<ChatPage> {
.textPrimary .textPrimary
.withValues(alpha: 0.8), .withValues(alpha: 0.8),
), ),
const SizedBox(height: Spacing.xs), const SizedBox(
height: Spacing.xs,
),
], ],
) )
: const SizedBox.shrink( : const SizedBox.shrink(
key: ValueKey<String>('empty-title'), key: ValueKey<String>(
'empty-title',
),
), ),
), ),
Transform.translate( Transform.translate(
offset: const Offset(0, 0), offset: const Offset(0, 0),
child: () { child: () {
const double iconPaddingX =
Spacing.xs;
const double iconPaddingY =
Spacing.xxs;
const double iconWidth =
IconSize.small;
const double iconBoxWidth =
(iconPaddingX * 2) +
(BorderWidth.thin * 2) +
iconWidth;
final double maxLabelWidth =
(constraints.maxWidth -
(iconBoxWidth * 2) -
(Spacing.xs * 2))
.clamp(
48.0,
constraints.maxWidth,
);
final row = Row( final row = Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment:
MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Opacity( Opacity(
opacity: 0.0, opacity: 0.0,
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding:
horizontal: Spacing.xs, const EdgeInsets.symmetric(
vertical: Spacing.xxs, horizontal:
iconPaddingX,
vertical: iconPaddingY,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context color: context
.conduitTheme .conduitTheme
.surfaceBackground .surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
@@ -1504,17 +1552,22 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
child: Icon( child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.chevron_down ? CupertinoIcons
: Icons.keyboard_arrow_down, .chevron_down
: Icons
.keyboard_arrow_down,
color: context color: context
.conduitTheme .conduitTheme
.iconSecondary, .iconSecondary,
size: IconSize.small, size: iconWidth,
), ),
), ),
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Flexible( ConstrainedBox(
constraints: BoxConstraints(
maxWidth: maxLabelWidth,
),
child: MiddleEllipsisText( child: MiddleEllipsisText(
modelLabel, modelLabel,
style: modelTextStyle, style: modelTextStyle,
@@ -1524,16 +1577,18 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Container( Container(
padding: const EdgeInsets.symmetric( padding:
horizontal: Spacing.xs, const EdgeInsets.symmetric(
vertical: Spacing.xxs, horizontal: iconPaddingX,
vertical: iconPaddingY,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context color: context
.conduitTheme .conduitTheme
.surfaceBackground .surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
@@ -1545,37 +1600,55 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
child: Icon( child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.chevron_down ? CupertinoIcons
: Icons.keyboard_arrow_down, .chevron_down
: Icons
.keyboard_arrow_down,
color: context color: context
.conduitTheme .conduitTheme
.iconSecondary, .iconSecondary,
size: IconSize.small, size: iconWidth,
), ),
), ),
], ],
); );
final constrainedRow = ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
child: row,
);
return hasConversationTitle return hasConversationTitle
? SizedBox(height: 24, child: row) ? SizedBox(
: row; height: 24,
child: constrainedRow,
)
: constrainedRow;
}(), }(),
), ),
if (isReviewerMode) if (isReviewerMode)
Padding( Padding(
padding: const EdgeInsets.only(top: 2.0), padding: const EdgeInsets.only(
top: 2.0,
),
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm, horizontal: Spacing.sm,
vertical: 1.0, vertical: 1.0,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context.conduitTheme.success color: context
.conduitTheme
.success
.withValues(alpha: 0.1), .withValues(alpha: 0.1),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
color: context.conduitTheme.success color: context
.conduitTheme
.success
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
width: BorderWidth.thin, width: BorderWidth.thin,
), ),
@@ -1584,7 +1657,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
'REVIEWER MODE', 'REVIEWER MODE',
style: AppTypography.captionStyle style: AppTypography.captionStyle
.copyWith( .copyWith(
color: context.conduitTheme.success, color: context
.conduitTheme
.success,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 9, fontSize: 9,
), ),
@@ -1594,6 +1669,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
], ],
), ),
), ),
),
);
},
),
actions: [ actions: [
if (!_isSelectionMode) ...[ if (!_isSelectionMode) ...[
Padding( Padding(

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

@@ -1438,10 +1438,15 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
container.read(chat.chatMessagesProvider.notifier).clearMessages(); container.read(chat.chatMessagesProvider.notifier).clearMessages();
// Close the slide drawer for faster perceived performance // Close the slide drawer for faster perceived performance
// (only on mobile; on tablet, drawer stays visible) // (only on mobile; keep tablet drawer unless user toggles it)
if (mounted) { if (mounted) {
final mediaQuery = MediaQuery.maybeOf(context);
final isTablet =
mediaQuery != null && mediaQuery.size.shortestSide >= 600;
if (!isTablet) {
ResponsiveDrawerLayout.of(context)?.close(); ResponsiveDrawerLayout.of(context)?.close();
} }
}
// Load the full conversation details in the background // Load the full conversation details in the background
final api = container.read(apiServiceProvider); final api = container.read(apiServiceProvider);

59
lib/shared/widgets/responsive_drawer_layout.dart
View File

@@ -8,6 +8,7 @@ import '../../shared/theme/theme_extensions.dart';
/// ///
/// On tablets (shortestSide >= 600), the drawer is always visible alongside /// On tablets (shortestSide >= 600), the drawer is always visible alongside
/// the content. On mobile, it behaves like a standard slide drawer. /// the content. On mobile, it behaves like a standard slide drawer.
/// Tablets can optionally dismiss the docked drawer to reclaim space.
class ResponsiveDrawerLayout extends StatefulWidget { class ResponsiveDrawerLayout extends StatefulWidget {
final Widget child; final Widget child;
final Widget drawer; final Widget drawer;
@@ -26,6 +27,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
// Tablet-specific configuration // Tablet-specific configuration
final double tabletDrawerWidth; // Fixed width for tablet drawer final double tabletDrawerWidth; // Fixed width for tablet drawer
final bool tabletDismissible;
final bool tabletInitiallyDocked;
const ResponsiveDrawerLayout({ const ResponsiveDrawerLayout({
super.key, super.key,
@@ -42,6 +45,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
this.contentBlurSigma = 2.0, this.contentBlurSigma = 2.0,
this.onOpenStart, this.onOpenStart,
this.tabletDrawerWidth = 320.0, this.tabletDrawerWidth = 320.0,
this.tabletDismissible = true,
this.tabletInitiallyDocked = true,
}); });
static ResponsiveDrawerLayoutState? of(BuildContext context) => static ResponsiveDrawerLayoutState? of(BuildContext context) =>
@@ -58,6 +63,7 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
duration: widget.duration, duration: widget.duration,
value: 0.0, value: 0.0,
); );
late bool _isTabletDocked = widget.tabletInitiallyDocked;
bool _isTablet(BuildContext context) { bool _isTablet(BuildContext context) {
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
@@ -73,7 +79,20 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
double get _edgeWidth => double get _edgeWidth =>
MediaQuery.of(context).size.width * widget.edgeFraction; MediaQuery.of(context).size.width * widget.edgeFraction;
bool get isOpen => _controller.value == 1.0; bool get isOpen =>
_isTablet(context) ? _isTabletDocked : _controller.value == 1.0;
@override
void didUpdateWidget(covariant ResponsiveDrawerLayout oldWidget) {
super.didUpdateWidget(oldWidget);
if (!widget.tabletDismissible && !_isTabletDocked) {
setState(() => _isTabletDocked = true);
} else if (widget.tabletInitiallyDocked !=
oldWidget.tabletInitiallyDocked &&
_isTablet(context)) {
setState(() => _isTabletDocked = widget.tabletInitiallyDocked);
}
}
Future<void> _animateTo( Future<void> _animateTo(
double target, { double target, {
@@ -99,8 +118,12 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
void open({double velocity = 0.0}) { void open({double velocity = 0.0}) {
// Only animate on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!_isTabletDocked) {
setState(() => _isTabletDocked = true);
}
return;
}
try { try {
widget.onOpenStart?.call(); widget.onOpenStart?.call();
@@ -110,15 +133,23 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
void close({double velocity = 0.0}) { void close({double velocity = 0.0}) {
// Only animate on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!widget.tabletDismissible) return;
if (_isTabletDocked) {
setState(() => _isTabletDocked = false);
}
return;
}
_animateTo(0.0, velocity: velocity, easeOut: true); _animateTo(0.0, velocity: velocity, easeOut: true);
} }
void toggle() { void toggle() {
// Only toggle on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!widget.tabletDismissible) return;
setState(() => _isTabletDocked = !_isTabletDocked);
return;
}
isOpen ? close() : open(); isOpen ? close() : open();
} }
@@ -189,19 +220,29 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
Widget _buildTabletLayout(ConduitThemeExtension theme) { Widget _buildTabletLayout(ConduitThemeExtension theme) {
final targetWidth = widget.tabletDismissible && !_isTabletDocked
? 0.0
: widget.tabletDrawerWidth;
return Row( return Row(
children: [ children: [
// Persistent drawer // Persistent drawer
Container( AnimatedContainer(
width: widget.tabletDrawerWidth, duration: widget.duration,
curve: widget.curve,
width: targetWidth,
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.surfaceBackground, color: theme.surfaceBackground,
border: Border( border: Border(
right: BorderSide(color: theme.dividerColor, width: 1), right: BorderSide(color: theme.dividerColor, width: 1),
), ),
), ),
child: ClipRect(
child: IgnorePointer(
ignoring: widget.tabletDismissible && !_isTabletDocked,
child: widget.drawer, child: widget.drawer,
), ),
),
),
// Content // Content
Expanded(child: widget.child), Expanded(child: widget.child),
], ],