Standardize Focus Mode Article View & Fix UI

web/src/pages/FocusPage.tsx

@@ -39,10 +39,23 @@ export function FocusPage({ onExit }: FocusPageProps) {
         },
     });
 
+    // Mutation to toggle favorite
+    const toggleFavoriteMutation = useMutation({
+        mutationFn: (id: string) => articlesApi.toggleFavorite(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['articles'] });
+            queryClient.invalidateQueries({ queryKey: ['feeds'] });
+        },
+    });
+
     const handleMarkRead = (id: string) => {
         markReadMutation.mutate(id);
     };
 
+    const handleToggleFavorite = (id: string) => {
+        toggleFavoriteMutation.mutate(id);
+    };
+
     const handleKeep = (id: string) => {
         // Do nothing api-wise, just skip. 
         console.log('Skipped:', id);
@@ -96,6 +109,7 @@ export function FocusPage({ onExit }: FocusPageProps) {
                     articles={deck}
                     onMarkRead={handleMarkRead}
                     onKeep={handleKeep}
+                    onToggleFavorite={handleToggleFavorite}
                     onEmpty={() => setIsComplete(true)}
                 />
             </main>