feat: implement faceted text widget for enhanced comment and gallery descriptions feat: add polling functionality for gallery thread comments feat: enable comment creation with facets and reply functionality feat: update gallery and comment models to include facets refactor: improve error handling and loading states in comments page refactor: enhance UI with theme colors and styles in various screens fix: adjust background color for image loading errors

lib/api.dart

···
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:at_uri/at_uri.dart';
 import 'package:grain/app_logger.dart';
 import 'package:grain/dpop_client.dart';
 import 'package:grain/main.dart';
···
 import 'package:mime/mime.dart';
 
 import './auth.dart';
+import 'models/comment.dart';
 import 'models/gallery.dart';
 import 'models/notification.dart' as grain;
 import 'models/profile.dart';
···
     }
   }
 
-  Future<Map<String, dynamic>> getGalleryThread({required String uri}) async {
+  Future<GalleryThread?> getGalleryThread({required String uri}) async {
     appLogger.i('Fetching gallery thread for uri: $uri');
     final response = await http.get(
       Uri.parse('$_apiUrl/xrpc/social.grain.gallery.getGalleryThread?uri=$uri'),
       headers: {'Content-Type': 'application/json'},
     );
     if (response.statusCode != 200) {
-      appLogger.w('Failed to fetch gallery thread: ${response.statusCode} ${response.body}');
-      return {};
+      appLogger.w('Failed to fetch gallery thread: \\${response.statusCode} \\${response.body}');
+      return null;
     }
-    return jsonDecode(response.body) as Map<String, dynamic>;
+    final json = jsonDecode(response.body) as Map<String, dynamic>;
+    final gallery = Gallery.fromJson(json['gallery']);
+    final comments = (json['comments'] as List<dynamic>? ?? [])
+        .map((c) => Comment.fromJson(c as Map<String, dynamic>))
+        .toList();
+    return GalleryThread(gallery: gallery, comments: comments);
   }
 
   Future<List<grain.Notification>> getNotifications() async {
···
     return null;
   }
 
+  /// Polls the gallery thread until the number of comments matches [expectedCount] or timeout.
+  /// Returns the thread map if successful, or null if timeout.
+  Future<GalleryThread?> pollGalleryThreadComments({
+    required String galleryUri,
+    required int expectedCount,
+    Duration pollDelay = const Duration(seconds: 2),
+    int maxAttempts = 20,
+  }) async {
+    int attempts = 0;
+    GalleryThread? thread;
+    while (attempts < maxAttempts) {
+      thread = await getGalleryThread(uri: galleryUri);
+      if (thread != null && thread.comments.length == expectedCount) {
+        appLogger.i('Gallery thread $galleryUri has expected number of comments: $expectedCount');
+        return thread;
+      }
+      await Future.delayed(pollDelay);
+      attempts++;
+    }
+    appLogger.w(
+      'Gallery thread $galleryUri did not reach expected comments count ($expectedCount) after polling.',
+    );
+    return null;
+  }
+
   /// Uploads a blob (file) to the atproto uploadBlob endpoint using DPoP authentication.
   /// Returns the blob reference map on success, or null on failure.
   Future<Map<String, dynamic>?> uploadBlob(File file) async {
···
     appLogger.i('Created gallery item result: $result');
     return result['uri'] as String?;
   }
+
+  Future<String?> createComment({
+    required String text,
+    List<Map<String, dynamic>>? facets,
+    required String subject,
+    Map<String, dynamic>? focus,
+    String? replyTo,
+  }) async {
+    final session = await auth.getValidSession();
+    if (session == null) {
+      appLogger.w('No valid session for createComment');
+      return null;
+    }
+    final dpopClient = DpopHttpClient(dpopKey: session.dpopJwk);
+    final issuer = session.issuer;
+    final did = session.subject;
+    final url = Uri.parse('$issuer/xrpc/com.atproto.repo.createRecord');
+    final record = {
+      'collection': 'social.grain.comment',
+      'repo': did,
+      'record': {
+        'text': text,
+        if (facets != null) 'facets': facets,
+        'subject': subject,
+        if (focus != null) 'focus': focus,
+        if (replyTo != null) 'replyTo': replyTo,
+        'createdAt': DateTime.now().toUtc().toIso8601String(),
+      },
+    };
+    appLogger.i('Creating comment: $record');
+    final response = await dpopClient.send(
+      method: 'POST',
+      url: url,
+      accessToken: session.accessToken,
+      headers: {'Content-Type': 'application/json'},
+      body: jsonEncode(record),
+    );
+    if (response.statusCode != 200 && response.statusCode != 201) {
+      appLogger.w('Failed to create comment: \\${response.statusCode} \\${response.body}');
+      return null;
+    }
+    final result = jsonDecode(response.body) as Map<String, dynamic>;
+    appLogger.i('Created comment result: $result');
+    return result['uri'] as String?;
+  }
+
+  /// Deletes a record by its URI using DPoP authentication.
+  /// Returns true on success, false on failure.
+  Future<bool> deleteRecord(String uri) async {
+    final session = await auth.getValidSession();
+    if (session == null) {
+      appLogger.w('No valid session for deleteRecord');
+      return false;
+    }
+    final dpopClient = DpopHttpClient(dpopKey: session.dpopJwk);
+    final issuer = session.issuer;
+    final url = Uri.parse('$issuer/xrpc/com.atproto.repo.deleteRecord');
+    final repo = session.subject;
+    if (repo.isEmpty) {
+      appLogger.w('No repo (DID) available from session for deleteRecord');
+      return false;
+    }
+    String? collection;
+    String? rkey;
+    try {
+      final atUri = AtUri.parse(uri);
+      collection = atUri.collection.toString();
+      rkey = atUri.rkey;
+    } catch (e) {
+      appLogger.w('Failed to parse collection from uri: $uri');
+    }
+    if (collection == null || collection.isEmpty) {
+      appLogger.w('No collection found in uri: $uri');
+      return false;
+    }
+    final payload = {'uri': uri, 'repo': repo, 'collection': collection, 'rkey': rkey};
+    appLogger.i('Deleting record: $payload');
+    final response = await dpopClient.send(
+      method: 'POST',
+      url: url,
+      accessToken: session.accessToken,
+      headers: {'Content-Type': 'application/json'},
+      body: jsonEncode(payload),
+    );
+    if (response.statusCode != 200 && response.statusCode != 204) {
+      appLogger.w('Failed to delete record: \\${response.statusCode} \\${response.body}');
+      return false;
+    }
+    appLogger.i('Deleted record $uri');
+    return true;
+  }
 }
 
 final apiService = ApiService();
+
+class GalleryThread {
+  final Gallery gallery;
+  final List<Comment> comments;
+  GalleryThread({required this.gallery, required this.comments});
+}

lib/app_theme.dart

···
     dividerColor: Colors.grey[900],
     colorScheme: ColorScheme.dark(
       primary: primaryColor,
-      surface: Colors.black,
+      surface: Colors.grey[900]!,
       onSurface: Colors.white,
       onSurfaceVariant: Colors.white70,
       onPrimary: Colors.white,

lib/models/comment.dart

···
   final String? replyTo;
   final String? createdAt;
   final GalleryPhoto? focus;
+  final List<Map<String, dynamic>>? facets;
 
   Comment({
     required this.uri,
···
     this.replyTo,
     this.createdAt,
     this.focus,
+    this.facets,
   });
 
   factory Comment.fromJson(Map<String, dynamic> json) {
+    final record = json['record'] as Map<String, dynamic>? ?? {};
     return Comment(
       uri: json['uri'] ?? '',
       cid: json['cid'] ?? '',
       author: json['author'] ?? {},
-      text: json['text'] ?? '',
-      replyTo: json['replyTo'],
-      createdAt: json['createdAt'],
+      text: json['text'] ?? record['text'] ?? '',
+      replyTo: json['replyTo'] ?? record['replyTo'],
+      createdAt: json['createdAt'] ?? record['createdAt'],
       focus: json['focus'] != null ? GalleryPhoto.fromJson(json['focus']) : null,
+      facets:
+          (json['facets'] as List?)?.map((f) => Map<String, dynamic>.from(f)).toList() ??
+          (record['facets'] as List?)?.map((f) => Map<String, dynamic>.from(f)).toList(),
     );
   }
 }

lib/models/gallery.dart

···
   final int? favCount;
   final int? commentCount;
   final Map<String, dynamic>? viewer;
+  final List<Map<String, dynamic>>? facets;
 
   Gallery({
     required this.uri,
···
     this.favCount,
     this.commentCount,
     this.viewer,
+    this.facets,
   });
 
   factory Gallery.fromJson(Map<String, dynamic> json) {
+    final record = json['record'] as Map<String, dynamic>? ?? {};
     return Gallery(
       uri: json['uri'] ?? '',
       cid: json['cid'] ?? '',
-      title: json['record']?['title'] ?? '',
-      description: json['record']?['description'] ?? '',
+      title: record['title'] ?? '',
+      description: record['description'] ?? '',
       items: (json['items'] as List<dynamic>? ?? [])
           .map((item) => GalleryPhoto.fromJson(item as Map<String, dynamic>))
           .toList(),
···
       favCount: json['favCount'],
       commentCount: json['commentCount'],
       viewer: json['viewer'],
+      facets: (record['facets'] as List?)?.map((f) => Map<String, dynamic>.from(f)).toList(),
     );
   }
 }

lib/screens/comments_page.dart

···
+import 'package:bluesky_text/bluesky_text.dart';
 import 'package:flutter/material.dart';
 import 'package:grain/api.dart';
 import 'package:grain/models/comment.dart';
 import 'package:grain/models/gallery.dart';
+import 'package:grain/screens/profile_page.dart';
 import 'package:grain/utils.dart';
 import 'package:grain/widgets/app_image.dart';
+import 'package:grain/widgets/faceted_text.dart';
 import 'package:grain/widgets/gallery_photo_view.dart';
 
 class CommentsPage extends StatefulWidget {
···
   Gallery? _gallery;
   List<Comment> _comments = [];
   GalleryPhoto? _selectedPhoto;
+  bool _showInputBar = false;
+  final TextEditingController _replyController = TextEditingController();
+  final FocusNode _replyFocusNode = FocusNode();
+  String? _replyTo;
 
   @override
   void initState() {
···
     _fetchThread();
   }
 
+  @override
+  void dispose() {
+    _replyController.dispose();
+    _replyFocusNode.dispose();
+    super.dispose();
+  }
+
   Future<void> _fetchThread() async {
     setState(() {
       _loading = true;
       _error = false;
     });
     try {
-      final data = await apiService.getGalleryThread(uri: widget.galleryUri);
+      final thread = await apiService.getGalleryThread(uri: widget.galleryUri);
       setState(() {
-        _gallery = Gallery.fromJson(data['gallery']);
-        _comments = (data['comments'] as List<dynamic>? ?? [])
-            .map((c) => Comment.fromJson(c as Map<String, dynamic>))
-            .toList();
+        _gallery = thread?.gallery;
+        _comments = thread?.comments ?? [];
         _loading = false;
       });
     } catch (e) {
···
     }
   }
 
+  void _showReplyBar({String? replyTo, String? mention}) {
+    setState(() {
+      _showInputBar = true;
+      _replyTo = replyTo;
+    });
+    if (mention != null && mention.isNotEmpty) {
+      _replyController.text = mention;
+      _replyController.selection = TextSelection.fromPosition(
+        TextPosition(offset: _replyController.text.length),
+      );
+    } else {
+      _replyController.clear();
+    }
+    Future.delayed(const Duration(milliseconds: 100), () {
+      if (mounted) FocusScope.of(context).requestFocus(_replyFocusNode);
+    });
+  }
+
+  void _hideReplyBar() {
+    setState(() {
+      _showInputBar = false;
+      _replyController.clear();
+      _replyTo = null;
+    });
+    FocusScope.of(context).unfocus();
+  }
+
+  Future<void> handleDeleteComment(Comment comment) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: const Text('Delete Comment'),
+        content: const Text('Are you sure you want to delete this comment?'),
+        actions: [
+          TextButton(onPressed: () => Navigator.of(ctx).pop(false), child: const Text('Cancel')),
+          TextButton(onPressed: () => Navigator.of(ctx).pop(true), child: const Text('Delete')),
+        ],
+      ),
+    );
+    if (confirmed != true) return;
+    final scaffold = ScaffoldMessenger.of(context);
+    scaffold.removeCurrentSnackBar();
+    scaffold.showSnackBar(const SnackBar(content: Text('Deleting comment...')));
+    final deleted = await apiService.deleteRecord(comment.uri);
+    if (!deleted) {
+      scaffold.removeCurrentSnackBar();
+      scaffold.showSnackBar(const SnackBar(content: Text('Failed to delete comment.')));
+      return;
+    }
+    final expectedCount = _comments.length - 1;
+    final thread = await apiService.pollGalleryThreadComments(
+      galleryUri: widget.galleryUri,
+      expectedCount: expectedCount,
+    );
+    if (thread != null) {
+      setState(() {
+        _gallery = thread.gallery;
+        _comments = thread.comments;
+      });
+    } else {
+      await _fetchThread();
+    }
+    scaffold.removeCurrentSnackBar();
+    scaffold.showSnackBar(const SnackBar(content: Text('Comment deleted.')));
+  }
+
+  // Extract facets using the async BlueskyText/entities/toFacets pattern
+  Future<List<Map<String, dynamic>>> _extractFacets(String text) async {
+    final blueskyText = BlueskyText(text);
+    final entities = blueskyText.entities;
+    final facets = await entities.toFacets();
+    return List<Map<String, dynamic>>.from(facets);
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
···
             ),
             title: Text('Comments', style: theme.appBarTheme.titleTextStyle),
           ),
-          body: _loading
-              ? Center(
-                  child: CircularProgressIndicator(
-                    strokeWidth: 2,
-                    color: theme.colorScheme.primary,
+          body: GestureDetector(
+            behavior: HitTestBehavior.translucent,
+            onTap: () {
+              if (_showInputBar) _hideReplyBar();
+            },
+            child: _loading
+                ? Center(
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: theme.colorScheme.primary,
+                    ),
+                  )
+                : _error
+                ? Center(child: Text('Failed to load comments.', style: theme.textTheme.bodyMedium))
+                : ListView(
+                    padding: const EdgeInsets.fromLTRB(12, 12, 12, 100),
+                    children: [
+                      if (_gallery != null)
+                        Text(_gallery!.title, style: theme.textTheme.titleMedium),
+                      const SizedBox(height: 12),
+                      _CommentsList(
+                        comments: _comments,
+                        onPhotoTap: (photo) {
+                          setState(() {
+                            _selectedPhoto = photo;
+                          });
+                        },
+                        onReply: (replyTo, {mention}) =>
+                            _showReplyBar(replyTo: replyTo, mention: mention),
+                        onDelete: handleDeleteComment,
+                      ),
+                    ],
+                  ),
+          ),
+          bottomNavigationBar: _showInputBar
+              ? AnimatedPadding(
+                  duration: const Duration(milliseconds: 150),
+                  curve: Curves.easeOut,
+                  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
+                  child: Builder(
+                    builder: (context) {
+                      final keyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;
+                      return Padding(
+                        padding: EdgeInsets.only(bottom: keyboardOpen ? 0 : 12),
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Divider(height: 1, thickness: 1, color: theme.dividerColor),
+                            Container(
+                              color: theme.colorScheme.surfaceContainer,
+                              child: Row(
+                                crossAxisAlignment: CrossAxisAlignment.end,
+                                children: [
+                                  Expanded(
+                                    child: Container(
+                                      decoration: BoxDecoration(
+                                        color: theme.colorScheme.surfaceContainerHighest
+                                            .withOpacity(0.95),
+                                        borderRadius: BorderRadius.circular(18),
+                                      ),
+                                      padding: const EdgeInsets.symmetric(
+                                        horizontal: 18,
+                                        vertical: 12,
+                                      ),
+                                      child: ConstrainedBox(
+                                        constraints: const BoxConstraints(
+                                          minHeight: 40,
+                                          maxHeight: 120,
+                                        ),
+                                        child: Scrollbar(
+                                          child: TextField(
+                                            controller: _replyController,
+                                            focusNode: _replyFocusNode,
+                                            autofocus: true,
+                                            minLines: 1,
+                                            maxLines: 5,
+                                            textInputAction: TextInputAction.newline,
+                                            decoration: const InputDecoration(
+                                              hintText: 'Write a reply...',
+                                              border: InputBorder.none,
+                                              isCollapsed: true,
+                                            ),
+                                            style: theme.textTheme.bodyLarge,
+                                            onSubmitted: (value) async {
+                                              if (value.trim().isEmpty) return;
+                                              final text = value.trim();
+                                              final facets = await _extractFacets(text);
+                                              final uri = await apiService.createComment(
+                                                text: text,
+                                                subject: widget.galleryUri,
+                                                replyTo: _replyTo,
+                                                facets: facets,
+                                              );
+                                              if (uri != null) {
+                                                final thread = await apiService
+                                                    .pollGalleryThreadComments(
+                                                      galleryUri: widget.galleryUri,
+                                                      expectedCount: _comments.length + 1,
+                                                    );
+                                                if (thread != null) {
+                                                  setState(() {
+                                                    _gallery = thread.gallery;
+                                                    _comments = thread.comments;
+                                                  });
+                                                } else {
+                                                  await _fetchThread();
+                                                }
+                                              }
+                                              _hideReplyBar();
+                                            },
+                                          ),
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                  const SizedBox(width: 8),
+                                  Container(
+                                    margin: const EdgeInsets.only(right: 10, bottom: 8),
+                                    decoration: BoxDecoration(
+                                      color: theme.colorScheme.primary,
+                                      borderRadius: BorderRadius.circular(16),
+                                    ),
+                                    child: IconButton(
+                                      icon: Icon(Icons.send, color: theme.colorScheme.onPrimary),
+                                      onPressed: () async {
+                                        final value = _replyController.text.trim();
+                                        if (value.isEmpty) return;
+                                        final facets = await _extractFacets(value);
+                                        final uri = await apiService.createComment(
+                                          text: value,
+                                          subject: widget.galleryUri,
+                                          replyTo: _replyTo,
+                                          facets: facets,
+                                        );
+                                        if (uri != null) {
+                                          final thread = await apiService.pollGalleryThreadComments(
+                                            galleryUri: widget.galleryUri,
+                                            expectedCount: _comments.length + 1,
+                                          );
+                                          if (thread != null) {
+                                            setState(() {
+                                              _gallery = thread.gallery;
+                                              _comments = thread.comments;
+                                            });
+                                          } else {
+                                            await _fetchThread();
+                                          }
+                                        }
+                                        _hideReplyBar();
+                                      },
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                        ),
+                      );
+                    },
                   ),
                 )
-              : _error
-              ? Center(child: Text('Failed to load comments.', style: theme.textTheme.bodyMedium))
-              : ListView(
-                  padding: const EdgeInsets.all(12),
-                  children: [
-                    if (_gallery != null) Text(_gallery!.title, style: theme.textTheme.titleMedium),
-                    const SizedBox(height: 12),
-                    _CommentsList(
-                      comments: _comments,
-                      onPhotoTap: (photo) {
-                        setState(() {
-                          _selectedPhoto = photo;
-                        });
-                      },
+              : Container(
+                  color: theme.colorScheme.surface,
+                  child: SafeArea(
+                    child: GestureDetector(
+                      onTap: _showReplyBar,
+                      child: Container(
+                        padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
+                        child: Container(
+                          height: 44,
+                          decoration: BoxDecoration(
+                            color: theme.colorScheme.surfaceContainerHighest,
+                            borderRadius: BorderRadius.circular(22),
+                          ),
+                          child: Row(
+                            children: [
+                              Icon(Icons.reply, color: theme.iconTheme.color, size: 20),
+                              const SizedBox(width: 8),
+                              Text(
+                                'Add a reply...',
+                                style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
                     ),
-                  ],
+                  ),
                 ),
+          // Show photo view overlay if needed
+          extendBody: true,
+          extendBodyBehindAppBar: false,
         ),
         if (_selectedPhoto != null)
           Positioned.fill(
···
 class _CommentsList extends StatelessWidget {
   final List<Comment> comments;
   final void Function(GalleryPhoto photo) onPhotoTap;
-  const _CommentsList({required this.comments, required this.onPhotoTap});
+  final void Function(String replyTo, {String? mention}) onReply;
+  final void Function(Comment comment) onDelete;
+  const _CommentsList({
+    required this.comments,
+    required this.onPhotoTap,
+    required this.onReply,
+    required this.onDelete,
+  });
 
   Map<String, List<Comment>> _groupReplies(List<Comment> comments) {
     final repliesByParent = <String, List<Comment>>{};
···
     return comments.where((c) => c.replyTo == null).toList();
   }
 
-  Widget _buildCommentTree(Comment comment, Map<String, List<Comment>> repliesByParent, int depth) {
+  /// Returns the top-level parent for a comment (itself if already top-level)
+  Comment _findTopLevelParent(Comment comment, Map<String, Comment> byUri) {
+    var current = comment;
+    while (current.replyTo != null && byUri[current.replyTo!] != null) {
+      final parent = byUri[current.replyTo!];
+      if (parent == null) break;
+      if (parent.replyTo == null) return parent;
+      current = parent;
+    }
+    return current.replyTo == null ? current : byUri[current.replyTo!] ?? current;
+  }
+
+  Widget _buildCommentTree(
+    Comment comment,
+    Map<String, List<Comment>> repliesByParent,
+    int depth,
+    Map<String, Comment> byUri,
+  ) {
     return Padding(
       padding: EdgeInsets.only(left: depth * 18.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          _CommentTile(comment: comment, onPhotoTap: onPhotoTap),
+          _CommentTile(
+            comment: comment,
+            onPhotoTap: onPhotoTap,
+            onReply: (replyTo, {mention}) {
+              // Only two levels: replyTo should always be the top-level parent
+              final parent = _findTopLevelParent(comment, byUri);
+              onReply(parent.uri, mention: mention);
+            },
+            onDelete: onDelete,
+          ),
           if (repliesByParent[comment.uri] != null)
             ...repliesByParent[comment.uri]!.map(
-              (reply) => _buildCommentTree(reply, repliesByParent, depth + 1),
+              (reply) => _buildCommentTree(reply, repliesByParent, depth + 1, byUri),
             ),
         ],
       ),
···
     final theme = Theme.of(context);
     final repliesByParent = _groupReplies(comments);
     final topLevel = _topLevel(comments);
+    final byUri = {for (final c in comments) c.uri: c};
     if (comments.isEmpty) {
       return Padding(
         padding: const EdgeInsets.symmetric(vertical: 32),
···
     }
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
-      children: [for (final comment in topLevel) _buildCommentTree(comment, repliesByParent, 0)],
+      children: [
+        for (final comment in topLevel) _buildCommentTree(comment, repliesByParent, 0, byUri),
+      ],
     );
   }
 }
···
 class _CommentTile extends StatelessWidget {
   final Comment comment;
   final void Function(GalleryPhoto photo)? onPhotoTap;
-  const _CommentTile({required this.comment, this.onPhotoTap});
+  final void Function(String replyTo, {String? mention})? onReply;
+  final void Function(Comment comment)? onDelete;
+  const _CommentTile({required this.comment, this.onPhotoTap, this.onReply, this.onDelete});
 
   @override
   Widget build(BuildContext context) {
···
                   author['displayName'] ?? '@${author['handle'] ?? ''}',
                   style: theme.textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.bold),
                 ),
-                Text(comment.text, style: theme.textTheme.bodyMedium),
-                if (comment.focus != null) ...[
-                  const SizedBox(height: 8),
-                  Align(
-                    alignment: Alignment.centerLeft,
-                    child: ConstrainedBox(
-                      constraints: const BoxConstraints(maxWidth: 180, maxHeight: 180),
-                      child: AspectRatio(
-                        aspectRatio: (comment.focus!.width > 0 && comment.focus!.height > 0)
-                            ? comment.focus!.width / comment.focus!.height
-                            : 1.0,
-                        child: ClipRRect(
-                          borderRadius: BorderRadius.circular(8),
-                          child: GestureDetector(
-                            onTap: onPhotoTap != null
-                                ? () => onPhotoTap!(
-                                    GalleryPhoto(
-                                      uri: comment.focus!.uri,
-                                      cid: comment.focus!.cid,
-                                      thumb: comment.focus!.thumb,
-                                      fullsize: comment.focus!.fullsize,
-                                      alt: comment.focus!.alt,
-                                      width: comment.focus!.width,
-                                      height: comment.focus!.height,
-                                    ),
-                                  )
-                                : null,
-                            child: AppImage(
-                              url: comment.focus!.thumb.isNotEmpty
-                                  ? comment.focus!.thumb
-                                  : comment.focus!.fullsize,
-                              fit: BoxFit.cover,
+                FacetedText(
+                  text: comment.text,
+                  facets: comment.facets,
+                  style: theme.textTheme.bodyMedium,
+                  linkStyle: theme.textTheme.bodyMedium?.copyWith(
+                    color: theme.colorScheme.primary,
+                    fontWeight: FontWeight.w600,
+                  ),
+                  onMentionTap: (did) {
+                    Navigator.of(
+                      context,
+                    ).push(MaterialPageRoute(builder: (context) => ProfilePage(did: did)));
+                  },
+                  onLinkTap: (url) {
+                    // Navigator.of(
+                    //   context,
+                    // ).push(MaterialPageRoute(builder: (context) => WebViewPage(url: url)));
+                  },
+                  onTagTap: (tag) {
+                    // TODO: Implement hashtag navigation
+                  },
+                ),
+                if (comment.focus != null &&
+                    (comment.focus!.thumb.isNotEmpty || comment.focus!.fullsize.isNotEmpty))
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8.0),
+                    child: Align(
+                      alignment: Alignment.centerLeft,
+                      child: ConstrainedBox(
+                        constraints: const BoxConstraints(maxWidth: 180, maxHeight: 180),
+                        child: AspectRatio(
+                          aspectRatio: (comment.focus!.width > 0 && comment.focus!.height > 0)
+                              ? comment.focus!.width / comment.focus!.height
+                              : 1.0,
+                          child: ClipRRect(
+                            borderRadius: BorderRadius.circular(8),
+                            child: GestureDetector(
+                              onTap: onPhotoTap != null
+                                  ? () => onPhotoTap!(
+                                      GalleryPhoto(
+                                        uri: comment.focus!.uri,
+                                        cid: comment.focus!.cid,
+                                        thumb: comment.focus!.thumb,
+                                        fullsize: comment.focus!.fullsize,
+                                        alt: comment.focus!.alt,
+                                        width: comment.focus!.width,
+                                        height: comment.focus!.height,
+                                      ),
+                                    )
+                                  : null,
+                              child: AppImage(
+                                url: comment.focus!.thumb.isNotEmpty
+                                    ? comment.focus!.thumb
+                                    : comment.focus!.fullsize,
+                                fit: BoxFit.cover,
+                              ),
                             ),
                           ),
                         ),
                       ),
                     ),
                   ),
-                ],
                 if (comment.createdAt != null)
                   Text(
                     formatRelativeTime(comment.createdAt!),
                     style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor),
                   ),
+                const SizedBox(height: 4), // Add vertical spacing above the buttons
+                Row(
+                  children: [
+                    if (comment.replyTo == null)
+                      TextButton(
+                        style: TextButton.styleFrom(
+                          padding: EdgeInsets.zero,
+                          minimumSize: Size(0, 0),
+                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                        ),
+                        onPressed: () {
+                          final handle = comment.author['handle'] ?? '';
+                          final mention = handle.isNotEmpty ? '@$handle ' : '';
+                          if (onReply != null) onReply!(comment.uri, mention: mention);
+                        },
+                        child: Text(
+                          'Reply',
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                            fontWeight: FontWeight.w600,
+                            decoration: TextDecoration.none,
+                          ),
+                        ),
+                      ),
+                    if (comment.author['did'] == (apiService.currentUser?.did ?? '')) ...[
+                      const SizedBox(width: 16),
+                      TextButton(
+                        style: TextButton.styleFrom(
+                          padding: EdgeInsets.zero,
+                          minimumSize: Size(0, 0),
+                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                        ),
+                        onPressed: () {
+                          if (onDelete != null) onDelete!(comment);
+                        },
+                        child: Text(
+                          'Delete',
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                            fontWeight: FontWeight.w600,
+                            decoration: TextDecoration.none,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ],
+                ),
               ],
             ),
           ),

lib/screens/gallery_page.dart

···
 import 'package:grain/screens/create_gallery_page.dart';
 import 'package:grain/screens/profile_page.dart';
 import 'package:grain/widgets/app_image.dart';
+import 'package:grain/widgets/faceted_text.dart';
 import 'package:grain/widgets/gallery_action_buttons.dart';
 import 'package:grain/widgets/gallery_photo_view.dart';
 import 'package:grain/widgets/justified_gallery_view.dart';
···
               if (gallery.description.isNotEmpty)
                 Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 8).copyWith(bottom: 8),
-                  child: Text(
-                    gallery.description,
+                  child: FacetedText(
+                    text: gallery.description,
+                    facets: gallery.facets,
                     style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurface),
+                    linkStyle: theme.textTheme.bodyMedium?.copyWith(
+                      color: theme.colorScheme.primary,
+                      fontWeight: FontWeight.w600,
+                    ),
+                    onMentionTap: (did) {
+                      Navigator.of(context).push(
+                        MaterialPageRoute(
+                          builder: (context) => ProfilePage(did: did, showAppBar: true),
+                        ),
+                      );
+                    },
+                    onLinkTap: (url) {
+                      // TODO: Implement or use your WebViewPage
+                    },
+                    onTagTap: (tag) {
+                      // TODO: Implement hashtag navigation
+                    },
                   ),
                 ),
               if (isLoggedIn)

lib/screens/profile_page.dart

···
+import 'package:bluesky_text/bluesky_text.dart';
 import 'package:flutter/material.dart';
 import 'package:grain/api.dart';
 import 'package:grain/app_theme.dart';
 import 'package:grain/models/gallery.dart';
 import 'package:grain/widgets/app_image.dart';
+import 'package:grain/widgets/faceted_text.dart';
 
 import 'gallery_page.dart';
 
···
   TabController? _tabController;
   bool _favsLoading = false;
   bool _galleriesLoading = false;
+  List<Map<String, dynamic>>? _descriptionFacets;
+
+  Future<List<Map<String, dynamic>>> _extractFacets(String text) async {
+    final blueskyText = BlueskyText(text);
+    final entities = blueskyText.entities;
+    final facets = await entities.toFacets();
+    return List<Map<String, dynamic>>.from(facets);
+  }
 
   @override
   void initState() {
···
     }
     final profile = await apiService.fetchProfile(did: did);
     final galleries = await apiService.fetchActorGalleries(did: did);
+    List<Map<String, dynamic>>? descriptionFacets;
+    if ((profile?.description ?? '').isNotEmpty) {
+      try {
+        final desc = profile != null ? profile.description : '';
+        descriptionFacets = await _extractFacets(desc);
+      } catch (_) {
+        descriptionFacets = null;
+      }
+    }
     if (mounted) {
       setState(() {
         _profile = profile;
         _galleries = galleries;
+        _descriptionFacets = descriptionFacets;
         _loading = false;
       });
     }
···
                               ),
                               if ((profile.description ?? '').isNotEmpty) ...[
                                 const SizedBox(height: 16),
-                                Text(profile.description, textAlign: TextAlign.left),
+                                FacetedText(
+                                  text: profile.description,
+                                  facets: _descriptionFacets,
+                                  onMentionTap: (didOrHandle) {
+                                    Navigator.of(context).push(
+                                      MaterialPageRoute(
+                                        builder: (context) =>
+                                            ProfilePage(did: didOrHandle, showAppBar: true),
+                                      ),
+                                    );
+                                  },
+                                  onLinkTap: (url) {
+                                    // TODO: Implement WebViewPage navigation
+                                  },
+                                  onTagTap: (tag) {
+                                    // TODO: Implement hashtag navigation
+                                  },
+                                  linkStyle: TextStyle(
+                                    color: Theme.of(context).colorScheme.primary,
+                                    fontWeight: FontWeight.w600,
+                                  ),
+                                ),
                               ],
                               const SizedBox(height: 24),
                             ],
···
                             ),
                           )
                         : _galleries.isEmpty
-                        ? const Center(child: Text('No galleries yet'))
+                        ? GridView.builder(
+                            shrinkWrap: true,
+                            physics: const NeverScrollableScrollPhysics(),
+                            padding: EdgeInsets.zero,
+                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                              crossAxisCount: 3,
+                              childAspectRatio: 3 / 4,
+                              crossAxisSpacing: 2,
+                              mainAxisSpacing: 2,
+                            ),
+                            itemCount: 12, // Enough to fill the screen
+                            itemBuilder: (context, index) {
+                              return Container(color: theme.colorScheme.surfaceContainerHighest);
+                            },
+                          )
                         : GridView.builder(
+                            shrinkWrap: true,
+                            physics: const NeverScrollableScrollPhysics(),
                             padding: EdgeInsets.zero,
                             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                               crossAxisCount: 3,
···
                               ),
                             )
                           : _favs.isEmpty
-                          ? const Center(child: Text('No favorites yet'))
+                          ? GridView.builder(
+                              shrinkWrap: true,
+                              physics: const NeverScrollableScrollPhysics(),
+                              padding: EdgeInsets.zero,
+                              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                                crossAxisCount: 3,
+                                childAspectRatio: 3 / 4,
+                                crossAxisSpacing: 2,
+                                mainAxisSpacing: 2,
+                              ),
+                              itemCount: 12, // Enough to fill the screen
+                              itemBuilder: (context, index) {
+                                return Container(color: theme.colorScheme.surfaceContainerHighest);
+                              },
+                            )
                           : GridView.builder(
+                              shrinkWrap: true,
+                              physics: const NeverScrollableScrollPhysics(),
                               padding: EdgeInsets.zero,
                               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                 crossAxisCount: 3,

lib/widgets/app_image.dart

···
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final Color bgColor = theme.brightness == Brightness.dark
-        ? Colors.grey[900]!
-        : Colors.grey[100]!;
     if (url == null || url!.isEmpty) {
       return errorWidget ??
           Container(
             width: width,
             height: height,
-            color: bgColor,
+            color: theme.colorScheme.surface,
             child: const Icon(Icons.broken_image, color: Colors.grey),
           );
     }
···
           Container(
             width: width,
             height: height,
-            color: bgColor,
+            color: theme.colorScheme.surface,
             // child: const Center(
             //   child: CircularProgressIndicator(
             //     strokeWidth: 2,
···
           Container(
             width: width,
             height: height,
-            color: bgColor,
+            color: theme.colorScheme.surface,
             child: const Icon(Icons.broken_image, color: Colors.grey),
           ),
     );

lib/widgets/faceted_text.dart

···
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+class FacetedText extends StatelessWidget {
+  final String text;
+  final List<Map<String, dynamic>>? facets;
+  final TextStyle? style;
+  final TextStyle? linkStyle;
+  final void Function(String did)? onMentionTap;
+  final void Function(String url)? onLinkTap;
+  final void Function(String tag)? onTagTap;
+
+  const FacetedText({
+    super.key,
+    required this.text,
+    this.facets,
+    this.style,
+    this.linkStyle,
+    this.onMentionTap,
+    this.onLinkTap,
+    this.onTagTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final defaultStyle = style ?? theme.textTheme.bodyMedium;
+    final defaultLinkStyle =
+        linkStyle ??
+        defaultStyle?.copyWith(
+          color: theme.colorScheme.primary,
+          fontWeight: FontWeight.w600,
+          decoration: TextDecoration.underline,
+        );
+    if (facets == null || facets!.isEmpty) {
+      return Text(text, style: defaultStyle);
+    }
+    // Build a list of all ranges (start, end, type, data)
+    final List<_FacetRange> ranges = facets!.map((facet) {
+      final feature = facet['features']?[0] ?? {};
+      final type = feature['\$type'] ?? feature['type'];
+      return _FacetRange(
+        start: facet['index']?['byteStart'] ?? facet['byteStart'] ?? 0,
+        end: facet['index']?['byteEnd'] ?? facet['byteEnd'] ?? 0,
+        type: type,
+        data: feature,
+      );
+    }).toList();
+    ranges.sort((a, b) => a.start.compareTo(b.start));
+    int pos = 0;
+    final spans = <TextSpan>[];
+    for (final range in ranges) {
+      if (range.start > pos) {
+        spans.add(TextSpan(text: text.substring(pos, range.start), style: defaultStyle));
+      }
+      final content = text.substring(range.start, range.end);
+      if (range.type?.contains('mention') == true && range.data['did'] != null) {
+        spans.add(
+          TextSpan(
+            text: content,
+            style: defaultLinkStyle,
+            recognizer: TapGestureRecognizer()
+              ..onTap = onMentionTap != null ? () => onMentionTap!(range.data['did']) : null,
+          ),
+        );
+      } else if (range.type?.contains('link') == true && range.data['uri'] != null) {
+        spans.add(
+          TextSpan(
+            text: content,
+            style: defaultLinkStyle,
+            recognizer: TapGestureRecognizer()
+              ..onTap = onLinkTap != null ? () => onLinkTap!(range.data['uri']) : null,
+          ),
+        );
+      } else if (range.type?.contains('tag') == true && range.data['tag'] != null) {
+        spans.add(
+          TextSpan(
+            text: '#${range.data['tag']}',
+            style: defaultLinkStyle,
+            recognizer: TapGestureRecognizer()
+              ..onTap = onTagTap != null ? () => onTagTap!(range.data['tag']) : null,
+          ),
+        );
+      } else {
+        spans.add(TextSpan(text: content, style: defaultStyle));
+      }
+      pos = range.end;
+    }
+    if (pos < text.length) {
+      spans.add(TextSpan(text: text.substring(pos), style: defaultStyle));
+    }
+    return RichText(text: TextSpan(children: spans));
+  }
+}
+
+class _FacetRange {
+  final int start;
+  final int end;
+  final String? type;
+  final Map<String, dynamic> data;
+  _FacetRange({required this.start, required this.end, required this.type, required this.data});
+}

pubspec.lock

···
       url: "https://pub.dev"
     source: hosted
     version: "0.4.0"
+  bluesky_text:
+    dependency: "direct main"
+    description:
+      name: bluesky_text
+      sha256: a10835d17e9cfc1739ea09a5c6fc86c287aa59074c60961601f7a0cf663b1ed4
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.2"
   boolean_selector:
     dependency: transitive
     description:

pubspec.yaml

···
   xrpc: ^0.6.1
   mime: ^1.0.6
   image: ^4.5.4
+  bluesky_text: ^0.7.2
 
 dev_dependencies:
   flutter_test: