SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Better article editor

Browse Source
This commit is contained in:
LittleSheep
2026-01-17 14:42:45 +08:00
parent 9ca5c63afd
commit 09767e113f
15 changed files with 1169 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/i18n/en-US.json
View File

@@ -1594,5 +1594,8 @@
"other": "{} tasks"
},
"setAsThumbnail": "Set as thumbnail",
"unsetAsThumbnail": "Unset as thumbnail"
"unsetAsThumbnail": "Unset as thumbnail",
"sidebar": "Sidebar",
"dropFilesHere": "Drop your files here",
"dragAndDropToAttach": "Drag your files here to attach it"
}

61
lib/screens/dashboard/dash.dart
View File

@@ -1,5 +1,6 @@
import 'dart:math' as math;
import 'package:desktop_drop/desktop_drop.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
@@ -26,9 +27,11 @@ import 'package:island/models/activity.dart';
import 'package:island/screens/notification.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:slide_countdown/slide_countdown.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:island/widgets/share/share_sheet.dart';
import 'dart:async';
import 'package:styled_widget/styled_widget.dart';
class DashboardScreen extends HookConsumerWidget {
const DashboardScreen({super.key});
@@ -51,7 +54,25 @@ class DashboardGrid extends HookConsumerWidget {
final userInfo = ref.watch(userInfoProvider);
return Container(
final dragging = useState(false);
return DropTarget(
onDragDone: (detail) {
dragging.value = false;
if (detail.files.isNotEmpty) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => ShareSheet.files(files: detail.files),
);
}
},
onDragEntered: (_) => dragging.value = true,
onDragExited: (_) => dragging.value = false,
child: Stack(
children: [
Container(
constraints: BoxConstraints(
maxHeight: isWide
? math.min(640, MediaQuery.sizeOf(context).height * 0.65)
@@ -89,7 +110,9 @@ class DashboardGrid extends HookConsumerWidget {
child: SearchBar(
hintText: 'searchAnything'.tr(),
constraints: const BoxConstraints(minHeight: 56),
leading: const Icon(Symbols.search).padding(horizontal: 24),
leading: const Icon(
Symbols.search,
).padding(horizontal: 24),
readOnly: true,
onTap: () {
eventBus.fire(CommandPaletteTriggerEvent());
@@ -124,6 +147,38 @@ class DashboardGrid extends HookConsumerWidget {
).padding(horizontal: isWide ? 24 : 16),
],
),
),
if (dragging.value)
Positioned.fill(
child: Container(
color: Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.9),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.upload_file,
size: 64,
color: Theme.of(context).colorScheme.primary,
),
const Gap(16),
Text(
'dropToShare'.tr(),
style: Theme.of(context).textTheme.headlineMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
],
),
);
}
}

60
lib/screens/explore.dart
View File

@@ -1,4 +1,3 @@
import 'package:desktop_drop/desktop_drop.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
@@ -29,10 +28,9 @@ import 'package:island/widgets/realm/realm_card.dart';
import 'package:island/widgets/publisher/publisher_card.dart';
import 'package:island/widgets/web_article_card.dart';
import 'package:island/services/event_bus.dart';
import 'package:island/widgets/share/share_sheet.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:super_sliver_list/super_sliver_list.dart';
import 'package:island/widgets/posts/post_subscription_filter.dart';
import 'package:island/widgets/post/filters/post_subscription_filter.dart';
import 'package:island/pods/post/post_list.dart';
class ExploreScreen extends HookConsumerWidget {
@@ -193,25 +191,7 @@ class ExploreScreen extends HookConsumerWidget {
hasSubscriptionsSelected,
);
final dragging = useState(false);
return DropTarget(
onDragDone: (detail) {
dragging.value = false;
if (detail.files.isNotEmpty) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => ShareSheet.files(files: detail.files),
);
}
},
onDragEntered: (_) => dragging.value = true,
onDragExited: (_) => dragging.value = false,
child: Stack(
children: [
AppScaffold(
return AppScaffold(
isNoBackground: false,
appBar: appBar,
floatingActionButton: userInfo.value != null
@@ -245,9 +225,7 @@ class ExploreScreen extends HookConsumerWidget {
title: Text('articleCompose').tr(),
onTap: () async {
Navigator.of(context).pop();
GoRouter.of(
context,
).pushNamed('articleCompose');
GoRouter.of(context).pushNamed('articleCompose');
},
),
const Gap(16),
@@ -273,38 +251,6 @@ class ExploreScreen extends HookConsumerWidget {
selectedTagIds,
)
: _buildNarrowBody(context, ref, currentFilter.value),
),
if (dragging.value)
Positioned.fill(
child: Container(
color: Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.9),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.upload_file,
size: 64,
color: Theme.of(context).colorScheme.primary,
),
const Gap(16),
Text(
'dropToShare'.tr(),
style: Theme.of(context).textTheme.headlineMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
],
),
);
}

124
lib/screens/posts/compose_article.dart
View File

@@ -15,6 +15,7 @@ import 'package:island/services/responsive.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:island/widgets/content/markdown.dart';
import 'package:island/widgets/common/responsive_sidebar.dart';
import 'package:island/widgets/post/compose_form_fields.dart';
import 'package:island/widgets/post/compose_shared.dart';
import 'package:island/widgets/post/compose_attachments.dart';
@@ -87,6 +88,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
}, [state]);
final showPreview = useState(false);
final showSidebar = useState(false);
// Initialize publisher once when data is available
useEffect(() {
@@ -140,17 +142,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
}, []);
// Helper methods
void showSettingsSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => ComposeSettingsSheet(state: state),
);
}
Widget buildPreviewPane() {
final widgetItem = SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 8),
padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 24),
child: ValueListenableBuilder<TextEditingValue>(
valueListenable: state.titleController,
builder: (context, titleValue, _) {
@@ -170,7 +164,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
fontWeight: FontWeight.bold,
),
),
const Gap(16),
const Gap(20),
],
if (descriptionValue.text.isNotEmpty) ...[
Text(
@@ -179,7 +173,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
color: colorScheme.onSurface.withOpacity(0.7),
),
),
const Gap(16),
const Gap(20),
],
if (contentValue.text.isNotEmpty)
MarkdownTextContent(
@@ -233,7 +227,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.symmetric(horizontal: 16),
child: widgetItem,
),
),
@@ -251,6 +245,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
children: [
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ComposeFormFields(
state: state,
showPublisherAvatar: false,
@@ -265,12 +260,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
}
});
},
).padding(top: 16),
),
),
// Attachments preview
ArticleComposeAttachments(state: state),
),
],
),
),
@@ -290,8 +282,15 @@ class ArticleComposeScreen extends HookConsumerWidget {
title: ValueListenableBuilder<TextEditingValue>(
valueListenable: state.titleController,
builder: (context, titleValue, _) {
return Text(
return AnimatedSwitcher(
duration: const Duration(milliseconds: 150),
switchInCurve: Curves.fastEaseInToSlowEaseOut,
switchOutCurve: Curves.fastEaseInToSlowEaseOut,
child: Text(
titleValue.text.isEmpty ? 'postTitle'.tr() : titleValue.text,
key: ValueKey(titleValue.text),
overflow: TextOverflow.ellipsis,
),
);
},
),
@@ -319,9 +318,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
},
),
IconButton(
icon: const Icon(Symbols.settings),
onPressed: showSettingsSheet,
tooltip: 'postSettings'.tr(),
icon: const Icon(Symbols.tune),
onPressed: () => showSidebar.value = !showSidebar.value,
tooltip: 'sidebar'.tr(),
),
Tooltip(
message: 'togglePreview'.tr(),
@@ -333,17 +332,26 @@ class ArticleComposeScreen extends HookConsumerWidget {
ValueListenableBuilder<bool>(
valueListenable: state.submitting,
builder: (context, submitting, _) {
return IconButton(
onPressed: submitting
? null
: () => ComposeLogic.performAction(
ref,
state,
context,
originalPost: originalPost,
return AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
transitionBuilder:
(Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: Tween<double>(
begin: 0.8,
end: 1.0,
).animate(animation),
child: child,
),
icon: submitting
);
},
child: submitting
? SizedBox(
key: const ValueKey('submitting'),
width: 28,
height: 28,
child: const CircularProgressIndicator(
@@ -351,8 +359,19 @@ class ArticleComposeScreen extends HookConsumerWidget {
strokeWidth: 2.5,
),
).center()
: Icon(
originalPost != null ? Symbols.edit : Symbols.upload,
: IconButton(
key: const ValueKey('icon'),
onPressed: () => ComposeLogic.performAction(
ref,
state,
context,
originalPost: originalPost,
),
icon: Icon(
originalPost != null
? Symbols.edit
: Symbols.upload,
),
),
);
},
@@ -363,26 +382,55 @@ class ArticleComposeScreen extends HookConsumerWidget {
body: Column(
children: [
Expanded(
child: Padding(
child: ResponsiveSidebar(
sidebarWidth: 480,
attachmentsContent: ArticleComposeAttachments(state: state),
settingsContent: ComposeSettingsSheet(state: state),
showSidebar: showSidebar,
mainContent: Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeOutCubic,
transitionBuilder:
(Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: SlideTransition(
position:
Tween<Offset>(
begin: const Offset(0, 0.05),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.easeOutCubic,
),
),
child: child,
),
);
},
child: isWideScreen(context)
? Row(
spacing: 16,
children: [
Expanded(
flex: showPreview.value ? 1 : 2,
child: buildEditorPane(),
),
if (showPreview.value) const VerticalDivider(),
Expanded(child: buildEditorPane()),
if (showPreview.value)
Expanded(child: buildPreviewPane()),
],
)
: showPreview.value
: Container(
key: ValueKey('narrow-${showPreview.value}'),
child: showPreview.value
? buildPreviewPane()
: buildEditorPane(),
),
),
),
),
),
// Bottom toolbar
ComposeToolbar(state: state, originalPost: originalPost),

2
lib/screens/posts/publisher_profile.dart
View File

@@ -25,7 +25,7 @@ import 'package:island/widgets/content/markdown.dart';
import 'package:island/widgets/post/post_list.dart';
import 'package:island/widgets/post/post_item.dart';
import 'package:island/widgets/activity_heatmap.dart';
import 'package:island/widgets/posts/post_filter.dart';
import 'package:island/widgets/post/filters/post_filter.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:island/services/color_extraction.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

2
lib/screens/search.dart
View File

@@ -15,7 +15,7 @@ import 'package:island/widgets/extended_refresh_indicator.dart';
import 'package:island/widgets/paging/pagination_list.dart';
import 'package:island/widgets/post/post_item.dart';
import 'package:island/widgets/post/post_item_skeleton.dart';
import 'package:island/widgets/posts/post_filter.dart';
import 'package:island/widgets/post/filters/post_filter.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:styled_widget/styled_widget.dart';

177
lib/widgets/common/responsive_sidebar.dart Normal file
View File

@@ -0,0 +1,177 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/services/responsive.dart';
import 'package:island/widgets/post/article_sidebar_panel.dart';
class ResponsiveSidebar extends HookConsumerWidget {
final Widget attachmentsContent;
final Widget settingsContent;
final Widget mainContent;
final double sidebarWidth;
final ValueNotifier<bool> showSidebar;
const ResponsiveSidebar({
super.key,
required this.attachmentsContent,
required this.settingsContent,
required this.mainContent,
this.sidebarWidth = 480,
required this.showSidebar,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final isWide = isWideScreen(context);
final animationController = useAnimationController(
duration: const Duration(milliseconds: 300),
);
final animation = useMemoized(
() => Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
),
[animationController],
);
final showDrawer = useState(false);
final scaffoldKey = useMemoized(() => GlobalKey<ScaffoldState>());
useEffect(() {
void listener() {
final currentIsWide = isWideScreen(context);
if (currentIsWide) {
if (showSidebar.value && !showDrawer.value) {
showDrawer.value = true;
animationController.forward();
} else if (!showSidebar.value && showDrawer.value) {
showDrawer.value = false;
animationController.reverse();
}
} else {
if (showSidebar.value) {
scaffoldKey.currentState?.openEndDrawer();
} else {
Navigator.of(context).pop();
}
}
}
showSidebar.addListener(listener);
// Set initial state after first frame
WidgetsBinding.instance.addPostFrameCallback((_) => listener());
return () => showSidebar.removeListener(listener);
}, []);
useEffect(() {
void listener() {
if (!animationController.isAnimating &&
animationController.value == 0) {
showDrawer.value = false;
}
}
animationController.addListener(listener);
return () => animationController.removeListener(listener);
}, [animationController]);
void closeSidebar() {
showSidebar.value = false;
}
if (isWide) {
return LayoutBuilder(
builder: (context, constraints) {
return AnimatedBuilder(
animation: animation,
builder: (context, child) {
return Stack(
children: [
_buildWideScreenContent(
context,
constraints,
animation,
mainContent,
),
if (showDrawer.value)
Positioned(
right: 0,
top: 0,
bottom: 0,
width: sidebarWidth,
child: _buildWideScreenSidebar(
context,
animation,
attachmentsContent,
settingsContent,
closeSidebar,
),
),
],
);
},
);
},
);
} else {
return Scaffold(
key: scaffoldKey,
endDrawer: Drawer(
width: sidebarWidth,
child: ArticleSidebarPanelWidget(
attachmentsContent: attachmentsContent,
settingsContent: settingsContent,
onClose: () {
showSidebar.value = false;
Navigator.of(context).pop();
},
isWide: false,
width: sidebarWidth,
),
),
body: mainContent,
);
}
}
Widget _buildWideScreenContent(
BuildContext context,
BoxConstraints constraints,
Animation<double> animation,
Widget mainContent,
) {
return Positioned(
left: 0,
top: 0,
bottom: 0,
width: constraints.maxWidth - animation.value * sidebarWidth,
child: mainContent,
);
}
Widget _buildWideScreenSidebar(
BuildContext context,
Animation<double> animation,
Widget attachmentsContent,
Widget settingsContent,
VoidCallback onClose,
) {
return Transform.translate(
offset: Offset((1 - animation.value) * sidebarWidth, 0),
child: SizedBox(
width: sidebarWidth,
child: Material(
elevation: 8,
color: Theme.of(context).colorScheme.surfaceContainer,
child: ArticleSidebarPanelWidget(
attachmentsContent: attachmentsContent,
settingsContent: settingsContent,
onClose: onClose,
isWide: true,
width: sidebarWidth,
),
),
),
);
}
}

19
lib/widgets/content/attachment_preview.dart
View File

@@ -95,6 +95,7 @@ class AttachmentPreview extends HookConsumerWidget {
final bool isCompact;
final String? thumbnailId;
final Function(String?)? onSetThumbnail;
final bool bordered;
const AttachmentPreview({
super.key,
@@ -109,6 +110,7 @@ class AttachmentPreview extends HookConsumerWidget {
this.isCompact = false,
this.thumbnailId,
this.onSetThumbnail,
this.bordered = false,
});
// GlobalKey for selector
@@ -475,7 +477,7 @@ class AttachmentPreview extends HookConsumerWidget {
item.isOnCloud &&
(item.data as SnCloudFile).id == thumbnailId)
Positioned(
top: 8,
bottom: 8,
right: 8,
child: Container(
padding: const EdgeInsets.all(6),
@@ -493,10 +495,19 @@ class AttachmentPreview extends HookConsumerWidget {
],
);
final contentWidget = ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
final contentWidget = Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainer,
border: bordered
? Border.all(
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
width: 1,
)
: null,
borderRadius: BorderRadius.circular(8),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Stack(
children: [
if (ratio != null)

22
lib/widgets/debug_sheet.dart
View File

@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/pods/audio.dart';
import 'package:island/pods/message.dart';
import 'package:island/pods/network.dart';
import 'package:island/services/update_service.dart';
@@ -77,7 +78,7 @@ class DebugSheet extends HookConsumerWidget {
minTileHeight: 48,
leading: const Icon(Symbols.update),
trailing: const Icon(Symbols.chevron_right),
title: Text('Force Update'),
title: Text('Force update'),
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
onTap: () async {
// Fetch latest release and show the unified sheet
@@ -102,7 +103,7 @@ class DebugSheet extends HookConsumerWidget {
minTileHeight: 48,
leading: const Icon(Symbols.wifi),
trailing: const Icon(Symbols.chevron_right),
title: Text('Connection Status'),
title: Text('Connection status'),
contentPadding: EdgeInsets.symmetric(horizontal: 24),
onTap: () {
showModalBottomSheet(
@@ -128,6 +129,23 @@ class DebugSheet extends HookConsumerWidget {
},
),
const Divider(height: 8),
ListTile(
minTileHeight: 48,
leading: const Icon(Symbols.play_arrow),
trailing: const Icon(Symbols.chevron_right),
contentPadding: EdgeInsets.symmetric(horizontal: 24),
title: Text('Play untitled'),
onTap: () async {
final synth = MiniSampleSynth(
sampleAsset: 'assets/audio/messages.mp3',
baseNote: 60,
);
await synth.playMidiAsset(
'assets/midi/never-gonna-give-you-up.mid',
);
},
),
const Divider(height: 8),
ListTile(
minTileHeight: 48,
leading: const Icon(Symbols.copy_all),

127
lib/widgets/post/article_sidebar_panel.dart Normal file
View File

@@ -0,0 +1,127 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
enum SidebarPanelType { attachments, settings }
class ArticleSidebarPanelWidget extends HookConsumerWidget {
final Widget attachmentsContent;
final Widget settingsContent;
final VoidCallback onClose;
final bool isWide;
final double width;
const ArticleSidebarPanelWidget({
super.key,
required this.attachmentsContent,
required this.settingsContent,
required this.onClose,
required this.isWide,
this.width = 480,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final activePanel = useState<SidebarPanelType>(
SidebarPanelType.attachments,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildHeader(context, activePanel, colorScheme, onClose, theme),
const Divider(height: 1),
Expanded(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeInCubic,
child: activePanel.value == SidebarPanelType.attachments
? Container(
key: const ValueKey(SidebarPanelType.attachments),
alignment: Alignment.topCenter,
child: attachmentsContent,
)
: Container(
key: const ValueKey(SidebarPanelType.settings),
alignment: Alignment.topCenter,
child: settingsContent,
),
),
),
],
);
}
Widget _buildHeader(
BuildContext context,
ValueNotifier<SidebarPanelType> activePanel,
ColorScheme colorScheme,
VoidCallback onClose,
ThemeData theme,
) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
_buildSegmentedTabs(activePanel, colorScheme, theme),
const Spacer(),
if (!isWide)
IconButton(
icon: const Icon(Symbols.close),
onPressed: onClose,
tooltip: 'close'.tr(),
padding: const EdgeInsets.all(8),
constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
),
],
),
);
}
Widget _buildSegmentedTabs(
ValueNotifier<SidebarPanelType> activePanel,
ColorScheme colorScheme,
ThemeData theme,
) {
return SegmentedButton<SidebarPanelType>(
segments: [
ButtonSegment(
value: SidebarPanelType.attachments,
label: Text('attachments'.tr()),
icon: const Icon(Symbols.attach_file, size: 18),
),
ButtonSegment(
value: SidebarPanelType.settings,
label: Text('settings'.tr()),
icon: const Icon(Symbols.settings, size: 18),
),
],
selected: {activePanel.value},
onSelectionChanged: (Set<SidebarPanelType> selected) {
if (selected.isNotEmpty) {
activePanel.value = selected.first;
}
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return colorScheme.secondaryContainer;
}
return colorScheme.surfaceContainerHighest;
}),
foregroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return colorScheme.onSecondaryContainer;
}
return colorScheme.onSurface;
}),
),
);
}
}

235
lib/widgets/post/compose_attachments.dart
View File

@@ -1,11 +1,15 @@
import 'package:desktop_drop/desktop_drop.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/file.dart';
import 'package:island/services/responsive.dart';
import 'package:island/services/file_uploader.dart';
import 'package:island/widgets/attachment_uploader.dart';
import 'package:island/widgets/content/attachment_preview.dart';
import 'package:island/widgets/post/compose_shared.dart';
import 'package:material_symbols_icons/symbols.dart';
/// A reusable widget for displaying attachments in compose screens.
/// Supports both grid and list layouts based on screen width.
@@ -103,41 +107,125 @@ class ComposeAttachments extends ConsumerWidget {
}
}
/// A specialized attachment widget for article compose with expansion tile.
class ArticleComposeAttachments extends ConsumerWidget {
class ArticleComposeAttachments extends HookConsumerWidget {
final ComposeState state;
final EdgeInsets? padding;
const ArticleComposeAttachments({super.key, required this.state});
const ArticleComposeAttachments({
super.key,
required this.state,
this.padding,
});
Future<void> _handleDroppedFiles(DropDoneDetails details, ComposeState state) async {
final newFiles = <UniversalFile>[];
for (final xfile in details.files) {
// Create UniversalFile with default type first
final uf = UniversalFile(data: xfile, type: UniversalFileType.file);
// Use FileUploader.getMimeType to get proper MIME type
final mimeType = FileUploader.getMimeType(uf);
final fileType = switch (mimeType.split('/').firstOrNull) {
'image' => UniversalFileType.image,
'video' => UniversalFileType.video,
'audio' => UniversalFileType.audio,
_ => UniversalFileType.file,
};
// Update the file type
final correctedUf = UniversalFile(data: xfile, type: fileType);
newFiles.add(correctedUf);
}
if (newFiles.isNotEmpty) {
state.attachments.value = [...state.attachments.value, ...newFiles];
}
}
@override
Widget build(BuildContext context, WidgetRef ref) {
return ValueListenableBuilder<String?>(
return Padding(
padding: padding ?? EdgeInsets.all(16),
child: ValueListenableBuilder<String?>(
valueListenable: state.thumbnailId,
builder: (context, thumbnailId, _) {
return ValueListenableBuilder<List<UniversalFile>>(
valueListenable: state.attachments,
builder: (context, attachments, _) {
if (attachments.isEmpty) return const SizedBox.shrink();
return Theme(
data: Theme.of(
return HookBuilder(
builder: (context) {
final isDragging = useState(false);
return DropTarget(
onDragDone: (details) async =>
await _handleDroppedFiles(details, state),
onDragEntered: (details) => isDragging.value = true,
onDragExited: (details) => isDragging.value = false,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
decoration: isDragging.value ? BoxDecoration(
border: Border.all(
color: Theme.of(context).colorScheme.primary,
width: 2,
),
borderRadius: BorderRadius.circular(12),
) : null,
child: Padding(
padding: isDragging.value ? const EdgeInsets.all(8) : EdgeInsets.zero,
child: attachments.isEmpty
? AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
width: double.infinity,
height: 200,
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.surfaceContainerHighest
.withOpacity(0.3),
border: Border.all(
color: Theme.of(
context,
).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
initiallyExpanded: true,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
).colorScheme.outline.withOpacity(0.5),
width: 1,
),
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('attachments').tr(),
Icon(
Symbols.upload,
size: 48,
color: Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
const SizedBox(height: 16),
Text(
'articleAttachmentHint'.tr(),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
'dropFilesHere',
style: Theme.of(context).textTheme.titleMedium
?.copyWith(
color: Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
).tr(),
const SizedBox(height: 8),
Text(
'dragAndDropToAttach',
style: Theme.of(context).textTheme.bodySmall
?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant
.withOpacity(0.7),
),
).tr(),
],
),
children: [
ValueListenableBuilder<Map<int, double?>>(
)
: ValueListenableBuilder<Map<int, double?>>(
valueListenable: state.attachmentProgress,
builder: (context, progressMap, _) {
return Wrap(
@@ -145,11 +233,8 @@ class ArticleComposeAttachments extends ConsumerWidget {
spacing: 8,
children: [
for (var idx = 0; idx < attachments.length; idx++)
SizedBox(
width: 180,
height: 180,
child: AttachmentPreview(
isCompact: true,
_AnimatedAttachmentItem(
index: idx,
item: attachments[idx],
progress: progressMap[idx],
isUploading: progressMap.containsKey(idx),
@@ -163,8 +248,8 @@ class ArticleComposeAttachments extends ConsumerWidget {
>(
context: context,
isScrollControlled: true,
builder: (context) =>
AttachmentUploaderSheet(
useRootNavigator: true,
builder: (context) => AttachmentUploaderSheet(
ref: ref,
state: state,
index: idx,
@@ -180,34 +265,98 @@ class ArticleComposeAttachments extends ConsumerWidget {
}
},
onUpdate: (value) =>
ComposeLogic.updateAttachment(
state,
value,
idx,
),
onDelete: () => ComposeLogic.deleteAttachment(
ref,
state,
idx,
),
onInsert: () => ComposeLogic.insertAttachment(
ref,
state,
idx,
),
),
ComposeLogic.updateAttachment(state, value, idx),
onDelete: () =>
ComposeLogic.deleteAttachment(ref, state, idx),
onInsert: () =>
ComposeLogic.insertAttachment(ref, state, idx),
),
],
);
},
),
const SizedBox(height: 16),
],
),
),
);
},
);
},
);
},
),
);
}
}
class _AnimatedAttachmentItem extends HookWidget {
final int index;
final UniversalFile item;
final double? progress;
final bool isUploading;
final String? thumbnailId;
final Function(String?) onSetThumbnail;
final VoidCallback onRequestUpload;
final Function(UniversalFile) onUpdate;
final VoidCallback onDelete;
final VoidCallback onInsert;
const _AnimatedAttachmentItem({
required this.index,
required this.item,
required this.progress,
required this.isUploading,
required this.thumbnailId,
required this.onSetThumbnail,
required this.onRequestUpload,
required this.onUpdate,
required this.onDelete,
required this.onInsert,
});
@override
Widget build(BuildContext context) {
final animationController = useAnimationController(
duration: const Duration(milliseconds: 300),
);
final fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut),
);
final slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.1), end: Offset.zero).animate(
CurvedAnimation(
parent: animationController,
curve: Curves.easeOutCubic,
),
);
useEffect(() {
final delay = Duration(milliseconds: 50 * index);
Future.delayed(delay, () {
animationController.forward();
});
return null;
}, [index]);
return FadeTransition(
opacity: fadeAnimation,
child: SlideTransition(
position: slideAnimation,
child: AttachmentPreview(
isCompact: true,
item: item,
progress: progress,
isUploading: isUploading,
thumbnailId: thumbnailId,
onSetThumbnail: onSetThumbnail,
onRequestUpload: onRequestUpload,
onUpdate: onUpdate,
onDelete: onDelete,
onInsert: onInsert,
bordered: true,
),
),
);
}
}

26
lib/widgets/post/compose_settings_sheet.dart
View File

@@ -139,10 +139,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
final tagInputController = useTextEditingController();
return SheetScaffold(
titleText: 'postSettings'.tr(),
heightFactor: 0.6,
child: SingleChildScrollView(
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -162,8 +159,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
borderRadius: BorderRadius.circular(12),
),
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
// Tags field
@@ -205,9 +201,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
Text(
'#$tag',
style: TextStyle(
color: Theme.of(
context,
).colorScheme.onPrimary,
color: Theme.of(context).colorScheme.onPrimary,
fontSize: 14,
),
),
@@ -222,9 +216,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
child: Icon(
Icons.close,
size: 16,
color: Theme.of(
context,
).colorScheme.onPrimary,
color: Theme.of(context).colorScheme.onPrimary,
),
),
],
@@ -265,10 +257,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
},
onSelected: (suggestion) {
if (!state.tags.value.contains(suggestion.slug)) {
state.tags.value = [
...state.tags.value,
suggestion.slug,
];
state.tags.value = [...state.tags.value, suggestion.slug];
}
tagInputController.clear();
},
@@ -404,9 +393,7 @@ class ComposeSettingsSheet extends HookConsumerWidget {
),
// Include current realm if it's not null and not in joined realms
if (currentRealm != null &&
!(userRealms.value ?? []).any(
(r) => r.id == currentRealm.id,
))
!(userRealms.value ?? []).any((r) => r.id == currentRealm.id))
DropdownMenuItem<SnRealm?>(
value: currentRealm,
child: Row(
@@ -497,7 +484,6 @@ class ComposeSettingsSheet extends HookConsumerWidget {
),
],
),
),
);
}
}

0
lib/widgets/posts/post_filter.dart → lib/widgets/post/filters/post_filter.dart
View File

0
lib/widgets/posts/post_subscription_filter.dart → lib/widgets/post/filters/post_subscription_filter.dart
View File

0
lib/widgets/posts/post_subscription_filter.g.dart → lib/widgets/post/filters/post_subscription_filter.g.dart
View File