Replaces the Material 3 screens with the Noo design system: warm neutrals, one violet accent, pill controls, Schibsted Grotesk/ Instrument Sans, Lucide icons, no gradients/shadows. - New lib/widgets/noo/ component kit (core, lists, files, media, nav, overlays) plus lib/theme/design_tokens.dart for the color/type/space/ radius/motion tokens. - Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and toolbar), every tab (Files/Offline, Photos, Favorites, Recent, Activity, Trash, Shares), Settings, the lock and login screens, the media viewer, search, the details/share sheets, and the share-upload and move/copy destination pickers. - Added a design canvas (linked from DESIGN_SYSTEM.md) covering the screens the spec didn't already describe, with matching Android and iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4. - Removed now-dead legacy widgets (media_grid_tile, swipeable_item, sync_status_badge, selectable_thumbnail) and updated architecture.md/styling.md/standards.md to describe the new structure and component/testing conventions. - Added widget tests for the noo/ component kit. This is a UI-only rework: no provider/model/service behavior changed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
185 lines
6.4 KiB
Dart
185 lines
6.4 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../providers/files_controller.dart';
|
|
import '../theme/design_tokens.dart';
|
|
import 'noo/core/noo_chip.dart';
|
|
import 'noo/core/noo_segmented_control.dart';
|
|
import 'noo/core/noo_toggle.dart';
|
|
import 'noo/lists/noo_grouped_list.dart';
|
|
import 'noo/lists/noo_settings_row.dart';
|
|
import 'noo/overlays/noo_sheet.dart';
|
|
import 'sort_menu_button.dart' show sortFieldLabel;
|
|
|
|
String _typeFilterLabel(FilesTypeFilter filter) {
|
|
switch (filter) {
|
|
case FilesTypeFilter.all:
|
|
return 'All types';
|
|
case FilesTypeFilter.filesOnly:
|
|
return 'Files only';
|
|
case FilesTypeFilter.foldersOnly:
|
|
return 'Folders only';
|
|
}
|
|
}
|
|
|
|
/// The Files tab's sort/filter/view-mode row (Noo Design System project's
|
|
/// Files screen: a sort chip, a filter chip, a spacer, then the list/grid
|
|
/// segmented toggle) - shared with the Offline tab, which reads and writes
|
|
/// the exact same [FilesController] prefs. [folderPath] picks which
|
|
/// folder's sort applies. [showStorageScope] is off for Offline - a local
|
|
/// mirror has no cloud/external distinction.
|
|
///
|
|
/// Hidden-files and storage-scope, which have no home in the mockup's
|
|
/// simple two-chip row, live inside the filter chip's sheet instead of as
|
|
/// their own row controls.
|
|
class FilesControlsRow extends StatelessWidget {
|
|
final String folderPath;
|
|
final bool showStorageScope;
|
|
final ScrollController? scrollController;
|
|
|
|
const FilesControlsRow({
|
|
super.key,
|
|
required this.folderPath,
|
|
this.showStorageScope = true,
|
|
this.scrollController,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final files = context.watch<FilesController>();
|
|
final filtersActive = files.filesTypeFilter != FilesTypeFilter.all ||
|
|
files.showHiddenFiles ||
|
|
(showStorageScope && files.storageScope != StorageScope.cloud);
|
|
|
|
return SizedBox(
|
|
height: 44,
|
|
child: SingleChildScrollView(
|
|
controller: scrollController,
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
NooChip(
|
|
icon: files.sortAscendingFor(folderPath)
|
|
? LucideIcons.arrowUp
|
|
: LucideIcons.arrowDown,
|
|
onTap: () => _showSortSheet(context, files),
|
|
child: Text(sortFieldLabel(files.sortFieldFor(folderPath))),
|
|
),
|
|
const SizedBox(width: 8),
|
|
NooChip(
|
|
icon: LucideIcons.filter,
|
|
trailing: NooChipTrailing.menu,
|
|
selected: filtersActive,
|
|
onTap: () => _showFilterSheet(context, files),
|
|
child: Text(_typeFilterLabel(files.filesTypeFilter)),
|
|
),
|
|
const Spacer(),
|
|
NooSegmentedControl<bool>(
|
|
iconOnly: true,
|
|
value: files.isGridView,
|
|
onChanged: files.setGridView,
|
|
options: const [
|
|
NooSegmentOption(value: false, icon: LucideIcons.list),
|
|
NooSegmentOption(value: true, icon: LucideIcons.grid),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showSortSheet(BuildContext context, FilesController files) {
|
|
showNooSheet(
|
|
context,
|
|
children: [
|
|
NooSegmentedControl<bool>(
|
|
fill: true,
|
|
value: files.sortAscendingFor(folderPath),
|
|
onChanged: (asc) {
|
|
if (asc != files.sortAscendingFor(folderPath)) {
|
|
files.toggleSortOrderFor(folderPath);
|
|
}
|
|
},
|
|
options: const [
|
|
NooSegmentOption(value: true, icon: LucideIcons.arrowUp, label: 'Ascending'),
|
|
NooSegmentOption(value: false, icon: LucideIcons.arrowDown, label: 'Descending'),
|
|
],
|
|
),
|
|
NooGroupedList(
|
|
children: [
|
|
for (final field in FileSortField.values)
|
|
NooSettingsRow(
|
|
label: Text(sortFieldLabel(field)),
|
|
trailing: field == files.sortFieldFor(folderPath)
|
|
? Icon(LucideIcons.check, size: 18, color: context.nooColors.accentText)
|
|
: null,
|
|
onTap: () {
|
|
files.setSortFieldFor(folderPath, field);
|
|
Navigator.pop(context);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
void _showFilterSheet(BuildContext context, FilesController files) {
|
|
showNooSheet(
|
|
context,
|
|
children: [
|
|
NooGroupedList(
|
|
label: 'Show',
|
|
children: [
|
|
NooSettingsRow(
|
|
label: const Text('Files and folders'),
|
|
trailing: files.filesTypeFilter == FilesTypeFilter.all
|
|
? Icon(LucideIcons.check, size: 18, color: context.nooColors.accentText)
|
|
: null,
|
|
onTap: () => files.setFilesTypeFilter(FilesTypeFilter.all),
|
|
),
|
|
NooSettingsRow(
|
|
label: const Text('Files only'),
|
|
trailing: files.filesTypeFilter == FilesTypeFilter.filesOnly
|
|
? Icon(LucideIcons.check, size: 18, color: context.nooColors.accentText)
|
|
: null,
|
|
onTap: () => files.setFilesTypeFilter(FilesTypeFilter.filesOnly),
|
|
),
|
|
NooSettingsRow(
|
|
label: const Text('Folders only'),
|
|
trailing: files.filesTypeFilter == FilesTypeFilter.foldersOnly
|
|
? Icon(LucideIcons.check, size: 18, color: context.nooColors.accentText)
|
|
: null,
|
|
onTap: () => files.setFilesTypeFilter(FilesTypeFilter.foldersOnly),
|
|
),
|
|
],
|
|
),
|
|
NooGroupedList(
|
|
children: [
|
|
NooSettingsRow(
|
|
icon: LucideIcons.eye,
|
|
label: const Text('Show hidden files'),
|
|
trailing: NooToggle(
|
|
checked: files.showHiddenFiles,
|
|
onChanged: (_) => files.toggleShowHiddenFiles(),
|
|
),
|
|
),
|
|
if (showStorageScope)
|
|
NooSettingsRow(
|
|
icon: LucideIcons.hardDrive,
|
|
label: const Text('External storage'),
|
|
trailing: NooToggle(
|
|
checked: files.storageScope == StorageScope.external,
|
|
onChanged: (external) => files.setStorageScope(
|
|
external ? StorageScope.external : StorageScope.cloud,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|