Update

lib/components/gallery_info.dart

@@ -1,3 +1,4 @@
+import 'package:eh_downloader_flutter/globals.dart';
 import 'package:flutter/material.dart';
 import '../api/gallery.dart';
 import 'gallery_basic_info.dart';
@@ -12,6 +13,16 @@ class GalleryInfo extends StatefulWidget {
 }
 
 class _GalleryInfo extends State<GalleryInfo> {
+  void showNsfwChanged(dynamic _) {
+    setState(() {});
+  }
+
+  @override
+  void initState() {
+    listener.on("showNsfwChanged", showNsfwChanged);
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     bool useMobile = MediaQuery.of(context).size.width <= 810;
@@ -19,12 +30,24 @@ class _GalleryInfo extends State<GalleryInfo> {
       return SingleChildScrollView(
           child: ConstrainedBox(
               constraints: BoxConstraints(minHeight: constraints.maxHeight),
-              child: useMobile ? Column(children: [
-                  GalleryBasicInfo(widget.gData.meta, widget.gData.pages.first),
-                ],
-              ) : Column(children: [
-                GalleryInfoDesktop(widget.gData),
-              ],)));
+              child: useMobile
+                  ? Column(
+                      children: [
+                        GalleryBasicInfo(
+                            widget.gData.meta, widget.gData.pages.first),
+                      ],
+                    )
+                  : Column(
+                      children: [
+                        GalleryInfoDesktop(widget.gData),
+                      ],
+                    )));
     });
   }
+
+  @override
+  void dispose() {
+    listener.removeEventListener("showNsfwChanged", showNsfwChanged);
+    super.dispose();
+  }
 }

lib/components/gallery_info_desktop.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import '../api/gallery.dart';
+import 'tags.dart';
 import 'thumbnail.dart';
 
 class GalleryInfoDesktop extends StatelessWidget {
@@ -45,7 +46,7 @@ class GalleryInfoDesktop extends StatelessWidget {
                               SelectableText(gData.meta.uploader),
                             ])),
                         const VerticalDivider(indent: 10, endIndent: 10),
-                        Expanded(child: Column(children: [])),
+                        Expanded(child: TagsPanel(gData.tags)),
                         const VerticalDivider(indent: 10, endIndent: 10),
                         SizedBox(width: 150, child: Column(children: [])),
                       ])),

lib/components/tags.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import '../api/gallery.dart';
+import '../globals.dart';
+
+class TagsPanel extends StatefulWidget {
+  const TagsPanel(this.tags, {Key? key}) : super(key: key);
+  final List<Tag> tags;
+
+  @override
+  State<TagsPanel> createState() => _TagsPanel();
+}
+
+String _getTag(Tag tag) {
+  final tags = tag.tag.split(":");
+  if (tags.length < 2) return tag.translated ?? tag.tag;
+  final name = tags[1]!;
+  return tag.translated ?? name;
+}
+
+class _TagsPanel extends State<TagsPanel> {
+  List<(String, List<Tag>)>? data;
+  @override
+  void initState() {
+    Map<String, List<Tag>> maps = {};
+    for (var e in widget.tags) {
+      final tags = e.tag.split(":");
+      if (tags.length < 2) {
+        final list = maps[""] ?? [];
+        list.add(e);
+        maps[""] = list;
+        continue;
+      }
+      final name = tags[0];
+      final list = maps[name] ?? [];
+      list.add(e);
+      maps[name] = list;
+    }
+    data = [];
+    maps.forEach((key, value) {
+      data!.add((key, value));
+    });
+    if (tags.rows == null) {
+      tags.getRows().then((re) {
+        if (re) setState(() {});
+      });
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return ListView.builder(
+        padding: const EdgeInsets.all(8),
+        itemCount: data!.length,
+        itemBuilder: (context, index) {
+          final t = data![index].$1;
+          final ta = data![index].$2;
+          final namespace =
+              "${tags.getTagTranslate(t) ?? t}${AppLocalizations.of(context)!.colon}";
+          return Wrap(
+              children: List.generate(ta.length + 1, (index) {
+            if (index == 0) {
+              return Container(
+                  margin: const EdgeInsets.all(2),
+                  child: SelectableText(namespace));
+            } else {
+              return Container(
+                  margin: const EdgeInsets.all(2),
+                  decoration: BoxDecoration(
+                    borderRadius: const BorderRadius.all(Radius.circular(4.0)),
+                    border: Border.all(width: 1, color: cs.primary),
+                  ),
+                  child: SelectableText(_getTag(ta[index - 1]!)));
+            }
+          }));
+        });
+  }
+}