First working POC

2026-01-26 22:21:54 +01:00
commit cfddc1edea
255 changed files with 77606 additions and 0 deletions
@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { toggleFavorite } from "$lib/services/favorites";
+  import { haptics } from "$lib/utils/haptics";
+  import { toast } from "$lib/stores/toast";
+
+  interface Props {
+    itemId: string;
+    isFavorite?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+  }
+
+  let { itemId, isFavorite = $bindable(false), size = "md", className = "" }: Props = $props();
+
+  let isLoading = $state(false);
+  let isAnimating = $state(false);
+
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6",
+  };
+
+  async function handleToggle() {
+    if (isLoading) return;
+
+    isLoading = true;
+    isAnimating = true;
+
+    try {
+      const newValue = await toggleFavorite(itemId, isFavorite);
+      isFavorite = newValue;
+
+      // Haptic feedback
+      if (newValue) {
+        haptics.success();
+        toast.show("Added to favorites", "success", 1500);
+      } else {
+        haptics.tap();
+        toast.show("Removed from favorites", "info", 1500);
+      }
+
+      // Reset animation after it completes
+      setTimeout(() => {
+        isAnimating = false;
+      }, 600);
+    } catch (error) {
+      console.error("Failed to toggle favorite:", error);
+      toast.show("Failed to update favorites", "error");
+      isAnimating = false;
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  // Compute button classes
+  const buttonClass = $derived.by(() => {
+    const baseClasses = "p-2 rounded-full transition-all";
+    const colorClasses = isFavorite ? "text-red-500 hover:text-red-400" : "text-gray-400 hover:text-white";
+    const loadingClasses = isLoading ? "opacity-50 cursor-wait" : "";
+    return `${baseClasses} ${colorClasses} ${loadingClasses} ${className}`.trim();
+  });
+
+  // Compute SVG classes
+  const svgClass = $derived.by(() => {
+    const sizeClass = sizeClasses[size];
+    return sizeClass;
+  });
+
+  // Inline animation styles
+  const buttonStyle = $derived(isAnimating ? "animation: bounce-once 0.6s ease-in-out;" : "");
+  const svgStyle = $derived(isAnimating && isFavorite ? "animation: heart-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);" : "");
+</script>
+
+<button
+  onclick={handleToggle}
+  disabled={isLoading}
+  class={buttonClass}
+  style={buttonStyle}
+  title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+  aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+>
+  {#if isFavorite}
+    <!-- Filled heart with scale animation -->
+    <svg
+      class={svgClass}
+      style={svgStyle}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+      />
+    </svg>
+  {:else}
+    <!-- Outline heart -->
+    <svg class={sizeClasses[size]} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+      />
+    </svg>
+  {/if}
+</button>
+
+<style>
+  @keyframes heart-pop {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.3);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes bounce-once {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    25% {
+      transform: translateY(-8px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    75% {
+      transform: translateY(-4px);
+    }
+  }
+</style>