patrick/sojorn
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
- 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>
This commit is contained in:
Patrick Britton 2026-02-18 08:11:08 -06:00
parent 5b5e89e383
commit 93a2c45a92
13 changed files with 1206 additions and 668 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
go-backend/cmd/api/main.go
View file

@ -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)

12
go-backend/internal/handlers/groups_handler.go
View file

@ -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)
VALUES ($1, $2, $3, $4, $5, $6, $7)
INSERT INTO groups (name, description, category, privacy, created_by, avatar_url)
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") {

16
go-backend/internal/handlers/post_handler.go
View file

@ -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")

16
go-backend/internal/repository/post_repository.go
View file

@ -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 (

10
go-backend/internal/services/feed_algorithm_service.go
View file

@ -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)

134
sojorn_app/lib/providers/reactions_provider.dart Normal file
View file

@ -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 = [
'❤️', '👍', '😂', '😮', '😢', '😡',
'🎉', '🔥', '👏', '🙏', '💯', '🤔',
'😍', '🤣', '😊', '👌', '🙌', '💪',
'🎯', '⭐', '✨', '🌟', '💫', '☀️',
];

905
sojorn_app/lib/screens/quips/feed/quip_video_item.dart
View file

File diff suppressed because it is too large Load diff

156
sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart
View file

@ -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) {
if (metrics is Map<String, dynamic>) {
final val = metrics['like_count'];
if (val is int) return val;
if (val is num) return val.toInt();
static Map<String, int> _parseReactions(dynamic v) {
if (v is Map<String, dynamic>) {
return v.map((k, val) => MapEntry(k, val is int ? val : (val is num ? val.toInt() : 0)));
}
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, int> _likeCounts = {};
final Map<String, Map<String, int>> _reactionCounts = {};
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;
final currentCount = _likeCounts[quip.id] ?? 0;
final next = currentlyLiked ? currentCount - 1 : currentCount + 1;
_likeCounts[quip.id] = next < 0 ? 0 : next;
if (isRemoving) {
currentMine.remove(emoji);
final newCount = (currentCounts[emoji] ?? 1) - 1;
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.unappreciatePost(quip.id);
} else {
await api.appreciatePost(quip.id);
}
await api.toggleReaction(quip.id, emoji);
} catch (_) {
// revert on failure
// Revert on failure
if (!mounted) return;
setState(() {
_liked[quip.id] = currentlyLiked;
_likeCounts[quip.id] =
(_likeCounts[quip.id] ?? 0) + (currentlyLiked ? 1 : -1);
if ((_likeCounts[quip.id] ?? 0) < 0) {
_likeCounts[quip.id] = 0;
}
_reactionCounts[quip.id] = Map<String, int>.from(quip.reactions);
_myReactions[quip.id] = Set<String>.from(quip.myReactions);
});
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,
onCommentPosted: () {
// Optional: handle reload if needed
},
initialCommentCount: quip.commentCount,
showNavActions: false,
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 AlwaysScrollableScrollPhysics(),
physics: const PageScrollPhysics(parent: 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,
likeCount: likeCount,
reactions: _reactionCounts[quip.id] ?? quip.reactions,
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),
),
);
},

4
sojorn_app/lib/services/api_service.dart
View file

@ -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',

482
sojorn_app/lib/widgets/reactions/reaction_picker.dart
View file

@ -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 {
late TabController _tabController;
class _ReactionPickerState extends ConsumerState<ReactionPicker>
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 {
if (_tabOrder.isEmpty || _currentTabIndex >= _tabOrder.length) {
return [];
}
final currentTab = _tabOrder[_currentTabIndex];
return _reactionSets[currentTab] ?? [];
List<String> _filterCurrentTab() {
final package = ref.read(reactionPackageProvider).value;
if (package == null) return [];
final tabOrder = package.tabOrder;
if (_currentTabIndex >= tabOrder.length) return [];
return package.reactionSets[tabOrder[_currentTabIndex]] ?? [];
}
@override
Widget build(BuildContext context) {
if (_isLoading) {
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 packageAsync = ref.watch(reactionPackageProvider);
return packageAsync.when(
loading: () => _buildLoadingDialog(),
error: (_, __) => _buildLoadingDialog(),
data: (package) {
_ensureTabController(package);
if (_tabController == null) return _buildLoadingDialog();
return _buildPicker(package);
},
);
}
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)),
),
);
}
final reactions = widget.reactions ?? (_isSearching ? _filteredReactions : _currentReactions);
child: const Center(child: CircularProgressIndicator()),
),
);
}
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(
children: [
Text(
_isSearching ? 'Search Reactions' : 'Add Reaction',
style: GoogleFonts.inter(
color: AppTheme.navyBlue,
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),
),
Text(
_isSearching ? 'Search Reactions' : 'Add Reaction',
style: GoogleFonts.inter(
color: AppTheme.navyBlue,
fontSize: 16,
fontWeight: FontWeight.w600,
),
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 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,
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) {
return Tab(
text: tabName.toUpperCase(),
);
}).toList(),
tabs: tabOrder
.map((name) => Tab(text: name.toUpperCase()))
.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,
children: _tabOrder.map((tabName) {
final reactions = _reactionSets[tabName] ?? [];
controller: _tabController!,
children: tabOrder.map((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) {
launchUrl(Uri.parse(href));
}
if (href != null) 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),
h2: GoogleFonts.inter(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),
h1: GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.bold,
color: AppTheme.textPrimary),
h2: GoogleFonts.inter(
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/')
? 'asset:$reaction'
: reaction;
// CDN URLs and emoji are passed as-is; local assets get 'asset:' prefix
final result =
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(
emoji,
style: const TextStyle(fontSize: 24),
);
return Text(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) {
return Icon(
Icons.image_not_supported,
size: 24,
color: AppTheme.textSecondary,
);
},
errorBuilder: (context, error, stackTrace) => Icon(
Icons.image_not_supported,
size: 24,
color: AppTheme.textSecondary,
),
);
}
return Image.asset(
imagePath,
width: 32,
height: 32,
errorBuilder: (context, error, stackTrace) {
return Icon(
Icons.image_not_supported,
size: 24,
color: AppTheme.textSecondary,
);
},
errorBuilder: (context, error, stackTrace) => Icon(
Icons.image_not_supported,
size: 24,
color: AppTheme.textSecondary,
),
);
}
}

28
sojorn_app/lib/widgets/reactions/reactions_display.dart
View file

@ -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(
assetPath,
width: size,
height: size,
);
return SvgPicture.asset(assetPath, width: size, height: size);
}
return Image.asset(
assetPath,
@ -264,9 +275,8 @@ class _ReactionIcon extends StatelessWidget {
fit: BoxFit.contain,
);
}
return Text(
reactionId,
style: TextStyle(fontSize: size),
);
// Emoji
return Text(reactionId, style: TextStyle(fontSize: size));
}
}

106
sojorn_app/lib/widgets/traditional_quips_sheet.dart
View file

@ -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),
width: 1
color: AppTheme.egyptianBlue.withValues(alpha: 0.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) ...[
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 ...[
if (_isSelectionMode) ...[
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),
),
],
],
),
),

4
sojorn_app/lib/widgets/video_comments_sheet.dart
View file

@ -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,
);
}
}