feat(ui): Refactor chats drawer with floating search and user sections
This commit is contained in:
cogwheel0
@@ -1,5 +1,6 @@
|
|||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
import 'dart:io' show Platform;
|
import 'dart:io' show Platform;
|
||||||
|
import 'dart:ui' show ImageFilter;
|
||||||
|
|
||||||
import 'package:flutter/cupertino.dart';
|
import 'package:flutter/cupertino.dart';
|
||||||
import 'package:flutter/material.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.
|
// Legacy helper removed: drawer now uses slivers with lazy delegates.
|
||||||
|
|
||||||
Widget _buildRefreshableScrollableSlivers({required List<Widget> slivers}) {
|
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(
|
final scroll = CustomScrollView(
|
||||||
key: const PageStorageKey<String>('chats_drawer_scroll'),
|
key: const PageStorageKey<String>('chats_drawer_scroll'),
|
||||||
controller: _listController,
|
controller: _listController,
|
||||||
physics: const AlwaysScrollableScrollPhysics(),
|
physics: const AlwaysScrollableScrollPhysics(),
|
||||||
cacheExtent: 800,
|
cacheExtent: 800,
|
||||||
slivers: slivers,
|
slivers: paddedSlivers,
|
||||||
);
|
);
|
||||||
|
|
||||||
final refreshableScroll = ConduitRefreshIndicator(
|
final refreshableScroll = ConduitRefreshIndicator(
|
||||||
@@ -163,97 +178,173 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
|
|||||||
color: sidebarTheme.background,
|
color: sidebarTheme.background,
|
||||||
border: Border(right: BorderSide(color: sidebarTheme.border)),
|
border: Border(right: BorderSide(color: sidebarTheme.border)),
|
||||||
),
|
),
|
||||||
child: Column(
|
child: Stack(
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
||||||
children: [
|
children: [
|
||||||
Padding(
|
// Main scrollable content - extends behind floating elements
|
||||||
padding: const EdgeInsets.fromLTRB(
|
Positioned.fill(
|
||||||
Spacing.inputPadding,
|
child: _buildConversationList(context),
|
||||||
Spacing.sm,
|
),
|
||||||
Spacing.md,
|
// Floating top area with gradient background (matches app bar pattern)
|
||||||
Spacing.sm,
|
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.symmetric(
|
||||||
|
horizontal: Spacing.inputPadding,
|
||||||
|
),
|
||||||
|
child: _buildFloatingSearchField(context),
|
||||||
|
),
|
||||||
|
// Gradient fade area below
|
||||||
|
const SizedBox(height: Spacing.md),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
child: Row(children: [Expanded(child: _buildSearchField(context))]),
|
|
||||||
),
|
),
|
||||||
Expanded(child: _buildConversationList(context)),
|
// Floating bottom area with gradient background (matches chat input pattern)
|
||||||
Divider(
|
Positioned(
|
||||||
height: 1,
|
bottom: 0,
|
||||||
color: sidebarTheme.border.withValues(alpha: 0.28),
|
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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
_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;
|
||||||
color: Colors.transparent,
|
final isDark = theme.brightness == Brightness.dark;
|
||||||
child: TextField(
|
|
||||||
controller: _searchController,
|
final backgroundColor = isDark
|
||||||
focusNode: _searchFocusNode,
|
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
|
||||||
onChanged: (_) => _onSearchChanged(),
|
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
|
||||||
style: AppTypography.standard.copyWith(color: sidebarTheme.foreground),
|
|
||||||
decoration: InputDecoration(
|
final borderColor = conduitTheme.cardBorder.withValues(
|
||||||
isDense: true,
|
alpha: isDark ? 0.65 : 0.55,
|
||||||
hintText: AppLocalizations.of(context)!.searchConversations,
|
);
|
||||||
hintStyle: AppTypography.standard.copyWith(
|
|
||||||
color: sidebarTheme.foreground.withValues(alpha: 0.6),
|
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),
|
||||||
),
|
),
|
||||||
prefixIcon: Icon(
|
child: Material(
|
||||||
Platform.isIOS ? CupertinoIcons.search : Icons.search,
|
color: Colors.transparent,
|
||||||
color: sidebarTheme.foreground.withValues(alpha: 0.7),
|
child: TextField(
|
||||||
size: IconSize.input,
|
controller: _searchController,
|
||||||
),
|
focusNode: _searchFocusNode,
|
||||||
prefixIconConstraints: const BoxConstraints(
|
onChanged: (_) => _onSearchChanged(),
|
||||||
minWidth: TouchTarget.minimum,
|
style: AppTypography.standard.copyWith(
|
||||||
minHeight: TouchTarget.minimum,
|
color: conduitTheme.textPrimary,
|
||||||
),
|
),
|
||||||
suffixIcon: _query.isNotEmpty
|
decoration: InputDecoration(
|
||||||
? IconButton(
|
isDense: true,
|
||||||
onPressed: () {
|
hintText: AppLocalizations.of(context)!.searchConversations,
|
||||||
_searchController.clear();
|
hintStyle: AppTypography.standard.copyWith(
|
||||||
setState(() => _query = '');
|
color: conduitTheme.textSecondary.withValues(alpha: 0.6),
|
||||||
_searchFocusNode.unfocus();
|
),
|
||||||
},
|
prefixIcon: Icon(
|
||||||
icon: Icon(
|
Platform.isIOS ? CupertinoIcons.search : Icons.search,
|
||||||
Platform.isIOS
|
color: conduitTheme.iconSecondary,
|
||||||
? CupertinoIcons.clear_circled_solid
|
size: IconSize.input,
|
||||||
: Icons.clear,
|
),
|
||||||
color: sidebarTheme.foreground.withValues(alpha: 0.7),
|
prefixIconConstraints: const BoxConstraints(
|
||||||
size: IconSize.input,
|
minWidth: TouchTarget.minimum,
|
||||||
),
|
minHeight: TouchTarget.minimum,
|
||||||
)
|
),
|
||||||
: null,
|
suffixIcon: _query.isNotEmpty
|
||||||
suffixIconConstraints: const BoxConstraints(
|
? IconButton(
|
||||||
minWidth: TouchTarget.minimum,
|
onPressed: () {
|
||||||
minHeight: TouchTarget.minimum,
|
_searchController.clear();
|
||||||
),
|
setState(() => _query = '');
|
||||||
filled: true,
|
_searchFocusNode.unfocus();
|
||||||
fillColor: sidebarTheme.accent.withValues(alpha: 0.9),
|
},
|
||||||
border: OutlineInputBorder(
|
icon: Icon(
|
||||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
Platform.isIOS
|
||||||
borderSide: BorderSide.none,
|
? CupertinoIcons.clear_circled_solid
|
||||||
),
|
: Icons.clear,
|
||||||
enabledBorder: OutlineInputBorder(
|
color: conduitTheme.iconSecondary,
|
||||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
size: IconSize.input,
|
||||||
borderSide: BorderSide(
|
),
|
||||||
color: sidebarTheme.border.withValues(alpha: 0.28),
|
)
|
||||||
width: BorderWidth.thin,
|
: null,
|
||||||
|
suffixIconConstraints: const BoxConstraints(
|
||||||
|
minWidth: TouchTarget.minimum,
|
||||||
|
minHeight: TouchTarget.minimum,
|
||||||
|
),
|
||||||
|
filled: false,
|
||||||
|
border: InputBorder.none,
|
||||||
|
enabledBorder: InputBorder.none,
|
||||||
|
focusedBorder: InputBorder.none,
|
||||||
|
contentPadding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: Spacing.md,
|
||||||
|
vertical: Spacing.sm,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
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,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@@ -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 authUser = ref.watch(currentUserProvider2);
|
||||||
final asyncUser = ref.watch(currentUserProvider);
|
final asyncUser = ref.watch(currentUserProvider);
|
||||||
final user = asyncUser.maybeWhen(
|
final user = asyncUser.maybeWhen(
|
||||||
@@ -1630,96 +1722,99 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
|
|||||||
final initial = initialFor(displayName);
|
final initial = initialFor(displayName);
|
||||||
final avatarUrl = resolveUserAvatarUrlForUser(api, user);
|
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: [
|
||||||
|
Container(
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(
|
||||||
|
AppBorderRadius.avatar,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: conduitTheme.buttonPrimary.withValues(alpha: 0.25),
|
||||||
|
width: BorderWidth.thin,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
clipBehavior: Clip.hardEdge,
|
||||||
|
child: UserAvatar(
|
||||||
|
size: 36,
|
||||||
|
imageUrl: avatarUrl,
|
||||||
|
fallbackText: initial,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: Row(
|
const SizedBox(width: Spacing.sm),
|
||||||
children: [
|
Expanded(
|
||||||
Container(
|
child: Text(
|
||||||
width: 36,
|
displayName,
|
||||||
height: 36,
|
maxLines: 1,
|
||||||
decoration: BoxDecoration(
|
overflow: TextOverflow.ellipsis,
|
||||||
borderRadius: BorderRadius.circular(
|
style: AppTypography.bodySmallStyle.copyWith(
|
||||||
AppBorderRadius.avatar,
|
color: conduitTheme.textPrimary,
|
||||||
),
|
fontWeight: FontWeight.w600,
|
||||||
border: Border.all(
|
decoration: TextDecoration.none,
|
||||||
color: theme.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,
|
|
||||||
imageUrl: avatarUrl,
|
|
||||||
fallbackText: initial,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
const SizedBox(width: Spacing.sm),
|
),
|
||||||
Expanded(
|
|
||||||
child: Text(
|
|
||||||
displayName,
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
style: AppTypography.bodySmallStyle.copyWith(
|
|
||||||
color: sidebarTheme.foreground,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
decoration: TextDecoration.none,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// Notes icon (hidden when feature is disabled)
|
|
||||||
if (notesEnabled)
|
|
||||||
IconButton(
|
|
||||||
tooltip: AppLocalizations.of(context)!.notes,
|
|
||||||
onPressed: () {
|
|
||||||
Navigator.of(context).maybePop();
|
|
||||||
context.pushNamed(RouteNames.notes);
|
|
||||||
},
|
|
||||||
visualDensity: VisualDensity.compact,
|
|
||||||
icon: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons.doc_text
|
|
||||||
: Icons.note_alt_outlined,
|
|
||||||
color: sidebarTheme.foreground.withValues(alpha: 0.8),
|
|
||||||
size: IconSize.medium,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
IconButton(
|
|
||||||
tooltip: AppLocalizations.of(context)!.manage,
|
|
||||||
onPressed: () {
|
|
||||||
Navigator.of(context).maybePop();
|
|
||||||
context.pushNamed(RouteNames.profile);
|
|
||||||
},
|
|
||||||
visualDensity: VisualDensity.compact,
|
|
||||||
icon: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons.settings
|
|
||||||
: Icons.settings_rounded,
|
|
||||||
color: sidebarTheme.foreground.withValues(alpha: 0.8),
|
|
||||||
size: IconSize.medium,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
// Notes icon (hidden when feature is disabled)
|
||||||
],
|
if (notesEnabled)
|
||||||
],
|
IconButton(
|
||||||
|
tooltip: AppLocalizations.of(context)!.notes,
|
||||||
|
onPressed: () {
|
||||||
|
Navigator.of(context).maybePop();
|
||||||
|
context.pushNamed(RouteNames.notes);
|
||||||
|
},
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
|
icon: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.doc_text
|
||||||
|
: Icons.note_alt_outlined,
|
||||||
|
color: conduitTheme.iconPrimary,
|
||||||
|
size: IconSize.medium,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
IconButton(
|
||||||
|
tooltip: AppLocalizations.of(context)!.manage,
|
||||||
|
onPressed: () {
|
||||||
|
Navigator.of(context).maybePop();
|
||||||
|
context.pushNamed(RouteNames.profile);
|
||||||
|
},
|
||||||
|
visualDensity: VisualDensity.compact,
|
||||||
|
icon: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.settings
|
||||||
|
: Icons.settings_rounded,
|
||||||
|
color: conduitTheme.iconPrimary,
|
||||||
|
size: IconSize.medium,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user