refactor: Revamp of Kanji and Vocabulary details

[apomalyn]

As a user, I want to easily see which pronunciation is associated with which meaning, if possible I would like to have examples shown.

Requirements

• Update the UI to show in a single card:
  • the pronunciation, the translation associated and possible examples
  • display if the pronunciation has conditions (e.g.: "あ・げる" -> げる is the condition)
  • TTS should not read the conditions, only the pronunciation

What needs to be done

• Update the Kanji and Vocabulary models to follow API #19 and API #20
• Update feature/glossary/details/widgets/details.dart for the kanji and vocabulary following the new design 👇

Design

Bottom sheet details for kanji & vocabulary


Case when "." or "-" are in the pronunciations


Code proposition

This code still needs to be optimized and is a proposition! ```dart final pronunciationCard = PronunciationCard( pronunciation: "ゲツ", toBold: "月", meanings: ["Lune", "mois"], examples: [(japanese: "一か**月**", translation: "un mois")]); class PronunciationCard extends StatelessWidget { final String pronunciation; final String toBold; final List meanings; final List<({String japanese, String translation})> examples; const PronunciationCard( {super.key, required this.pronunciation, required this.toBold, required this.meanings, this.examples = const []}); @override Widget build(BuildContext context) { final theme = Theme.of(context); final color = ElevationOverlay.applySurfaceTint( theme.colorScheme.surface, theme.colorScheme.surfaceTint, 2.0); return Card( elevation: 0, shape: RoundedRectangleBorder( side: const BorderSide(color: Colors.grey), borderRadius: BorderRadius.circular(10)), child: Column(children: [ ListTile( leading: Container( decoration: BoxDecoration( color: color, borderRadius: const BorderRadius.only( topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))), child: Padding( padding: const EdgeInsets.symmetric( vertical: 12.0, horizontal: 4.0), child: Text(pronunciation, style: theme.textTheme.bodyLarge ?.copyWith(fontWeight: FontWeight.bold)), )), contentPadding: const EdgeInsets.only(right: 4), titleAlignment: ListTileTitleAlignment.center, title: Text(meanings.join(", ")), trailing: IconButton( icon: const Icon(Icons.volume_up_rounded), onPressed: () {})), if (examples.isNotEmpty) Column(mainAxisSize: MainAxisSize.min, children: [ const Divider(height: 0), Padding( padding: const EdgeInsets.all(8.0), child: ListView.builder( shrinkWrap: true, itemCount: examples.length, physics: const NeverScrollableScrollPhysics(), itemBuilder: (context, index) => Example( sentence: examples[index].japanese, translation: examples[index].translation, toBold: toBold))) ]) ]), ); } } class Example extends StatelessWidget { final String sentence; final String toBold; final String translation; const Example( {super.key, required this.sentence, required this.toBold, required this.translation}); @override Widget build(BuildContext context) { final bold = Theme.of(context) .textTheme .bodyMedium ?.copyWith(fontWeight: FontWeight.w900); List splitted = sentence .split("**") .map((value) => TextSpan(text: value, style: value == toBold ? bold : null)) .toList(); return Row(children: [Text.rich(TextSpan(children: splitted)), AppSpacer.p16(onlyWidth: true), Text(translation)]); } } ```

Dependencies

Depends on:

• API #19
• API #20

• 124