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

24
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(
child: FloatingAppBarIconButton(
icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh, icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh,
onPressed: _refresh, onTap: _refresh,
tooltip: l10n?.retry ?? 'Retry', ),
), ),
], ],
), ),

130
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,
// 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, 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,7 +1817,28 @@ class _ChatPageState extends ConsumerState<ChatPage> {
} }
// Build model selector pill // Build model selector pill
final modelPill = GestureDetector( // 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: ConduitLoading.skeleton(
width: 80,
height: 14,
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
),
),
);
} else {
modelPill = GestureDetector(
onTap: () async { onTap: () async {
final modelsAsync = ref.read(modelsProvider); final modelsAsync = ref.read(modelsProvider);
@@ -1923,15 +1918,40 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
); );
}
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(

195
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,47 +178,117 @@ 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: [
// 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(
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.symmetric(
Spacing.inputPadding, horizontal: Spacing.inputPadding,
Spacing.sm, ),
Spacing.md, child: _buildFloatingSearchField(context),
Spacing.sm, ),
// Gradient fade area below
const SizedBox(height: Spacing.md),
],
),
),
),
// 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),
),
],
);
},
), ),
child: Row(children: [Expanded(child: _buildSearchField(context))]),
), ),
Expanded(child: _buildConversationList(context)),
Divider(
height: 1,
color: sidebarTheme.border.withValues(alpha: 0.28),
), ),
_buildBottomSection(context),
], ],
), ),
); );
} }
Widget _buildSearchField(BuildContext context) { Widget _buildFloatingSearchField(BuildContext context) {
final sidebarTheme = context.sidebarTheme; final conduitTheme = context.conduitTheme;
return Material(
return FloatingAppBarPill(
child: Material(
color: Colors.transparent, color: Colors.transparent,
child: TextField( child: TextField(
controller: _searchController, controller: _searchController,
focusNode: _searchFocusNode, focusNode: _searchFocusNode,
onChanged: (_) => _onSearchChanged(), onChanged: (_) => _onSearchChanged(),
style: AppTypography.standard.copyWith(color: sidebarTheme.foreground), style: AppTypography.standard.copyWith(
color: conduitTheme.textPrimary,
),
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
hintText: AppLocalizations.of(context)!.searchConversations, hintText: AppLocalizations.of(context)!.searchConversations,
hintStyle: AppTypography.standard.copyWith( hintStyle: AppTypography.standard.copyWith(
color: sidebarTheme.foreground.withValues(alpha: 0.6), color: conduitTheme.textSecondary.withValues(alpha: 0.6),
), ),
prefixIcon: Icon( prefixIcon: Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.search, Platform.isIOS ? CupertinoIcons.search : Icons.search,
color: sidebarTheme.foreground.withValues(alpha: 0.7), color: conduitTheme.iconSecondary,
size: IconSize.input, size: IconSize.input,
), ),
prefixIconConstraints: const BoxConstraints( prefixIconConstraints: const BoxConstraints(
@@ -221,7 +306,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.clear_circled_solid ? CupertinoIcons.clear_circled_solid
: Icons.clear, : Icons.clear,
color: sidebarTheme.foreground.withValues(alpha: 0.7), color: conduitTheme.iconSecondary,
size: IconSize.input, size: IconSize.input,
), ),
) )
@@ -230,29 +315,14 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
minWidth: TouchTarget.minimum, minWidth: TouchTarget.minimum,
minHeight: TouchTarget.minimum, minHeight: TouchTarget.minimum,
), ),
filled: true, filled: false,
fillColor: sidebarTheme.accent.withValues(alpha: 0.9), 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.28),
width: BorderWidth.thin,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
borderSide: BorderSide(
color: sidebarTheme.ring.withValues(alpha: 0.6),
width: BorderWidth.thin,
),
),
contentPadding: const EdgeInsets.symmetric( contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md, horizontal: Spacing.md,
vertical: Spacing.xs, vertical: Spacing.sm,
),
), ),
), ),
), ),
@@ -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,22 +1699,13 @@ 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,
Container(
padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration(
color: sidebarTheme.accent.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: sidebarTheme.border.withValues(alpha: 0.28),
width: BorderWidth.thin,
),
), ),
child: Row( child: Row(
children: [ children: [
@@ -1657,12 +1717,10 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
AppBorderRadius.avatar, AppBorderRadius.avatar,
), ),
border: Border.all( border: Border.all(
color: theme.buttonPrimary.withValues(alpha: 0.25), color: conduitTheme.buttonPrimary.withValues(alpha: 0.25),
width: BorderWidth.thin, width: BorderWidth.thin,
), ),
), ),
// Hard-edge clipping is cheaper than anti-aliased clipping
// and sufficient for avatar squares with rounded corners.
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
child: UserAvatar( child: UserAvatar(
size: 36, size: 36,
@@ -1677,7 +1735,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: AppTypography.bodySmallStyle.copyWith( style: AppTypography.bodySmallStyle.copyWith(
color: sidebarTheme.foreground, color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
decoration: TextDecoration.none, decoration: TextDecoration.none,
), ),
@@ -1696,7 +1754,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.doc_text ? CupertinoIcons.doc_text
: Icons.note_alt_outlined, : Icons.note_alt_outlined,
color: sidebarTheme.foreground.withValues(alpha: 0.8), color: conduitTheme.iconPrimary,
size: IconSize.medium, size: IconSize.medium,
), ),
), ),
@@ -1711,16 +1769,13 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.settings ? CupertinoIcons.settings
: Icons.settings_rounded, : Icons.settings_rounded,
color: sidebarTheme.foreground.withValues(alpha: 0.8), color: conduitTheme.iconPrimary,
size: IconSize.medium, size: IconSize.medium,
), ),
), ),
], ],
), ),
), ),
],
],
),
); );
} }
} }

439
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,155 +495,233 @@ 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),
body: Stack(
children: [ children: [
Column( // Main content - scrolls behind floating elements
children: [ Positioned.fill(
_buildHeader(context), child: _buildMainContent(context),
if (!_isLoading && _note != null)
_buildMetadataBar(context),
Expanded(child: _buildBody(context)),
],
), ),
// Floating action buttons // Floating action buttons
if (!_isLoading && _note != null) if (!_isLoading && _note != null)
_buildFloatingActions(context), Positioned(
], left: Spacing.md,
right: Spacing.md,
bottom: Spacing.md + MediaQuery.of(context).padding.bottom,
child: _buildFloatingActionsRow(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,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
), ),
color: sidebarTheme.background, ),
child: SafeArea(
bottom: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// App bar row with back button, title, and menu
SizedBox(
height: kToolbarHeight,
child: Row( child: Row(
children: [ children: [
// Back button // Leading (back button)
IconButton( Padding(
icon: Icon( padding: const EdgeInsets.only(left: Spacing.inputPadding),
UiUtils.platformIcon( child: Center(
ios: CupertinoIcons.back, child: GestureDetector(
android: Icons.arrow_back_rounded, onTap: () async {
),
color: theme.iconPrimary,
),
onPressed: () async {
final navigator = Navigator.of(context); final navigator = Navigator.of(context);
await _onWillPop(); await _onWillPop();
if (!mounted) return; if (!mounted) return;
navigator.pop(); navigator.pop();
}, },
tooltip: l10n.back, child: _buildAppBarPill(
context,
Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
), ),
const SizedBox(width: Spacing.xs), color: conduitTheme.textPrimary,
size: IconSize.appBar,
// Title input ),
isCircular: true,
),
),
),
),
// Title centered
Expanded( 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( child: TextField(
controller: _titleController, controller: _titleController,
focusNode: _titleFocusNode, focusNode: _titleFocusNode,
enabled: !_isGeneratingTitle, enabled: !_isGeneratingTitle,
style: AppTypography.headlineSmallStyle.copyWith( style: AppTypography.headlineSmallStyle
color: theme.textPrimary, .copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
decoration: InputDecoration( decoration: InputDecoration(
hintText: _isGeneratingTitle hintText: l10n.untitled,
? l10n.generatingTitle hintStyle: AppTypography.headlineSmallStyle
: l10n.noteTitle, .copyWith(
hintStyle: AppTypography.headlineSmallStyle.copyWith( color: conduitTheme.textSecondary
color: theme.textSecondary.withValues(alpha: 0.4), .withValues(alpha: 0.6),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
filled: false,
border: InputBorder.none, border: InputBorder.none,
enabledBorder: InputBorder.none, enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none, focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
isDense: true, isDense: true,
), ),
textCapitalization: TextCapitalization.sentences, textAlign: TextAlign.center,
textInputAction: TextInputAction.next, textCapitalization:
onSubmitted: (_) => _contentFocusNode.requestFocus(), TextCapitalization.sentences,
), textInputAction: TextInputAction.done,
), onSubmitted: (_) =>
_contentFocusNode.requestFocus(),
// Generate title button - aligned with other header icons ),
AnimatedOpacity( ),
opacity: _titleFocusNode.hasFocus && !_isGeneratingTitle ),
? 1.0 // Visible text when not focused
: 0.0, if (!_titleFocusNode.hasFocus)
duration: const Duration(milliseconds: 150), GestureDetector(
child: IgnorePointer( onTap: () => _titleFocusNode.requestFocus(),
ignoring: !_titleFocusNode.hasFocus || _isGeneratingTitle, child: MiddleEllipsisText(
child: IconButton( _titleController.text.isEmpty
icon: Icon( ? l10n.untitled
Platform.isIOS : _titleController.text,
? CupertinoIcons.sparkles style: AppTypography.headlineSmallStyle
: Icons.auto_awesome_rounded, .copyWith(
color: theme.buttonPrimary, color: _titleController.text.isEmpty
), ? conduitTheme.textSecondary
onPressed: _generateTitle, .withValues(alpha: 0.6)
tooltip: l10n.generateTitle, : 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,
), ),
), ),
), ),
// Save indicator
if (_isSaving) if (_isSaving)
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm), padding: const EdgeInsets.only(left: Spacing.sm),
child: SizedBox( child: SizedBox(
width: IconSize.sm, width: IconSize.sm,
height: IconSize.sm, height: IconSize.sm,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium, strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(theme.loadingIndicator), valueColor: AlwaysStoppedAnimation(
conduitTheme.loadingIndicator,
), ),
), ),
) ),
else if (_hasChanges) ),
],
),
),
),
),
),
// Actions (more menu)
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.sm), padding: const EdgeInsets.only(right: Spacing.inputPadding),
child: Container( child: Center(
width: 8, child: PopupMenuButton<String>(
height: 8, tooltip: '',
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( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md), borderRadius: BorderRadius.circular(AppBorderRadius.md),
), ),
onSelected: (value) { onSelected: (value) {
switch (value) { switch (value) {
case 'generate_title':
_generateTitle();
case 'copy': case 'copy':
_copyToClipboard(); _copyToClipboard();
case 'delete': case 'delete':
@@ -648,6 +729,22 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
} }
}, },
itemBuilder: (context) => [ 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( PopupMenuItem(
value: 'copy', value: 'copy',
child: Row( child: Row(
@@ -656,7 +753,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.doc_on_clipboard ? CupertinoIcons.doc_on_clipboard
: Icons.copy_rounded, : Icons.copy_rounded,
color: theme.iconPrimary, color: conduitTheme.iconPrimary,
size: IconSize.md, size: IconSize.md,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
@@ -672,24 +769,72 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Platform.isIOS Platform.isIOS
? CupertinoIcons.delete ? CupertinoIcons.delete
: Icons.delete_rounded, : Icons.delete_rounded,
color: theme.error, color: conduitTheme.error,
size: IconSize.md, size: IconSize.md,
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
Text(l10n.delete, style: TextStyle(color: theme.error)), 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,14 +842,22 @@ 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(
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: Spacing.md, horizontal: Spacing.md,
vertical: Spacing.xs, vertical: Spacing.xs,
), ),
child: SingleChildScrollView( decoration: BoxDecoration(
scrollDirection: Axis.horizontal, color: backgroundColor.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Created date // Created date
_buildMetadataChip( _buildMetadataChip(
@@ -714,7 +867,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
: Icons.calendar_today_rounded, : Icons.calendar_today_rounded,
label: createdDate, label: createdDate,
), ),
_buildMetadataSeparator(theme), _buildMetadataSeparator(conduitTheme),
// Word count // Word count
_buildMetadataChip( _buildMetadataChip(
context, context,
@@ -723,7 +876,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
: Icons.article_rounded, : Icons.article_rounded,
label: l10n.wordCount(_wordCount), label: l10n.wordCount(_wordCount),
), ),
_buildMetadataSeparator(theme), _buildMetadataSeparator(conduitTheme),
// Character count // Character count
_buildMetadataChip( _buildMetadataChip(
context, context,
@@ -735,6 +888,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
], ],
), ),
), ),
),
); );
} }
@@ -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,15 +1005,11 @@ 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,
right: Spacing.md,
bottom: Spacing.md,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
// Dictation button // Dictation button
@@ -861,9 +1019,7 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
? (Platform.isIOS ? (Platform.isIOS
? CupertinoIcons.stop_fill ? CupertinoIcons.stop_fill
: Icons.stop_rounded) : Icons.stop_rounded)
: (Platform.isIOS : (Platform.isIOS ? CupertinoIcons.mic_fill : Icons.mic_rounded),
? CupertinoIcons.mic_fill
: Icons.mic_rounded),
color: _isRecording ? theme.error : null, color: _isRecording ? theme.error : null,
isLoading: false, isLoading: false,
tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation, tooltip: _isRecording ? l10n.stopRecording : l10n.startDictation,
@@ -882,7 +1038,6 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
showMenu: true, showMenu: true,
), ),
], ],
),
); );
} }
@@ -895,21 +1050,31 @@ 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)
: 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( decoration: BoxDecoration(
color: theme.surfaceContainer, color: backgroundColor,
shape: BoxShape.circle, borderRadius: BorderRadius.circular(AppBorderRadius.floatingButton),
border: Border.all( border: Border.all(color: borderColor, width: BorderWidth.thin),
color: sidebarTheme.border.withValues(alpha: 0.2), boxShadow: ConduitShadows.button(context),
width: BorderWidth.thin,
),
boxShadow: ConduitShadows.medium(context),
), ),
child: isLoading child: isLoading
? Center( ? Center(
@@ -918,11 +1083,19 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
height: IconSize.md, height: IconSize.md,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium, strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation(theme.loadingIndicator), valueColor:
AlwaysStoppedAnimation(conduitTheme.loadingIndicator),
), ),
), ),
) )
: Icon(icon, color: color ?? theme.iconPrimary, size: IconSize.lg), : Icon(
icon,
color: color ??
conduitTheme.iconPrimary.withValues(alpha: 0.9),
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,
), ),
), ),

174
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,
floatingActionButton: _buildFAB(context), bottom: Padding(
),
);
}
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;
final l10n = AppLocalizations.of(context)!;
return Padding(
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding, Spacing.inputPadding,
Spacing.xs, Spacing.xs,
Spacing.inputPadding, Spacing.inputPadding,
Spacing.sm, Spacing.sm,
), ),
child: _buildFloatingSearchField(context),
),
),
body: _buildBody(context),
floatingActionButton: _buildFAB(context),
),
);
}
Widget _buildFloatingSearchField(BuildContext context) {
final conduitTheme = context.conduitTheme;
final l10n = AppLocalizations.of(context)!;
return FloatingAppBarPill(
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: [

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

@@ -44,18 +44,25 @@ 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,
title: FloatingAppBarTitle(text: l10n.appCustomization),
),
body: ListView(
physics: const BouncingScrollPhysics( physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(), parent: AlwaysScrollableScrollPhysics(),
), ),
padding: const EdgeInsets.symmetric( padding: EdgeInsets.fromLTRB(
horizontal: Spacing.pagePadding, Spacing.pagePadding,
vertical: Spacing.pagePadding, topPadding,
Spacing.pagePadding,
Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
), ),
children: [ children: [
_buildThemesDropdownSection( _buildThemesDropdownSection(
@@ -83,40 +90,6 @@ class AppCustomizationPage extends ConsumerWidget {
_buildSocketHealthSection(context, ref), _buildSocketHealthSection(context, ref),
], ],
), ),
),
);
}
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,
),
),
centerTitle: true,
); );
} }

71
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,14 +99,18 @@ 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;
return ListView(
physics: const BouncingScrollPhysics( physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(), parent: AlwaysScrollableScrollPhysics(),
), ),
padding: const EdgeInsets.symmetric( padding: EdgeInsets.fromLTRB(
horizontal: Spacing.pagePadding, Spacing.pagePadding,
vertical: Spacing.pagePadding, topPadding,
Spacing.pagePadding,
Spacing.pagePadding + MediaQuery.of(context).padding.bottom,
), ),
children: [ children: [
_buildProfileHeader(context, userData, api), _buildProfileHeader(context, userData, api),
@@ -137,7 +119,6 @@ class ProfilePage extends ConsumerWidget {
const SizedBox(height: Spacing.xl), const SizedBox(height: Spacing.xl),
_buildSupportSection(context), _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;