feat: Reaction system for Quips feed + fix groups 500 + reduce jank

- Replace heart/like in Quips sidebar with full reaction system:
  tap = quick ❤️, long-press = full ReactionPicker dialog
- Add reactionPackageProvider (CDN → local assets → emoji fallback)
- Switch ReactionPicker to ConsumerStatefulWidget using provider
- Add CachedNetworkImage support in ReactionPicker + _ReactionIcon
- Fix CreateGroup handler: use 'privacy' column, drop non-existent
  'is_private'/'banner_url' columns (were causing 500 on group creation)
- Cache overlayJson parsing in QuipVideoItem initState/didUpdateWidget
  to eliminate double jsonDecode per build frame (was causing 174ms jank)
- Add post_hides table + HidePost handler + feed filtering
- Add showNavActions param to TraditionalQuipsSheet for clean Quips header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

go-backend/cmd/api/main.go

@@ -343,6 +343,7 @@ func main() {
 			authorized.DELETE("/posts/:id", postHandler.DeletePost)
 			authorized.POST("/posts/:id/pin", postHandler.PinPost)
 			authorized.PATCH("/posts/:id/visibility", postHandler.UpdateVisibility)
+			authorized.POST("/posts/:id/hide", postHandler.HidePost)
 			authorized.POST("/posts/:id/like", postHandler.LikePost)
 			authorized.DELETE("/posts/:id/like", postHandler.UnlikePost)
 			authorized.POST("/posts/:id/save", postHandler.SavePost)

go-backend/internal/handlers/groups_handler.go

@@ -218,7 +218,6 @@ func (h *GroupsHandler) CreateGroup(c *gin.Context) {
 		Category    string  `json:"category" binding:"required"`
 		IsPrivate   bool    `json:"is_private"`
 		AvatarURL   *string `json:"avatar_url"`
-		BannerURL   *string `json:"banner_url"`
 	}
 
 	if err := c.ShouldBindJSON(&req); err != nil {
@@ -229,6 +228,11 @@ func (h *GroupsHandler) CreateGroup(c *gin.Context) {
 	// Normalize name for uniqueness check
 	req.Name = strings.TrimSpace(req.Name)
 
+	privacy := "public"
+	if req.IsPrivate {
+		privacy = "private"
+	}
+
 	tx, err := h.db.Begin(c.Request.Context())
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create group"})
@@ -239,10 +243,10 @@ func (h *GroupsHandler) CreateGroup(c *gin.Context) {
 	// Create group
 	var groupID string
 	err = tx.QueryRow(c.Request.Context(), `
-		INSERT INTO groups (name, description, category, is_private, created_by, avatar_url, banner_url)
+		INSERT INTO groups (name, description, category, privacy, created_by, avatar_url)
-		VALUES ($1, $2, $3, $4, $5, $6, $7)
+		VALUES ($1, $2, $3, $4, $5, $6)
 		RETURNING id
-	`, req.Name, req.Description, req.Category, req.IsPrivate, userID, req.AvatarURL, req.BannerURL).Scan(&groupID)
+	`, req.Name, req.Description, req.Category, privacy, userID, req.AvatarURL).Scan(&groupID)
 
 	if err != nil {
 		if strings.Contains(err.Error(), "duplicate") || strings.Contains(err.Error(), "unique") {

go-backend/internal/handlers/post_handler.go

@@ -1170,6 +1170,22 @@ func (h *PostHandler) UnlikePost(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{"message": "Post unliked"})
 }
 
+// HidePost records a "Not Interested" signal for a post.
+// The post will be excluded from all subsequent feed queries for this user,
+// and repeated hides of the same author trigger algorithmic suppression.
+func (h *PostHandler) HidePost(c *gin.Context) {
+	postID := c.Param("id")
+	userIDStr, _ := c.Get("user_id")
+
+	err := h.postRepo.HidePost(c.Request.Context(), postID, userIDStr.(string))
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to hide post", "details": err.Error()})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "Post hidden"})
+}
+
 func (h *PostHandler) SavePost(c *gin.Context) {
 	postID := c.Param("id")
 	userIDStr, _ := c.Get("user_id")

go-backend/internal/repository/post_repository.go

@@ -186,6 +186,10 @@ func (r *PostRepository) GetFeed(ctx context.Context, userID string, categorySlu
 		      )
 		  )
 		  AND NOT public.has_block_between(p.author_id, CASE WHEN $4::text != '' THEN $4::text::uuid ELSE NULL END)
+		  AND ($4::text = '' OR NOT EXISTS (
+		      SELECT 1 FROM public.post_hides ph
+		      WHERE ph.post_id = p.id AND ph.user_id = $4::text::uuid
+		  ))
 		  AND ($3 = FALSE OR (COALESCE(p.video_url, '') <> '' OR (COALESCE(p.image_url, '') ILIKE '%.mp4')))
 		  AND ($5 = '' OR c.slug = $5)
 		  AND (
@@ -497,6 +501,18 @@ func (r *PostRepository) UnlikePost(ctx context.Context, postID string, userID s
 	return err
 }
 
+// HidePost records a "Not Interested" signal.
+// Denormalises author_id so feeds can suppress prolific-hide authors without a JOIN.
+func (r *PostRepository) HidePost(ctx context.Context, postID, userID string) error {
+	_, err := r.pool.Exec(ctx, `
+		INSERT INTO public.post_hides (user_id, post_id, author_id)
+		SELECT $2::uuid, $1::uuid, author_id
+		FROM public.posts WHERE id = $1::uuid
+		ON CONFLICT (user_id, post_id) DO NOTHING
+	`, postID, userID)
+	return err
+}
+
 func (r *PostRepository) SavePost(ctx context.Context, postID string, userID string) error {
 	query := `
 		WITH inserted AS (

go-backend/internal/services/feed_algorithm_service.go

@@ -465,6 +465,11 @@ func (s *FeedAlgorithmService) GetAlgorithmicFeed(ctx context.Context, viewerID
 		LEFT JOIN user_feed_impressions ufi
 		       ON ufi.post_id = pfs.post_id AND ufi.user_id = $1
 		WHERE p.status = 'active'
+		  AND pfs.post_id NOT IN (SELECT post_id FROM public.post_hides WHERE user_id = $1::uuid)
+		  AND p.user_id NOT IN (
+		      SELECT author_id FROM public.post_hides
+		      WHERE user_id = $1::uuid GROUP BY author_id HAVING COUNT(*) >= 2
+		  )
 	`
 	personalArgs := []interface{}{viewerID}
 	argIdx := 2
@@ -567,6 +572,11 @@ func (s *FeedAlgorithmService) GetAlgorithmicFeed(ctx context.Context, viewerID
 			JOIN post_feed_scores pfs ON pfs.post_id = p.id
 			WHERE p.status = 'active'
 			  AND p.category NOT IN (%s)
+			  AND p.id NOT IN (SELECT post_id FROM public.post_hides WHERE user_id = $1)
+			  AND p.user_id NOT IN (
+			      SELECT author_id FROM public.post_hides
+			      WHERE user_id = $1 GROUP BY author_id HAVING COUNT(*) >= 2
+			  )
 			ORDER BY random()
 			LIMIT $2
 		`, placeholders)

sojorn_app/lib/providers/reactions_provider.dart

@@ -0,0 +1,134 @@
+import 'dart:convert';
+
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:http/http.dart' as http;
+
+const _cdnBase = 'https://reactions.sojorn.net';
+
+/// Parsed reaction package ready for use by [ReactionPicker].
+class ReactionPackage {
+  final List<String> tabOrder;
+  final Map<String, List<String>> reactionSets; // tabId → list of identifiers (URL or emoji)
+  final Map<String, String> folderCredits; // tabId → credit markdown
+
+  const ReactionPackage({
+    required this.tabOrder,
+    required this.reactionSets,
+    required this.folderCredits,
+  });
+}
+
+/// Riverpod provider that loads reaction sets once per app session.
+/// Priority: CDN index.json → local assets → hardcoded emoji.
+final reactionPackageProvider = FutureProvider<ReactionPackage>((ref) async {
+  // 1. Try CDN
+  try {
+    final response = await http
+        .get(Uri.parse('$_cdnBase/index.json'))
+        .timeout(const Duration(seconds: 5));
+
+    if (response.statusCode == 200) {
+      final data = jsonDecode(response.body) as Map<String, dynamic>;
+      final tabsRaw =
+          (data['tabs'] as List? ?? []).whereType<Map<String, dynamic>>();
+
+      final tabOrder = <String>['emoji'];
+      final reactionSets = <String, List<String>>{'emoji': _defaultEmoji};
+      final folderCredits = <String, String>{};
+
+      for (final tab in tabsRaw) {
+        final id = tab['id'] as String? ?? '';
+        if (id.isEmpty || id == 'emoji') continue;
+
+        final credit = tab['credit'] as String?;
+        final files =
+            (tab['reactions'] as List? ?? []).whereType<String>().toList();
+        final urls = files.map((f) => '$_cdnBase/$id/$f').toList();
+
+        tabOrder.add(id);
+        reactionSets[id] = urls;
+        if (credit != null && credit.isNotEmpty) {
+          folderCredits[id] = credit;
+        }
+      }
+
+      // Only return CDN result if we got actual image tabs (not just emoji)
+      if (tabOrder.length > 1) {
+        return ReactionPackage(
+          tabOrder: tabOrder,
+          reactionSets: reactionSets,
+          folderCredits: folderCredits,
+        );
+      }
+    }
+  } catch (_) {}
+
+  // 2. Fallback: local assets
+  try {
+    final manifest = await AssetManifest.loadFromAssetBundle(rootBundle);
+    final assetPaths = manifest.listAssets();
+    final reactionAssets = assetPaths.where((path) {
+      final lp = path.toLowerCase();
+      return lp.startsWith('assets/reactions/') &&
+          (lp.endsWith('.png') ||
+              lp.endsWith('.svg') ||
+              lp.endsWith('.webp') ||
+              lp.endsWith('.jpg') ||
+              lp.endsWith('.jpeg') ||
+              lp.endsWith('.gif'));
+    }).toList();
+
+    if (reactionAssets.isNotEmpty) {
+      final tabOrder = <String>['emoji'];
+      final reactionSets = <String, List<String>>{'emoji': _defaultEmoji};
+      final folderCredits = <String, String>{};
+
+      for (final path in reactionAssets) {
+        final parts = path.split('/');
+        if (parts.length >= 4) {
+          final folder = parts[2];
+          if (!reactionSets.containsKey(folder)) {
+            tabOrder.add(folder);
+            reactionSets[folder] = [];
+            try {
+              final creditPath = 'assets/reactions/$folder/credit.md';
+              if (assetPaths.contains(creditPath)) {
+                folderCredits[folder] =
+                    await rootBundle.loadString(creditPath);
+              }
+            } catch (_) {}
+          }
+          reactionSets[folder]!.add(path);
+        }
+      }
+
+      for (final key in reactionSets.keys) {
+        if (key != 'emoji') {
+          reactionSets[key]!
+              .sort((a, b) => a.split('/').last.compareTo(b.split('/').last));
+        }
+      }
+
+      return ReactionPackage(
+        tabOrder: tabOrder,
+        reactionSets: reactionSets,
+        folderCredits: folderCredits,
+      );
+    }
+  } catch (_) {}
+
+  // 3. Hardcoded emoji fallback
+  return ReactionPackage(
+    tabOrder: ['emoji'],
+    reactionSets: {'emoji': _defaultEmoji},
+    folderCredits: {},
+  );
+});
+
+const _defaultEmoji = [
+  '❤️', '👍', '😂', '😮', '😢', '😡',
+  '🎉', '🔥', '👏', '🙏', '💯', '🤔',
+  '😍', '🤣', '😊', '👌', '🙌', '💪',
+  '🎯', '⭐', '✨', '🌟', '💫', '☀️',
+];

sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart

@@ -9,9 +9,9 @@ import '../../../providers/feed_refresh_provider.dart';
 import '../../../routes/app_routes.dart';
 import '../../../theme/app_theme.dart';
 import '../../../theme/tokens.dart';
-import '../../post/post_detail_screen.dart';
 import 'quip_video_item.dart';
 import '../../home/home_shell.dart';
+import '../../../widgets/reactions/reaction_picker.dart';
 import '../../../widgets/video_comments_sheet.dart';
 
 class Quip {
@@ -23,8 +23,10 @@ class Quip {
   final String? displayName;
   final String? avatarUrl;
   final int? durationMs;
-  final int? likeCount;
+  final int commentCount;
   final String? overlayJson;
+  final Map<String, int> reactions;
+  final Set<String> myReactions;
 
   const Quip({
     required this.id,
@@ -35,8 +37,10 @@ class Quip {
     this.displayName,
     this.avatarUrl,
     this.durationMs,
-    this.likeCount,
+    this.commentCount = 0,
     this.overlayJson,
+    this.reactions = const {},
+    this.myReactions = const {},
   });
 
   factory Quip.fromMap(Map<String, dynamic> map) {
@@ -54,18 +58,29 @@ class Quip {
       displayName: author?['display_name'] as String?,
       avatarUrl: author?['avatar_url'] as String?,
       durationMs: map['duration_ms'] as int?,
-      likeCount: _parseLikeCount(map['metrics']),
+      commentCount: _parseCount(map['comment_count']),
       overlayJson: map['overlay_json'] as String?,
+      reactions: _parseReactions(map['reactions']),
+      myReactions: _parseMyReactions(map['my_reactions']),
     );
   }
 
-  static int? _parseLikeCount(dynamic metrics) {
+  static Map<String, int> _parseReactions(dynamic v) {
-    if (metrics is Map<String, dynamic>) {
+    if (v is Map<String, dynamic>) {
-      final val = metrics['like_count'];
+      return v.map((k, val) => MapEntry(k, val is int ? val : (val is num ? val.toInt() : 0)));
-      if (val is int) return val;
-      if (val is num) return val.toInt();
     }
-    return null;
+    return {};
+  }
+
+  static Set<String> _parseMyReactions(dynamic v) {
+    if (v is List) return v.whereType<String>().toSet();
+    return {};
+  }
+
+  static int _parseCount(dynamic v) {
+    if (v is int) return v;
+    if (v is num) return v.toInt();
+    return 0;
   }
 }
 
@@ -86,8 +101,8 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
   final List<Quip> _quips = [];
   final Map<int, VideoPlayerController> _controllers = {};
   final Map<int, Future<void>> _controllerFutures = {};
-  final Map<String, bool> _liked = {};
+  final Map<String, Map<String, int>> _reactionCounts = {};
-  final Map<String, int> _likeCounts = {};
+  final Map<String, Set<String>> _myReactions = {};
 
   bool _isLoading = false;
   bool _hasMore = true;
@@ -268,7 +283,8 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
               }
             } else {
             }
-          } catch (e) {
+          } catch (_) {
+            // Ignore — initial post will just not appear at top
           }
         }
       }
@@ -297,7 +313,10 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
         _quips.addAll(items);
         _hasMore = items.length == _pageSize;
         for (final item in items) {
-          _likeCounts.putIfAbsent(item.id, () => item.likeCount ?? 0);
+          _reactionCounts.putIfAbsent(
+              item.id, () => Map<String, int>.from(item.reactions));
+          _myReactions.putIfAbsent(
+              item.id, () => Set<String>.from(item.myReactions));
         }
       });
 
@@ -409,43 +428,81 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
     await _fetchQuips();
   }
 
-  Future<void> _toggleLike(Quip quip) async {
+  Future<void> _toggleReaction(Quip quip, String emoji) async {
     final api = ref.read(apiServiceProvider);
-    final currentlyLiked = _liked[quip.id] ?? false;
+    final currentCounts =
+        Map<String, int>.from(_reactionCounts[quip.id] ?? quip.reactions);
+    final currentMine =
+        Set<String>.from(_myReactions[quip.id] ?? quip.myReactions);
+
+    // Optimistic update
+    final isRemoving = currentMine.contains(emoji);
     setState(() {
-      _liked[quip.id] = !currentlyLiked;
+      if (isRemoving) {
-      final currentCount = _likeCounts[quip.id] ?? 0;
+        currentMine.remove(emoji);
-      final next = currentlyLiked ? currentCount - 1 : currentCount + 1;
+        final newCount = (currentCounts[emoji] ?? 1) - 1;
-      _likeCounts[quip.id] = next < 0 ? 0 : next;
+        if (newCount <= 0) {
+          currentCounts.remove(emoji);
+        } else {
+          currentCounts[emoji] = newCount;
+        }
+      } else {
+        currentMine.add(emoji);
+        currentCounts[emoji] = (currentCounts[emoji] ?? 0) + 1;
+      }
+      _reactionCounts[quip.id] = currentCounts;
+      _myReactions[quip.id] = currentMine;
     });
 
     try {
-      if (currentlyLiked) {
+      await api.toggleReaction(quip.id, emoji);
-        await api.unappreciatePost(quip.id);
-      } else {
-        await api.appreciatePost(quip.id);
-      }
     } catch (_) {
-      // revert on failure
+      // Revert on failure
       if (!mounted) return;
       setState(() {
-        _liked[quip.id] = currentlyLiked;
+        _reactionCounts[quip.id] = Map<String, int>.from(quip.reactions);
-        _likeCounts[quip.id] =
+        _myReactions[quip.id] = Set<String>.from(quip.myReactions);
-            (_likeCounts[quip.id] ?? 0) + (currentlyLiked ? 1 : -1);
-        if ((_likeCounts[quip.id] ?? 0) < 0) {
-          _likeCounts[quip.id] = 0;
-        }
       });
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(
-            content: Text('Could not update like. Please try again.'),
-          ),
-        );
-      }
     }
   }
 
+  void _openReactionPicker(Quip quip) {
+    showDialog(
+      context: context,
+      builder: (_) => ReactionPicker(
+        onReactionSelected: (emoji) => _toggleReaction(quip, emoji),
+        reactionCounts: _reactionCounts[quip.id] ?? quip.reactions,
+        myReactions: _myReactions[quip.id] ?? quip.myReactions,
+      ),
+    );
+  }
+
+  Future<void> _handleNotInterested(Quip quip) async {
+    final index = _quips.indexOf(quip);
+    if (index == -1) return;
+
+    // Optimistic removal — user sees it gone immediately
+    setState(() {
+      _quips.removeAt(index);
+      final ctrl = _controllers.remove(index);
+      ctrl?.dispose();
+      // Remap controllers above the removed index
+      final remapped = <int, VideoPlayerController>{};
+      _controllers.forEach((k, v) {
+        remapped[k > index ? k - 1 : k] = v;
+      });
+      _controllers
+        ..clear()
+        ..addAll(remapped);
+      if (_currentIndex >= _quips.length && _currentIndex > 0) {
+        _currentIndex = _quips.length - 1;
+      }
+    });
+
+    // Fire-and-forget to backend — no revert on failure (signal still valuable)
+    ref.read(apiServiceProvider).hidePost(quip.id).catchError((_) {});
+  }
+
   Future<void> _openComments(Quip quip) async {
     showModalBottomSheet(
       context: context,
@@ -453,10 +510,9 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
       backgroundColor: SojornColors.transparent,
       builder: (context) => VideoCommentsSheet(
         postId: quip.id,
-        initialCommentCount: 0,
+        initialCommentCount: quip.commentCount,
-        onCommentPosted: () {
+        showNavActions: false,
-          // Optional: handle reload if needed
+        onCommentPosted: () {},
-        },
       ),
     );
   }
@@ -528,8 +584,7 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
             child: PageView.builder(
               controller: _pageController,
               scrollDirection: Axis.vertical,
-              // Ensure physics allows scrolling to trigger refresh
+              physics: const PageScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
-              physics: const AlwaysScrollableScrollPhysics(),
               itemCount: _quips.length,
               onPageChanged: (index) {
                 _currentIndex = index;
@@ -542,8 +597,6 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
               itemBuilder: (context, index) {
                 final quip = _quips[index];
                 final controller = _controllers[index];
-                final isLiked = _liked[quip.id] ?? false;
-                final likeCount = _likeCounts[quip.id] ?? quip.likeCount ?? 0;
                 return VisibilityDetector(
                   key: ValueKey('quip-${quip.id}'),
                   onVisibilityChanged: (info) =>
@@ -552,13 +605,16 @@ class _QuipsFeedScreenState extends ConsumerState<QuipsFeedScreen>
                     quip: quip,
                     controller: controller,
                     isActive: index == _currentIndex,
-                    isLiked: isLiked,
+                    reactions: _reactionCounts[quip.id] ?? quip.reactions,
-                    likeCount: likeCount,
+                    myReactions: _myReactions[quip.id] ?? quip.myReactions,
+                    commentCount: quip.commentCount,
                     isUserPaused: _isUserPaused,
-                    onLike: () => _toggleLike(quip),
+                    onReact: (emoji) => _toggleReaction(quip, emoji),
+                    onOpenReactionPicker: () => _openReactionPicker(quip),
                     onComment: () => _openComments(quip),
                     onShare: () => _shareQuip(quip),
                     onTogglePause: _toggleUserPause,
+                    onNotInterested: () => _handleNotInterested(quip),
                   ),
                 );
               },

sojorn_app/lib/services/api_service.dart

@@ -1089,6 +1089,10 @@ class ApiService {
     );
   }
 
+  Future<void> hidePost(String postId) async {
+    await _callGoApi('/posts/$postId/hide', method: 'POST');
+  }
+
   Future<void> appreciatePost(String postId) async {
     await _callGoApi(
       '/posts/$postId/like',

sojorn_app/lib/widgets/reactions/reaction_picker.dart

@@ -1,15 +1,15 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:url_launcher/url_launcher.dart';
-import 'dart:convert';
+import '../../providers/reactions_provider.dart';
 import '../../theme/app_theme.dart';
 import '../../theme/tokens.dart';
 
-class ReactionPicker extends StatefulWidget {
+class ReactionPicker extends ConsumerStatefulWidget {
   final Function(String) onReactionSelected;
   final VoidCallback? onClosed;
   final List<String>? reactions;
@@ -26,136 +26,47 @@ class ReactionPicker extends StatefulWidget {
   });
 
   @override
-  State<ReactionPicker> createState() => _ReactionPickerState();
+  ConsumerState<ReactionPicker> createState() => _ReactionPickerState();
 }
 
-class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProviderStateMixin {
+class _ReactionPickerState extends ConsumerState<ReactionPicker>
-  late TabController _tabController;
+    with SingleTickerProviderStateMixin {
+  TabController? _tabController;
   int _currentTabIndex = 0;
   final TextEditingController _searchController = TextEditingController();
   bool _isSearching = false;
   List<String> _filteredReactions = [];
-  
-  // Dynamic reaction sets
-  Map<String, List<String>> _reactionSets = {};
-  Map<String, String> _folderCredits = {};
-  List<String> _tabOrder = [];
-  bool _isLoading = true;
 
   @override
   void initState() {
     super.initState();
     _searchController.addListener(_onSearchChanged);
-    _loadReactionSets();
   }
 
-
-
-  Future<void> _loadReactionSets() async {
-    try {
-      final reactionSets = <String, List<String>>{
-        'emoji': [
-          '❤️', '👍', '😂', '😮', '😢', '😡',
-          '🎉', '🔥', '👏', '🙏', '💯', '🤔',
-          '😍', '🤣', '😊', '👌', '🙌', '💪',
-          '🎯', '⭐', '✨', '🌟', '💫', '☀️',
-        ],
-      };
-      
-      final folderCredits = <String, String>{};
-      final tabOrder = ['emoji'];
-
-      // Load the manifest to discover assets
-      final manifest = await AssetManifest.loadFromAssetBundle(rootBundle);
-      final assetPaths = manifest.listAssets();
-      
-      // Filter for reaction assets
-      final reactionAssets = assetPaths.where((path) {
-        final lowerPath = path.toLowerCase();
-        return lowerPath.startsWith('assets/reactions/') && 
-        (lowerPath.endsWith('.png') || 
-         lowerPath.endsWith('.svg') || 
-         lowerPath.endsWith('.webp') || 
-         lowerPath.endsWith('.jpg') || 
-         lowerPath.endsWith('.jpeg') ||
-         lowerPath.endsWith('.gif'));
-      }).toList();
-
-      for (final path in reactionAssets) {
-        // Path format: assets/reactions/FOLDER_NAME/FILE_NAME.ext
-        final parts = path.split('/');
-        if (parts.length >= 4) {
-          final folderName = parts[2];
-          
-          if (!reactionSets.containsKey(folderName)) {
-            reactionSets[folderName] = [];
-            tabOrder.add(folderName);
-            
-            // Try to load credit file if it's the first time we see this folder
-            try {
-              final creditPath = 'assets/reactions/$folderName/credit.md';
-              // Check if credit file exists in manifest too
-              if (assetPaths.contains(creditPath)) {
-                final creditData = await rootBundle.loadString(creditPath);
-                folderCredits[folderName] = creditData;
-              }
-            } catch (e) {
-              // Ignore missing credit files
-            }
-          }
-          
-          reactionSets[folderName]!.add(path);
-        }
-      }
-
-      // Sort reactions within each set by file name
-      for (final key in reactionSets.keys) {
-        if (key != 'emoji') {
-          reactionSets[key]!.sort((a, b) => a.split('/').last.compareTo(b.split('/').last));
-        }
-      }
-
-      if (mounted) {
-        setState(() {
-          _reactionSets = reactionSets;
-          _folderCredits = folderCredits;
-          _tabOrder = tabOrder;
-          _isLoading = false;
-          
-          _tabController = TabController(length: _tabOrder.length, vsync: this);
-          _tabController.addListener(() {
-            if (mounted) {
-              setState(() {
-                _currentTabIndex = _tabController.index;
-                _clearSearch();
-              });
-            }
-          });
-        });
-      }
-    } catch (e) {
-      // Fallback
-      if (mounted) {
-        setState(() {
-          _reactionSets = {
-            'emoji': ['❤️', '👍', '😂', '😮', '😢', '😡']
-          };
-          _tabOrder = ['emoji'];
-          _isLoading = false;
-          _tabController = TabController(length: 1, vsync: this);
-        });
-      }
-    }
-  }
-
-
   @override
   void dispose() {
-    _tabController.dispose();
+    _tabController?.dispose();
     _searchController.dispose();
     super.dispose();
   }
 
+  void _ensureTabController(ReactionPackage package) {
+    final neededLength = package.tabOrder.length;
+    if (_tabController != null && _tabController!.length == neededLength) {
+      return;
+    }
+    _tabController?.dispose();
+    _tabController = TabController(length: neededLength, vsync: this);
+    _tabController!.addListener(() {
+      if (mounted) {
+        setState(() {
+          _currentTabIndex = _tabController!.index;
+          _clearSearch();
+        });
+      }
+    });
+  }
+
   void _clearSearch() {
     _searchController.clear();
     setState(() {
@@ -180,47 +91,61 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
   }
 
   List<String> _filterReactions(String query) {
-    final reactions = _currentReactions;
+    final reactions = _filterCurrentTab();
     return reactions.where((reaction) {
-      // For image reactions, search by filename
+      if (reaction.startsWith('assets/reactions/') ||
-      if (reaction.startsWith('assets/reactions/')) {
+          reaction.startsWith('https://')) {
         final fileName = reaction.split('/').last.toLowerCase();
         return fileName.contains(query);
       }
-      // For emoji, search by description (you could add a mapping)
       return reaction.toLowerCase().contains(query);
     }).toList();
   }
 
-  List<String> get _currentReactions {
+  List<String> _filterCurrentTab() {
-    if (_tabOrder.isEmpty || _currentTabIndex >= _tabOrder.length) {
+    final package = ref.read(reactionPackageProvider).value;
-      return [];
+    if (package == null) return [];
-    }
+    final tabOrder = package.tabOrder;
-    final currentTab = _tabOrder[_currentTabIndex];
+    if (_currentTabIndex >= tabOrder.length) return [];
-    return _reactionSets[currentTab] ?? [];
+    return package.reactionSets[tabOrder[_currentTabIndex]] ?? [];
   }
 
   @override
   Widget build(BuildContext context) {
-    if (_isLoading) {
+    final packageAsync = ref.watch(reactionPackageProvider);
-      return Dialog(
+
-        backgroundColor: SojornColors.transparent,
+    return packageAsync.when(
-        child: Container(
+      loading: () => _buildLoadingDialog(),
-          width: 400,
+      error: (_, __) => _buildLoadingDialog(),
-          height: 300,
+      data: (package) {
-          decoration: BoxDecoration(
+        _ensureTabController(package);
-            color: AppTheme.cardSurface,
+        if (_tabController == null) return _buildLoadingDialog();
-            borderRadius: BorderRadius.circular(16),
+        return _buildPicker(package);
-            border: Border.all(color: AppTheme.navyBlue.withValues(alpha: 0.1)),
+      },
-          ),
+    );
-          child: const Center(
+  }
-            child: CircularProgressIndicator(),
+
-          ),
+  Widget _buildLoadingDialog() {
+    return Dialog(
+      backgroundColor: SojornColors.transparent,
+      child: Container(
+        width: 400,
+        height: 300,
+        decoration: BoxDecoration(
+          color: AppTheme.cardSurface,
+          borderRadius: BorderRadius.circular(16),
+          border:
+              Border.all(color: AppTheme.navyBlue.withValues(alpha: 0.1)),
         ),
-      );
+        child: const Center(child: CircularProgressIndicator()),
-    }
+      ),
-    
+    );
-    final reactions = widget.reactions ?? (_isSearching ? _filteredReactions : _currentReactions);
+  }
+
+  Widget _buildPicker(ReactionPackage package) {
+    final tabOrder = package.tabOrder;
+    final reactionSets = package.reactionSets;
+
     final reactionCounts = widget.reactionCounts ?? {};
     final myReactions = widget.myReactions ?? {};
 
@@ -247,84 +172,78 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
           mainAxisSize: MainAxisSize.min,
           children: [
             // Header with search
-            Column(
+            Row(
               children: [
-                Row(
+                Text(
-                  children: [
+                  _isSearching ? 'Search Reactions' : 'Add Reaction',
-                    Text(
+                  style: GoogleFonts.inter(
-                      _isSearching ? 'Search Reactions' : 'Add Reaction',
+                    color: AppTheme.navyBlue,
-                      style: GoogleFonts.inter(
+                    fontSize: 16,
-                        color: AppTheme.navyBlue,
+                    fontWeight: FontWeight.w600,
-                        fontSize: 16,
-                        fontWeight: FontWeight.w600,
-                      ),
-                    ),
-                    const Spacer(),
-                    IconButton(
-                      onPressed: () {
-                        Navigator.of(context).pop();
-                        widget.onClosed?.call();
-                      },
-                      icon: Icon(
-                        Icons.close,
-                        color: AppTheme.textSecondary,
-                        size: 20,
-                      ),
-                    ),
-                  ],
-                ),
-                const SizedBox(height: 12),
-                
-                // Search bar
-                Container(
-                  decoration: BoxDecoration(
-                    color: AppTheme.navyBlue.withValues(alpha: 0.05),
-                    borderRadius: BorderRadius.circular(12),
-                    border: Border.all(
-                      color: AppTheme.navyBlue.withValues(alpha: 0.1),
-                    ),
                   ),
-                  child: TextField(
+                ),
-                    controller: _searchController,
+                const Spacer(),
-                    style: GoogleFonts.inter(
+                IconButton(
-                      color: AppTheme.navyBlue,
+                  onPressed: () {
-                      fontSize: 14,
+                    Navigator.of(context).pop();
-                    ),
+                    widget.onClosed?.call();
-                    decoration: InputDecoration(
+                  },
-                      hintText: 'Search reactions...',
+                  icon: Icon(
-                      hintStyle: GoogleFonts.inter(
+                    Icons.close,
-                        color: AppTheme.textSecondary,
+                    color: AppTheme.textSecondary,
-                        fontSize: 14,
+                    size: 20,
-                      ),
-                      prefixIcon: Icon(
-                        Icons.search,
-                        color: AppTheme.textSecondary,
-                        size: 20,
-                      ),
-                      suffixIcon: _searchController.text.isNotEmpty
-                          ? IconButton(
-                              icon: Icon(
-                                Icons.clear,
-                                color: AppTheme.textSecondary,
-                                size: 18,
-                              ),
-                              onPressed: () {
-                                _searchController.clear();
-                              },
-                            )
-                          : null,
-                      border: InputBorder.none,
-                      contentPadding: const EdgeInsets.symmetric(
-                        horizontal: 12,
-                        vertical: 8,
-                      ),
-                    ),
                   ),
                 ),
               ],
             ),
+            const SizedBox(height: 12),
+
+            // Search bar
+            Container(
+              decoration: BoxDecoration(
+                color: AppTheme.navyBlue.withValues(alpha: 0.05),
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(
+                  color: AppTheme.navyBlue.withValues(alpha: 0.1),
+                ),
+              ),
+              child: TextField(
+                controller: _searchController,
+                style: GoogleFonts.inter(
+                  color: AppTheme.navyBlue,
+                  fontSize: 14,
+                ),
+                decoration: InputDecoration(
+                  hintText: 'Search reactions...',
+                  hintStyle: GoogleFonts.inter(
+                    color: AppTheme.textSecondary,
+                    fontSize: 14,
+                  ),
+                  prefixIcon: Icon(
+                    Icons.search,
+                    color: AppTheme.textSecondary,
+                    size: 20,
+                  ),
+                  suffixIcon: _searchController.text.isNotEmpty
+                      ? IconButton(
+                          icon: Icon(
+                            Icons.clear,
+                            color: AppTheme.textSecondary,
+                            size: 18,
+                          ),
+                          onPressed: () => _searchController.clear(),
+                        )
+                      : null,
+                  border: InputBorder.none,
+                  contentPadding: const EdgeInsets.symmetric(
+                    horizontal: 12,
+                    vertical: 8,
+                  ),
+                ),
+              ),
+            ),
             const SizedBox(height: 16),
-            
+
             // Tabs
             Container(
               height: 40,
@@ -333,7 +252,7 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
                 borderRadius: BorderRadius.circular(12),
               ),
               child: TabBar(
-                controller: _tabController,
+                controller: _tabController!,
                 onTap: (index) {
                   setState(() {
                     _currentTabIndex = index;
@@ -353,16 +272,14 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
                   fontWeight: FontWeight.w600,
                 ),
                 indicatorSize: TabBarIndicatorSize.tab,
-                tabs: _tabOrder.map((tabName) {
+                tabs: tabOrder
-                  return Tab(
+                    .map((name) => Tab(text: name.toUpperCase()))
-                    text: tabName.toUpperCase(),
+                    .toList(),
-                  );
-                }).toList(),
               ),
             ),
             const SizedBox(height: 16),
-            
+
-            // Search results info
+            // No results message
             if (_isSearching && _filteredReactions.isEmpty)
               Container(
                 padding: const EdgeInsets.all(12),
@@ -379,28 +296,31 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
                   textAlign: TextAlign.center,
                 ),
               ),
-            
+
             // Reaction grid
             SizedBox(
-              height: 420, // Increased height to show more rows at once
+              height: 420,
               child: TabBarView(
-                controller: _tabController,
+                controller: _tabController!,
-                children: _tabOrder.map((tabName) {
+                children: tabOrder.map((tabName) {
-                  final reactions = _reactionSets[tabName] ?? [];
+                  final tabReactions = reactionSets[tabName] ?? [];
                   final isEmoji = tabName == 'emoji';
-                  final credit = _folderCredits[tabName];
+                  final credit = package.folderCredits[tabName];
-                  
+
                   return Column(
                     children: [
-                      // Reaction grid
                       Expanded(
-                        child: _buildReactionGrid(reactions, widget.reactionCounts ?? {}, widget.myReactions ?? {}, !isEmoji),
+                        child: _buildReactionGrid(
+                          _isSearching ? _filteredReactions : tabReactions,
+                          reactionCounts,
+                          myReactions,
+                          !isEmoji,
+                        ),
                       ),
-                      
-                      // Credit section (only for non-emoji tabs)
                       if (credit != null && credit.isNotEmpty)
                         Container(
-                          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 16, vertical: 8),
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
@@ -415,7 +335,6 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
                                 ),
                               ),
                               const SizedBox(height: 4),
-                              // Parse and display credit markdown
                               _buildCreditDisplay(credit),
                             ],
                           ),
@@ -437,18 +356,32 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
       data: credit,
       selectable: true,
       onTapLink: (text, href, title) {
-        if (href != null) {
+        if (href != null) launchUrl(Uri.parse(href));
-          launchUrl(Uri.parse(href));
-        }
       },
       styleSheet: MarkdownStyleSheet(
         p: GoogleFonts.inter(fontSize: 10, color: AppTheme.textPrimary),
-        h1: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.bold, color: AppTheme.textPrimary),
+        h1: GoogleFonts.inter(
-        h2: GoogleFonts.inter(fontSize: 11, fontWeight: FontWeight.bold, color: AppTheme.textPrimary),
+            fontSize: 12,
-        listBullet: GoogleFonts.inter(fontSize: 10, color: AppTheme.textPrimary),
+            fontWeight: FontWeight.bold,
-        strong: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.bold, color: AppTheme.textPrimary),
+            color: AppTheme.textPrimary),
-        em: GoogleFonts.inter(fontSize: 10, fontStyle: FontStyle.italic, color: AppTheme.textPrimary),
+        h2: GoogleFonts.inter(
-        a: GoogleFonts.inter(fontSize: 10, color: AppTheme.brightNavy, decoration: TextDecoration.underline),
+            fontSize: 11,
+            fontWeight: FontWeight.bold,
+            color: AppTheme.textPrimary),
+        listBullet:
+            GoogleFonts.inter(fontSize: 10, color: AppTheme.textPrimary),
+        strong: GoogleFonts.inter(
+            fontSize: 10,
+            fontWeight: FontWeight.bold,
+            color: AppTheme.textPrimary),
+        em: GoogleFonts.inter(
+            fontSize: 10,
+            fontStyle: FontStyle.italic,
+            color: AppTheme.textPrimary),
+        a: GoogleFonts.inter(
+            fontSize: 10,
+            color: AppTheme.brightNavy,
+            decoration: TextDecoration.underline),
       ),
     );
   }
@@ -473,26 +406,26 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
         final reaction = reactions[index];
         final count = reactionCounts[reaction] ?? 0;
         final isSelected = myReactions.contains(reaction);
-        
+
         return Material(
           color: SojornColors.transparent,
           child: InkWell(
             onTap: () {
               Navigator.of(context).pop();
-              final result = reaction.startsWith('assets/') 
+              // CDN URLs and emoji are passed as-is; local assets get 'asset:' prefix
-                  ? 'asset:$reaction' 
+              final result =
-                  : reaction;
+                  reaction.startsWith('assets/') ? 'asset:$reaction' : reaction;
               widget.onReactionSelected(result);
             },
             borderRadius: BorderRadius.circular(12),
             child: Container(
               decoration: BoxDecoration(
-                color: isSelected 
+                color: isSelected
                     ? AppTheme.brightNavy.withValues(alpha: 0.2)
                     : AppTheme.navyBlue.withValues(alpha: 0.05),
                 borderRadius: BorderRadius.circular(12),
                 border: Border.all(
-                  color: isSelected 
+                  color: isSelected
                       ? AppTheme.brightNavy
                       : AppTheme.navyBlue.withValues(alpha: 0.1),
                   width: isSelected ? 2 : 1,
@@ -510,7 +443,8 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
                       right: 2,
                       bottom: 2,
                       child: Container(
-                        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 4, vertical: 1),
                         decoration: BoxDecoration(
                           color: AppTheme.brightNavy,
                           borderRadius: BorderRadius.circular(8),
@@ -535,13 +469,27 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
   }
 
   Widget _buildEmojiReaction(String emoji) {
-    return Text(
+    return Text(emoji, style: const TextStyle(fontSize: 24));
-      emoji,
-      style: const TextStyle(fontSize: 24),
-    );
   }
 
   Widget _buildImageReaction(String reaction) {
+    // CDN URL
+    if (reaction.startsWith('https://')) {
+      return CachedNetworkImage(
+        imageUrl: reaction,
+        width: 32,
+        height: 32,
+        fit: BoxFit.contain,
+        placeholder: (_, __) => const SizedBox(width: 32, height: 32),
+        errorWidget: (_, __, ___) => Icon(
+          Icons.image_not_supported,
+          size: 24,
+          color: AppTheme.textSecondary,
+        ),
+      );
+    }
+
+    // Local asset (with or without 'asset:' prefix)
     final imagePath = reaction.startsWith('asset:')
         ? reaction.replaceFirst('asset:', '')
         : reaction;
@@ -560,27 +508,23 @@ class _ReactionPickerState extends State<ReactionPicker> with SingleTickerProvid
             color: AppTheme.textSecondary,
           ),
         ),
-        errorBuilder: (context, error, stackTrace) {
+        errorBuilder: (context, error, stackTrace) => Icon(
-          return Icon(
+          Icons.image_not_supported,
-            Icons.image_not_supported,
+          size: 24,
-            size: 24,
+          color: AppTheme.textSecondary,
-            color: AppTheme.textSecondary,
+        ),
-          );
-        },
       );
     }
-    
+
     return Image.asset(
       imagePath,
       width: 32,
       height: 32,
-      errorBuilder: (context, error, stackTrace) {
+      errorBuilder: (context, error, stackTrace) => Icon(
-        return Icon(
+        Icons.image_not_supported,
-          Icons.image_not_supported,
+        size: 24,
-          size: 24,
+        color: AppTheme.textSecondary,
-          color: AppTheme.textSecondary,
+      ),
-        );
-      },
     );
   }
 }

sojorn_app/lib/widgets/reactions/reactions_display.dart

@@ -1,3 +1,4 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -245,17 +246,27 @@ class _ReactionIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // CDN URL
+    if (reactionId.startsWith('https://')) {
+      return CachedNetworkImage(
+        imageUrl: reactionId,
+        width: size,
+        height: size,
+        fit: BoxFit.contain,
+        placeholder: (_, __) => SizedBox(width: size, height: size),
+        errorWidget: (_, __, ___) =>
+            Icon(Icons.image_not_supported, size: size * 0.8),
+      );
+    }
+
+    // Local asset
     if (reactionId.startsWith('assets/') || reactionId.startsWith('asset:')) {
       final assetPath = reactionId.startsWith('asset:')
           ? reactionId.replaceFirst('asset:', '')
           : reactionId;
 
       if (assetPath.endsWith('.svg')) {
-        return SvgPicture.asset(
+        return SvgPicture.asset(assetPath, width: size, height: size);
-          assetPath,
-          width: size,
-          height: size,
-        );
       }
       return Image.asset(
         assetPath,
@@ -264,9 +275,8 @@ class _ReactionIcon extends StatelessWidget {
         fit: BoxFit.contain,
       );
     }
-    return Text(
+
-      reactionId,
+    // Emoji
-      style: TextStyle(fontSize: size),
+    return Text(reactionId, style: TextStyle(fontSize: size));
-    );
   }
 }

sojorn_app/lib/widgets/traditional_quips_sheet.dart

@@ -26,12 +26,16 @@ class TraditionalQuipsSheet extends ConsumerStatefulWidget {
   final String postId;
   final int initialQuipCount;
   final VoidCallback? onQuipPosted;
+  /// When false (e.g. Quips video feed), shows only "X Comments" + close button
+  /// with no Home/Chat/Search navigation icons.
+  final bool showNavActions;
 
   const TraditionalQuipsSheet({
     super.key,
     required this.postId,
     this.initialQuipCount = 0,
     this.onQuipPosted,
+    this.showNavActions = true,
   });
 
   @override
@@ -300,8 +304,8 @@ class _TraditionalQuipsSheetState extends ConsumerState<TraditionalQuipsSheet> {
         borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
         border: Border(
           bottom: BorderSide(
-            color: AppTheme.egyptianBlue.withValues(alpha: 0.1), 
+            color: AppTheme.egyptianBlue.withValues(alpha: 0.1),
-            width: 1
+            width: 1,
           ),
         ),
       ),
@@ -321,44 +325,7 @@ class _TraditionalQuipsSheetState extends ConsumerState<TraditionalQuipsSheet> {
             padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
             child: Row(
               children: [
-                if (!_isSelectionMode) ...[
+                if (_isSelectionMode) ...[
-                  IconButton(
-                    onPressed: () => Navigator.pop(context),
-                    icon: Icon(Icons.arrow_back, color: AppTheme.navyBlue),
-                  ),
-                  const SizedBox(width: 4),
-                  Text(
-                    'Thread',
-                    style: GoogleFonts.inter(
-                      fontWeight: FontWeight.w700,
-                      fontSize: 18,
-                      color: AppTheme.textPrimary,
-                    ),
-                  ),
-                  const Spacer(),
-                  IconButton(
-                    onPressed: () => context.go(AppRoutes.homeAlias),
-                    icon: Icon(Icons.home_outlined, color: AppTheme.navyBlue),
-                  ),
-                  IconButton(
-                    onPressed: () {}, // Search - to be implemented or consistent with ThreadedConversationScreen
-                    icon: Icon(Icons.search, color: AppTheme.navyBlue),
-                  ),
-                  IconButton(
-                    onPressed: () => context.go(AppRoutes.secureChat),
-                    icon: Consumer(
-                      builder: (context, ref, child) {
-                        final badge = ref.watch(currentBadgeProvider);
-                        return Badge(
-                          label: Text(badge.messageCount.toString()),
-                          isLabelVisible: badge.messageCount > 0,
-                          backgroundColor: AppTheme.brightNavy,
-                          child: Icon(Icons.chat_bubble_outline, color: AppTheme.navyBlue),
-                        );
-                      },
-                    ),
-                  ),
-                ] else ...[
                   IconButton(
                     onPressed: () => setState(() {
                       _isSelectionMode = false;
@@ -380,7 +347,64 @@ class _TraditionalQuipsSheetState extends ConsumerState<TraditionalQuipsSheet> {
                     icon: const Icon(Icons.delete_outline, color: SojornColors.destructive),
                     onPressed: _bulkDelete,
                   ),
-                ]
+                ] else if (widget.showNavActions) ...[
+                  // Full thread header with nav buttons (used in regular post view)
+                  IconButton(
+                    onPressed: () => Navigator.pop(context),
+                    icon: Icon(Icons.arrow_back, color: AppTheme.navyBlue),
+                  ),
+                  const SizedBox(width: 4),
+                  Text(
+                    'Thread',
+                    style: GoogleFonts.inter(
+                      fontWeight: FontWeight.w700,
+                      fontSize: 18,
+                      color: AppTheme.textPrimary,
+                    ),
+                  ),
+                  const Spacer(),
+                  IconButton(
+                    onPressed: () => context.go(AppRoutes.homeAlias),
+                    icon: Icon(Icons.home_outlined, color: AppTheme.navyBlue),
+                  ),
+                  IconButton(
+                    onPressed: () {},
+                    icon: Icon(Icons.search, color: AppTheme.navyBlue),
+                  ),
+                  IconButton(
+                    onPressed: () => context.go(AppRoutes.secureChat),
+                    icon: Consumer(
+                      builder: (context, ref, child) {
+                        final badge = ref.watch(currentBadgeProvider);
+                        return Badge(
+                          label: Text(badge.messageCount.toString()),
+                          isLabelVisible: badge.messageCount > 0,
+                          backgroundColor: AppTheme.brightNavy,
+                          child: Icon(Icons.chat_bubble_outline, color: AppTheme.navyBlue),
+                        );
+                      },
+                    ),
+                  ),
+                ] else ...[
+                  // Clean Quips-style header: "X Comments" + close X
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 12),
+                      child: Text(
+                        '$_commentCount Comment${_commentCount == 1 ? '' : 's'}',
+                        style: GoogleFonts.inter(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 17,
+                          color: AppTheme.textPrimary,
+                        ),
+                      ),
+                    ),
+                  ),
+                  IconButton(
+                    onPressed: () => Navigator.pop(context),
+                    icon: Icon(Icons.close, color: AppTheme.navyBlue),
+                  ),
+                ],
               ],
             ),
           ),

sojorn_app/lib/widgets/video_comments_sheet.dart

@@ -12,12 +12,15 @@ class VideoCommentsSheet extends StatefulWidget {
   final String postId;
   final int initialCommentCount;
   final VoidCallback? onCommentPosted;
+  /// Set to false for Quips feed (hides Home/Chat/Search nav icons in header)
+  final bool showNavActions;
 
   const VideoCommentsSheet({
     super.key,
     required this.postId,
     this.initialCommentCount = 0,
     this.onCommentPosted,
+    this.showNavActions = true,
   });
 
   @override
@@ -31,6 +34,7 @@ class _VideoCommentsSheetState extends State<VideoCommentsSheet> {
       postId: widget.postId,
       initialQuipCount: widget.initialCommentCount,
       onQuipPosted: widget.onCommentPosted,
+      showNavActions: widget.showNavActions,
     );
   }
 }