Add level badges to search results

lib/view/components/search/search_result_page/parts/badge.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class Badge extends StatelessWidget {
+  final Widget child;
+  final Color color;
+
+  const Badge(this.child, this.color);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: FittedBox(
+        child: Center(
+          child: this.child
+        ),
+      ),
+      padding: EdgeInsets.all(5),
+      width: 30,
+      height: 30,
+      margin: EdgeInsets.symmetric(horizontal: 2),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: color
+      ),
+    );  }
+
+}

lib/view/components/search/search_result_page/parts/common_badge.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/badge.dart';
+
+class CommonBadge extends StatelessWidget {
+  bool isCommon;
+
+  CommonBadge(this.isCommon) {
+    this.isCommon ??= false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Badge(
+      Text(
+        "C",
+        style: TextStyle(color: this.isCommon ? Colors.white : Colors.transparent)
+      ),
+      this.isCommon ? Colors.green : Colors.transparent
+    );
+  }
+}

lib/view/components/search/search_result_page/parts/jlpt_badge.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/badge.dart';
+
+class JLPTBadge extends StatelessWidget {
+  final String jlptLevel;
+
+  const JLPTBadge(this.jlptLevel);
+
+  String _extractJlptLevel(String jlptRaw) {
+    return jlptRaw.isNotEmpty ? jlptRaw.substring(5).toUpperCase() : '';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Badge(
+      Text(
+        _extractJlptLevel(this.jlptLevel),
+        style: TextStyle(
+          color: Colors.white
+        ),
+      ),
+      this.jlptLevel.isNotEmpty ? Colors.blue : Colors.transparent
+    );
+  }
+}

lib/view/components/search/search_result_page/parts/wanikani_badge.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/badge.dart';
+
+class WKBadge extends StatelessWidget {
+  final String wkLevel;
+
+  const WKBadge(this.wkLevel);
+
+  String _extractWkLevel(String wkRaw) {
+    // return jlptRaw.isNotEmpty ? jlptRaw.substring(5).toUpperCase() : '';
+    return wkRaw.isNotEmpty ? 'W' + wkRaw.substring(8) : '';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Badge(
+      Text(
+        _extractWkLevel(this.wkLevel),
+        style: TextStyle(
+          color: Colors.white,
+        ),
+      ),
+      this.wkLevel.isNotEmpty ? Colors.red : Colors.transparent
+    );
+  }
+}

lib/view/components/search/search_result_page/search_card.dart

@@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/common_badge.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/jlpt_badge.dart';
+import 'package:jisho_study_tool/view/components/search/search_result_page/parts/wanikani_badge.dart';
 
 import 'package:unofficial_jisho_api/api.dart';
 
@@ -19,10 +22,32 @@ class SearchResultCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ExpansionTile(
-      title: JapaneseHeader(mainWord),
+      title: 
+      IntrinsicWidth(
+        child: Row(
+          children: [
+            JapaneseHeader(mainWord),
+            Row(
+              children: [
+                WKBadge(result.tags.firstWhere((tag) => tag.contains("wanikani"), orElse: () => '')),
+                JLPTBadge(result.jlpt.isNotEmpty ? result.jlpt[0] : ''),
+                CommonBadge(result.is_common)
+              ],
+            )
+          ],
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        ),
+      ),
       children: [
-        Senses(result.senses),
+        Container(
-        OtherForms(otherForms),
+          child: Column(
+            children: [
+              Senses(result.senses),
+              OtherForms(otherForms),
+            ],
+          ),
+          padding: EdgeInsets.symmetric(horizontal: 30),
+        )
       ],
     );
   }