fix(ui): refine create task actions and relocate icon sources (#1500)

2026-11-08 17:40:28 +00:00 · 2026-09-11 08:00:03 +08:00
1 parent 8f9bac9e6b
commit 08fe4eef4e
@@ -29,7 +29,6 @@ import '../../../../shared/theme/app_design_tokens.dart';
 import '../../../../shared/theme/app_palette.dart';
 import '../../../../shared/widgets/app_choice_segmented_control.dart';
 import '../../../../shared/widgets/app_http_headers_editor.dart';
-import '../../../../shared/widgets/app_loading_button.dart';
 import '../../../../shared/widgets/app_number_input.dart';
 import '../../../../shared/widgets/app_path_picker_field.dart';
 import '../../../../shared/widgets/app_text_field.dart';
@@ -38,8 +37,8 @@ import '../../../../shared/widgets/app_toast.dart';
 import '../../../../l10n/l10n.dart';
 import '../../../../util/util.dart';
 import '../../application/pending_create_task.dart';
+import '../widgets/create_task_action_buttons.dart';
 import '../widgets/resolve_file_tree.dart';
-import '../widgets/resolve_task_actions.dart';

 class CreateTaskWindowPage extends ConsumerStatefulWidget {
  const CreateTaskWindowPage({super.key, this.windowController, this.initialTask});
@@ -696,17 +695,14 @@ class _CreateTaskWindowPageState extends ConsumerState<CreateTaskWindowPage> {
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
-                  SecondaryButton(
-                    onPressed: _creating ? null : _closeWindow,
-                    child: SizedBox(width: 68, child: Center(child: Text(context.l10n.cancel))),
-                  ),
-                  const SizedBox(width: 12),
-                  AppLoadingButton(
-                    key: const ValueKey('create-task-confirm-button'),
-                    onPressed: _confirm,
-                    loading: _creating,
-                    variant: AppLoadingButtonVariant.primary,
-                    child: SizedBox(width: 68, child: Center(child: Text(context.l10n.confirm))),
+                  CreateTaskActionButtons(
+                    submitting: _creating,
+                    onCancel: _closeWindow,
+                    onSubmit: _confirm,
+                    cancelLabel: context.l10n.cancel,
+                    submitLabel: context.l10n.confirm,
+                    cancelButtonKey: const ValueKey('create-task-cancel-button'),
+                    submitButtonKey: const ValueKey('create-task-confirm-button'),
                  ),
                ],
              ),
@@ -1159,10 +1155,14 @@ class _CreateTaskWindowPageState extends ConsumerState<CreateTaskWindowPage> {
              ),
              actions: [
                flutter.Flexible(
-                  child: ResolveTaskActions(
+                  child: CreateTaskActionButtons(
                    submitting: submitting,
                    onCancel: () => closeOverlay(dialogContext, false),
-                    onCreate: submit,
+                    onSubmit: submit,
+                    cancelLabel: dialogContext.l10n.cancel,
+                    submitLabel: dialogContext.l10n.createAction,
+                    cancelButtonKey: const ValueKey('resolve-cancel-button'),
+                    submitButtonKey: const ValueKey('resolve-create-button'),
                  ),
                ),
              ],
@@ -1205,7 +1205,7 @@ class _CreateTaskWindowPageState extends ConsumerState<CreateTaskWindowPage> {
                width: contentWidth,
                child: Row(
                  children: [
-                    Expanded(child: Text(dialogContext.l10n.createHistory)),
+                    Expanded(child: Text(dialogContext.l10n.historyLinks)),
                    AppTooltip(
                      message: dialogContext.l10n.clearHistory,
                      child: GhostButton(
@@ -0,0 +1,56 @@
+import 'package:flutter/widgets.dart' as flutter;
+import 'package:shadcn_flutter/shadcn_flutter.dart';
+
+import '../../../../shared/theme/app_design_tokens.dart';
+import '../../../../shared/widgets/app_loading_button.dart';
+
+class CreateTaskActionButtons extends StatelessWidget {
+  const CreateTaskActionButtons({
+    super.key,
+    required this.submitting,
+    required this.onCancel,
+    required this.onSubmit,
+    required this.cancelLabel,
+    required this.submitLabel,
+    this.cancelButtonKey,
+    this.submitButtonKey,
+  });
+
+  final bool submitting;
+  final VoidCallback onCancel;
+  final VoidCallback onSubmit;
+  final String cancelLabel;
+  final String submitLabel;
+  final Key? cancelButtonKey;
+  final Key? submitButtonKey;
+
+  @override
+  Widget build(BuildContext context) {
+    return flutter.Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SecondaryButton(
+          key: cancelButtonKey,
+          onPressed: submitting ? null : onCancel,
+          child: SizedBox(
+            width: _actionContentWidth,
+            child: Center(child: Text(cancelLabel)),
+          ),
+        ),
+        const SizedBox(width: AppDesignTokens.space12),
+        AppLoadingButton(
+          key: submitButtonKey,
+          onPressed: onSubmit,
+          loading: submitting,
+          variant: AppLoadingButtonVariant.primary,
+          child: SizedBox(
+            width: _actionContentWidth,
+            child: Center(child: Text(submitLabel)),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+const _actionContentWidth = 68.0;
@@ -189,42 +189,48 @@ class _TreeFooter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final palette = AppPalette.of(context);
-    final filters = _FileTypeFilterGroup(
-      videoActive: activeTypeFilters.contains(_FileTypeFilter.video),
-      audioActive: activeTypeFilters.contains(_FileTypeFilter.audio),
-      imageActive: activeTypeFilters.contains(_FileTypeFilter.image),
-      onSelectVideo: onSelectVideo,
-      onSelectAudio: onSelectAudio,
-      onSelectImage: onSelectImage,
+    final filters = KeyedSubtree(
+      key: const ValueKey('resolve-tree-filters'),
+      child: _FileTypeFilterGroup(
+        videoActive: activeTypeFilters.contains(_FileTypeFilter.video),
+        audioActive: activeTypeFilters.contains(_FileTypeFilter.audio),
+        imageActive: activeTypeFilters.contains(_FileTypeFilter.image),
+        onSelectVideo: onSelectVideo,
+        onSelectAudio: onSelectAudio,
+        onSelectImage: onSelectImage,
+      ),
    );
-    final stats = Row(
-      mainAxisSize: MainAxisSize.min,
+    final statsStyle = TextStyle(color: palette.textSecondary, fontSize: 12, fontWeight: FontWeight.w600);
+    final selectedLabel = context.l10n.selectedCount(selectedCount, totalCount);
+    final sizeLabel = unknownSize ? context.l10n.unknownSize : Util.fmtByte(selectedSize);
+    final baseline = MediaQuery.textScalerOf(context).scale(statsStyle.fontSize!);
+    final stats = Wrap(
+      key: const ValueKey('resolve-tree-selection-stats'),
+      alignment: WrapAlignment.end,
+      spacing: AppDesignTokens.space8,
+      runSpacing: AppDesignTokens.space4,
+      crossAxisAlignment: WrapCrossAlignment.start,
      children: [
-        Text(
-          context.l10n.selectedCount(selectedCount, totalCount),
-          style: TextStyle(color: palette.textSecondary, fontSize: 12, fontWeight: FontWeight.w600),
+        Baseline(
+          baseline: baseline,
+          baselineType: TextBaseline.alphabetic,
+          child: Text(key: const ValueKey('resolve-tree-selected-count'), selectedLabel, style: statsStyle),
        ),
-        const SizedBox(width: 8),
-        Text(
-          unknownSize ? context.l10n.unknownSize : Util.fmtByte(selectedSize),
-          style: TextStyle(color: palette.textSecondary, fontSize: 12, fontWeight: FontWeight.w600),
+        Baseline(
+          baseline: baseline,
+          baselineType: TextBaseline.alphabetic,
+          child: Text(key: const ValueKey('resolve-tree-selected-size'), sizeLabel, style: statsStyle),
        ),
      ],
    );
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        if (constraints.maxWidth < 360) {
-          return Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Align(alignment: Alignment.centerLeft, child: filters),
-              const SizedBox(height: 4),
-              Align(alignment: Alignment.centerRight, child: stats),
-            ],
-          );
-        }
-        return Row(crossAxisAlignment: CrossAxisAlignment.center, children: [filters, const Spacer(), stats]);
-      },
+
+    return OverflowBar(
+      key: const ValueKey('resolve-tree-footer'),
+      spacing: AppDesignTokens.space8,
+      alignment: MainAxisAlignment.spaceBetween,
+      overflowAlignment: OverflowBarAlignment.end,
+      overflowSpacing: AppDesignTokens.space4,
+      children: [filters, stats],
    );
  }
 }
@@ -290,7 +296,11 @@ class _FilterDivider extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return SizedBox(width: 1, height: 18, child: ColoredBox(color: color));
+    return SizedBox(
+      width: _fileTypeFilterDividerWidth,
+      height: 18,
+      child: ColoredBox(color: color),
+    );
  }
 }

@@ -305,7 +315,7 @@ class _FilterButton extends StatelessWidget {
  Widget build(BuildContext context) {
    final palette = AppPalette.of(context);
    return SizedBox(
-      width: 40,
+      width: _fileTypeFilterButtonWidth,
      height: 28,
      child: DecoratedBox(
        decoration: BoxDecoration(color: active ? palette.filterActiveBg : null),
@@ -340,3 +350,5 @@ const _audioExts = <String>{'mp3', 'flac', 'wav', 'aac', 'm4a', 'ogg', 'ape'};
 const _imageExts = <String>{'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'};
 const _resolveTreeRowHeight = 36.0;
 const _resolveFileNameStyle = TextStyle(fontSize: 14, height: 1.25);
+const _fileTypeFilterButtonWidth = 40.0;
+const _fileTypeFilterDividerWidth = 1.0;
@@ -1,50 +0,0 @@
-import 'package:shadcn_flutter/shadcn_flutter.dart';
-import 'package:flutter/widgets.dart' as flutter;
-
-import '../../../../l10n/l10n.dart';
-import '../../../../shared/theme/app_design_tokens.dart';
-import '../../../../shared/widgets/app_loading_button.dart';
-
-class ResolveTaskActions extends StatelessWidget {
-  const ResolveTaskActions({super.key, required this.submitting, required this.onCancel, required this.onCreate});
-
-  final bool submitting;
-  final VoidCallback onCancel;
-  final VoidCallback onCreate;
-
-  @override
-  Widget build(BuildContext context) {
-    // Size both actions from the wider translated label, including while the
-    // create button replaces its label with a loader.
-    return IntrinsicWidth(
-      child: flutter.Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          flutter.Expanded(
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(minWidth: AppDesignTokens.dialogActionMinWidth),
-              child: SecondaryButton(
-                key: const ValueKey('resolve-cancel-button'),
-                onPressed: submitting ? null : onCancel,
-                child: Text(context.l10n.cancel, maxLines: 1, softWrap: false),
-              ),
-            ),
-          ),
-          const SizedBox(width: AppDesignTokens.space8),
-          flutter.Expanded(
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(minWidth: AppDesignTokens.dialogActionMinWidth),
-              child: AppLoadingButton(
-                key: const ValueKey('resolve-create-button'),
-                onPressed: onCreate,
-                loading: submitting,
-                variant: AppLoadingButtonVariant.primary,
-                child: Text(context.l10n.createAction, maxLines: 1, softWrap: false),
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}