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

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

@@ -956,57 +956,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
required Widget child, required Widget child,
bool isCircular = false, bool isCircular = false,
}) { }) {
final theme = Theme.of(context); return FloatingAppBarPill(
final isDark = theme.brightness == Brightness.dark; isCircular: isCircular,
child: child,
// 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,
),
),
); );
} }
@@ -1550,11 +1502,14 @@ class _ChatPageState extends ConsumerState<ChatPage> {
trimmedConversationTitle.isNotEmpty) trimmedConversationTitle.isNotEmpty)
? trimmedConversationTitle ? trimmedConversationTitle
: null; : null;
// Watch loading state for app bar skeleton
final isLoadingConversation = ref.watch(isLoadingConversationProvider);
final formattedModelName = selectedModel != null final formattedModelName = selectedModel != null
? _formatModelDisplayName(selectedModel.name) ? _formatModelDisplayName(selectedModel.name)
: null; : null;
final modelLabel = formattedModelName ?? l10n.chooseModel; final modelLabel = formattedModelName ?? l10n.chooseModel;
final hasConversationTitle = displayConversationTitle != null; final hasConversationTitle =
displayConversationTitle != null || isLoadingConversation;
final TextStyle modelTextStyle = hasConversationTitle final TextStyle modelTextStyle = hasConversationTitle
? AppTypography.small.copyWith( ? AppTypography.small.copyWith(
color: context.conduitTheme.textSecondary, color: context.conduitTheme.textSecondary,
@@ -1794,8 +1749,27 @@ class _ChatPageState extends ConsumerState<ChatPage> {
: LayoutBuilder( : LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
// Build title pill (tappable for context menu) // Build title pill (tappable for context menu)
// Show skeleton when loading, actual title otherwise
Widget? titlePill; 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( titlePill = GestureDetector(
onTap: () { onTap: () {
final conversation = ref.read( final conversation = ref.read(
@@ -1843,95 +1817,141 @@ class _ChatPageState extends ConsumerState<ChatPage> {
} }
// Build model selector pill // Build model selector pill
final modelPill = GestureDetector( // Show skeleton when loading, actual model selector otherwise
onTap: () async { final Widget modelPill;
final modelsAsync = ref.read(modelsProvider); if (isLoadingConversation) {
// Show skeleton pill while loading conversation
if (modelsAsync.isLoading) { modelPill = _buildAppBarPill(
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, context: context,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm, horizontal: Spacing.sm,
vertical: Spacing.xs, vertical: Spacing.xs,
), ),
child: Row( child: ConduitLoading.skeleton(
mainAxisSize: MainAxisSize.min, width: 80,
children: [ height: 14,
ConstrainedBox( borderRadius: BorderRadius.circular(
constraints: BoxConstraints( AppBorderRadius.sm,
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,
),
],
), ),
), ),
), );
); } 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( return Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
if (titlePill != null) ...[ 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), 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) if (isReviewerMode)
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(

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

@@ -1,4 +1,5 @@
import 'dart:async'; import 'dart:async';
import 'dart:io' show Platform;
import 'dart:math' as math; import 'dart:math' as math;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -8,6 +9,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/providers/app_providers.dart'; import '../../../core/providers/app_providers.dart';
import '../../../core/utils/markdown_to_text.dart'; import '../../../core/utils/markdown_to_text.dart';
import '../../../l10n/app_localizations.dart'; import '../../../l10n/app_localizations.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../providers/chat_providers.dart'; import '../providers/chat_providers.dart';
import '../services/voice_call_service.dart'; import '../services/voice_call_service.dart';
@@ -155,16 +157,17 @@ class _VoiceCallPageState extends ConsumerState<VoiceCallPage>
return Scaffold( return Scaffold(
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
appBar: AppBar( extendBodyBehindAppBar: true,
title: Text(l10n.voiceCallTitle), appBar: FloatingAppBar(
leading: IconButton( leading: FloatingAppBarIconButton(
icon: const Icon(CupertinoIcons.xmark), icon: Platform.isIOS ? CupertinoIcons.xmark : Icons.close,
onPressed: () async { onTap: () async {
await _service?.stopCall(); await _service?.stopCall();
if (!context.mounted) return; if (!context.mounted) return;
Navigator.of(context).pop(); Navigator.of(context).pop();
}, },
), ),
title: FloatingAppBarTitle(text: l10n.voiceCallTitle),
), ),
body: SafeArea( body: SafeArea(
child: Column( 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/utils/conversation_context_menu.dart';
import '../../../shared/widgets/user_avatar.dart'; import '../../../shared/widgets/user_avatar.dart';
import '../../../shared/widgets/model_avatar.dart'; import '../../../shared/widgets/model_avatar.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/responsive_drawer_layout.dart'; import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../../core/models/model.dart'; import '../../../core/models/model.dart';
import '../../../core/models/conversation.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. // 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,96 +178,151 @@ 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 conduitTheme = context.conduitTheme;
return Material(
color: Colors.transparent, return FloatingAppBarPill(
child: TextField( child: Material(
controller: _searchController, color: Colors.transparent,
focusNode: _searchFocusNode, child: TextField(
onChanged: (_) => _onSearchChanged(), controller: _searchController,
style: AppTypography.standard.copyWith(color: sidebarTheme.foreground), focusNode: _searchFocusNode,
decoration: InputDecoration( onChanged: (_) => _onSearchChanged(),
isDense: true, style: AppTypography.standard.copyWith(
hintText: AppLocalizations.of(context)!.searchConversations, color: conduitTheme.textPrimary,
hintStyle: AppTypography.standard.copyWith(
color: sidebarTheme.foreground.withValues(alpha: 0.6),
), ),
prefixIcon: Icon( decoration: InputDecoration(
Platform.isIOS ? CupertinoIcons.search : Icons.search, isDense: true,
color: sidebarTheme.foreground.withValues(alpha: 0.7), hintText: AppLocalizations.of(context)!.searchConversations,
size: IconSize.input, hintStyle: AppTypography.standard.copyWith(
), color: conduitTheme.textSecondary.withValues(alpha: 0.6),
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,
), ),
), prefixIcon: Icon(
focusedBorder: OutlineInputBorder( Platform.isIOS ? CupertinoIcons.search : Icons.search,
borderRadius: BorderRadius.circular(AppBorderRadius.md), color: conduitTheme.iconSecondary,
borderSide: BorderSide( size: IconSize.input,
color: sidebarTheme.ring.withValues(alpha: 0.6), ),
width: BorderWidth.thin, 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) { Widget _buildFloatingBottomSection(BuildContext context) {
final theme = context.conduitTheme; final conduitTheme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme;
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 +1699,82 @@ 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( if (user == null) return const SizedBox.shrink();
padding: const EdgeInsets.fromLTRB(Spacing.sm, 0, Spacing.sm, Spacing.sm),
child: Column( return FloatingAppBarPill(
mainAxisSize: MainAxisSize.min, child: Padding(
children: [ padding: const EdgeInsets.symmetric(
if (user != null) ...[ horizontal: Spacing.sm,
const SizedBox(height: Spacing.sm), vertical: Spacing.xs,
),
child: Row(
children: [
Container( Container(
padding: const EdgeInsets.all(Spacing.sm), width: 36,
height: 36,
decoration: BoxDecoration( decoration: BoxDecoration(
color: sidebarTheme.accent.withValues(alpha: 0.6), borderRadius: BorderRadius.circular(
borderRadius: BorderRadius.circular(AppBorderRadius.small), AppBorderRadius.avatar,
),
border: Border.all( border: Border.all(
color: sidebarTheme.border.withValues(alpha: 0.28), color: conduitTheme.buttonPrimary.withValues(alpha: 0.25),
width: BorderWidth.thin, width: BorderWidth.thin,
), ),
), ),
child: Row( clipBehavior: Clip.hardEdge,
children: [ child: UserAvatar(
Container( size: 36,
width: 36, imageUrl: avatarUrl,
height: 36, fallbackText: initial,
decoration: BoxDecoration( ),
borderRadius: BorderRadius.circular( ),
AppBorderRadius.avatar, const SizedBox(width: Spacing.sm),
), Expanded(
border: Border.all( child: Text(
color: theme.buttonPrimary.withValues(alpha: 0.25), displayName,
width: BorderWidth.thin, maxLines: 1,
), overflow: TextOverflow.ellipsis,
), style: AppTypography.bodySmallStyle.copyWith(
// Hard-edge clipping is cheaper than anti-aliased clipping color: conduitTheme.textPrimary,
// and sufficient for avatar squares with rounded corners. fontWeight: FontWeight.w600,
clipBehavior: Clip.hardEdge, decoration: TextDecoration.none,
child: UserAvatar( ),
size: 36, ),
imageUrl: avatarUrl, ),
fallbackText: initial, // Notes icon (hidden when feature is disabled)
), if (notesEnabled)
), IconButton(
const SizedBox(width: Spacing.sm), tooltip: AppLocalizations.of(context)!.notes,
Expanded( onPressed: () {
child: Text( Navigator.of(context).maybePop();
displayName, context.pushNamed(RouteNames.notes);
maxLines: 1, },
overflow: TextOverflow.ellipsis, visualDensity: VisualDensity.compact,
style: AppTypography.bodySmallStyle.copyWith( icon: Icon(
color: sidebarTheme.foreground, Platform.isIOS
fontWeight: FontWeight.w600, ? CupertinoIcons.doc_text
decoration: TextDecoration.none, : Icons.note_alt_outlined,
), color: conduitTheme.iconPrimary,
), size: IconSize.medium,
), ),
// Notes icon (hidden when feature is disabled) ),
if (notesEnabled) IconButton(
IconButton( tooltip: AppLocalizations.of(context)!.manage,
tooltip: AppLocalizations.of(context)!.notes, onPressed: () {
onPressed: () { Navigator.of(context).maybePop();
Navigator.of(context).maybePop(); context.pushNamed(RouteNames.profile);
context.pushNamed(RouteNames.notes); },
}, visualDensity: VisualDensity.compact,
visualDensity: VisualDensity.compact, icon: Icon(
icon: Icon( Platform.isIOS
Platform.isIOS ? CupertinoIcons.settings
? CupertinoIcons.doc_text : Icons.settings_rounded,
: Icons.note_alt_outlined, color: conduitTheme.iconPrimary,
color: sidebarTheme.foreground.withValues(alpha: 0.8), size: IconSize.medium,
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,
),
),
],
), ),
), ),
], ],
], ),
), ),
); );
} }

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

@@ -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';
@@ -14,7 +15,9 @@ import '../../../core/providers/app_providers.dart';
import '../../../core/widgets/error_boundary.dart'; import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.dart'; import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart'; import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/improved_loading_states.dart'; import '../../../shared/widgets/improved_loading_states.dart';
import '../../../shared/widgets/middle_ellipsis_text.dart';
import '../../../shared/widgets/themed_dialogs.dart'; import '../../../shared/widgets/themed_dialogs.dart';
import '../../chat/services/voice_input_service.dart'; import '../../chat/services/voice_input_service.dart';
import '../providers/notes_providers.dart'; import '../providers/notes_providers.dart';
@@ -492,204 +495,346 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
}, },
child: ErrorBoundary( child: ErrorBoundary(
child: Scaffold( child: Scaffold(
backgroundColor: sidebarTheme.background, backgroundColor: context.conduitTheme.surfaceBackground,
body: SafeArea( extendBodyBehindAppBar: true,
child: Stack( appBar: _buildAppBar(context),
children: [ body: Stack(
Column( children: [
children: [ // Main content - scrolls behind floating elements
_buildHeader(context), Positioned.fill(
if (!_isLoading && _note != null) child: _buildMainContent(context),
_buildMetadataBar(context), ),
Expanded(child: _buildBody(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) { PreferredSizeWidget _buildAppBar(BuildContext context) {
final theme = context.conduitTheme; final theme = Theme.of(context);
final sidebarTheme = context.sidebarTheme; final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
return Container( return PreferredSize(
padding: const EdgeInsets.fromLTRB( preferredSize: const Size.fromHeight(kToolbarHeight + 40),
Spacing.xs, child: Container(
Spacing.sm, decoration: BoxDecoration(
Spacing.sm, gradient: LinearGradient(
Spacing.xs, begin: Alignment.topCenter,
), end: Alignment.bottomCenter,
color: sidebarTheme.background, stops: const [0.0, 0.4, 1.0],
child: Row( colors: [
children: [ theme.scaffoldBackgroundColor,
// Back button theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
IconButton( theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
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)),
],
),
),
], ],
), ),
], ),
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) { Widget _buildAppBarPill(
final theme = context.conduitTheme; 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 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 dateFormat = DateFormat.MMMd();
final timeFormat = DateFormat.jm(); final timeFormat = DateFormat.jm();
@@ -697,42 +842,51 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
? '${dateFormat.format(_note!.createdDateTime)} ${timeFormat.format(_note!.createdDateTime)}' ? '${dateFormat.format(_note!.createdDateTime)} ${timeFormat.format(_note!.createdDateTime)}'
: ''; : '';
return Padding( return ClipRRect(
padding: const EdgeInsets.symmetric( borderRadius: BorderRadius.circular(AppBorderRadius.pill),
horizontal: Spacing.md, child: BackdropFilter(
vertical: Spacing.xs, filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
), child: Container(
child: SingleChildScrollView( padding: const EdgeInsets.symmetric(
scrollDirection: Axis.horizontal, horizontal: Spacing.md,
child: Row( vertical: Spacing.xs,
children: [ ),
// Created date decoration: BoxDecoration(
_buildMetadataChip( color: backgroundColor.withValues(alpha: 0.85),
context, borderRadius: BorderRadius.circular(AppBorderRadius.pill),
icon: Platform.isIOS border: Border.all(color: borderColor, width: BorderWidth.thin),
? CupertinoIcons.calendar ),
: Icons.calendar_today_rounded, child: Row(
label: createdDate, mainAxisSize: MainAxisSize.min,
), children: [
_buildMetadataSeparator(theme), // Created date
// Word count _buildMetadataChip(
_buildMetadataChip( context,
context, icon: Platform.isIOS
icon: Platform.isIOS ? CupertinoIcons.calendar
? CupertinoIcons.doc_text : Icons.calendar_today_rounded,
: Icons.article_rounded, label: createdDate,
label: l10n.wordCount(_wordCount), ),
), _buildMetadataSeparator(conduitTheme),
_buildMetadataSeparator(theme), // Word count
// Character count _buildMetadataChip(
_buildMetadataChip( context,
context, icon: Platform.isIOS
icon: Platform.isIOS ? CupertinoIcons.doc_text
? CupertinoIcons.textformat_abc : Icons.article_rounded,
: Icons.text_fields_rounded, label: l10n.wordCount(_wordCount),
label: l10n.charCount(_charCount), ),
), _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) { Widget _buildBody(BuildContext context) {
if (_isLoading) { if (_isLoading) {
return Center( return Center(
@@ -796,21 +954,25 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
return _buildNotFoundState(context); return _buildNotFoundState(context);
} }
// Title is now edited in the app bar pill, so just show the content editor
return _buildEditor(context); return _buildEditor(context);
} }
Widget _buildEditor(BuildContext context) { Widget _buildEditor(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!; 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( return GestureDetector(
onTap: () => _contentFocusNode.requestFocus(), onTap: () => _contentFocusNode.requestFocus(),
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
child: SingleChildScrollView( child: SingleChildScrollView(
controller: _scrollController, controller: _scrollController,
padding: const EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
Spacing.inputPadding, Spacing.inputPadding,
Spacing.md, topPadding + appBarHeight + Spacing.sm, // Space for floating app bar
Spacing.inputPadding, Spacing.inputPadding,
120, // Extra padding for floating buttons 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 theme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
return Positioned( return Row(
left: Spacing.md, mainAxisAlignment: MainAxisAlignment.spaceBetween,
right: Spacing.md, children: [
bottom: Spacing.md, // Dictation button
child: Row( _buildFloatingButton(
mainAxisAlignment: MainAxisAlignment.spaceBetween, context,
children: [ icon: _isRecording
// Dictation button ? (Platform.isIOS
_buildFloatingButton( ? CupertinoIcons.stop_fill
context, : Icons.stop_rounded)
icon: _isRecording : (Platform.isIOS ? CupertinoIcons.mic_fill : Icons.mic_rounded),
? (Platform.isIOS color: _isRecording ? theme.error : null,
? CupertinoIcons.stop_fill isLoading: false,
: Icons.stop_rounded) tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
: (Platform.isIOS onPressed: _toggleDictation,
? CupertinoIcons.mic_fill ),
: Icons.mic_rounded),
color: _isRecording ? theme.error : null,
isLoading: false,
tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
onPressed: _toggleDictation,
),
// AI button // AI button
_buildFloatingButton( _buildFloatingButton(
context, context,
icon: Platform.isIOS icon: Platform.isIOS
? CupertinoIcons.sparkles ? CupertinoIcons.sparkles
: Icons.auto_awesome_rounded, : Icons.auto_awesome_rounded,
isLoading: _isEnhancing, isLoading: _isEnhancing,
tooltip: l10n.enhanceWithAI, tooltip: l10n.enhanceWithAI,
onPressed: _isEnhancing ? null : _enhanceContent, onPressed: _isEnhancing ? null : _enhanceContent,
showMenu: true, showMenu: true,
), ),
], ],
),
); );
} }
@@ -895,34 +1050,52 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Color? color, Color? color,
bool showMenu = false, bool showMenu = false,
}) { }) {
final theme = context.conduitTheme; final theme = Theme.of(context);
final sidebarTheme = context.sidebarTheme; final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
final isDark = theme.brightness == Brightness.dark;
final buttonChild = Container( final backgroundColor = isDark
width: 52, ? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
height: 52, .withValues(alpha: 0.85)
decoration: BoxDecoration( : Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!
color: theme.surfaceContainer, .withValues(alpha: 0.85);
shape: BoxShape.circle,
border: Border.all( final borderColor = conduitTheme.cardBorder.withValues(alpha: 0.55);
color: sidebarTheme.border.withValues(alpha: 0.2),
width: BorderWidth.thin, final buttonChild = ClipRRect(
), borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
boxShadow: ConduitShadows.medium(context), child: BackdropFilter(
), filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: isLoading child: Container(
? Center( width: TouchTarget.button,
child: SizedBox( height: TouchTarget.button,
width: IconSize.md, decoration: BoxDecoration(
height: IconSize.md, color: backgroundColor,
child: CircularProgressIndicator( borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
strokeWidth: BorderWidth.medium, border: Border.all(color: borderColor, width: BorderWidth.thin),
valueColor: AlwaysStoppedAnimation(theme.loadingIndicator), 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) { if (showMenu) {
@@ -949,7 +1122,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.sparkles ? CupertinoIcons.sparkles
: Icons.auto_fix_high_rounded, : Icons.auto_fix_high_rounded,
color: theme.buttonPrimary, color: conduitTheme.buttonPrimary,
size: IconSize.md, size: IconSize.md,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
@@ -965,7 +1138,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.textformat ? CupertinoIcons.textformat
: Icons.title_rounded, : Icons.title_rounded,
color: theme.buttonPrimary, color: conduitTheme.buttonPrimary,
size: IconSize.md, size: IconSize.md,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
@@ -984,7 +1157,9 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
color: Colors.transparent, color: Colors.transparent,
child: InkWell( child: InkWell(
onTap: onPressed, onTap: onPressed,
customBorder: const CircleBorder(), customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
),
child: buttonChild, 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/services/navigation_service.dart';
import '../../../core/widgets/error_boundary.dart'; import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.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/improved_loading_states.dart';
import '../../../shared/widgets/loading_states.dart'; import '../../../shared/widgets/loading_states.dart';
import '../../../shared/widgets/themed_dialogs.dart'; import '../../../shared/widgets/themed_dialogs.dart';
@@ -122,83 +122,43 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
return Scaffold(backgroundColor: sidebarTheme.background); return Scaffold(backgroundColor: sidebarTheme.background);
} }
final canPop = ModalRoute.of(context)?.canPop ?? false;
final l10n = AppLocalizations.of(context)!;
return ErrorBoundary( return ErrorBoundary(
child: Scaffold( child: Scaffold(
backgroundColor: sidebarTheme.background, backgroundColor: context.conduitTheme.surfaceBackground,
body: SafeArea( extendBodyBehindAppBar: true,
child: Column( appBar: FloatingAppBar(
crossAxisAlignment: CrossAxisAlignment.stretch, leading: canPop ? const FloatingAppBarBackButton() : null,
children: [ title: FloatingAppBarTitle(
_buildHeader(context), text: l10n.notes,
_buildSearchField(context), icon: Platform.isIOS
Expanded(child: _buildBody(context)), ? 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), floatingActionButton: _buildFAB(context),
), ),
); );
} }
Widget _buildHeader(BuildContext context) { Widget _buildFloatingSearchField(BuildContext context) {
final sidebarTheme = context.sidebarTheme; final conduitTheme = context.conduitTheme;
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;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
return Padding( return FloatingAppBarPill(
padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.xs,
Spacing.inputPadding,
Spacing.sm,
),
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: TextField( child: TextField(
@@ -206,17 +166,17 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
focusNode: _searchFocusNode, focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(), onChanged: (_) => _onSearchChanged(),
style: AppTypography.standard.copyWith( style: AppTypography.standard.copyWith(
color: sidebarTheme.foreground, color: conduitTheme.textPrimary,
), ),
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
hintText: l10n.searchNotes, hintText: l10n.searchNotes,
hintStyle: AppTypography.standard.copyWith( hintStyle: AppTypography.standard.copyWith(
color: sidebarTheme.foreground.withValues(alpha: 0.5), color: conduitTheme.textSecondary.withValues(alpha: 0.6),
), ),
prefixIcon: Icon( prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search_rounded, Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: sidebarTheme.foreground.withValues(alpha: 0.6), color: conduitTheme.iconSecondary,
size: IconSize.input, size: IconSize.input,
), ),
prefixIconConstraints: const BoxConstraints( prefixIconConstraints: const BoxConstraints(
@@ -233,8 +193,8 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
icon: Icon( icon: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.clear_circled_solid ? CupertinoIcons.clear_circled_solid
: Icons.clear_rounded, : Icons.clear,
color: sidebarTheme.foreground.withValues(alpha: 0.6), color: conduitTheme.iconSecondary,
size: IconSize.input, size: IconSize.input,
), ),
) )
@@ -243,26 +203,10 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
minWidth: TouchTarget.minimum, minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum, minHeight: TouchTarget.minimum,
), ),
filled: true, filled: false,
fillColor: sidebarTheme.accent.withValues(alpha: 0.85), border: InputBorder.none,
border: OutlineInputBorder( enabledBorder: InputBorder.none,
borderRadius: BorderRadius.circular(AppBorderRadius.md), focusedBorder: InputBorder.none,
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,
),
),
contentPadding: const EdgeInsets.symmetric( contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md, horizontal: Spacing.md,
vertical: Spacing.sm, vertical: Spacing.sm,
@@ -322,7 +266,7 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
); );
slivers.add( slivers.add(
SliverPadding( SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm), padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
sliver: SliverList( sliver: SliverList(
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(context, index) => (context, index) =>
@@ -347,12 +291,23 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
} }
Widget _buildRefreshableScrollView(List<Widget> slivers) { 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( return ConduitRefreshIndicator(
onRefresh: _refreshNotes, onRefresh: _refreshNotes,
child: CustomScrollView( child: CustomScrollView(
controller: _scrollController, controller: _scrollController,
physics: const AlwaysScrollableScrollPhysics(), physics: const AlwaysScrollableScrollPhysics(),
slivers: slivers, slivers: paddedSlivers,
), ),
); );
} }
@@ -691,10 +646,17 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
final sidebarTheme = context.sidebarTheme; final sidebarTheme = context.sidebarTheme;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
final isSearchActive = _query.isNotEmpty; final isSearchActive = _query.isNotEmpty;
final topPadding = MediaQuery.of(context).padding.top;
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
return Center( return Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(Spacing.xxl), padding: EdgeInsets.fromLTRB(
Spacing.xxl,
topPadding + appBarHeight,
Spacing.xxl,
Spacing.xxl,
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
@@ -765,17 +727,29 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
Widget _buildLoading(BuildContext context) { Widget _buildLoading(BuildContext context) {
final l10n = AppLocalizations.of(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) { Widget _buildError(BuildContext context, Object error) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
final sidebarTheme = context.sidebarTheme; final sidebarTheme = context.sidebarTheme;
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
final topPadding = MediaQuery.of(context).padding.top;
final appBarHeight = kToolbarHeight + 48 + Spacing.xs + Spacing.sm;
return Center( return Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(Spacing.xxl), padding: EdgeInsets.fromLTRB(
Spacing.xxl,
topPadding + appBarHeight,
Spacing.xxl,
Spacing.xxl,
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ 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 currentLanguageCode = locale?.toLanguageTag() ?? 'system';
final languageLabel = _resolveLanguageLabel(context, currentLanguageCode); final languageLabel = _resolveLanguageLabel(context, currentLanguageCode);
final activeTheme = ref.watch(appThemePaletteProvider); final activeTheme = ref.watch(appThemePaletteProvider);
final canPop = ModalRoute.of(context)?.canPop ?? false;
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
return Scaffold( return Scaffold(
backgroundColor: context.sidebarTheme.background, backgroundColor: context.conduitTheme.surfaceBackground,
appBar: _buildAppBar(context), extendBodyBehindAppBar: true,
body: SafeArea( appBar: FloatingAppBar(
child: ListView( leading: canPop ? const FloatingAppBarBackButton() : null,
physics: const BouncingScrollPhysics( title: FloatingAppBarTitle(text: l10n.appCustomization),
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),
],
),
), ),
); body: ListView(
} physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
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,
), ),
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}) { Scaffold _buildScaffold(BuildContext context, {required Widget body}) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
final l10n = AppLocalizations.of(context)!;
return Scaffold( return Scaffold(
backgroundColor: context.sidebarTheme.background, backgroundColor: context.conduitTheme.surfaceBackground,
appBar: _buildAppBar(context), extendBodyBehindAppBar: true,
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(text: l10n.you),
),
body: body, 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) { Widget _buildCenteredState(BuildContext context, Widget child) {
return SafeArea( final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
child: Padding( return Padding(
padding: const EdgeInsets.all(Spacing.pagePadding), padding: EdgeInsets.fromLTRB(
child: Center(child: child), 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, dynamic userData,
ApiService? api, ApiService? api,
) { ) {
return SafeArea( // Calculate top padding to account for app bar + safe area
child: ListView( final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(), return ListView(
), physics: const BouncingScrollPhysics(
padding: const EdgeInsets.symmetric( parent: AlwaysScrollableScrollPhysics(),
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),
],
), ),
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/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../theme/theme_extensions.dart'; import '../theme/theme_extensions.dart';
@@ -10,6 +12,307 @@ import '../../core/services/settings_service.dart';
/// Unified component library following Conduit design patterns /// Unified component library following Conduit design patterns
/// This provides consistent, reusable UI components throughout the app /// 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 { class ConduitButton extends ConsumerWidget {
final String text; final String text;
final VoidCallback? onPressed; final VoidCallback? onPressed;