feat(ui): align inventory + detail with mockups (seed icons, green theme)

Visual pass toward docs/mockups (06 inventory, 07 item):
- Bundle the seedks icon font (chars a–k → seed pictograms: jar, packet, spoon…)
  and a SeedGlyph/QuantityKindIcon helper.
- Green app bar + pale-green canvas theme (buildTaneTheme).
- Inventory list: rounded-square photo thumbnail or green initial avatar, bold
  title, scientific-name subtitle, trailing edit pencil, styled category
  headers, rounded search field, seed-glyph empty state.
- Quantity selectors (quick-add + add-lot) show the seed pictogram + word;
  detail lot lines use the kind's glyph.
- Detail header restyled to mockup 07: category link + scientific name on the
  left, photo on the right.

watchInventory now also returns the linked species' scientific name (subtitle).
37 app tests green; seedks font verified in the Linux asset bundle.
This commit is contained in:
vjrj 2026-07-08 00:14:43 +02:00
parent e41ec9872b
commit 48e9d15772
12 changed files with 329 additions and 49 deletions

View file

@ -0,0 +1,87 @@
import 'package:commons_core/commons_core.dart';
import 'package:flutter/material.dart';
/// Renders a glyph from the bundled `seedks` icon font, whose characters `a``k`
/// map to seed-themed pictograms (jar, packet, spoon). See
/// docs/mockups/seedks-glyphs.png.
class SeedGlyph extends StatelessWidget {
const SeedGlyph(this.char, {this.size = 24, this.color, super.key});
final String char;
final double size;
final Color? color;
@override
Widget build(BuildContext context) {
return Text(
char,
style: TextStyle(
fontFamily: 'seedks',
fontSize: size,
height: 1,
color: color ?? Theme.of(context).colorScheme.primary,
),
);
}
}
/// Named seedks glyphs (the character each pictogram is mapped to).
abstract final class SeedGlyphs {
static const jar = 'a';
static const jars = 'b';
static const search = 'c';
static const share = 'd';
static const sack = 'e';
static const smallSpoon = 'f';
static const bigSpoon = 'g';
static const mug = 'h';
static const envelope = 'i';
static const pouring = 'j';
static const scattered = 'k';
}
/// The seedks character for a quantity [kind], or null for plant-form/precise
/// kinds that have no seed pictogram (they fall back to a Material icon).
String? seedGlyphForKind(QuantityKind kind) => switch (kind) {
QuantityKind.aFew => SeedGlyphs.scattered,
QuantityKind.some => SeedGlyphs.smallSpoon,
QuantityKind.plenty => SeedGlyphs.jars,
QuantityKind.handful => SeedGlyphs.bigSpoon,
QuantityKind.pinch => SeedGlyphs.scattered,
QuantityKind.jar => SeedGlyphs.jar,
QuantityKind.packet => SeedGlyphs.envelope,
_ => null,
};
IconData _materialIconForKind(QuantityKind kind) => switch (kind) {
QuantityKind.grams => Icons.scale_outlined,
QuantityKind.count => Icons.tag,
QuantityKind.cob || QuantityKind.ear => Icons.grass,
QuantityKind.head || QuantityKind.seedHead => Icons.filter_vintage_outlined,
QuantityKind.fruit => Icons.local_florist_outlined,
QuantityKind.bulb ||
QuantityKind.tuber ||
QuantityKind.bunch => Icons.spa_outlined,
_ => Icons.eco_outlined,
};
/// A consistent icon for a [QuantityKind]: the seed glyph where one exists,
/// otherwise a Material fallback.
class QuantityKindIcon extends StatelessWidget {
const QuantityKindIcon(this.kind, {this.size = 24, this.color, super.key});
final QuantityKind kind;
final double size;
final Color? color;
@override
Widget build(BuildContext context) {
final glyph = seedGlyphForKind(kind);
if (glyph != null) return SeedGlyph(glyph, size: size, color: color);
return Icon(
_materialIconForKind(kind),
size: size,
color: color ?? Theme.of(context).colorScheme.primary,
);
}
}