todo-app/lib/ui/note_sheet_details.dart
Krzysztof kuhy Rudnicki f7ea0ffb3d Notes list: 2-column tile grid on phones, whole rows fill the screen
Below 600dp the notes list is a compact tile grid (title + priority/status
cues). Tile height is derived so whole rows exactly fill the viewport between
the status and navigation bars; past a screenful it scrolls vertically (no
paging). Body and dates moved into the long-press sheet. Wider windows keep
the list. Not using design_system FitGrid: it is square-celled and pages
horizontally.

Pins: design_system v0.3.0 (newest tag); also bumped crdt_sync_dart 0.11.2,
sync_settings_ui 0.4.2, file_picker 13.3.1, idb_shim 2.11.1,
sqflite_common_ffi 2.4.5, web 1.1.2 because the freshness gate was already
red on them at HEAD.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-02 09:28:18 +01:00

51 lines
1.5 KiB
Dart

import 'package:flutter/material.dart';
import 'package:todo/data/note.dart';
import 'package:todo/images/attachment_links.dart';
/// [text] without the line that serves as the title.
String noteBodyOf(String text) {
final lines = text.split('\n');
final title = lines.indexWhere(
(l) => l.trim().isNotEmpty && attachmentOfLine(l.trim()) == null,
);
if (title < 0) return text.trim();
return [...lines.take(title), ...lines.skip(title + 1)].join('\n').trim();
}
String _stamp(DateTime t) {
String two(int n) => n.toString().padLeft(2, '0');
final date = '${t.year}-${two(t.month)}-${two(t.day)}';
return '$date ${two(t.hour)}:${two(t.minute)}';
}
/// What a grid tile leaves out: the note body and its two dates.
class NoteSheetDetails extends StatelessWidget {
/// Shows the body and the dates of [note].
const NoteSheetDetails({required this.note, super.key});
/// The note being shown.
final Note note;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context).textTheme;
final body = noteBodyOf(note.text);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (body.isNotEmpty) ...[
const SizedBox(height: 12),
Text(body, style: theme.bodyMedium),
],
const SizedBox(height: 12),
Text(
'Edited ${_stamp(note.updatedAt)}'
' · Created ${_stamp(note.createdAt)}',
style: theme.bodySmall,
),
],
);
}
}