b9e68e3bc8
Per-screen application of the design system to the Flutter app. Mirrors the web's surface phase landed in FabledScribe v26.04.28.1. Foundation port shipped in 0f05f47; this is the surface work. Lucide icon migration - Added lucide_icons ^0.257.0 dependency - 107 Material Icons references → LucideIcons across 21 files. Drop-in IconData swap (Icon(LucideIcons.X) instead of Icon(Icons.x)). - Lucide import added to each touched file. Input border radius - theme.dart inputDecorationTheme borderRadius 24 → 8 in both light and dark themes. Doc says radius-md (8px) for inputs; previous pill shape was Material default that the doc deviates from. Illuminated Transcript pattern (ChatMessageBubble) - User bubble: accent-tinted border → neutral Pewter (scheme.outline). Asymmetric corner already correct (bottomRight 4px). - Assistant bubble: topLeft corner 4 → 16; only bottomLeft stays 4 (the "tail" effect, mirroring web's `border-bottom-left-radius: 4px`). Background switched from surfaceContainerHighest (Slate) to surface (Iron) per the doc spec "card surface". - Assistant bubble glow shadow added — accent-tinted blur (28px alpha 0.14) + depth shadow (8px alpha 0.4 black). Mirrors web's --color-bubble-asst-shadow. ActionColors wiring (Hybrid rule) - 5 'Delete' confirm buttons across notes / tasks / chat conversations / calendar event sheet → Oxblood action-destructive via the ActionColors ThemeExtension defined in the foundation port. Foreground for ghost/text variants, backgroundColor for filled. - Calendar event Save button → Moss action-primary. The first call site to wire ActionColors.primary; serves as the pattern for future Save reclassifications. - Other Save buttons (note edit, task edit, project edit, etc.) still flow through colorScheme.primary (dusty violet) and read as brand-moment. Reclassifying those is deferred — the wiring pattern is established and can be applied incrementally as files are touched. Indigo cleanup - 4 hardcoded #7C3AED / #5B21B6 literals → dusty-violet equivalents (#5B4A8A / #3F3560). Spots: project_tasks_screen color fallback (×2), journal_screen gradient. Verification - flutter analyze: No issues found What's deferred - Per-screen Save / Cancel reclassification beyond the calendar event Save button. Wiring pattern established; rollout opportunistic. - Long-form 1.7 line-height on assistant Markdown content (would require MarkdownStyleSheet work; minor). - Surface walk on Knowledge / Projects / Settings screens for any hardcoded styling that needs touch. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
308 lines
10 KiB
Dart
308 lines
10 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:lucide_icons/lucide_icons.dart';
|
|
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../core/exceptions.dart';
|
|
import '../../core/theme.dart';
|
|
import '../../core/wikilink_syntax.dart';
|
|
import '../../providers/api_client_provider.dart';
|
|
import '../../providers/notes_provider.dart';
|
|
import '../../widgets/project_selector.dart';
|
|
|
|
class NoteEditScreen extends ConsumerStatefulWidget {
|
|
final int? noteId;
|
|
final String? noteType; // passed when creating a typed note from KnowledgeScreen
|
|
const NoteEditScreen({super.key, this.noteId, this.noteType});
|
|
|
|
@override
|
|
ConsumerState<NoteEditScreen> createState() => _NoteEditScreenState();
|
|
}
|
|
|
|
class _NoteEditScreenState extends ConsumerState<NoteEditScreen> {
|
|
final _titleController = TextEditingController();
|
|
final _contentController = TextEditingController();
|
|
final _tagController = TextEditingController();
|
|
List<String> _tags = [];
|
|
int? _projectId;
|
|
bool _preview = false;
|
|
bool _saving = false;
|
|
late String _noteType;
|
|
|
|
late final Future<void> _initFuture;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_noteType = widget.noteType ?? 'note';
|
|
_initFuture =
|
|
widget.noteId != null ? _loadExisting() : Future.value();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_titleController.dispose();
|
|
_contentController.dispose();
|
|
_tagController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _loadExisting() async {
|
|
final note =
|
|
await ref.read(notesRepositoryProvider).getOne(widget.noteId!);
|
|
_titleController.text = note.title;
|
|
_contentController.text = note.body;
|
|
_tags = List<String>.from(note.tags);
|
|
_projectId = note.projectId;
|
|
_noteType = note.noteType;
|
|
}
|
|
|
|
void _addTag(String raw) {
|
|
final tag = raw.trim().replaceAll(',', '').toLowerCase();
|
|
if (tag.isEmpty || _tags.contains(tag)) {
|
|
_tagController.clear();
|
|
return;
|
|
}
|
|
setState(() {
|
|
_tags = [..._tags, tag];
|
|
_tagController.clear();
|
|
});
|
|
}
|
|
|
|
void _removeTag(String tag) {
|
|
setState(() => _tags = _tags.where((t) => t != tag).toList());
|
|
}
|
|
|
|
Future<void> _delete() async {
|
|
final confirm = await showDialog<bool>(
|
|
context: context,
|
|
builder: (dialogContext) => AlertDialog(
|
|
title: const Text('Delete note?'),
|
|
content: Text(_titleController.text),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(dialogContext, false),
|
|
child: const Text('Cancel'),
|
|
),
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(dialogContext, true),
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: Theme.of(dialogContext).extension<ActionColors>()!.destructive,
|
|
),
|
|
child: const Text('Delete'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (confirm == true) {
|
|
await ref.read(notesProvider.notifier).delete(widget.noteId!);
|
|
if (mounted) context.pop();
|
|
}
|
|
}
|
|
|
|
Future<void> _save() async {
|
|
final title = _titleController.text.trim();
|
|
final body = _contentController.text;
|
|
if (title.isEmpty) {
|
|
ScaffoldMessenger.of(context)
|
|
.showSnackBar(const SnackBar(content: Text('Title is required.')));
|
|
return;
|
|
}
|
|
setState(() => _saving = true);
|
|
try {
|
|
if (widget.noteId == null) {
|
|
await ref.read(notesProvider.notifier).create(
|
|
title,
|
|
body,
|
|
tags: _tags,
|
|
projectId: _projectId,
|
|
noteType: _noteType,
|
|
);
|
|
if (mounted) context.pop();
|
|
} else {
|
|
await ref.read(notesProvider.notifier).updateNote(
|
|
widget.noteId!,
|
|
title,
|
|
body,
|
|
tags: _tags,
|
|
projectId: _projectId,
|
|
clearProject: _projectId == null,
|
|
noteType: _noteType,
|
|
);
|
|
if (mounted) context.pop();
|
|
}
|
|
} on AppException catch (e) {
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context)
|
|
.showSnackBar(SnackBar(content: Text(e.message)));
|
|
}
|
|
} finally {
|
|
if (mounted) setState(() => _saving = false);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return FutureBuilder(
|
|
future: _initFuture,
|
|
builder: (context, snapshot) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(widget.noteId == null ? 'New Note' : 'Edit Note'),
|
|
if (_noteType != 'note')
|
|
Chip(
|
|
label: Text(
|
|
_noteType,
|
|
style: const TextStyle(fontSize: 11),
|
|
),
|
|
padding: EdgeInsets.zero,
|
|
visualDensity: VisualDensity.compact,
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
actions: [
|
|
if (widget.noteId != null)
|
|
IconButton(
|
|
icon: const Icon(LucideIcons.trash2),
|
|
tooltip: 'Delete',
|
|
onPressed: _delete,
|
|
),
|
|
IconButton(
|
|
icon: Icon(_preview ? LucideIcons.pencil : LucideIcons.eye),
|
|
tooltip: _preview ? 'Edit' : 'Preview',
|
|
onPressed: () => setState(() => _preview = !_preview),
|
|
),
|
|
IconButton(
|
|
icon: _saving
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
)
|
|
: const Icon(LucideIcons.check),
|
|
onPressed: _saving ? null : _save,
|
|
),
|
|
],
|
|
),
|
|
body: snapshot.connectionState == ConnectionState.waiting
|
|
? const Center(child: CircularProgressIndicator())
|
|
: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
|
child: TextField(
|
|
controller: _titleController,
|
|
decoration: const InputDecoration(
|
|
hintText: 'Title',
|
|
border: InputBorder.none,
|
|
),
|
|
style: Theme.of(context).textTheme.titleLarge,
|
|
textInputAction: TextInputAction.next,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
|
|
child: _TagInput(
|
|
tags: _tags,
|
|
controller: _tagController,
|
|
onAdd: _addTag,
|
|
onRemove: _removeTag,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
|
|
child: ProjectSelector(
|
|
value: _projectId,
|
|
onChanged: (id) => setState(() => _projectId = id),
|
|
),
|
|
),
|
|
const Divider(height: 1),
|
|
Expanded(
|
|
child: _preview
|
|
? Markdown(
|
|
data: _contentController.text,
|
|
extensionSet: wikilinkExtensionSet,
|
|
)
|
|
: Padding(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 16),
|
|
child: TextField(
|
|
controller: _contentController,
|
|
decoration: const InputDecoration(
|
|
hintText: 'Write in markdown...',
|
|
border: InputBorder.none,
|
|
),
|
|
maxLines: null,
|
|
expands: true,
|
|
keyboardType: TextInputType.multiline,
|
|
textAlignVertical: TextAlignVertical.top,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TagInput extends StatelessWidget {
|
|
final List<String> tags;
|
|
final TextEditingController controller;
|
|
final ValueChanged<String> onAdd;
|
|
final ValueChanged<String> onRemove;
|
|
|
|
const _TagInput({
|
|
required this.tags,
|
|
required this.controller,
|
|
required this.onAdd,
|
|
required this.onRemove,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Wrap(
|
|
spacing: 6,
|
|
runSpacing: 4,
|
|
crossAxisAlignment: WrapCrossAlignment.center,
|
|
children: [
|
|
...tags.map(
|
|
(tag) => Chip(
|
|
label: Text('#$tag', style: const TextStyle(fontSize: 12)),
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
deleteIcon: const Icon(LucideIcons.x, size: 14),
|
|
onDeleted: () => onRemove(tag),
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 120,
|
|
child: TextField(
|
|
controller: controller,
|
|
decoration: const InputDecoration(
|
|
hintText: 'Add tag…',
|
|
border: InputBorder.none,
|
|
isDense: true,
|
|
contentPadding: EdgeInsets.symmetric(vertical: 4),
|
|
),
|
|
style: const TextStyle(fontSize: 13),
|
|
textInputAction: TextInputAction.done,
|
|
onSubmitted: onAdd,
|
|
onChanged: (v) {
|
|
if (v.endsWith(',') || v.endsWith(' ')) {
|
|
onAdd(v.replaceAll(RegExp(r'[, ]+$'), ''));
|
|
}
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|