feat: restore interactive like with session cookies

Since the site is served from huggingface.co/reachy-mini (same origin
as the API), we can use credentials:'include' to send HF session
cookies with like requests. This bypasses the OAuth token limitation
on the POST /api/spaces/{id}/like endpoint.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/InstallModal.jsx

@@ -21,7 +21,7 @@ import ComputerIcon from '@mui/icons-material/Computer';
 import { useAuth } from '../context/AuthContext';
 
 function InstallModal({ open, onClose, app }) {
-  const { isLoggedIn, isSpaceLiked, openSpaceForLike, login } = useAuth();
+  const { isLoggedIn, isSpaceLiked, toggleLike } = useAuth();
   // Detect Linux users
   const isLinux = useMemo(() => {
     if (typeof navigator === 'undefined') return false;
@@ -171,19 +171,14 @@ function InstallModal({ open, onClose, app }) {
               {/* Stats row */}
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 1 }}>
                 <Tooltip
-                  title={isLoggedIn ? 'Like on Hugging Face' : 'Sign in to like this app'}
+                  title={isLoggedIn ? '' : 'Sign in to like this app'}
                   arrow
                   placement="top"
+                  disableHoverListener={isLoggedIn}
                 >
                   <Box
                     component="button"
-                    onClick={() => {
-                      if (!isLoggedIn) {
-                        login();
-                        return;
-                      }
-                      openSpaceForLike(app.id);
-                    }}
+                    onClick={() => toggleLike(app.id)}
                     sx={{
                       display: 'flex',
                       alignItems: 'center',

src/context/AuthContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
 
 const AuthContext = createContext(null);
@@ -47,6 +47,7 @@ export function AuthProvider({ children }) {
   const [likedSpaceIds, setLikedSpaceIds] = useState(new Set());
   const [isLoading, setIsLoading] = useState(true);
   const [oauthConfig, setOauthConfig] = useState(null); // { clientId, scopes }
+  const pendingLikes = useRef(new Set()); // Track in-flight like/unlike requests
 
   // On mount: fetch OAuth config + check if user just completed OAuth redirect
   useEffect(() => {
@@ -123,30 +124,66 @@ export function AuthProvider({ children }) {
   );
 
   /**
-   * Open the HF Space page so the user can like it natively.
-   * HuggingFace intentionally blocks programmatic likes via API tokens
-   * to prevent spam ("To prevent spam usage, it is not possible to like a
-   * repository from a script." — huggingface_hub SDK).
-   * Reading likes works fine; writing requires the native HF session.
+   * Toggle like/unlike with optimistic update.
+   * Uses credentials: 'include' to send HF session cookies — this works when
+   * the page is served from huggingface.co (same-origin with the API).
    */
-  const openSpaceForLike = useCallback(
-    (spaceId) => {
-      if (!spaceId) return;
-      window.open(`${HF_API}/spaces/${spaceId}`, '_blank', 'noopener,noreferrer');
+  const toggleLike = useCallback(
+    async (spaceId) => {
+      if (!user) {
+        login();
+        return;
+      }
+
+      const spaceIdLower = spaceId?.toLowerCase();
+      if (!spaceIdLower) return;
+
+      // Prevent duplicate requests for the same space
+      if (pendingLikes.current.has(spaceIdLower)) return;
+      pendingLikes.current.add(spaceIdLower);
+
+      const wasLiked = likedSpaceIds.has(spaceIdLower);
+      const method = wasLiked ? 'DELETE' : 'POST';
+
+      // Optimistic update
+      setLikedSpaceIds((prev) => {
+        const next = new Set(prev);
+        if (wasLiked) {
+          next.delete(spaceIdLower);
+        } else {
+          next.add(spaceIdLower);
+        }
+        return next;
+      });
+
+      try {
+        const response = await fetch(`${HF_API}/api/spaces/${spaceId}/like`, {
+          method,
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          throw new Error(`Like API returned ${response.status}`);
+        }
+      } catch (err) {
+        console.error(`[Auth] Failed to ${wasLiked ? 'unlike' : 'like'} ${spaceId}:`, err);
+        // Revert optimistic update on error
+        setLikedSpaceIds((prev) => {
+          const reverted = new Set(prev);
+          if (wasLiked) {
+            reverted.add(spaceIdLower);
+          } else {
+            reverted.delete(spaceIdLower);
+          }
+          return reverted;
+        });
+      } finally {
+        pendingLikes.current.delete(spaceIdLower);
+      }
     },
-    []
+    [user, likedSpaceIds, login]
   );
 
-  /**
-   * Re-fetch user's liked spaces (call after user returns from HF page).
-   */
-  const refreshLikes = useCallback(async () => {
-    if (!user?.preferredUsername) return;
-    const likes = await fetchUserLikedSpaces(user.preferredUsername);
-    setLikedSpaceIds(likes);
-    console.log(`[Auth] Refreshed likes: ${likes.size} liked spaces`);
-  }, [user]);
-
   return (
     <AuthContext.Provider
       value={{
@@ -158,8 +195,7 @@ export function AuthProvider({ children }) {
         login,
         logout,
         isSpaceLiked,
-        openSpaceForLike,
-        refreshLikes,
+        toggleLike,
       }}
     >
       {children}

src/pages/Apps.jsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import {
   Box,
   Container,
@@ -30,7 +30,7 @@ import { useAuth } from '../context/AuthContext';
 import InstallModal from '../components/InstallModal';
 
 // App Card Component
-function AppCard({ app, onInstallClick, isLiked, onLikeClick, isLoggedIn }) {
+function AppCard({ app, onInstallClick, isLiked, onToggleLike, isLoggedIn }) {
   const isOfficial = app.isOfficial;
   const isPythonApp = app.extra?.isPythonApp !== false; // Default to true for backwards compatibility
   const cardData = app.extra?.cardData || {};
@@ -175,18 +175,19 @@ function AppCard({ app, onInstallClick, isLiked, onLikeClick, isLoggedIn }) {
           )}
         </Box>
         
-        {/* Likes - Click opens HF Space page to like natively */}
+        {/* Likes - Interactive */}
         <Tooltip
-          title={isLoggedIn ? 'Like on Hugging Face' : 'Sign in to like this app'}
+          title={isLoggedIn ? '' : 'Sign in to like this app'}
           arrow
           placement="top"
+          disableHoverListener={isLoggedIn}
         >
           <Box
             component="button"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              onLikeClick?.(app.id);
+              onToggleLike?.(app.id);
             }}
             sx={{
               display: 'flex',
@@ -333,7 +334,7 @@ function AppCard({ app, onInstallClick, isLiked, onLikeClick, isLoggedIn }) {
 export default function Apps() {
   // Get apps from context (cached globally)
   const { apps, loading, error } = useApps();
-  const { user, isLoggedIn, isOAuthAvailable, login, logout, isSpaceLiked, openSpaceForLike, refreshLikes } = useAuth();
+  const { user, isLoggedIn, isOAuthAvailable, login, logout, isSpaceLiked, toggleLike } = useAuth();
   const [searchQuery, setSearchQuery] = useState('');
   const [officialOnly, setOfficialOnly] = useState(false);
   
@@ -351,30 +352,13 @@ export default function Apps() {
     setSelectedApp(null);
   };
 
-  // Handle like click: if logged in, open HF page; if not, prompt login
-  const handleLikeClick = useCallback(
+  const handleToggleLike = useCallback(
     (spaceId) => {
-      if (!isLoggedIn) {
-        login();
-        return;
-      }
-      openSpaceForLike(spaceId);
+      toggleLike(spaceId);
     },
-    [isLoggedIn, login, openSpaceForLike]
+    [toggleLike]
   );
 
-  // Refresh likes when the tab regains focus (user may have liked on HF)
-  useEffect(() => {
-    if (!isLoggedIn) return;
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        refreshLikes();
-      }
-    };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
-  }, [isLoggedIn, refreshLikes]);
-
   // Filter apps based on search and official toggle
   const filteredApps = useMemo(() => {
     let result = apps;
@@ -714,7 +698,7 @@ export default function Apps() {
                 app={app}
                 onInstallClick={handleInstallClick}
                 isLiked={isSpaceLiked(app.id)}
-                onLikeClick={handleLikeClick}
+                onToggleLike={handleToggleLike}
                 isLoggedIn={isLoggedIn}
               />
             ))}