fix(ui): fix favorite button not working on skill detail page

- Change fetcher.submit({}) to fetcher.submit(null) for proper empty POST
- Add type="button" to prevent implicit form submission behavior
- Add error handling to revert optimistic UI on server failure
- Disable button during all non-idle fetcher states to prevent double-clicks
- Make recomputeSkillScores fire-and-forget to avoid blocking response

Author: mrgoonie

apps/web/app/components/favorite-button.tsx

@@ -1,4 +1,5 @@
 import { Heart } from "lucide-react";
+import { useEffect } from "react";
 import { useFetcher } from "react-router";
 
 interface FavoriteButtonProps {
@@ -12,24 +13,28 @@ export function FavoriteButton({
   isFavorited,
   onToggle,
 }: FavoriteButtonProps) {
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<{ favorited?: boolean; error?: string }>();
 
-  const handleClick = () => {
-    fetcher.submit(
-      {},
-      {
-        method: "post",
-        action: `/api/skills/${skillSlug}/favorite`,
-      }
-    );
+  // Revert optimistic UI if server returned an error
+  useEffect(() => {
+    if (fetcher.data?.error) {
+      onToggle?.(!isFavorited);
+    }
+  }, [fetcher.data]);
 
+  const handleClick = () => {
+    fetcher.submit(null, {
+      method: "post",
+      action: `/api/skills/${skillSlug}/favorite`,
+    });
     onToggle?.(!isFavorited);
   };
 
-  const isLoading = fetcher.state === "submitting";
+  const isLoading = fetcher.state !== "idle";
 
   return (
     <button
+      type="button"
       onClick={handleClick}
       disabled={isLoading}
       className="flex items-center gap-2 rounded-lg border border-sx-border bg-sx-bg px-4 py-2 text-sm font-medium transition-colors hover:bg-sx-bg-hover disabled:opacity-50"

apps/web/app/routes/api.skill-favorite.ts

@@ -67,8 +67,10 @@ export async function action({ request, params, context }: ActionFunctionArgs) {
       favorited = true;
     }
 
-    // Recompute leaderboard scores
-    await recomputeSkillScores(db, skill.id);
+    // Recompute leaderboard scores (fire-and-forget to avoid blocking response)
+    recomputeSkillScores(db, skill.id).catch((err) =>
+      console.error("Failed to recompute scores after favorite toggle:", err)
+    );
 
     return Response.json({ favorited });
   } catch (error) {