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

Merge pull request #281 from cogwheel0/refactor-ui-components-layout

Browse Source 
refactor-ui-components-layout
This commit is contained in:
cogwheel
2025-12-15 20:33:36 +05:30
committed by GitHub
parent 055bff4982 9ec7fdadde
commit 008c77612a
9 changed files with 1294 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/features/auth/views/sso_auth_page.dart
View File

@@ -478,25 +478,19 @@ class _SsoAuthPageState extends ConsumerState<SsoAuthPage> {
return ErrorBoundary(
child: Scaffold(
backgroundColor: context.conduitTheme.surfaceBackground,
appBar: AppBar(
backgroundColor: context.conduitTheme.surfaceBackground,
elevation: 0,
leading: ConduitIconButton(
icon: Platform.isIOS ? CupertinoIcons.back : Icons.arrow_back,
onPressed: () => context.pop(),
tooltip: l10n?.back ?? 'Back',
extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: FloatingAppBarBackButton(
onTap: () => context.pop(),
),
title: Text(
l10n?.sso ?? 'SSO',
style: context.conduitTheme.headingMedium,
),
centerTitle: true,
title: FloatingAppBarTitle(text: l10n?.sso ?? 'SSO'),
actions: [
if (_controller != null)
ConduitIconButton(
icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh,
onPressed: _refresh,
tooltip: l10n?.retry ?? 'Retry',
FloatingAppBarAction(
child: FloatingAppBarIconButton(
icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh,
onTap: _refresh,
),
),
],
),

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

@@ -956,57 +956,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
required Widget child,
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
// Use same high-contrast colors as the floating chat input
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
// For circular buttons, ensure the entire widget is constrained to a square
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
return FloatingAppBarPill(
isCircular: isCircular,
child: child,
);
}
@@ -1550,11 +1502,14 @@ class _ChatPageState extends ConsumerState<ChatPage> {
trimmedConversationTitle.isNotEmpty)
? trimmedConversationTitle
: null;
// Watch loading state for app bar skeleton
final isLoadingConversation = ref.watch(isLoadingConversationProvider);
final formattedModelName = selectedModel != null
? _formatModelDisplayName(selectedModel.name)
: null;
final modelLabel = formattedModelName ?? l10n.chooseModel;
final hasConversationTitle = displayConversationTitle != null;
final hasConversationTitle =
displayConversationTitle != null || isLoadingConversation;
final TextStyle modelTextStyle = hasConversationTitle
? AppTypography.small.copyWith(
color: context.conduitTheme.textSecondary,
@@ -1794,8 +1749,27 @@ class _ChatPageState extends ConsumerState<ChatPage> {
: LayoutBuilder(
builder: (context, constraints) {
// Build title pill (tappable for context menu)
// Show skeleton when loading, actual title otherwise
Widget? titlePill;
if (displayConversationTitle != null) {
if (isLoadingConversation) {
// Show skeleton pill while loading conversation
titlePill = _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: ConduitLoading.skeleton(
width: 120,
height: 18,
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
),
),
);
} else if (displayConversationTitle != null) {
titlePill = GestureDetector(
onTap: () {
final conversation = ref.read(
@@ -1843,95 +1817,141 @@ class _ChatPageState extends ConsumerState<ChatPage> {
}
// Build model selector pill
final modelPill = GestureDetector(
onTap: () async {
final modelsAsync = ref.read(modelsProvider);
if (modelsAsync.isLoading) {
try {
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-load-failed',
scope: 'chat/model-selector',
error: e,
);
}
} else if (modelsAsync.hasValue) {
_showModelDropdown(
context,
ref,
modelsAsync.value!,
);
} else if (modelsAsync.hasError) {
try {
ref.invalidate(modelsProvider);
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-refresh-failed',
scope: 'chat/model-selector',
error: e,
);
}
}
},
child: _buildAppBarPill(
// Show skeleton when loading, actual model selector otherwise
final Widget modelPill;
if (isLoadingConversation) {
// Show skeleton pill while loading conversation
modelPill = _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth:
constraints.maxWidth -
Spacing.xxl,
),
child: MiddleEllipsisText(
modelLabel,
style: modelTextStyle,
textAlign: TextAlign.center,
semanticsLabel: modelLabel,
),
),
const SizedBox(width: Spacing.xs),
Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
color:
context.conduitTheme.iconSecondary,
size: IconSize.small,
),
],
child: ConduitLoading.skeleton(
width: 80,
height: 14,
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
),
),
),
);
);
} else {
modelPill = GestureDetector(
onTap: () async {
final modelsAsync = ref.read(modelsProvider);
if (modelsAsync.isLoading) {
try {
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-load-failed',
scope: 'chat/model-selector',
error: e,
);
}
} else if (modelsAsync.hasValue) {
_showModelDropdown(
context,
ref,
modelsAsync.value!,
);
} else if (modelsAsync.hasError) {
try {
ref.invalidate(modelsProvider);
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-refresh-failed',
scope: 'chat/model-selector',
error: e,
);
}
}
},
child: _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth:
constraints.maxWidth -
Spacing.xxl,
),
child: MiddleEllipsisText(
modelLabel,
style: modelTextStyle,
textAlign: TextAlign.center,
semanticsLabel: modelLabel,
),
),
const SizedBox(width: Spacing.xs),
Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
color:
context.conduitTheme.iconSecondary,
size: IconSize.small,
),
],
),
),
),
);
}
return Column(
mainAxisSize: MainAxisSize.min,
children: [
if (titlePill != null) ...[
titlePill,
AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
child: KeyedSubtree(
key: ValueKey(
isLoadingConversation
? 'loading'
: 'title-$displayConversationTitle',
),
child: titlePill,
),
),
const SizedBox(height: Spacing.xs),
],
modelPill,
AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
child: KeyedSubtree(
key: ValueKey(
isLoadingConversation
? 'model-loading'
: 'model-$modelLabel',
),
child: modelPill,
),
),
if (isReviewerMode)
Padding(
padding: const EdgeInsets.only(

13
lib/features/chat/views/voice_call_page.dart
View File

@@ -1,4 +1,5 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:math' as math;
import 'package:flutter/material.dart';
@@ -8,6 +9,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/providers/app_providers.dart';
import '../../../core/utils/markdown_to_text.dart';
import '../../../l10n/app_localizations.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../providers/chat_providers.dart';
import '../services/voice_call_service.dart';
@@ -155,16 +157,17 @@ class _VoiceCallPageState extends ConsumerState<VoiceCallPage>
return Scaffold(
backgroundColor: backgroundColor,
appBar: AppBar(
title: Text(l10n.voiceCallTitle),
leading: IconButton(
icon: const Icon(CupertinoIcons.xmark),
onPressed: () async {
extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: FloatingAppBarIconButton(
icon: Platform.isIOS ? CupertinoIcons.xmark : Icons.close,
onTap: () async {
await _service?.stopCall();
if (!context.mounted) return;
Navigator.of(context).pop();
},
),
title: FloatingAppBarTitle(text: l10n.voiceCallTitle),
),
body: SafeArea(
child: Column(

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

@@ -22,6 +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/conduit_components.dart';
import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../../core/models/model.dart';
import '../../../core/models/conversation.dart';
@@ -113,12 +114,26 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
// Legacy helper removed: drawer now uses slivers with lazy delegates.
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(
key: const PageStorageKey<String>('chats_drawer_scroll'),
controller: _listController,
physics: const AlwaysScrollableScrollPhysics(),
cacheExtent: 800,
slivers: slivers,
slivers: paddedSlivers,
);
final refreshableScroll = ConduitRefreshIndicator(
@@ -163,96 +178,151 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
color: sidebarTheme.background,
border: Border(right: BorderSide(color: sidebarTheme.border)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.sm,
Spacing.md,
Spacing.sm,
// Main scrollable content - extends behind floating elements
Positioned.fill(
child: _buildConversationList(context),
),
// Floating top area with gradient background (matches app bar pattern)
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)),
Divider(
height: 1,
color: sidebarTheme.border.withValues(alpha: 0.28),
// Floating bottom area with gradient background (matches chat input pattern)
Positioned(
bottom: 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.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) {
final sidebarTheme = context.sidebarTheme;
return Material(
color: Colors.transparent,
child: TextField(
controller: _searchController,
focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(),
style: AppTypography.standard.copyWith(color: sidebarTheme.foreground),
decoration: InputDecoration(
isDense: true,
hintText: AppLocalizations.of(context)!.searchConversations,
hintStyle: AppTypography.standard.copyWith(
color: sidebarTheme.foreground.withValues(alpha: 0.6),
Widget _buildFloatingSearchField(BuildContext context) {
final conduitTheme = context.conduitTheme;
return FloatingAppBarPill(
child: Material(
color: Colors.transparent,
child: TextField(
controller: _searchController,
focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(),
style: AppTypography.standard.copyWith(
color: conduitTheme.textPrimary,
),
prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: sidebarTheme.foreground.withValues(alpha: 0.7),
size: IconSize.input,
),
prefixIconConstraints: const BoxConstraints(
minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum,
),
suffixIcon: _query.isNotEmpty
? IconButton(
onPressed: () {
_searchController.clear();
setState(() => _query = '');
_searchFocusNode.unfocus();
},
icon: Icon(
Platform.isIOS
? CupertinoIcons.clear_circled_solid
: Icons.clear,
color: sidebarTheme.foreground.withValues(alpha: 0.7),
size: IconSize.input,
),
)
: null,
suffixIconConstraints: const BoxConstraints(
minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum,
),
filled: true,
fillColor: sidebarTheme.accent.withValues(alpha: 0.9),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(
color: sidebarTheme.border.withValues(alpha: 0.28),
width: BorderWidth.thin,
decoration: InputDecoration(
isDense: true,
hintText: AppLocalizations.of(context)!.searchConversations,
hintStyle: AppTypography.standard.copyWith(
color: conduitTheme.textSecondary.withValues(alpha: 0.6),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(
color: sidebarTheme.ring.withValues(alpha: 0.6),
width: BorderWidth.thin,
prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: conduitTheme.iconSecondary,
size: IconSize.input,
),
prefixIconConstraints: const BoxConstraints(
minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum,
),
suffixIcon: _query.isNotEmpty
? IconButton(
onPressed: () {
_searchController.clear();
setState(() => _query = '');
_searchFocusNode.unfocus();
},
icon: Icon(
Platform.isIOS
? CupertinoIcons.clear_circled_solid
: Icons.clear,
color: conduitTheme.iconSecondary,
size: IconSize.input,
),
)
: 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,
),
),
contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
),
),
@@ -1608,9 +1678,8 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
}
}
Widget _buildBottomSection(BuildContext context) {
final theme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme;
Widget _buildFloatingBottomSection(BuildContext context) {
final conduitTheme = context.conduitTheme;
final authUser = ref.watch(currentUserProvider2);
final asyncUser = ref.watch(currentUserProvider);
final user = asyncUser.maybeWhen(
@@ -1630,96 +1699,82 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
final initial = initialFor(displayName);
final avatarUrl = resolveUserAvatarUrlForUser(api, user);
return Padding(
padding: const EdgeInsets.fromLTRB(Spacing.sm, 0, Spacing.sm, Spacing.sm),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (user != null) ...[
const SizedBox(height: Spacing.sm),
if (user == null) return const SizedBox.shrink();
return FloatingAppBarPill(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(Spacing.sm),
width: 36,
height: 36,
decoration: BoxDecoration(
color: sidebarTheme.accent.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
borderRadius: BorderRadius.circular(
AppBorderRadius.avatar,
),
border: Border.all(
color: sidebarTheme.border.withValues(alpha: 0.28),
color: conduitTheme.buttonPrimary.withValues(alpha: 0.25),
width: BorderWidth.thin,
),
),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
AppBorderRadius.avatar,
),
border: Border.all(
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,
),
),
],
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: conduitTheme.textPrimary,
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: 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,
),
),
],
],
),
),
);
}

743
lib/features/notes/views/note_editor_page.dart
View File

@@ -1,5 +1,6 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@@ -14,7 +15,9 @@ import '../../../core/providers/app_providers.dart';
import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/improved_loading_states.dart';
import '../../../shared/widgets/middle_ellipsis_text.dart';
import '../../../shared/widgets/themed_dialogs.dart';
import '../../chat/services/voice_input_service.dart';
import '../providers/notes_providers.dart';
@@ -492,204 +495,346 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
},
child: ErrorBoundary(
child: Scaffold(
backgroundColor: sidebarTheme.background,
body: SafeArea(
child: Stack(
children: [
Column(
children: [
_buildHeader(context),
if (!_isLoading && _note != null)
_buildMetadataBar(context),
Expanded(child: _buildBody(context)),
],
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: _buildAppBar(context),
body: Stack(
children: [
// Main content - scrolls behind floating elements
Positioned.fill(
child: _buildMainContent(context),
),
// Floating action buttons
if (!_isLoading && _note != null)
Positioned(
left: Spacing.md,
right: Spacing.md,
bottom: Spacing.md + MediaQuery.of(context).padding.bottom,
child: _buildFloatingActionsRow(context),
),
// Floating action buttons
if (!_isLoading && _note != null)
_buildFloatingActions(context),
],
),
],
),
),
),
);
}
Widget _buildHeader(BuildContext context) {
final theme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme;
PreferredSizeWidget _buildAppBar(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
return Container(
padding: const EdgeInsets.fromLTRB(
Spacing.xs,
Spacing.sm,
Spacing.sm,
Spacing.xs,
),
color: sidebarTheme.background,
child: Row(
children: [
// Back button
IconButton(
icon: Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back_rounded,
),
color: theme.iconPrimary,
),
onPressed: () async {
final navigator = Navigator.of(context);
await _onWillPop();
if (!mounted) return;
navigator.pop();
},
tooltip: l10n.back,
),
const SizedBox(width: Spacing.xs),
// Title input
Expanded(
child: TextField(
controller: _titleController,
focusNode: _titleFocusNode,
enabled: !_isGeneratingTitle,
style: AppTypography.headlineSmallStyle.copyWith(
color: theme.textPrimary,
fontWeight: FontWeight.w600,
),
decoration: InputDecoration(
hintText: _isGeneratingTitle
? l10n.generatingTitle
: l10n.noteTitle,
hintStyle: AppTypography.headlineSmallStyle.copyWith(
color: theme.textSecondary.withValues(alpha: 0.4),
fontWeight: FontWeight.w600,
),
filled: false,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
isDense: true,
),
textCapitalization: TextCapitalization.sentences,
textInputAction: TextInputAction.next,
onSubmitted: (_) => _contentFocusNode.requestFocus(),
),
),
// Generate title button - aligned with other header icons
AnimatedOpacity(
opacity: _titleFocusNode.hasFocus && !_isGeneratingTitle
? 1.0
: 0.0,
duration: const Duration(milliseconds: 150),
child: IgnorePointer(
ignoring: !_titleFocusNode.hasFocus || _isGeneratingTitle,
child: IconButton(
icon: Icon(
Platform.isIOS
? CupertinoIcons.sparkles
: Icons.auto_awesome_rounded,
color: theme.buttonPrimary,
),
onPressed: _generateTitle,
tooltip: l10n.generateTitle,
),
),
),
// Save indicator
if (_isSaving)
Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
child: SizedBox(
width: IconSize.sm,
height: IconSize.sm,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(theme.loadingIndicator),
),
),
)
else if (_hasChanges)
Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: theme.warning,
shape: BoxShape.circle,
),
),
),
// Menu
PopupMenuButton<String>(
icon: Icon(
Platform.isIOS
? CupertinoIcons.ellipsis
: Icons.more_vert_rounded,
color: theme.iconPrimary,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
),
onSelected: (value) {
switch (value) {
case 'copy':
_copyToClipboard();
case 'delete':
_deleteNote();
}
},
itemBuilder: (context) => [
PopupMenuItem(
value: 'copy',
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.doc_on_clipboard
: Icons.copy_rounded,
color: theme.iconPrimary,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(l10n.copy),
],
),
),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.delete
: Icons.delete_rounded,
color: theme.error,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(l10n.delete, style: TextStyle(color: theme.error)),
],
),
),
return PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight + 40),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
),
],
),
child: SafeArea(
bottom: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// App bar row with back button, title, and menu
SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading (back button)
Padding(
padding: const EdgeInsets.only(left: Spacing.inputPadding),
child: Center(
child: GestureDetector(
onTap: () async {
final navigator = Navigator.of(context);
await _onWillPop();
if (!mounted) return;
navigator.pop();
},
child: _buildAppBarPill(
context,
Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
isCircular: true,
),
),
),
),
// Title centered
Expanded(
child: Center(
child: _buildAppBarPill(
context,
Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: _isGeneratingTitle
? Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: IconSize.sm,
height: IconSize.sm,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(
conduitTheme.loadingIndicator,
),
),
),
const SizedBox(width: Spacing.sm),
Text(
l10n.generatingTitle,
style: AppTypography.bodyMediumStyle.copyWith(
color: conduitTheme.textSecondary,
),
),
],
)
: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.5,
),
child: Stack(
alignment: Alignment.center,
children: [
// Hidden TextField always in tree for focus
Opacity(
opacity: _titleFocusNode.hasFocus ? 1.0 : 0.0,
child: IntrinsicWidth(
child: TextField(
controller: _titleController,
focusNode: _titleFocusNode,
enabled: !_isGeneratingTitle,
style: AppTypography.headlineSmallStyle
.copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
decoration: InputDecoration(
hintText: l10n.untitled,
hintStyle: AppTypography.headlineSmallStyle
.copyWith(
color: conduitTheme.textSecondary
.withValues(alpha: 0.6),
fontWeight: FontWeight.w600,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
isDense: true,
),
textAlign: TextAlign.center,
textCapitalization:
TextCapitalization.sentences,
textInputAction: TextInputAction.done,
onSubmitted: (_) =>
_contentFocusNode.requestFocus(),
),
),
),
// Visible text when not focused
if (!_titleFocusNode.hasFocus)
GestureDetector(
onTap: () => _titleFocusNode.requestFocus(),
child: MiddleEllipsisText(
_titleController.text.isEmpty
? l10n.untitled
: _titleController.text,
style: AppTypography.headlineSmallStyle
.copyWith(
color: _titleController.text.isEmpty
? conduitTheme.textSecondary
.withValues(alpha: 0.6)
: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
),
if (_hasChanges && !_isSaving)
Padding(
padding: const EdgeInsets.only(left: Spacing.sm),
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: conduitTheme.warning,
shape: BoxShape.circle,
),
),
),
if (_isSaving)
Padding(
padding: const EdgeInsets.only(left: Spacing.sm),
child: SizedBox(
width: IconSize.sm,
height: IconSize.sm,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(
conduitTheme.loadingIndicator,
),
),
),
),
],
),
),
),
),
),
// Actions (more menu)
Padding(
padding: const EdgeInsets.only(right: Spacing.inputPadding),
child: Center(
child: PopupMenuButton<String>(
tooltip: '',
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
),
onSelected: (value) {
switch (value) {
case 'generate_title':
_generateTitle();
case 'copy':
_copyToClipboard();
case 'delete':
_deleteNote();
}
},
itemBuilder: (context) => [
PopupMenuItem(
value: 'generate_title',
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.sparkles
: Icons.auto_awesome_rounded,
color: conduitTheme.buttonPrimary,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(l10n.generateTitle),
],
),
),
PopupMenuItem(
value: 'copy',
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.doc_on_clipboard
: Icons.copy_rounded,
color: conduitTheme.iconPrimary,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(l10n.copy),
],
),
),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.delete
: Icons.delete_rounded,
color: conduitTheme.error,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(
l10n.delete,
style: TextStyle(color: conduitTheme.error),
),
],
),
),
],
child: _buildAppBarPill(
context,
Icon(
Platform.isIOS
? CupertinoIcons.ellipsis
: Icons.more_vert_rounded,
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
isCircular: true,
),
),
),
),
],
),
),
// Metadata stats row
if (!_isLoading && _note != null)
Padding(
padding: const EdgeInsets.only(bottom: Spacing.xs),
child: _buildFloatingMetadataBar(context),
),
],
),
),
),
);
}
Widget _buildMetadataBar(BuildContext context) {
final theme = context.conduitTheme;
Widget _buildAppBarPill(
BuildContext context,
Widget child, {
bool isCircular = false,
}) {
return FloatingAppBarPill(
isCircular: isCircular,
child: child,
);
}
Widget _buildFloatingMetadataBar(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final dateFormat = DateFormat.MMMd();
final timeFormat = DateFormat.jm();
@@ -697,42 +842,51 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
? '${dateFormat.format(_note!.createdDateTime)} ${timeFormat.format(_note!.createdDateTime)}'
: '';
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
// Created date
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.calendar
: Icons.calendar_today_rounded,
label: createdDate,
),
_buildMetadataSeparator(theme),
// Word count
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.doc_text
: Icons.article_rounded,
label: l10n.wordCount(_wordCount),
),
_buildMetadataSeparator(theme),
// Character count
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.textformat_abc
: Icons.text_fields_rounded,
label: l10n.charCount(_charCount),
),
],
return ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
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(
mainAxisSize: MainAxisSize.min,
children: [
// Created date
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.calendar
: Icons.calendar_today_rounded,
label: createdDate,
),
_buildMetadataSeparator(conduitTheme),
// Word count
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.doc_text
: Icons.article_rounded,
label: l10n.wordCount(_wordCount),
),
_buildMetadataSeparator(conduitTheme),
// Character count
_buildMetadataChip(
context,
icon: Platform.isIOS
? CupertinoIcons.textformat_abc
: Icons.text_fields_rounded,
label: l10n.charCount(_charCount),
),
],
),
),
),
);
@@ -783,6 +937,10 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
);
}
Widget _buildMainContent(BuildContext context) {
return _buildBody(context);
}
Widget _buildBody(BuildContext context) {
if (_isLoading) {
return Center(
@@ -796,21 +954,25 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
return _buildNotFoundState(context);
}
// Title is now edited in the app bar pill, so just show the content editor
return _buildEditor(context);
}
Widget _buildEditor(BuildContext context) {
final theme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
final topPadding = MediaQuery.of(context).padding.top;
// App bar height: kToolbarHeight + metadata bar (~40)
final appBarHeight = kToolbarHeight + 40;
return GestureDetector(
onTap: () => _contentFocusNode.requestFocus(),
behavior: HitTestBehavior.opaque,
child: SingleChildScrollView(
controller: _scrollController,
padding: const EdgeInsets.fromLTRB(
padding: EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.md,
topPadding + appBarHeight + Spacing.sm, // Space for floating app bar
Spacing.inputPadding,
120, // Extra padding for floating buttons
),
@@ -843,46 +1005,39 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
);
}
Widget _buildFloatingActions(BuildContext context) {
Widget _buildFloatingActionsRow(BuildContext context) {
final theme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
return Positioned(
left: Spacing.md,
right: Spacing.md,
bottom: Spacing.md,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Dictation button
_buildFloatingButton(
context,
icon: _isRecording
? (Platform.isIOS
? CupertinoIcons.stop_fill
: Icons.stop_rounded)
: (Platform.isIOS
? CupertinoIcons.mic_fill
: Icons.mic_rounded),
color: _isRecording ? theme.error : null,
isLoading: false,
tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
onPressed: _toggleDictation,
),
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Dictation button
_buildFloatingButton(
context,
icon: _isRecording
? (Platform.isIOS
? CupertinoIcons.stop_fill
: Icons.stop_rounded)
: (Platform.isIOS ? CupertinoIcons.mic_fill : Icons.mic_rounded),
color: _isRecording ? theme.error : null,
isLoading: false,
tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
onPressed: _toggleDictation,
),
// AI button
_buildFloatingButton(
context,
icon: Platform.isIOS
? CupertinoIcons.sparkles
: Icons.auto_awesome_rounded,
isLoading: _isEnhancing,
tooltip: l10n.enhanceWithAI,
onPressed: _isEnhancing ? null : _enhanceContent,
showMenu: true,
),
],
),
// AI button
_buildFloatingButton(
context,
icon: Platform.isIOS
? CupertinoIcons.sparkles
: Icons.auto_awesome_rounded,
isLoading: _isEnhancing,
tooltip: l10n.enhanceWithAI,
onPressed: _isEnhancing ? null : _enhanceContent,
showMenu: true,
),
],
);
}
@@ -895,34 +1050,52 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Color? color,
bool showMenu = false,
}) {
final theme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme;
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
final isDark = theme.brightness == Brightness.dark;
final buttonChild = Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: theme.surfaceContainer,
shape: BoxShape.circle,
border: Border.all(
color: sidebarTheme.border.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
boxShadow: ConduitShadows.medium(context),
),
child: isLoading
? Center(
child: SizedBox(
width: IconSize.md,
height: IconSize.md,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(theme.loadingIndicator),
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
.withValues(alpha: 0.85)
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!
.withValues(alpha: 0.85);
final borderColor = conduitTheme.cardBorder.withValues(alpha: 0.55);
final buttonChild = ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
width: TouchTarget.button,
height: TouchTarget.button,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
border: Border.all(color: borderColor, width: BorderWidth.thin),
boxShadow: ConduitShadows.button(context),
),
child: isLoading
? Center(
child: SizedBox(
width: IconSize.md,
height: IconSize.md,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor:
AlwaysStoppedAnimation(conduitTheme.loadingIndicator),
),
),
)
: Icon(
icon,
color: color ??
conduitTheme.iconPrimary.withValues(alpha: 0.9),
size: IconSize.lg,
),
),
)
: Icon(icon, color: color ?? theme.iconPrimary, size: IconSize.lg),
),
),
);
if (showMenu) {
@@ -949,7 +1122,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS
? CupertinoIcons.sparkles
: Icons.auto_fix_high_rounded,
color: theme.buttonPrimary,
color: conduitTheme.buttonPrimary,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
@@ -965,7 +1138,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS
? CupertinoIcons.textformat
: Icons.title_rounded,
color: theme.buttonPrimary,
color: conduitTheme.buttonPrimary,
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
@@ -984,7 +1157,9 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
customBorder: const CircleBorder(),
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
),
child: buttonChild,
),
),

170
lib/features/notes/views/notes_list_page.dart
View File

@@ -14,7 +14,7 @@ import '../../../core/providers/app_providers.dart';
import '../../../core/services/navigation_service.dart';
import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/improved_loading_states.dart';
import '../../../shared/widgets/loading_states.dart';
import '../../../shared/widgets/themed_dialogs.dart';
@@ -122,83 +122,43 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
return Scaffold(backgroundColor: sidebarTheme.background);
}
final canPop = ModalRoute.of(context)?.canPop ?? false;
final l10n = AppLocalizations.of(context)!;
return ErrorBoundary(
child: Scaffold(
backgroundColor: sidebarTheme.background,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildHeader(context),
_buildSearchField(context),
Expanded(child: _buildBody(context)),
],
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(
text: l10n.notes,
icon: Platform.isIOS
? CupertinoIcons.doc_text_fill
: Icons.notes_rounded,
),
bottomHeight: 64,
bottom: Padding(
padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.xs,
Spacing.inputPadding,
Spacing.sm,
),
child: _buildFloatingSearchField(context),
),
),
body: _buildBody(context),
floatingActionButton: _buildFAB(context),
),
);
}
Widget _buildHeader(BuildContext context) {
final sidebarTheme = context.sidebarTheme;
final l10n = AppLocalizations.of(context)!;
final canPop = ModalRoute.of(context)?.canPop ?? false;
return Container(
padding: EdgeInsets.fromLTRB(
canPop ? Spacing.xs : Spacing.inputPadding,
Spacing.md,
Spacing.inputPadding,
Spacing.sm,
),
child: Row(
children: [
if (canPop) ...[
IconButton(
icon: Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: sidebarTheme.foreground.withValues(alpha: 0.8),
),
onPressed: () => Navigator.of(context).maybePop(),
tooltip: l10n.back,
),
const SizedBox(width: Spacing.xs),
],
Icon(
Platform.isIOS ? CupertinoIcons.doc_text_fill : Icons.notes_rounded,
color: sidebarTheme.foreground.withValues(alpha: 0.7),
size: IconSize.lg,
),
const SizedBox(width: Spacing.sm),
Expanded(
child: Text(
l10n.notes,
style: AppTypography.headlineSmallStyle.copyWith(
color: sidebarTheme.foreground,
fontWeight: FontWeight.w700,
),
),
),
],
),
);
}
Widget _buildSearchField(BuildContext context) {
final sidebarTheme = context.sidebarTheme;
Widget _buildFloatingSearchField(BuildContext context) {
final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
return Padding(
padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.xs,
Spacing.inputPadding,
Spacing.sm,
),
return FloatingAppBarPill(
child: Material(
color: Colors.transparent,
child: TextField(
@@ -206,17 +166,17 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(),
style: AppTypography.standard.copyWith(
color: sidebarTheme.foreground,
color: conduitTheme.textPrimary,
),
decoration: InputDecoration(
isDense: true,
hintText: l10n.searchNotes,
hintStyle: AppTypography.standard.copyWith(
color: sidebarTheme.foreground.withValues(alpha: 0.5),
color: conduitTheme.textSecondary.withValues(alpha: 0.6),
),
prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search_rounded,
color: sidebarTheme.foreground.withValues(alpha: 0.6),
Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: conduitTheme.iconSecondary,
size: IconSize.input,
),
prefixIconConstraints: const BoxConstraints(
@@ -233,8 +193,8 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
icon: Icon(
Platform.isIOS
? CupertinoIcons.clear_circled_solid
: Icons.clear_rounded,
color: sidebarTheme.foreground.withValues(alpha: 0.6),
: Icons.clear,
color: conduitTheme.iconSecondary,
size: IconSize.input,
),
)
@@ -243,26 +203,10 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum,
),
filled: true,
fillColor: sidebarTheme.accent.withValues(alpha: 0.85),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(
color: sidebarTheme.border.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(
color: sidebarTheme.ring.withValues(alpha: 0.5),
width: BorderWidth.regular,
),
),
filled: false,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
@@ -322,7 +266,7 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
);
slivers.add(
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm),
padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) =>
@@ -347,12 +291,23 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
}
Widget _buildRefreshableScrollView(List<Widget> slivers) {
// Add top padding for floating app bar and search bar
final topPadding = MediaQuery.of(context).padding.top;
// App bar height: kToolbarHeight + search bar (48) + padding (xs + sm)
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
final paddedSlivers = <Widget>[
SliverToBoxAdapter(
child: SizedBox(height: topPadding + appBarHeight),
),
...slivers,
];
return ConduitRefreshIndicator(
onRefresh: _refreshNotes,
child: CustomScrollView(
controller: _scrollController,
physics: const AlwaysScrollableScrollPhysics(),
slivers: slivers,
slivers: paddedSlivers,
),
);
}
@@ -691,10 +646,17 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
final sidebarTheme = context.sidebarTheme;
final l10n = AppLocalizations.of(context)!;
final isSearchActive = _query.isNotEmpty;
final topPadding = MediaQuery.of(context).padding.top;
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
return Center(
child: Padding(
padding: const EdgeInsets.all(Spacing.xxl),
padding: EdgeInsets.fromLTRB(
Spacing.xxl,
topPadding + appBarHeight,
Spacing.xxl,
Spacing.xxl,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
@@ -765,17 +727,29 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
Widget _buildLoading(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Center(child: ImprovedLoadingState(message: l10n.loadingNotes));
final topPadding = MediaQuery.of(context).padding.top;
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
return Padding(
padding: EdgeInsets.only(top: topPadding + appBarHeight),
child: Center(child: ImprovedLoadingState(message: l10n.loadingNotes)),
);
}
Widget _buildError(BuildContext context, Object error) {
final theme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme;
final l10n = AppLocalizations.of(context)!;
final topPadding = MediaQuery.of(context).padding.top;
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
return Center(
child: Padding(
padding: const EdgeInsets.all(Spacing.xxl),
padding: EdgeInsets.fromLTRB(
Spacing.xxl,
topPadding + appBarHeight,
Spacing.xxl,
Spacing.xxl,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [

109
lib/features/profile/views/app_customization_page.dart
View File

@@ -44,79 +44,52 @@ class AppCustomizationPage extends ConsumerWidget {
final currentLanguageCode = locale?.toLanguageTag() ?? 'system';
final languageLabel = _resolveLanguageLabel(context, currentLanguageCode);
final activeTheme = ref.watch(appThemePaletteProvider);
final canPop = ModalRoute.of(context)?.canPop ?? false;
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
return Scaffold(
backgroundColor: context.sidebarTheme.background,
appBar: _buildAppBar(context),
body: SafeArea(
child: ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
padding: const EdgeInsets.symmetric(
horizontal: Spacing.pagePadding,
vertical: Spacing.pagePadding,
),
children: [
_buildThemesDropdownSection(
context,
ref,
themeMode,
themeDescription,
activeTheme,
settings,
),
const SizedBox(height: Spacing.md),
_buildLanguageSection(
context,
ref,
currentLanguageCode,
languageLabel,
),
const SizedBox(height: Spacing.xl),
_buildSttSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildTtsDropdownSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildChatSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildSocketHealthSection(context, ref),
],
),
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(text: l10n.appCustomization),
),
);
}
PreferredSizeWidget _buildAppBar(BuildContext context) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
return AppBar(
backgroundColor: context.sidebarTheme.background,
surfaceTintColor: Colors.transparent,
elevation: Elevation.none,
toolbarHeight: kToolbarHeight,
automaticallyImplyLeading: false,
leading: canPop
? IconButton(
icon: Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: context.conduitTheme.iconPrimary,
),
onPressed: () => Navigator.of(context).maybePop(),
tooltip: AppLocalizations.of(context)!.back,
)
: null,
titleSpacing: 0,
title: Text(
AppLocalizations.of(context)!.appCustomization,
style: AppTypography.headlineSmallStyle.copyWith(
color: context.conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
body: ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
padding: EdgeInsets.fromLTRB(
Spacing.pagePadding,
topPadding,
Spacing.pagePadding,
Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
),
children: [
_buildThemesDropdownSection(
context,
ref,
themeMode,
themeDescription,
activeTheme,
settings,
),
const SizedBox(height: Spacing.md),
_buildLanguageSection(
context,
ref,
currentLanguageCode,
languageLabel,
),
const SizedBox(height: Spacing.xl),
_buildSttSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildTtsDropdownSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildChatSection(context, ref, settings),
const SizedBox(height: Spacing.xl),
_buildSocketHealthSection(context, ref),
],
),
centerTitle: true,
);
}

91
lib/features/profile/views/profile_page.dart
View File

@@ -66,52 +66,30 @@ class ProfilePage extends ConsumerWidget {
}
Scaffold _buildScaffold(BuildContext context, {required Widget body}) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
final l10n = AppLocalizations.of(context)!;
return Scaffold(
backgroundColor: context.sidebarTheme.background,
appBar: _buildAppBar(context),
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(text: l10n.you),
),
body: body,
);
}
PreferredSizeWidget _buildAppBar(BuildContext context) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
return AppBar(
backgroundColor: context.sidebarTheme.background,
surfaceTintColor: Colors.transparent,
elevation: Elevation.none,
toolbarHeight: kToolbarHeight,
automaticallyImplyLeading: false,
leading: canPop
? IconButton(
icon: Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: context.conduitTheme.iconPrimary,
),
onPressed: () => Navigator.of(context).maybePop(),
tooltip: AppLocalizations.of(context)!.back,
)
: null,
titleSpacing: 0,
title: Text(
AppLocalizations.of(context)!.you,
style: AppTypography.headlineSmallStyle.copyWith(
color: context.conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
centerTitle: true,
);
}
Widget _buildCenteredState(BuildContext context, Widget child) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(Spacing.pagePadding),
child: Center(child: child),
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
return Padding(
padding: EdgeInsets.fromLTRB(
Spacing.pagePadding,
topPadding,
Spacing.pagePadding,
Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
),
child: Center(child: child),
);
}
@@ -121,23 +99,26 @@ class ProfilePage extends ConsumerWidget {
dynamic userData,
ApiService? api,
) {
return SafeArea(
child: ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
padding: const EdgeInsets.symmetric(
horizontal: Spacing.pagePadding,
vertical: Spacing.pagePadding,
),
children: [
_buildProfileHeader(context, userData, api),
const SizedBox(height: Spacing.xl),
_buildAccountSection(context, ref),
const SizedBox(height: Spacing.xl),
_buildSupportSection(context),
],
// Calculate top padding to account for app bar + safe area
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
return ListView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
padding: EdgeInsets.fromLTRB(
Spacing.pagePadding,
topPadding,
Spacing.pagePadding,
Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
),
children: [
_buildProfileHeader(context, userData, api),
const SizedBox(height: Spacing.xl),
_buildAccountSection(context, ref),
const SizedBox(height: Spacing.xl),
_buildSupportSection(context),
],
);
}

303
lib/shared/widgets/conduit_components.dart
View File

@@ -1,3 +1,5 @@
import 'dart:ui' show ImageFilter;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../theme/theme_extensions.dart';
@@ -10,6 +12,307 @@ import '../../core/services/settings_service.dart';
/// Unified component library following Conduit design patterns
/// This provides consistent, reusable UI components throughout the app
// =============================================================================
// FLOATING APP BAR COMPONENTS
// =============================================================================
/// A pill-shaped container with blur effect for floating app bar elements.
/// Used for back buttons, titles, and action buttons in the floating app bar.
class FloatingAppBarPill extends StatelessWidget {
final Widget child;
final bool isCircular;
const FloatingAppBarPill({
super.key,
required this.child,
this.isCircular = false,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
);
}
}
/// A floating app bar with gradient background and pill-shaped elements.
/// Provides a consistent app bar style across the app with blur effects.
///
/// Supports:
/// - Simple title with optional leading/actions
/// - Custom title widget for complex layouts
/// - Bottom widget for search bars or other content
/// - Flexible actions positioning
class FloatingAppBar extends StatelessWidget implements PreferredSizeWidget {
/// Leading widget (typically a back button or menu button)
final Widget? leading;
/// Title widget - can be a simple [FloatingAppBarTitle] or custom widget
final Widget title;
/// Action widgets displayed on the right side
final List<Widget>? actions;
/// Bottom widget displayed below the main row (e.g., search bar)
final Widget? bottom;
/// Height of the bottom widget (used for preferredSize calculation)
final double bottomHeight;
/// Whether to show a trailing spacer when there's a leading widget but no actions
/// Set to false if you want the title to use all available space
final bool balanceLeading;
const FloatingAppBar({
super.key,
this.leading,
required this.title,
this.actions,
this.bottom,
this.bottomHeight = 0,
this.balanceLeading = true,
});
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight + bottomHeight);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
),
),
child: SafeArea(
bottom: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading
if (leading != null)
Padding(
padding: const EdgeInsets.only(left: Spacing.inputPadding),
child: Center(child: leading),
)
else
const SizedBox(width: Spacing.inputPadding),
// Title centered
Expanded(
child: Center(child: title),
),
// Actions or trailing spacer
if (actions != null && actions!.isNotEmpty)
Row(
mainAxisSize: MainAxisSize.min,
children: actions!,
)
else if (leading != null && balanceLeading)
const SizedBox(width: 44 + Spacing.inputPadding)
else
const SizedBox(width: Spacing.inputPadding),
],
),
),
if (bottom != null) bottom!,
],
),
),
);
}
}
/// Helper to build a standard floating app bar title pill with text.
class FloatingAppBarTitle extends StatelessWidget {
final String text;
final IconData? icon;
const FloatingAppBarTitle({
super.key,
required this.text,
this.icon,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
return FloatingAppBarPill(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(
icon,
color: conduitTheme.textPrimary.withValues(alpha: 0.7),
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
],
Text(
text,
style: AppTypography.headlineSmallStyle.copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}
}
/// Helper to build a standard floating app bar back button.
class FloatingAppBarBackButton extends StatelessWidget {
final VoidCallback? onTap;
final IconData? icon;
const FloatingAppBarBackButton({
super.key,
this.onTap,
this.icon,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
final isIOS = Theme.of(context).platform == TargetPlatform.iOS;
return GestureDetector(
onTap: onTap ?? () => Navigator.of(context).maybePop(),
child: FloatingAppBarPill(
isCircular: true,
child: Icon(
icon ?? (isIOS ? Icons.arrow_back_ios_new : Icons.arrow_back),
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
);
}
}
/// Helper to build a floating app bar icon button (circular pill with icon).
class FloatingAppBarIconButton extends StatelessWidget {
final IconData icon;
final VoidCallback? onTap;
final Color? iconColor;
const FloatingAppBarIconButton({
super.key,
required this.icon,
this.onTap,
this.iconColor,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
return GestureDetector(
onTap: onTap,
child: FloatingAppBarPill(
isCircular: true,
child: Icon(
icon,
color: iconColor ?? conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
);
}
}
/// Helper to build a floating app bar action with padding.
class FloatingAppBarAction extends StatelessWidget {
final Widget child;
const FloatingAppBarAction({
super.key,
required this.child,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: Spacing.inputPadding),
child: Center(child: child),
);
}
}
// =============================================================================
// EXISTING COMPONENTS
// =============================================================================
class ConduitButton extends ConsumerWidget {
final String text;
final VoidCallback? onPressed;