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,113 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+
+  interface Category {
+    id: string;
+    name: string;
+    icon: string;
+    description: string;
+    route: string;
+  }
+
+  const categories: Category[] = [
+    {
+      id: "tracks",
+      name: "Tracks",
+      icon: "M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3",
+      description: "All songs",
+      route: "/library/music/tracks",
+    },
+    {
+      id: "artists",
+      name: "Artists",
+      icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
+      description: "Browse by artist",
+      route: "/library/music/artists",
+    },
+    {
+      id: "albums",
+      name: "Albums",
+      icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
+      description: "Browse by album",
+      route: "/library/music/albums",
+    },
+    {
+      id: "playlists",
+      name: "Playlists",
+      icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01",
+      description: "Your playlists",
+      route: "/library/music/playlists",
+    },
+    {
+      id: "genres",
+      name: "Genres",
+      icon: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01",
+      description: "Browse by genre",
+      route: "/library/music/genres",
+    },
+  ];
+
+  function handleCategoryClick(route: string) {
+    goto(route);
+  }
+</script>
+
+<div class="space-y-8">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-3xl font-bold text-white">Music Library</h1>
+      <p class="text-gray-400 mt-1">Choose a category to browse</p>
+    </div>
+    <button
+      onclick={() => goto('/library')}
+      class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
+      title="Back to libraries"
+    >
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Category Grid -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
+    {#each categories as category (category.id)}
+      <button
+        onclick={() => handleCategoryClick(category.route)}
+        class="group relative bg-[var(--color-surface)] rounded-xl p-8 hover:bg-[var(--color-surface-hover)] transition-all duration-200 text-left overflow-hidden"
+      >
+        <!-- Background gradient -->
+        <div
+          class="absolute inset-0 bg-gradient-to-br from-[var(--color-jellyfin)]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"
+        ></div>
+
+        <!-- Content -->
+        <div class="relative z-10">
+          <!-- Icon -->
+          <div class="w-16 h-16 mb-4 rounded-full bg-[var(--color-jellyfin)]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-[var(--color-jellyfin)]" fill="currentColor" viewBox="0 0 24 24">
+              <path d={category.icon} />
+            </svg>
+          </div>
+
+          <!-- Text -->
+          <h2 class="text-2xl font-bold text-white mb-2 group-hover:text-[var(--color-jellyfin)] transition-colors">
+            {category.name}
+          </h2>
+          <p class="text-gray-400 text-sm">
+            {category.description}
+          </p>
+
+          <!-- Arrow indicator -->
+          <div class="mt-4 flex items-center text-[var(--color-jellyfin)] opacity-0 group-hover:opacity-100 transition-opacity">
+            <span class="text-sm font-medium mr-1">Browse</span>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </div>
+      </button>
+    {/each}
+  </div>
+</div>