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,80 @@
+<script lang="ts">
+  import type { MediaItem, Library } from "$lib/api/types";
+  import MediaCard from "./MediaCard.svelte";
+  import LibraryListView from "./LibraryListView.svelte";
+  import { library, viewMode } from "$lib/stores/library";
+
+  interface Props {
+    items: (MediaItem | Library)[];
+    title?: string;
+    loading?: boolean;
+    showViewToggle?: boolean;
+    forceGrid?: boolean;
+    onItemClick?: (item: MediaItem | Library) => void;
+  }
+
+  let { items, title, loading = false, showViewToggle = true, forceGrid = false, onItemClick }: Props = $props();
+</script>
+
+<div class="space-y-4">
+  <div class="flex items-center justify-between">
+    {#if title}
+      <h2 class="text-xl font-semibold text-white">{title}</h2>
+    {:else}
+      <div></div>
+    {/if}
+
+    {#if showViewToggle && items.length > 0}
+      <div class="flex gap-1">
+        <button
+          onclick={() => library.setViewMode("grid")}
+          class="p-2 rounded transition-colors {$viewMode === 'grid' ? 'bg-[var(--color-jellyfin)] text-white' : 'text-gray-400 hover:bg-white/10 hover:text-white'}"
+          aria-label="Grid view"
+          title="Grid view"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/>
+          </svg>
+        </button>
+        <button
+          onclick={() => library.setViewMode("list")}
+          class="p-2 rounded transition-colors {$viewMode === 'list' ? 'bg-[var(--color-jellyfin)] text-white' : 'text-gray-400 hover:bg-white/10 hover:text-white'}"
+          aria-label="List view"
+          title="List view"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
+          </svg>
+        </button>
+      </div>
+    {/if}
+  </div>
+
+  {#if loading}
+    <div class="flex gap-4 overflow-hidden">
+      {#each Array(6) as _}
+        <div class="w-36 flex-shrink-0 animate-pulse">
+          <div class="aspect-[2/3] bg-[var(--color-surface)] rounded-lg"></div>
+          <div class="mt-2 h-4 bg-[var(--color-surface)] rounded w-3/4"></div>
+          <div class="mt-1 h-3 bg-[var(--color-surface)] rounded w-1/2"></div>
+        </div>
+      {/each}
+    </div>
+  {:else if items.length === 0}
+    <div class="text-center py-12 text-gray-400">
+      <p>No items found</p>
+    </div>
+  {:else if !forceGrid && $viewMode === "list"}
+    <LibraryListView {items} showProgress={true} onItemClick={onItemClick} />
+  {:else}
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+      {#each items as item (item.id)}
+        <MediaCard
+          {item}
+          showProgress={true}
+          onclick={() => onItemClick?.(item)}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>