✨ Show profile picture in mention chip

lib/widgets/content/markdown.dart

@@ -10,6 +10,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/file.dart';
 import 'package:island/pods/config.dart';
+import 'package:island/screens/account/profile.dart';
 import 'package:island/widgets/alert.dart';
 import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/content/markdown_latex.dart';
@@ -397,7 +398,13 @@ class MentionChipSpanNode extends SpanNode {
         onTap: () => onTap(type, id),
         borderRadius: BorderRadius.circular(32),
         child: Container(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          padding: const EdgeInsets.only(
+            left: 5,
+            right: 7,
+            top: 2.5,
+            bottom: 2.5,
+          ),
+          margin: const EdgeInsets.symmetric(horizontal: 2),
           decoration: BoxDecoration(
             color: backgroundColor.withOpacity(0.1),
             borderRadius: BorderRadius.circular(32),
@@ -411,18 +418,33 @@ class MentionChipSpanNode extends SpanNode {
                   color: backgroundColor.withOpacity(0.5),
                   borderRadius: const BorderRadius.all(Radius.circular(32)),
                 ),
-                child: Icon(
+                child: switch (parts.length == 1 ? 'u' : parts.first) {
-                  switch (parts.first.isEmpty ? 'u' : parts.first) {
+                  'u' => Consumer(
-                    'c' => Symbols.forum_rounded,
+                    builder: (context, ref, _) {
-                    'r' => Symbols.group_rounded,
+                      final userData = ref.watch(accountProvider(parts.last));
-                    'u' => Symbols.person_rounded,
+                      return userData.when(
-                    'p' => Symbols.edit_rounded,
+                        data:
-                    _ => Symbols.person_rounded,
+                            (data) => ProfilePictureWidget(
-                  },
+                              file: data.profile.picture,
-                  size: 14,
+                              radius: 9,
-                  color: foregroundColor,
+                            ),
-                  fill: 1,
+                        error: (_, _) => const Icon(Symbols.close),
-                ).padding(all: 2),
+                        loading: () => const CircularProgressIndicator(),
+                      );
+                    },
+                  ),
+                  _ => Icon(
+                    (switch (parts.first.isEmpty ? 'u' : parts.first) {
+                      'c' => Symbols.forum_rounded,
+                      'r' => Symbols.group_rounded,
+                      'p' => Symbols.edit_rounded,
+                      _ => Symbols.person_rounded,
+                    }),
+                    size: 14,
+                    color: foregroundColor,
+                    fill: 1,
+                  ).padding(all: 2),
+                },
               ),
               Text(
                 parts.last,