refactor: replace SlideDrawer with ResponsiveDrawerLayout for improved responsiveness

- Updated ChatPage and ChatsDrawer to utilize ResponsiveDrawerLayout instead of SlideDrawer, enhancing the drawer's adaptability across devices.
- Removed the SlideDrawer implementation, streamlining the codebase and improving maintainability.
- Adjusted drawer opening and closing logic to align with the new layout structure, ensuring a smoother user experience on both mobile and tablet devices.
This commit is contained in:
cogwheel0
2025-10-10 21:21:13 +05:30
parent 87f8e069eb
commit dea53593ba
3 changed files with 126 additions and 63 deletions

View File

@@ -8,7 +8,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'dart:io' show Platform;
import '../../../shared/widgets/slide_drawer.dart';
import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../navigation/widgets/chats_drawer.dart';
import 'dart:async';
import '../../../core/providers/app_providers.dart';
@@ -1201,13 +1201,14 @@ class _ChatPageState extends ConsumerState<ChatPage> {
? context.colorTokens.overlayMedium
: context.colorTokens.overlayStrong;
return SlideDrawer(
return ResponsiveDrawerLayout(
maxFraction: maxFraction,
edgeFraction: edgeFraction,
settleFraction: 0.06, // even gentler settle for instant open feel
scrimColor: scrim,
contentScaleDelta: 0.0,
contentBlurSigma: 0.0,
tabletDrawerWidth: 320.0,
onOpenStart: () {
// Suppress composer auto-focus once we unfocus for the drawer
try {
@@ -1245,38 +1246,41 @@ class _ChatPageState extends ConsumerState<ChatPage> {
),
onPressed: _clearSelection,
)
: Builder(
builder: (ctx) => Padding(
padding: const EdgeInsets.only(
left: Spacing.inputPadding,
),
child: IconButton(
onPressed: () {
// Suppress auto-focus and dismiss keyboard, then open drawer
try {
ref
.read(
composerAutofocusEnabledProvider
.notifier,
)
.set(false);
FocusManager.instance.primaryFocus?.unfocus();
SystemChannels.textInput.invokeMethod(
'TextInput.hide',
);
} catch (_) {}
SlideDrawer.of(ctx)?.open();
},
icon: Icon(
Platform.isIOS
? CupertinoIcons.line_horizontal_3
: Icons.menu,
color: context.conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
),
),
: (isTablet
? null // Hide menu button on tablets (drawer is always visible)
: Builder(
builder: (ctx) => Padding(
padding: const EdgeInsets.only(
left: Spacing.inputPadding,
),
child: IconButton(
onPressed: () {
// Suppress auto-focus and dismiss keyboard, then open drawer
try {
ref
.read(
composerAutofocusEnabledProvider
.notifier,
)
.set(false);
FocusManager.instance.primaryFocus
?.unfocus();
SystemChannels.textInput.invokeMethod(
'TextInput.hide',
);
} catch (_) {}
ResponsiveDrawerLayout.of(ctx)?.open();
},
icon: Icon(
Platform.isIOS
? CupertinoIcons.line_horizontal_3
: Icons.menu,
color: context.conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
),
)),
title: _isSelectionMode
? Text(
'${_selectedMessageIds.length} selected',
@@ -1719,7 +1723,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
],
),
),
), // Scaffold inside SlideDrawer
), // Scaffold inside ResponsiveDrawerLayout
);
},
),

View File

@@ -22,7 +22,7 @@ import '../../../core/utils/user_avatar_utils.dart';
import '../../../shared/utils/conversation_context_menu.dart';
import '../../../shared/widgets/user_avatar.dart';
import '../../../shared/widgets/model_avatar.dart';
import '../../../shared/widgets/slide_drawer.dart';
import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../../core/models/model.dart';
import '../../../core/models/conversation.dart';
import '../../../core/models/folder.dart';
@@ -1388,8 +1388,9 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
container.read(chat.chatMessagesProvider.notifier).clearMessages();
// Close the slide drawer for faster perceived performance
// (only on mobile; on tablet, drawer stays visible)
if (mounted) {
SlideDrawer.of(context)?.close();
ResponsiveDrawerLayout.of(context)?.close();
}
// Load the full conversation details in the background