Update mobile app UI with premium design system

- Add design guidelines to CLAUDE.md
- Redesign navigation with boutique styling
- Add video support to chat with compression
- Update matches/dares/quiz screens with gold/rose accents
- Improve packs browsing with category tabs
- Add SwipeCardPremium component
- Update theme with premium color palette
- Add video cleanup edge function and migration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/mobile/src/store/index.ts

@@ -211,8 +211,18 @@ export const useMatchStore = create<MatchState>((set, get) => ({
             unreadCount: unreadCounts[match.id] || 0
         }));
 
-        const newCount = data.filter((m) => m.is_new).length;
-        set({ matches: data, newMatchesCount: newCount });
+        // Sort: unread messages first, then by most recent
+        const sortedData = data.sort((a, b) => {
+            // First priority: matches with unread messages
+            if (a.unreadCount > 0 && b.unreadCount === 0) return -1;
+            if (a.unreadCount === 0 && b.unreadCount > 0) return 1;
+
+            // Second priority: most recent first
+            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        });
+
+        const newCount = sortedData.filter((m) => m.is_new).length;
+        set({ matches: sortedData, newMatchesCount: newCount });
     },
 
     markAsSeen: async (matchId) => {