✨ Badges

lib/widgets/account/badge.dart

@@ -0,0 +1,46 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:island/models/user.dart';
+import 'package:island/models/badge.dart';
+
+class BadgeList extends StatelessWidget {
+  final List<SnAccountBadge> badges;
+  const BadgeList({super.key, required this.badges});
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 8,
+      runSpacing: 8,
+      children: badges.map((badge) => BadgeItem(badge: badge)).toList(),
+    );
+  }
+}
+
+class BadgeItem extends StatelessWidget {
+  final SnAccountBadge badge;
+  const BadgeItem({super.key, required this.badge});
+
+  @override
+  Widget build(BuildContext context) {
+    final template = kBadgeTemplates[badge.type];
+    final name = badge.label ?? template?.name.tr() ?? 'unknown'.tr();
+    final description = badge.caption ?? template?.description.tr() ?? '';
+
+    return Tooltip(
+      message: '$name\n$description',
+      child: Container(
+        padding: const EdgeInsets.all(4),
+        decoration: BoxDecoration(
+          color: (template?.color ?? Colors.blue).withOpacity(0.1),
+          shape: BoxShape.circle,
+        ),
+        child: Icon(
+          template?.icon ?? Icons.stars,
+          color: template?.color ?? Colors.orange,
+          size: 20,
+        ),
+      ),
+    );
+  }
+}

lib/widgets/account/status.dart

@@ -50,7 +50,10 @@ class AccountStatusCreationWidget extends HookConsumerWidget {
         data:
             (status) =>
                 (status?.isCustomized ?? false)
-                    ? AccountStatusWidget(uname: uname)
+                    ? Padding(
+                      padding: const EdgeInsets.only(left: 4),
+                      child: AccountStatusWidget(uname: uname),
+                    )
                     : Padding(
                       padding:
                           padding ??
@@ -112,15 +115,13 @@ class AccountStatusWidget extends HookConsumerWidget {
       child: Row(
         spacing: 4,
         children: [
-          if (!(userStatus.value?.isCustomized ?? false))
-            Icon(Symbols.keyboard_arrow_up)
-          else if (userStatus.value!.isOnline)
+          if (userStatus.value!.isOnline)
             Icon(
               Symbols.circle,
               fill: 1,
               color: Colors.green,
               size: 16,
-            ).padding(all: 4)
+            ).padding(right: 4)
           else
             Icon(Symbols.circle, color: Colors.grey, size: 16).padding(all: 4),
           if (userStatus.value?.isCustomized ?? false)