feat: make @-mentions tappable to navigate to user profiles

- Add userId property to UserMentionNode to store user ID from data-user-id HTML attribute
- Extract user ID during @-mention parsing from HTML data-user-id attribute
- Modify UserMention widget to handle taps and navigate to ProfilePage when valid user ID exists
- Add import for ProfilePage to enable navigation functionality
- Maintain existing styling and behavior while adding tappable functionality

Author: loveucifer

lib/model/content.dart

@@ -928,8 +928,11 @@ class UserMentionNode extends InlineContainerNode {
   const UserMentionNode({
     super.debugHtmlNode,
     required super.nodes,
+    this.userId,
   });
 
+  final int? userId;
+
   // For the legacy design, we don't need this information in code; instead,
   // the inner text already shows how to communicate it to the user
   // (e.g., silent mentions' text lacks a leading "@"),
@@ -1083,7 +1086,15 @@ class _ZulipInlineContentParser {
     //   either a debug-mode check, or perhaps we can make expectations much
     //   tighter on a UserMentionNode's contents overall.
     final nodes = parseInlineContentList(element.nodes);
-    return UserMentionNode(nodes: nodes, debugHtmlNode: debugHtmlNode);
+    
+    // Extract user ID from data-user-id attribute if present
+    int? userId;
+    final userIdStr = element.attributes['data-user-id'];
+    if (userIdStr != null) {
+      userId = int.tryParse(userIdStr);
+    }
+    
+    return UserMentionNode(nodes: nodes, debugHtmlNode: debugHtmlNode, userId: userId);
   }
 
   /// The links found so far in the current block inline container.

lib/widgets/content.dart

@@ -21,6 +21,7 @@ import 'katex.dart';
 import 'lightbox.dart';
 import 'message_list.dart';
 import 'poll.dart';
+import 'profile.dart';
 import 'scrolling.dart';
 import 'store.dart';
 import 'text.dart';
@@ -1216,25 +1217,45 @@ class UserMention extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final contentTheme = ContentTheme.of(context);
-    return Container(
-      decoration: BoxDecoration(
-        // TODO(#646) different for wildcard mentions
-        color: contentTheme.colorDirectMentionBackground,
-        borderRadius: const BorderRadius.all(Radius.circular(3))),
-      padding: const EdgeInsets.symmetric(horizontal: 0.2 * kBaseFontSize),
-      child: InlineContent(
-        // If an @-mention is inside a link, let the @-mention override it.
-        recognizer: null,  // TODO(#1867) make @-mentions tappable, for info on user
-        // One hopes an @-mention can't contain an embedded link.
-        // (The parser on creating a UserMentionNode has a TODO to check that.)
-        linkRecognizers: null,
-
-        // TODO(#647) when self-user is non-silently mentioned, make bold, and:
-        // TODO(#646) when self-user is non-silently mentioned,
-        //   distinguish font color between direct and wildcard mentions
-        style: ambientTextStyle,
-
-        nodes: node.nodes));
+    final userId = node.userId;
+    
+    final innerContent = InlineContent(
+      // If an @-mention is inside a link, let the @-mention override it.
+      recognizer: null,
+      // One hopes an @-mention can't contain an embedded link.
+      // (The parser on creating a UserMentionNode has a TODO to check that.)
+      linkRecognizers: null,
+
+      style: ambientTextStyle,
+
+      nodes: node.nodes);
+
+    if (userId != null && userId > 0) {
+      // Wrap with gesture detector if we have a valid user ID
+      return GestureDetector(
+        onTap: () => Navigator.push(
+          context,
+          ProfilePage.buildRoute(context: context, userId: userId),
+        ),
+        child: Container(
+          decoration: BoxDecoration(
+            // TODO(#646) different for wildcard mentions
+            color: contentTheme.colorDirectMentionBackground,
+            borderRadius: const BorderRadius.all(Radius.circular(3))),
+          padding: const EdgeInsets.symmetric(horizontal: 0.2 * kBaseFontSize),
+          child: innerContent,
+        ),
+      );
+    } else {
+      // Regular container without gesture detector if no valid user ID
+      return Container(
+        decoration: BoxDecoration(
+          // TODO(#646) different for wildcard mentions
+          color: contentTheme.colorDirectMentionBackground,
+          borderRadius: const BorderRadius.all(Radius.circular(3))),
+        padding: const EdgeInsets.symmetric(horizontal: 0.2 * kBaseFontSize),
+        child: innerContent);
+    }
   }
 
 // This is a more literal translation of Zulip web's CSS.