💄 Optimize chat appbar

This commit is contained in:
2025-12-21 22:19:28 +08:00
parent 2bf54099f9
commit b258df56c9
2 changed files with 159 additions and 143 deletions

View File

@@ -468,70 +468,84 @@ class ChatListScreen extends HookConsumerWidget {
return const EmptyPageHolder();
}
final appbarFeColor = Theme.of(context).appBarTheme.foregroundColor;
return AppScaffold(
extendBody: false, // Prevent conflicts with tabs navigation
appBar: AppBar(
title: const Text('chat').tr(),
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
child: Text(
'chatTabAll'.tr(),
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!,
),
),
),
Tab(
child: Text(
'chatTabDirect'.tr(),
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!,
),
),
),
Tab(
child: Text(
'chatTabGroup'.tr(),
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!,
),
),
),
],
),
actions: [
IconButton(
icon: Badge(
label: Text(
chatInvites.when(
data: (invites) => invites.length.toString(),
error: (_, _) => '0',
loading: () => '0',
),
),
isLabelVisible: chatInvites.when(
data: (invites) => invites.isNotEmpty,
error: (_, _) => false,
loading: () => false,
),
child: const Icon(Symbols.email),
),
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) => const _ChatInvitesSheet(),
);
},
flexibleSpace: Container(
height: 48,
margin: EdgeInsets.only(
left: 8,
right: 8,
top: 4 + MediaQuery.of(context).padding.top,
bottom: 4,
),
const Gap(8),
],
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
children: [
Expanded(
child: Row(
spacing: 8,
children: [
IconButton(
icon: Icon(
Symbols.inbox,
fill: tabController.index == 0 ? 1 : 0,
),
color: appbarFeColor,
onPressed: () => tabController.animateTo(0),
),
IconButton(
icon: Icon(
Symbols.person,
fill: tabController.index == 1 ? 1 : 0,
),
color: appbarFeColor,
onPressed: () => tabController.animateTo(1),
),
IconButton(
icon: Icon(
Symbols.group,
fill: tabController.index == 2 ? 1 : 0,
),
color: appbarFeColor,
onPressed: () => tabController.animateTo(2),
),
],
),
),
IconButton(
icon: Badge(
label: Text(
chatInvites.when(
data: (invites) => invites.length.toString(),
error: (_, _) => '0',
loading: () => '0',
),
),
isLabelVisible: chatInvites.when(
data: (invites) => invites.isNotEmpty,
error: (_, _) => false,
loading: () => false,
),
child: const Icon(Symbols.email),
),
color: appbarFeColor,
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
isScrollControlled: true,
context: context,
builder: (context) => const _ChatInvitesSheet(),
);
},
),
],
),
),
),
),
body: ChatListBodyWidget(
isFloating: false,

View File

@@ -362,7 +362,6 @@ class ExploreScreen extends HookConsumerWidget {
final foregroundColor = Theme.of(context).appBarTheme.foregroundColor;
return AppBar(
toolbarHeight: 48,
flexibleSpace: Container(
height: 48,
margin: EdgeInsets.only(
@@ -371,91 +370,94 @@ class ExploreScreen extends HookConsumerWidget {
top: 4 + MediaQuery.of(context).padding.top,
bottom: 4,
),
child: Row(
spacing: 8,
children: [
IconButton(
onPressed: () => handleFilterChange(null),
icon: Icon(
Symbols.explore,
color: foregroundColor,
fill: currentFilter == null ? 1 : null,
),
tooltip: 'explore'.tr(),
isSelected: currentFilter == null,
color: currentFilter == null ? foregroundColor : null,
),
IconButton(
onPressed: () => handleFilterChange('subscriptions'),
icon: Icon(
Symbols.subscriptions,
color: foregroundColor,
fill: currentFilter == 'subscription' ? 1 : null,
),
tooltip: 'exploreFilterSubscriptions'.tr(),
isSelected: currentFilter == 'subscriptions',
),
IconButton(
onPressed: () => handleFilterChange('friends'),
icon: Icon(
Symbols.people,
color: foregroundColor,
fill: currentFilter == 'friends' ? 1 : null,
),
tooltip: 'exploreFilterFriends'.tr(),
isSelected: currentFilter == 'friends',
),
const Spacer(),
IconButton(
onPressed: () {
context.pushNamed('articles');
},
icon: Icon(Symbols.auto_stories, color: foregroundColor),
tooltip: 'webArticlesStand'.tr(),
),
PopupMenuButton(
itemBuilder: (context) => [
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.category),
const Gap(12),
Text('categoriesAndTags').tr(),
],
),
onTap: () {
context.pushNamed('postCategories');
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
spacing: 8,
children: [
IconButton(
onPressed: () => handleFilterChange(null),
icon: Icon(
Symbols.explore,
color: foregroundColor,
fill: currentFilter == null ? 1 : null,
),
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.shuffle),
const Gap(12),
Text('postShuffle').tr(),
],
),
onTap: () {
context.pushNamed('postShuffle');
},
tooltip: 'explore'.tr(),
isSelected: currentFilter == null,
color: currentFilter == null ? foregroundColor : null,
),
IconButton(
onPressed: () => handleFilterChange('subscriptions'),
icon: Icon(
Symbols.subscriptions,
color: foregroundColor,
fill: currentFilter == 'subscription' ? 1 : null,
),
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.search),
const Gap(12),
Text('search').tr(),
],
),
onTap: () {
context.pushNamed('postSearch');
},
tooltip: 'exploreFilterSubscriptions'.tr(),
isSelected: currentFilter == 'subscriptions',
),
IconButton(
onPressed: () => handleFilterChange('friends'),
icon: Icon(
Symbols.people,
color: foregroundColor,
fill: currentFilter == 'friends' ? 1 : null,
),
],
icon: Icon(Symbols.action_key, color: foregroundColor),
tooltip: 'search'.tr(),
),
],
tooltip: 'exploreFilterFriends'.tr(),
isSelected: currentFilter == 'friends',
),
const Spacer(),
IconButton(
onPressed: () {
context.pushNamed('articles');
},
icon: Icon(Symbols.auto_stories, color: foregroundColor),
tooltip: 'webArticlesStand'.tr(),
),
PopupMenuButton(
itemBuilder: (context) => [
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.category),
const Gap(12),
Text('categoriesAndTags').tr(),
],
),
onTap: () {
context.pushNamed('postCategories');
},
),
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.shuffle),
const Gap(12),
Text('postShuffle').tr(),
],
),
onTap: () {
context.pushNamed('postShuffle');
},
),
PopupMenuItem(
child: Row(
children: [
const Icon(Symbols.search),
const Gap(12),
Text('search').tr(),
],
),
onTap: () {
context.pushNamed('postSearch');
},
),
],
icon: Icon(Symbols.action_key, color: foregroundColor),
tooltip: 'search'.tr(),
),
],
),
),
),
);