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,87 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { auth } from "$lib/stores/auth";
+  import { get } from "svelte/store";
+
+  interface Props {
+    itemId: string;
+    imageType?: string;
+    tag?: string;
+    maxWidth?: number;
+    maxHeight?: number;
+    class?: string;
+    alt?: string;
+  }
+
+  let {
+    itemId,
+    imageType = "Primary",
+    tag,
+    maxWidth,
+    maxHeight,
+    class: className = "",
+    alt = "",
+  }: Props = $props();
+
+  let imageUrl = $state<string | null>(null);
+  let loading = $state(true);
+  let error = $state(false);
+
+  async function loadImage() {
+    if (!itemId) {
+      loading = false;
+      return;
+    }
+
+    try {
+      loading = true;
+      error = false;
+
+      // Get repository handle from auth store
+      const authState = get(auth);
+      if (!authState.isAuthenticated) {
+        throw new Error("Not authenticated");
+      }
+      const repository = auth.getRepository();
+      const repositoryHandle = repository.getHandle();
+
+      // Call Rust to get image as base64 data URL
+      const dataUrl = await invoke<string>("image_get_url", {
+        repositoryHandle,
+        request: {
+          itemId,
+          imageType,
+          maxWidth,
+          maxHeight,
+          tag,
+        },
+      });
+
+      // Use data URL directly
+      imageUrl = dataUrl;
+      error = false;
+    } catch (e) {
+      console.error(`Failed to load image ${itemId}:`, e);
+      error = true;
+      imageUrl = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  // Reload image when props change
+  $effect(() => {
+    imageUrl = null;
+    loadImage();
+  });
+</script>
+
+{#if loading}
+  <div class="{className} bg-gray-700 animate-pulse" aria-busy="true" aria-label="Loading image"></div>
+{:else if error}
+  <div class="{className} bg-gray-800 flex items-center justify-center">
+    <span class="text-gray-500 text-xs">Failed to load</span>
+  </div>
+{:else if imageUrl}
+  <img src={imageUrl} {alt} class={className} />
+{/if}