From 827867adfc91fab43ecaa3383c241272fb9a58d6 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 14:46:58 +0100
Subject: [PATCH 01/17] Content category fixes, frontpage and card view
 rendering fixes

---
 package.json                                  |   2 +-
 .../admin/maintenanceManagement.vue           |  48 ++++++-
 .../src/components/home/featuredSlider.vue    |  17 ++-
 .../src/components/releases/albumViewer.vue   |  28 ++++-
 .../src/components/releases/releaseForm.vue   | 118 ++++++++++++++----
 .../renderer/src/plugins/lensService/hooks.ts |   2 +
 packages/renderer/src/plugins/router.ts       |  16 ++-
 packages/renderer/src/views/categoryPage.vue  |   4 +-
 packages/renderer/src/views/releasePage.vue   |  16 ++-
 pnpm-lock.yaml                                |  10 +-
 10 files changed, 216 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index b20bf654..fa258623 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@riffcc/lens-sdk": "^0.1.32",
+    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
     "core-js": "^3.43.0",
diff --git a/packages/renderer/src/components/admin/maintenanceManagement.vue b/packages/renderer/src/components/admin/maintenanceManagement.vue
index 1992d886..13974e53 100644
--- a/packages/renderer/src/components/admin/maintenanceManagement.vue
+++ b/packages/renderer/src/components/admin/maintenanceManagement.vue
@@ -113,7 +113,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useAddReleaseMutation, useEditReleaseMutation, useDeleteReleaseMutation, useAddFeaturedReleaseMutation, useEditFeaturedReleaseMutation, useDeleteFeaturedReleaseMutation } from '/@/plugins/lensService/hooks';
+import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useAddReleaseMutation, useEditReleaseMutation, useDeleteReleaseMutation, useAddFeaturedReleaseMutation, useEditFeaturedReleaseMutation, useDeleteFeaturedReleaseMutation, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
 import { useSnackbarMessage } from '/@/composables/snackbarMessage';
 import type { ReleaseItem } from '/@/types';
 
@@ -128,6 +128,7 @@ const { snackbarMessage, showSnackbar, openSnackbar, closeSnackbar } = useSnackb
 // Queries
 const { data: releases } = useGetReleasesQuery();
 const { data: featuredReleases } = useGetFeaturedReleasesQuery();
+const { data: contentCategories } = useContentCategoriesQuery();
 
 // Mutations
 const addReleaseMutation = useAddReleaseMutation({
@@ -274,6 +275,46 @@ const deleteAllData = async () => {
   }
 };
 
+// Helper function to map category slug to ID
+const getCategoryIdFromSlug = (categorySlug: string): string => {
+  if (!contentCategories.value) return categorySlug;
+  
+  // First check if it's already a valid category ID
+  const existingById = contentCategories.value.find(c => c.id === categorySlug);
+  if (existingById) return categorySlug;
+  
+  // Normalize the input slug
+  const normalizedInput = categorySlug.toLowerCase().trim();
+  
+  // Try exact match with category slugs
+  const exactMatch = contentCategories.value.find(c => 
+    c.categoryId?.toLowerCase() === normalizedInput
+  );
+  if (exactMatch) return exactMatch.id;
+  
+  // Try matching by adding/removing 's' for plural/singular
+  const withS = normalizedInput.endsWith('s') ? normalizedInput : normalizedInput + 's';
+  const withoutS = normalizedInput.endsWith('s') ? normalizedInput.slice(0, -1) : normalizedInput;
+  
+  const pluralMatch = contentCategories.value.find(c => 
+    c.categoryId?.toLowerCase() === withS || c.categoryId?.toLowerCase() === withoutS
+  );
+  if (pluralMatch) return pluralMatch.id;
+  
+  // Try matching with spaces converted to hyphens and vice versa
+  const withHyphens = normalizedInput.replace(/\s+/g, '-');
+  const withSpaces = normalizedInput.replace(/-/g, ' ');
+  
+  const formattedMatch = contentCategories.value.find(c => 
+    c.categoryId?.toLowerCase() === withHyphens || 
+    c.categoryId?.toLowerCase() === withSpaces
+  );
+  if (formattedMatch) return formattedMatch.id;
+  
+  // If nothing matches, return the original (will likely fail, but preserves the error)
+  return categorySlug;
+};
+
 const performImport = async () => {
   if (!importFile.value) return;
 
@@ -293,11 +334,14 @@ const performImport = async () => {
     // Import releases
     for (const release of importData.releases) {
       try {
+        // Map category slug to actual ID
+        const mappedCategoryId = getCategoryIdFromSlug(release.categoryId);
+        
         // Extract the data without the __context
         const releaseData: ReleaseItem = {
           id: release.id,
           name: release.name,
-          categoryId: release.categoryId,
+          categoryId: mappedCategoryId,
           contentCID: release.contentCID,
           thumbnailCID: release.thumbnailCID,
           metadata: release.metadata,
diff --git a/packages/renderer/src/components/home/featuredSlider.vue b/packages/renderer/src/components/home/featuredSlider.vue
index 6735d621..deeb3d28 100644
--- a/packages/renderer/src/components/home/featuredSlider.vue
+++ b/packages/renderer/src/components/home/featuredSlider.vue
@@ -81,8 +81,11 @@
               <h5 class="text-h5 text-sm-h4">
                 {{ featuredItem.name }}
               </h5>
-              <template v-if="['music'].includes(featuredItem.categoryId)">
-                <p class="text-body-2 text-sm-body-1">
+              <template v-if="['music'].includes(getCategorySlug(featuredItem.categoryId))">
+                <p 
+                  v-if="featuredItem.metadata?.['author']"
+                  class="text-body-2 text-sm-body-1"
+                >
                   {{ featuredItem.metadata?.['author'] }}
                 </p>
                 <v-chip
@@ -97,7 +100,7 @@
               </template>
 
               <v-chip-group
-                v-if="['movie'].includes(featuredItem.categoryId)"
+                v-if="['movies'].includes(getCategorySlug(featuredItem.categoryId))"
               >
                 <v-chip
                   v-if="featuredItem.metadata?.['classification']"
@@ -173,6 +176,7 @@ import {parseUrlOrCid} from '/@/utils';
 import {useShowDefederation} from '/@/composables/showDefed';
 import { useSiteColors } from '/@/composables/siteColors';
 import type { ReleaseItem } from '/@/types';
+import { useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
 
 const props = defineProps<{
   promotedFeaturedReleases: ReleaseItem[];
@@ -182,6 +186,13 @@ const {showDefederation} = useShowDefederation();
 const {xs} = useDisplay();
 const slide = ref(0);
 
+const { data: contentCategories } = useContentCategoriesQuery();
+
+const getCategorySlug = (categoryId: string) => {
+  const category = contentCategories.value?.find(c => c.id === categoryId);
+  return category?.categoryId || '';
+};
+
 const previousSlideImage = computed(() => {
   const previousIndex = slide.value === 0 ? props.promotedFeaturedReleases.length - 1 : slide.value - 1;
   return props.promotedFeaturedReleases[previousIndex].metadata?.['cover'] as string | undefined ?? props.promotedFeaturedReleases[previousIndex].thumbnailCID;
diff --git a/packages/renderer/src/components/releases/albumViewer.vue b/packages/renderer/src/components/releases/albumViewer.vue
index dd06c195..012f4435 100644
--- a/packages/renderer/src/components/releases/albumViewer.vue
+++ b/packages/renderer/src/components/releases/albumViewer.vue
@@ -161,13 +161,34 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
   }
   try {
     const ipfsFiles: AudioTrack[] = [];
-    const response = await fetch(url);
+    const response = await fetch(url, { method: 'HEAD' });
     if (!response.ok) {
       throw new Error(`Request failed on fetchIPFSFiles: ${response.status} ${response.statusText}. URL: ${url}`);
     }
 
+    // Check if it's a single audio file by content-type
+    const contentType = response.headers.get('content-type');
+    if (contentType && (contentType.includes('audio/') || contentType.includes('application/octet-stream'))) {
+      // It's a single audio file
+      const contentLength = response.headers.get('content-length');
+      const fileName = props.release.name || 'Unknown Track';
+      
+      ipfsFiles.push({
+        index: 0,
+        album: props.release.name,
+        cid: cid,
+        title: fileName,
+        size: contentLength ? `${(parseInt(contentLength) / 1024 / 1024).toFixed(2)} MB` : 'Unknown',
+      });
+      return ipfsFiles;
+    }
+
+    // Otherwise, try to parse as directory
+    const fullResponse = await fetch(url);
+    const responseText = await fullResponse.text();
+
     if (cid.startsWith('zD')) {
-      const data = await response.json() as {
+      const data = JSON.parse(responseText) as {
         files: {
           title: string;
           cid: string;
@@ -196,9 +217,8 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
 
     }
     else {
-      const htmlText = await response.text();
       const parser = new DOMParser();
-      const doc = parser.parseFromString(htmlText, 'text/html');
+      const doc = parser.parseFromString(responseText, 'text/html');
 
       const ipfsLinks = doc.querySelectorAll<HTMLAnchorElement>('a.ipfs-hash');
       const ipfsSizesData = doc.querySelectorAll<HTMLAnchorElement>(
diff --git a/packages/renderer/src/components/releases/releaseForm.vue b/packages/renderer/src/components/releases/releaseForm.vue
index be12b254..ee9608e5 100644
--- a/packages/renderer/src/components/releases/releaseForm.vue
+++ b/packages/renderer/src/components/releases/releaseForm.vue
@@ -51,27 +51,27 @@
           Please fill out any extra information about the content that might be useful.
         </p>
         <div
-          v-for="[categoryId, {type, description, options}] in Object.entries(selectedContentCategory)"
-          :key="categoryId"
+          v-for="[fieldName, fieldConfig] in Object.entries(selectedContentCategory)"
+          :key="fieldName"
         >
           <v-select
-            v-if="options"
-            :items="options"
-            :label="categoryId"
-            :model-value="String((releaseItem.metadata && releaseItem.metadata[categoryId]) || '')"
-            @update:model-value="(v) => handleChangeMetadataField(categoryId, v)"
+            v-if="fieldConfig.options"
+            :items="fieldConfig.options"
+            :label="formatFieldLabel(fieldName)"
+            :model-value="String((releaseItem.metadata && releaseItem.metadata[fieldName]) || '')"
+            @update:model-value="(v) => handleChangeMetadataField(fieldName, v)"
           />
           <v-text-field
             v-else
-            :label="categoryId"
-            :model-value="String((releaseItem.metadata && releaseItem.metadata[categoryId]) || '')"
-            :type="type"
-            @update:model-value="(v) => handleChangeMetadataField(categoryId, v)"
+            :label="formatFieldLabel(fieldName)"
+            :model-value="String((releaseItem.metadata && releaseItem.metadata[fieldName]) || '')"
+            :type="fieldConfig.type || 'text'"
+            @update:model-value="(v) => handleChangeMetadataField(fieldName, v)"
           >
             <template #append-inner>
               <v-tooltip
                 location="top"
-                :text="description"
+                :text="fieldConfig.description || ''"
               >
                 <template #activator="{props: tooltipProps}">
                   <v-icon
@@ -169,24 +169,50 @@ const contentCategoriesItems = computed(() => contentCategories.value?.map(item
 })));
 
 const selectedContentCategory = computed(() => {
-  let categoryMetadataData: ContentCategoryMetadataField | undefined = undefined;
-  if (contentCategories.value) {
-    const targetItem = contentCategories.value.find(item => item.id === releaseItem.value.categoryId);
-    if (targetItem) {
-      categoryMetadataData = targetItem.metadataSchema;
+  if (!contentCategories.value || !releaseItem.value.categoryId) {
+    console.log('Advanced button disabled: no categories or categoryId', {
+      hasCategories: !!contentCategories.value,
+      categoryId: releaseItem.value.categoryId
+    });
+    return null;
+  }
+  
+  const targetItem = contentCategories.value.find(item => item.id === releaseItem.value.categoryId);
+  if (!targetItem || !targetItem.metadataSchema) {
+    console.log('Advanced button disabled: no matching category or metadataSchema', {
+      targetItem,
+      categoryId: releaseItem.value.categoryId
+    });
+    return null;
+  }
+  
+  // metadataSchema should already be parsed by the query hook
+  // If it's still a string, parse it
+  if (typeof targetItem.metadataSchema === 'string') {
+    try {
+      const parsedSchema = JSON.parse(targetItem.metadataSchema);
+      return parsedSchema;
+    } catch (e) {
+      console.error('Failed to parse metadata schema:', e, targetItem.metadataSchema);
+      return null;
     }
   }
-  return categoryMetadataData;
+  
+  return targetItem.metadataSchema;
 });
 
-const handleChangeMetadataField = (categoryId: string, value: string | null) => {
+const handleChangeMetadataField = (fieldName: string, value: string | null) => {
   if (!releaseItem.value.metadata) {
     releaseItem.value.metadata = {};
   }
-  releaseItem.value.metadata = {
-    ...releaseItem.value.metadata,
-    [categoryId]: value || '',
-  };
+  
+  // Only update fields that are defined in the schema
+  if (selectedContentCategory.value && fieldName in selectedContentCategory.value) {
+    releaseItem.value.metadata = {
+      ...releaseItem.value.metadata,
+      [fieldName]: value || '',
+    };
+  }
 };
 
 onMounted(() => {
@@ -245,6 +271,52 @@ const handleOnSubmit = () => {
   }
 };
 
+const fieldLabelMap: Record<string, string> = {
+  // Music fields
+  description: 'Description',
+  totalSongs: 'Total Songs',
+  totalDuration: 'Total Duration',
+  genres: 'Genres',
+  tags: 'Tags',
+  musicBrainzID: 'MusicBrainz ID',
+  albumTitle: 'Album Title',
+  releaseYear: 'Release Year',
+  releaseType: 'Release Type',
+  fileFormat: 'File Format',
+  bitrate: 'Bitrate',
+  mediaFormat: 'Media Format',
+  
+  // Video fields
+  title: 'Title',
+  duration: 'Duration',
+  resolution: 'Resolution',
+  format: 'Format',
+  uploader: 'Uploader',
+  uploadDate: 'Upload Date',
+  sourceUrl: 'Source URL',
+  
+  // Movie fields
+  TMDBID: 'TMDB ID',
+  IMDBID: 'IMDB ID',
+  classification: 'Classification',
+  
+  // TV Show fields
+  seasons: 'Seasons',
+  totalEpisodes: 'Total Episodes',
+  firstAiredYear: 'First Aired Year',
+  status: 'Status',
+  network: 'Network',
+  averageEpisodeDuration: 'Average Episode Duration',
+  
+  // Common field
+  cover: 'Cover Image CID',
+  author: 'Author',
+};
+
+const formatFieldLabel = (fieldName: string): string => {
+  return fieldLabelMap[fieldName] || fieldName;
+};
+
 const clearForm = () => {
   releaseItem.value = {
     id: '',
diff --git a/packages/renderer/src/plugins/lensService/hooks.ts b/packages/renderer/src/plugins/lensService/hooks.ts
index 09610e5b..737d7197 100644
--- a/packages/renderer/src/plugins/lensService/hooks.ts
+++ b/packages/renderer/src/plugins/lensService/hooks.ts
@@ -217,6 +217,8 @@ export function useEditReleaseMutation(options?: {
       options?.onSuccess?.(response);
       queryClient.invalidateQueries({ queryKey: ['releases'] });
       queryClient.invalidateQueries({ queryKey: ['releases', response.id] });
+      // Also invalidate featured releases in case this release is featured
+      queryClient.invalidateQueries({ queryKey: ['featuredReleases'] });
     },
     onError: (error) => {
       options?.onError?.(error);
diff --git a/packages/renderer/src/plugins/router.ts b/packages/renderer/src/plugins/router.ts
index b43f5858..2c2912d6 100644
--- a/packages/renderer/src/plugins/router.ts
+++ b/packages/renderer/src/plugins/router.ts
@@ -270,7 +270,21 @@ router.beforeEach(async (to, from, next) => {
       const config = PREFETCH_CONFIG[key];
 
       if (result.status === 'fulfilled' && result.value.ok) {
-        const data = await result.value.json();
+        let data = await result.value.json();
+        
+        // Transform the data to match what the query hooks return
+        if (key === 'initialReleases' && Array.isArray(data)) {
+          data = data.map((r: any) => ({
+            ...r,
+            metadata: r.metadata ? JSON.parse(r.metadata) : undefined,
+          }));
+        } else if (key === 'initialContentCategories' && Array.isArray(data)) {
+          data = data.map((c: any) => ({
+            ...c,
+            metadataSchema: c.metadataSchema ? JSON.parse(c.metadataSchema) : undefined,
+          }));
+        }
+        
         queryClient.setQueryData(config.queryKey, data);
         console.log(`✅ [SUCCESS & CACHE SEEDED] ${key}:`, data);
       } else if (result.status === 'fulfilled' && !result.value.ok) {
diff --git a/packages/renderer/src/views/categoryPage.vue b/packages/renderer/src/views/categoryPage.vue
index 7abffaf7..36971634 100644
--- a/packages/renderer/src/views/categoryPage.vue
+++ b/packages/renderer/src/views/categoryPage.vue
@@ -7,7 +7,7 @@
       <!-- Show all releases with infinite scroll -->
       <p class="text-h6 text-sm-h5 font-weight-bold mb-4">{{ pageCategory?.displayName }}</p>
       <infinite-release-list
-        :category-filter="props.category"
+        :category-filter="pageCategory?.id"
         @release-click="(release) => router.push(`/release/${release.id}`)"
       />
     </template>
@@ -93,7 +93,7 @@ const featuredReleasesInCategory = computed<ReleaseItem[]>(() => {
   return releases.value.filter(r =>
     r.id &&
     activeFeaturedReleaseIds.includes(r.id) &&
-    r.categoryId === props.category,
+    r.categoryId === pageCategory.value?.id,
   );
 });
 
diff --git a/packages/renderer/src/views/releasePage.vue b/packages/renderer/src/views/releasePage.vue
index a2e4b216..391f8125 100644
--- a/packages/renderer/src/views/releasePage.vue
+++ b/packages/renderer/src/views/releasePage.vue
@@ -5,11 +5,11 @@
   >
     <template v-if="targetRelease">
       <video-player
-        v-if="['videos', 'movies'].includes(targetRelease.categoryId)"
+        v-if="['videos', 'movies'].includes(categorySlug)"
         :content-cid="targetRelease.contentCID"
       />
       <album-viewer
-        v-else-if="['audio', 'music'].includes(targetRelease.categoryId)"
+        v-else-if="['audio', 'music'].includes(categorySlug)"
         :release="targetRelease"
       ></album-viewer>
     </template>
@@ -43,11 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { watch, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import albumViewer from '/@/components/releases/albumViewer.vue';
 import videoPlayer from '/@/components/releases/videoPlayer.vue';
-import { useGetReleaseQuery } from '/@/plugins/lensService/hooks';
+import { useGetReleaseQuery, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
 
 const props = defineProps<{
   id: string;
@@ -56,6 +56,14 @@ const props = defineProps<{
 const router = useRouter();
 
 const { data: targetRelease, isLoading } = useGetReleaseQuery(props.id);
+const { data: contentCategories } = useContentCategoriesQuery();
+
+// Get the category slug for the release
+const categorySlug = computed(() => {
+  if (!targetRelease.value || !contentCategories.value) return null;
+  const category = contentCategories.value.find(cat => cat.id === targetRelease.value.categoryId);
+  return category?.categoryId || null;
+});
 
 watch(targetRelease, (r) => {
   if (r) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4d83fcb..de51225d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^0.2.3
         version: 0.2.3(esbuild@0.25.5)
       '@riffcc/lens-sdk':
-        specifier: ^0.1.32
-        version: 0.1.32(react-native@0.80.2(@babel/core@7.28.0)(react@19.1.1))
+        specifier: file:../lens-sdk
+        version: file:../lens-sdk(react-native@0.80.2(@babel/core@7.28.0)(react@19.1.1))
       '@tanstack/vue-query':
         specifier: ^5.81.2
         version: 5.81.2(vue@3.5.17(typescript@5.8.3))
@@ -1176,8 +1176,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@riffcc/lens-sdk@0.1.32':
-    resolution: {integrity: sha512-J1wd8/qnmn3iXyZa9EwoeYKla07l5tbMasUyTlQwQbIJFiG0MubUGK2vD/avvjeISANxxP4RM5MLwAiuVOUfsA==}
+  '@riffcc/lens-sdk@file:../lens-sdk':
+    resolution: {directory: ../lens-sdk, type: directory}
 
   '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
@@ -7017,7 +7017,7 @@ snapshots:
       react: 19.1.1
       react-native: 0.80.2(@babel/core@7.28.0)(react@19.1.1)
 
-  '@riffcc/lens-sdk@0.1.32(react-native@0.80.2(@babel/core@7.28.0)(react@19.1.1))':
+  '@riffcc/lens-sdk@file:../lens-sdk(react-native@0.80.2(@babel/core@7.28.0)(react@19.1.1))':
     dependencies:
       '@dao-xyz/borsh': 5.2.3
       '@libp2p/crypto': 5.1.7

From d96636e8ff911c40c8fa8ee1e319e334f20eef21 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 16:11:00 +0100
Subject: [PATCH 02/17] Automatically discover mismatched tag/track names

---
 package.json                                  |   1 +
 packages/main/src/index.ts                    |   3 +
 packages/preload/src/index.ts                 |   3 +-
 .../src/components/releases/albumViewer.vue   | 308 ++++++++++++++++--
 pnpm-lock.yaml                                |  17 +
 5 files changed, 310 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index fa258623..0770c74a 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "electron-updater": "^6.6.2",
     "events": "^3.3.0",
     "is-ipfs": "^8.0.4",
+    "jsmediatags": "^3.9.7",
     "luxon": "^3.6.1",
     "multiformats": "^13.3.7",
     "vue": "^3.5.17",
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 412b16aa..9a3967c8 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -32,6 +32,9 @@ app
       ipcMain.handle('peerbit:add-release', async (_event, releaseData: ReleaseData) =>
         lensService?.addRelease(releaseData),
       );
+      ipcMain.handle('peerbit:edit-release', async (_event, releaseData: ReleaseData) =>
+        lensService?.editRelease(releaseData),
+      );
       ipcMain.handle('peerbit:get-release', async (_event, id: string) =>
         lensService?.getRelease({ id }),
       );
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
index b132d101..466931a6 100644
--- a/packages/preload/src/index.ts
+++ b/packages/preload/src/index.ts
@@ -4,7 +4,7 @@
 
 import { contextBridge, ipcRenderer } from 'electron';
 import { isLinux, isMac, isWindows, platform} from './so';
-import type { ReleaseData, HashResponse, Release } from '@riffcc/lens-sdk';
+import type { ReleaseData, HashResponse, Release, EditInput } from '@riffcc/lens-sdk';
 
 contextBridge.exposeInMainWorld('osInfo', {
   isMac,
@@ -25,6 +25,7 @@ contextBridge.exposeInMainWorld('electronLensService', {
   getPeerId: (): Promise<string> => ipcRenderer.invoke('peerbit:get-peer-id'),
   dial: (address: string): Promise<boolean> => ipcRenderer.invoke('peerbit:dial', address),
   addRelease: (releaseData: ReleaseData): Promise<HashResponse> => ipcRenderer.invoke('peerbit:add-release', releaseData),
+  editRelease: (releaseData: EditInput<ReleaseData>): Promise<HashResponse> => ipcRenderer.invoke('peerbit:edit-release', releaseData),
   getRelease: (id: string): Promise<Release | undefined> => ipcRenderer.invoke('peerbit:get-release', id),
   getLatestReleases: (size?: number): Promise<Release[]> => ipcRenderer.invoke('peerbit:get-latest-releases', size),
 });
diff --git a/packages/renderer/src/components/releases/albumViewer.vue b/packages/renderer/src/components/releases/albumViewer.vue
index 012f4435..4e2c40e7 100644
--- a/packages/renderer/src/components/releases/albumViewer.vue
+++ b/packages/renderer/src/components/releases/albumViewer.vue
@@ -38,11 +38,45 @@
           class="text-center text-md-start"
         >
           <p class="text-h5 text-md-h4 font-weight-medium">{{ props.release.name }}</p>
-          <p>{{ props.release.metadata?.['description'] }}</p>
-          <p>{{ albumFiles.length }} Songs</p>
-          <p>{{ props.release.metadata?.['author'] }} - {{ props.release.metadata?.['releaseYear'] }}</p>
+          <p v-if="metadata?.description">{{ metadata.description }}</p>
+          <p v-if="metadata?.author">{{ metadata.author }}</p>
+          <p>{{ albumFiles.length }} Songs<span v-if="totalDuration"> • {{ totalDuration }}</span></p>
+          <p v-if="metadata?.releaseYear">{{ metadata.releaseYear }}</p>
         </v-col>
       </v-row>
+      
+      <!-- Show ID3 tag warnings for users who can edit -->
+      <v-alert
+        v-if="canEditRelease && trackWarnings.size > 0"
+        type="warning"
+        class="mb-4"
+        variant="outlined"
+      >
+        <div class="d-flex align-center justify-space-between mb-2">
+          <p class="text-subtitle-2 font-weight-bold">ID3 Tag Mismatches Detected:</p>
+          <v-btn
+            color="warning"
+            variant="tonal"
+            size="small"
+            :loading="isFixingTracks"
+            @click="fixAllTrackTitles"
+          >
+            Fix All
+          </v-btn>
+        </div>
+        <v-progress-linear
+          v-if="isFixingTracks"
+          color="warning"
+          indeterminate
+          class="mb-2"
+        ></v-progress-linear>
+        <ul class="ml-4">
+          <li v-for="[index, warning] in trackWarnings" :key="index">
+            Track {{ index + 1 }}: {{ warning }}
+          </li>
+        </ul>
+      </v-alert>
+      
       <v-row>
         <v-list class="pb-10 w-100">
           <v-list-item
@@ -52,7 +86,7 @@
             :min-height="xs ? '48px' : '64px'"
             :class="i === 0 ? 'cursor-pointer border-t border-b' : 'cursor-pointer border-b'"
             :active="i === activeTrack?.index"
-            active-color="primary-accent"
+            color="primary-accent"
             @click="async () => await selectTrack(i)"
           >
             <template #prepend>
@@ -79,9 +113,6 @@
                 </v-sheet>
                 <div class="ml-4">
                   <p class="text-subtitle-2 text-md-subtitle-1">{{ file.title }}</p>
-                  <p class="text-caption text-md-subtitle-2 text-medium-emphasis">
-                    {{ props.release.metadata?.['author'] }}
-                  </p>
                 </div>
               </div>
               <!-- <v-divider class="mt-2"></v-divider> -->
@@ -134,20 +165,88 @@ import {useAudioAlbum} from '/@/composables/audioAlbum';
 import {useFloatingVideo} from '/@/composables/floatingVideo';
 import { parseUrlOrCid } from '/@/utils';
 import type { ReleaseItem } from '/@/types';
+import { useAccountStatusQuery, useEditReleaseMutation } from '/@/plugins/lensService/hooks';
+// @ts-ignore
+import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js';
 
 const props = defineProps<{
   release: ReleaseItem
 }>();
 
+// Track metadata mismatch warnings and ID3 data
+const trackWarnings = ref<Map<number, string>>(new Map());
+const id3TrackData = ref<Map<number, { title: string; artist?: string }>>(new Map());
+const isFixingTracks = ref(false);
+
+// Parse metadata if it's a string
+const metadata = computed(() => {
+  if (typeof props.release.metadata === 'string') {
+    return JSON.parse(props.release.metadata);
+  }
+  return props.release.metadata;
+});
+
+// Calculate total album duration
+const totalDuration = computed(() => {
+  let totalSeconds = 0;
+  
+  albumFiles.value.forEach(track => {
+    if (track.duration) {
+      const [minutes, seconds] = track.duration.split(':').map(Number);
+      if (!isNaN(minutes) && !isNaN(seconds)) {
+        totalSeconds += minutes * 60 + seconds;
+      }
+    }
+  });
+  
+  if (totalSeconds === 0) return '';
+  
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  } else {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+});
+
 const router = useRouter();
 const canBack = computed(() => Boolean(window.history.state.back));
 const {xs} = useDisplay();
 const isLoading = ref(true);
 const trackDownloader = ref();
 
+// Check if user is admin or moderator
+const { data: accountStatus } = useAccountStatusQuery();
+const isAdmin = computed(() => accountStatus.value?.isAdmin || false);
+const isModerator = computed(() => accountStatus.value?.hasRole?.('moderator') || false);
+const canEditRelease = computed(() => {
+  // User can edit if they are admin, moderator, or the original poster
+  return isAdmin.value || 
+         isModerator.value || 
+         (accountStatus.value?.publicKey && props.release.postedBy?.toString() === accountStatus.value.publicKey);
+});
+
 const {albumFiles, handlePlay, activeTrack} = useAudioAlbum();
 const {closeFloatingVideo} = useFloatingVideo();
 
+// Edit release mutation
+const editReleaseMutation = useEditReleaseMutation({
+  onSuccess: () => {
+    console.log('Track metadata updated successfully');
+    trackWarnings.value.clear();
+    id3TrackData.value.clear();
+  },
+  onError: (error) => {
+    console.error('Failed to update track metadata:', error);
+    if (error.message === 'Access denied') {
+      alert('You do not have permission to edit this release. Only the original uploader, moderators, or admins can edit releases.');
+    }
+  }
+});
+
 const selectTrack = async (i: number) => {
   await new Promise(r => setTimeout(r, 200));
   handlePlay(i);
@@ -159,6 +258,19 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
     console.error(`Could not construct a valid IPFS URL for CID: ${cid}`);
     return [];
   }
+  
+  // Check if we have stored track metadata
+  let storedTracks = null;
+  if (metadata.value?.trackMetadata) {
+    try {
+      storedTracks = typeof metadata.value.trackMetadata === 'string' 
+        ? JSON.parse(metadata.value.trackMetadata)
+        : metadata.value.trackMetadata;
+    } catch (e) {
+      console.warn('Failed to parse trackMetadata:', e);
+    }
+  }
+  
   try {
     const ipfsFiles: AudioTrack[] = [];
     const response = await fetch(url, { method: 'HEAD' });
@@ -177,7 +289,9 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
         index: 0,
         album: props.release.name,
         cid: cid,
-        title: fileName,
+        title: storedTracks?.[0]?.title || fileName,
+        artist: storedTracks?.[0]?.artist || metadata.value?.author,
+        duration: storedTracks?.[0]?.duration,
         size: contentLength ? `${(parseInt(contentLength) / 1024 / 1024).toFixed(2)} MB` : 'Unknown',
       });
       return ipfsFiles;
@@ -202,11 +316,14 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
 
       data.files.forEach((file, index) => {
         if (file.cid && file.title && file.size) {
+            const storedTrack = storedTracks?.[index];
             ipfsFiles.push({
                 index: index,
                 album: props.release.name,
                 cid: file.cid,
-                title: file.title.split('.')[0],
+                title: storedTrack?.title || file.title.split('.')[0],
+                artist: storedTrack?.artist || metadata.value?.author,
+                duration: storedTrack?.duration,
                 size: file.size,
             });
         } else {
@@ -238,11 +355,14 @@ async function fetchIPFSFiles(cid: string): Promise<AudioTrack[]> {
 
           if (cid && fileName) {
             if (['flac', 'mp3', 'ogg'].includes(fileName.split('.')[1])) {
+              const storedTrack = storedTracks?.[ipfsFiles.length];
               ipfsFiles.push({
                 index: key,
                 album: props.release.name,
                 cid,
-                title: fileName.split('.')[0],
+                title: storedTrack?.title || fileName.split('.')[0],
+                artist: storedTrack?.artist || metadata.value?.author,
+                duration: storedTrack?.duration,
                 size: fileSize,
               });
             }
@@ -261,6 +381,157 @@ function setTrackToDownload(track: AudioTrack) {
   trackDownloader.value.setTrack(track);
 }
 
+async function fixAllTrackTitles() {
+  isFixingTracks.value = true;
+  
+  try {
+    console.log('Starting fixAllTrackTitles for release:', props.release.id);
+    console.log('Current metadata:', metadata.value);
+    console.log('ID3 track data:', Array.from(id3TrackData.value.entries()));
+    console.log('Account status in fixAllTrackTitles:', {
+      isAdmin: isAdmin.value,
+      isModerator: isModerator.value,
+      accountStatus: accountStatus.value,
+      canEditRelease: canEditRelease.value
+    });
+    
+    // Build updated track metadata from ID3 data
+    const updatedTracks = albumFiles.value.map((track, index) => {
+      const id3Data = id3TrackData.value.get(index);
+      if (id3Data?.title) {
+        return {
+          title: id3Data.title,
+          artist: id3Data.artist || track.artist,
+          duration: track.duration
+        };
+      }
+      return {
+        title: track.title,
+        artist: track.artist,
+        duration: track.duration
+      };
+    });
+    
+    console.log('Updated tracks:', updatedTracks);
+    
+    // Update the release metadata
+    const updatedMetadata = {
+      ...metadata.value,
+      trackMetadata: JSON.stringify(updatedTracks)
+    };
+    
+    console.log('Updated metadata to save:', updatedMetadata);
+    
+    // Save the updated release
+    const mutationPayload = {
+      id: props.release.id,
+      postedBy: props.release.postedBy,
+      siteAddress: props.release.siteAddress,
+      name: props.release.name,
+      categoryId: props.release.categoryId,
+      contentCID: props.release.contentCID,
+      thumbnailCID: props.release.thumbnailCID,
+      metadata: updatedMetadata
+    };
+    
+    console.log('Mutation payload:', mutationPayload);
+    console.log('postedBy type:', typeof props.release.postedBy);
+    console.log('postedBy value:', props.release.postedBy);
+    
+    const result = await editReleaseMutation.mutateAsync(mutationPayload);
+    console.log('Mutation result:', result);
+  } catch (error) {
+    console.error('Error in fixAllTrackTitles:', error);
+  } finally {
+    isFixingTracks.value = false;
+  }
+}
+
+function formatTime(seconds: number): string {
+  if (!seconds || isNaN(seconds)) return '';
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+async function loadTrackMetadataAndVerify() {
+  // Load durations for all tracks, and ID3 tags only for admins
+  const updatedTracks = await Promise.all(
+    albumFiles.value.map(async (track, index) => {
+      try {
+        const url = parseUrlOrCid(track.cid);
+        
+        // Load audio metadata for duration if not already stored
+        if (!track.duration) {
+          const audio = new Audio();
+          audio.crossOrigin = 'anonymous';
+          audio.src = url;
+          
+          const trackWithDuration = await new Promise<AudioTrack>((resolve) => {
+            audio.addEventListener('loadedmetadata', () => {
+              resolve({
+                ...track,
+                duration: formatTime(audio.duration)
+              });
+            });
+            
+            audio.addEventListener('error', () => {
+              console.warn(`Failed to load duration for track: ${track.title}`);
+              resolve(track); // Return track without duration on error
+            });
+            
+            // Timeout after 10 seconds
+            setTimeout(() => {
+              audio.src = ''; // Cancel loading
+              resolve(track);
+            }, 10000);
+          });
+          
+          track = trackWithDuration;
+        }
+        
+        // Only check ID3 tags if user can edit the release
+        if (canEditRelease.value) {
+          return new Promise<AudioTrack>((resolve) => {
+            jsmediatags.read(url, {
+              onSuccess: (tag) => {
+                const tags = tag.tags;
+                console.log('ID3 tags for track:', track.title, tags);
+                
+                // Store ID3 data
+                if (tags.title || tags.artist) {
+                  id3TrackData.value.set(index, {
+                    title: tags.title,
+                    artist: tags.artist
+                  });
+                }
+                
+                // Check for mismatches
+                if (tags.title && tags.title !== track.title) {
+                  trackWarnings.value.set(index, `ID3 title "${tags.title}" doesn't match stored title "${track.title}"`);
+                }
+                
+                resolve(track); // Keep stored data, just log warnings
+              },
+              onError: (error) => {
+                console.warn(`Failed to read ID3 tags for ${track.title}:`, error);
+                resolve(track);
+              }
+            });
+          });
+        }
+        
+        return track;
+      } catch (error) {
+        console.warn(`Error loading metadata for track: ${track.title}`, error);
+        return track;
+      }
+    })
+  );
+  
+  albumFiles.value = updatedTracks;
+}
+
 onMounted(async () => {
   closeFloatingVideo();
   // Only load the audio tracks if they are not currently playing or if the active track's album is different from the browsed album.
@@ -269,17 +540,12 @@ onMounted(async () => {
     activeTrack.value = undefined;
     const ipfsFiles = await fetchIPFSFiles(props.release.contentCID);
     albumFiles.value = ipfsFiles;
+    
+    // Load track metadata after initial files are loaded
+    isLoading.value = false; // Show content immediately
+    loadTrackMetadataAndVerify(); // Load metadata and verify in background
+  } else {
+    isLoading.value = false;
   }
-  isLoading.value = false;
-
-  // let _albumFiles: albumFile[] = [];
-  // ipfsFiles.forEach((ipfsFile) => {
-  //   const audio = new Audio();
-  //   audio.crossOrigin = 'anonymous';
-  //   audio.src = `https://${IPFS_GATEWAY}/ipfs/${ipfsFile.cid}`;
-  //   audio.addEventListener('loadedmetadata', () => {
-  //     _albumFiles.push({ name: ipfsFile.name, cid: ipfsFile.cid, duration: formatTime(audio.duration)});
-  //   });
-  // });
 });
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de51225d..41e8538e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       is-ipfs:
         specifier: ^8.0.4
         version: 8.0.4
+      jsmediatags:
+        specifier: ^3.9.7
+        version: 3.9.7
       luxon:
         specifier: ^3.6.1
         version: 3.6.1
@@ -3428,6 +3431,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsmediatags@3.9.7:
+    resolution: {integrity: sha512-xCAO8C3li3t5hYkXqn8iv8zQQUB4T1QqRN2aSONHMls21ICdEvXi4xtb6W70/fAFYSDwMHd32hIqvo4YuXoNcQ==}
+    engines: {node: '>=4.0.0'}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -5345,6 +5352,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  xhr2@0.1.4:
+    resolution: {integrity: sha512-3QGhDryRzTbIDj+waTRvMBe8SyPhW79kz3YnNb+HQt/6LPYQT3zT3Jt0Y8pBofZqQX26x8Ecfv0FXR72uH5VpA==}
+    engines: {node: '>= 0.6'}
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -9690,6 +9701,10 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  jsmediatags@3.9.7:
+    dependencies:
+      xhr2: 0.1.4
+
   json-buffer@3.0.1: {}
 
   json-parse-better-errors@1.0.2: {}
@@ -11849,6 +11864,8 @@ snapshots:
 
   ws@8.18.3: {}
 
+  xhr2@0.1.4: {}
+
   xml-name-validator@4.0.0: {}
 
   xmlbuilder@15.1.1: {}

From f84f827f822df7c9296d3e65d9e147c9a7225cf9 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 16:42:12 +0100
Subject: [PATCH 03/17] Match categories by UUID on frontpage

---
 packages/renderer/src/views/homePage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/renderer/src/views/homePage.vue b/packages/renderer/src/views/homePage.vue
index e5c6389c..e59fb896 100644
--- a/packages/renderer/src/views/homePage.vue
+++ b/packages/renderer/src/views/homePage.vue
@@ -131,7 +131,8 @@ const activeSections = computed(() => {
   return contentCategories.value
     .filter(category => category.featured)
     .map(featuredCategory => {
-      const items = releasesByCategory.get(featuredCategory.categoryId) || [];
+      // Use the category's ID (UUID) to match releases, not the slug
+      const items = releasesByCategory.get(featuredCategory.id) || [];
       return {
         id: featuredCategory.categoryId,
         title: featuredCategory.categoryId === 'tv-shows' ? featuredCategory.displayName : `Featured ${featuredCategory.displayName}`,

From b5dcd1d8e00d1bf4d710ae13ab53821e6bf96796 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Fri, 1 Aug 2025 19:54:43 +0100
Subject: [PATCH 04/17] Docker improvements

---
 .browserslistrc             | 2 +-
 .claude/settings.local.json | 8 +++++++-
 Dockerfile                  | 9 ++++++---
 lens-sdk                    | 1 +
 package.json                | 1 +
 pnpm-lock.yaml              | 3 +++
 6 files changed, 19 insertions(+), 5 deletions(-)
 create mode 120000 lens-sdk

diff --git a/.browserslistrc b/.browserslistrc
index 39891dff..8e4ca0f9 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1 +1 @@
-Chrome 132
\ No newline at end of file
+Chrome 124
\ No newline at end of file
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 2029c429..47e37527 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -18,5 +18,11 @@
       "Bash(pnpm typecheck:*)"
     ],
     "deny": []
-  }
+  },
+  "enabledMcpjsonServers": [
+    "playwright",
+    "deepwiki"
+  ],
+  "enableAllProjectMcpServers": true,
+  "$schema": "https://json.schemastore.org/claude-code-settings.json"
 }
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index d8e4a6e2..2124faa3 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,13 +14,16 @@ WORKDIR /app
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 
 # Install dependencies
-RUN pnpm install --frozen-lockfile --ignore-scripts
+RUN pnpm install --frozen-lockfile --ignore-scripts --unsafe-perm
 
 # Copy source code
 COPY . .
 
+# Generate Electron vendors file
+RUN node scripts/update-electron-vendors.mjs
+
 # Build the web version
-RUN pnpm compile:web
+RUN pnpm build
 
 # Production stage
 FROM nginx:alpine
@@ -43,4 +46,4 @@ RUN echo 'server { \
 EXPOSE 80
 
 # Start nginx
-CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/lens-sdk b/lens-sdk
new file mode 120000
index 00000000..f3b70753
--- /dev/null
+++ b/lens-sdk
@@ -0,0 +1 @@
+../lens-sdk
\ No newline at end of file
diff --git a/package.json b/package.json
index 0770c74a..e04547c5 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@riffcc/lens-sdk": "file:../lens-sdk",
+    "@multiformats/multiaddr": "^12.5.1",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
     "core-js": "^3.43.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 41e8538e..38b25373 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@esbuild-plugins/node-globals-polyfill':
         specifier: ^0.2.3
         version: 0.2.3(esbuild@0.25.5)
+      '@multiformats/multiaddr':
+        specifier: ^12.5.1
+        version: 12.5.1
       '@riffcc/lens-sdk':
         specifier: file:../lens-sdk
         version: file:../lens-sdk(react-native@0.80.2(@babel/core@7.28.0)(react@19.1.1))

From 7bdfaf1b9ab601a6518bdf0005a0f4f05aac88a7 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 09:21:44 +0100
Subject: [PATCH 05/17] Docker fixes

---
 .claude/settings.local.json     |  9 +++++----
 Dockerfile => docker/Dockerfile | 12 ++----------
 docker/nginx.conf               | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 14 deletions(-)
 rename Dockerfile => docker/Dockerfile (74%)
 create mode 100644 docker/nginx.conf

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 47e37527..65f4c55c 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/claude-code-settings.json",
   "permissions": {
     "allow": [
       "Bash(docker build:*)",
@@ -15,14 +16,14 @@
       "Bash(pnpm run lint:*)",
       "WebFetch(domain:opencollective.com)",
       "Bash(pnpm i:*)",
-      "Bash(pnpm typecheck:*)"
+      "Bash(pnpm typecheck:*)",
+      "mcp__playwright__browser_navigate"
     ],
     "deny": []
   },
+  "enableAllProjectMcpServers": true,
   "enabledMcpjsonServers": [
     "playwright",
     "deepwiki"
-  ],
-  "enableAllProjectMcpServers": true,
-  "$schema": "https://json.schemastore.org/claude-code-settings.json"
+  ]
 }
\ No newline at end of file
diff --git a/Dockerfile b/docker/Dockerfile
similarity index 74%
rename from Dockerfile
rename to docker/Dockerfile
index 2124faa3..3f03bc8f 100644
--- a/Dockerfile
+++ b/docker/Dockerfile
@@ -31,16 +31,8 @@ FROM nginx:alpine
 # Copy built files from builder stage
 COPY --from=builder /app/packages/renderer/dist/web /usr/share/nginx/html
 
-# Copy nginx config if needed for SPA routing
-RUN echo 'server { \
-    listen 80; \
-    server_name localhost; \
-    root /usr/share/nginx/html; \
-    index index.html; \
-    location / { \
-        try_files $uri $uri/ /index.html; \
-    } \
-}' > /etc/nginx/conf.d/default.conf
+# Copy custom nginx config for SPA routing and proper MIME types
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 
 # Expose port 80
 EXPOSE 80
diff --git a/docker/nginx.conf b/docker/nginx.conf
new file mode 100644
index 00000000..65ef755e
--- /dev/null
+++ b/docker/nginx.conf
@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Static assets - serve directly or 404
+    location ~* \.(js|css|wasm|png|jpg|jpeg|gif|ico|svg|webp|json|txt|xml|webmanifest)$ {
+        try_files $uri =404;
+    }
+
+    # SPA fallback - only for routes, not assets
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
\ No newline at end of file

From ae72fce6df978ec2b1dd33b55bc2ef9b8a5edde8 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 17:38:04 +0100
Subject: [PATCH 06/17] Rebase UI fixes

---
 .gitignore   | 3 +++
 package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index 420b4627..c05fcf24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,6 @@ playwright-report/
 .electron-vendors.cache.json
 
 *.txt
+
+# lens-sdk
+lens-sdk
diff --git a/package.json b/package.json
index e04547c5..1cb72cae 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@riffcc/lens-sdk": "file:../lens-sdk",
     "@multiformats/multiaddr": "^12.5.1",
+    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
     "core-js": "^3.43.0",

From fe938ec1ffec0cb0fb57245e0bc1c4aa0207b0af Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 17:36:01 +0100
Subject: [PATCH 07/17] Improved releases view - CSS grid

---
 .claude/settings.local.json                   | 29 -------
 .gitignore                                    |  4 +
 .../components/misc/infiniteReleaseList.vue   | 87 +++++--------------
 3 files changed, 25 insertions(+), 95 deletions(-)
 delete mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index 65f4c55c..00000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/claude-code-settings.json",
-  "permissions": {
-    "allow": [
-      "Bash(docker build:*)",
-      "Bash(pnpm test:*)",
-      "Bash(grep:*)",
-      "WebFetch(domain:deepwiki.com)",
-      "Bash(grep:*)",
-      "Bash(rg:*)",
-      "Bash(pnpm build:*)",
-      "Bash(rm:*)",
-      "Bash(find:*)",
-      "Bash(ls:*)",
-      "Bash(pnpm build:*)",
-      "Bash(pnpm run lint:*)",
-      "WebFetch(domain:opencollective.com)",
-      "Bash(pnpm i:*)",
-      "Bash(pnpm typecheck:*)",
-      "mcp__playwright__browser_navigate"
-    ],
-    "deny": []
-  },
-  "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "playwright",
-    "deepwiki"
-  ]
-}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index c05fcf24..e4222e59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,5 +48,9 @@ playwright-report/
 
 *.txt
 
+<<<<<<< HEAD
 # lens-sdk
 lens-sdk
+=======
+.claude
+>>>>>>> a0c28db (Improved releases view - CSS grid)
diff --git a/packages/renderer/src/components/misc/infiniteReleaseList.vue b/packages/renderer/src/components/misc/infiniteReleaseList.vue
index 306b5c35..8c1bf61d 100644
--- a/packages/renderer/src/components/misc/infiniteReleaseList.vue
+++ b/packages/renderer/src/components/misc/infiniteReleaseList.vue
@@ -16,32 +16,16 @@
     </v-sheet>
 
     <template v-else>
-      <div class="releases-wrapper">
-        <v-row
-          dense
-          justify="center"
-        >
-          <v-col
+      <div class="grid-container">
+        <div class="releases-grid">
+          <content-card
             v-for="item in visibleReleases"
             :key="item.id"
-            cols="auto"
-          >
-            <content-card
-              :item="item"
-              cursor-pointer
-              @click="$emit('release-click', item)"
-            />
-          </v-col>
-
-          <!-- Lightweight placeholder tiles -->
-          <v-col
-            v-for="n in placeholderCount"
-            :key="`placeholder-${n}`"
-            cols="auto"
-          >
-            <div style="width: 15rem; height: 1px;"></div>
-          </v-col>
-        </v-row>
+            :item="item"
+            cursor-pointer
+            @click="$emit('release-click', item)"
+          />
+        </div>
       </div>
 
       <v-sheet
@@ -58,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref } from 'vue';
 import type { ReleaseItem } from '/@/types';
 import ContentCard from './contentCard.vue';
 import { useGetReleasesQuery } from '/@/plugins/lensService/hooks';
@@ -77,26 +61,12 @@ defineEmits<{
 // Number of items to show per "page"
 const PAGE_SIZE = props.pageSize || 60; // Show many items to fill ultrawide screens
 const currentPage = ref(1);
-const windowWidth = ref(window.innerWidth);
 
 // Fetch releases with the configured batch size (100)
 const { data: releases, isLoading } = useGetReleasesQuery({
   searchOptions: props.searchOptions,
 });
 
-// Track window resize
-const updateWidth = () => {
-  windowWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-  window.addEventListener('resize', updateWidth);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateWidth);
-});
-
 // Filter releases by category if needed
 const filteredReleases = computed(() => {
   if (!releases.value) return [];
@@ -118,25 +88,6 @@ const totalCount = computed(() => filteredReleases.value.length);
 const visibleCount = computed(() => visibleReleases.value.length);
 const hasMore = computed(() => visibleCount.value < totalCount.value);
 
-// Calculate placeholders for even rows
-const placeholderCount = computed(() => {
-  if (visibleCount.value === 0) return 0;
-
-  // Use reactive window width
-  const containerPadding = 32; // 1rem * 2
-  const containerWidth = windowWidth.value - containerPadding;
-  const cardWidth = 240; // 15rem for music cards
-  const gap = 12; // Vuetify dense gap
-
-  // Calculate how many cards fit in a row
-  const itemsPerRow = Math.floor((containerWidth + gap) / (cardWidth + gap));
-
-  // Calculate how many items are in the last row
-  const itemsInLastRow = visibleCount.value % itemsPerRow;
-
-  // If last row is incomplete, add placeholders
-  return itemsInLastRow === 0 ? 0 : itemsPerRow - itemsInLastRow;
-});
 
 
 const loadMore = () => {
@@ -157,18 +108,22 @@ const onIntersect = (isIntersecting: boolean) => {
   width: 100%;
 }
 
-.releases-wrapper {
-  margin: 0 auto;
-  padding: 0 1rem;
+.grid-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.releases-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
+  gap: 0.5rem;
+  justify-content: start;
+  max-width: 100%;
 }
 
 /* Disable all transitions for instant appearance */
 .infinite-release-list * {
   transition: none !important;
 }
-
-/* Ensure v-col doesn't have any fade-in effects */
-.infinite-release-list .v-col {
-  animation: none !important;
-}
 </style>

From 277c1be2f1cb7aa113078ed950e70280565dbc5b Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sun, 3 Aug 2025 00:08:40 +0100
Subject: [PATCH 08/17] Full UI redesign

---
 packages/renderer/src/App.vue                 | 141 ++++++-
 .../src/components/gamepad/gamepadButton.vue  | 102 +++++
 .../src/components/gamepad/gamepadHints.vue   | 128 +++++++
 .../src/components/home/featuredSlider.vue    |  10 +
 .../src/components/layout/gamepadNavBar.vue   | 166 ++++++++
 .../src/components/misc/contentCard.vue       |   4 +-
 .../src/components/releases/audioPlayer.vue   |  35 +-
 .../src/components/releases/videoPlayer.vue   | 239 +++++++++++-
 .../renderer/src/composables/floatingVideo.ts |   7 +
 .../renderer/src/composables/useGamepad.ts    | 242 ++++++++++++
 .../src/composables/useGamepadNavigation.ts   | 356 ++++++++++++++++++
 packages/renderer/src/plugins/vuetify.ts      |   7 +
 packages/renderer/src/styles/gamepad.scss     | 153 ++++++++
 packages/renderer/src/styles/main.scss        |   3 +
 packages/renderer/src/views/releasePage.vue   |   2 +
 15 files changed, 1573 insertions(+), 22 deletions(-)
 create mode 100644 packages/renderer/src/components/gamepad/gamepadButton.vue
 create mode 100644 packages/renderer/src/components/gamepad/gamepadHints.vue
 create mode 100644 packages/renderer/src/components/layout/gamepadNavBar.vue
 create mode 100644 packages/renderer/src/composables/useGamepad.ts
 create mode 100644 packages/renderer/src/composables/useGamepadNavigation.ts
 create mode 100644 packages/renderer/src/styles/gamepad.scss

diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 729db198..51b79a68 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -14,8 +14,9 @@
     </v-sheet>
   </v-container>
   <v-app v-else>
-    <app-bar />
-    <v-main min-height="100vh">
+    <div class="app-header-border"></div>
+    <gamepad-nav-bar />
+    <v-main min-height="100vh" class="mt-12">
       <router-view />
     </v-main>
     <audio-player v-if="activeTrack"></audio-player>
@@ -23,8 +24,16 @@
       v-if="floatingVideoSource"
       floating
       :content-cid="floatingVideoSource"
+      :release-id="floatingVideoRelease?.id"
+      :release-name="floatingVideoRelease?.name"
     ></video-player>
     <app-footer />
+    <gamepad-hints :gamepad-state="gamepadState" />
+    <div 
+      v-show="showCursor"
+      id="gamepad-cursor"
+      class="gamepad-cursor"
+    ></div>
   </v-app>
 </template>
 
@@ -32,22 +41,28 @@
 import { onKeyStroke } from '@vueuse/core';
 import { ref, watchEffect, onMounted } from 'vue';
 
-import appBar from '/@/components/layout/appBar.vue';
 import appFooter from '/@/components/layout/appFooter.vue';
+import GamepadNavBar from '/@/components/layout/gamepadNavBar.vue';
 import audioPlayer from '/@/components/releases/audioPlayer.vue';
 import videoPlayer from '/@/components/releases/videoPlayer.vue';
+import GamepadHints from '/@/components/gamepad/gamepadHints.vue';
 
 import { useAudioAlbum } from '/@/composables/audioAlbum';
 import { useFloatingVideo } from '/@/composables/floatingVideo';
 import { useShowDefederation } from '/@/composables/showDefed';
 import { useLensInitialization } from '/@/composables/lensInitialization';
+import { useGamepad } from '/@/composables/useGamepad';
+import { useGamepadNavigation } from '/@/composables/useGamepadNavigation';
 import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useContentCategoriesQuery } from './plugins/lensService';
 
 const { showDefederation } = useShowDefederation();
 const { activeTrack } = useAudioAlbum();
-const { floatingVideoSource } = useFloatingVideo();
+const { floatingVideoSource, floatingVideoRelease } = useFloatingVideo();
 
 const { isLensReady, initLensService } = useLensInitialization();
+const { gamepadState } = useGamepad();
+const { showCursor } = useGamepadNavigation();
+
 const MAGIC_KEY = 'magicmagic';
 
 const yetToType = ref(MAGIC_KEY);
@@ -98,3 +113,121 @@ const { data: contentCategories } = useContentCategoriesQuery({
   enabled: isLensReady,
 });
 </script>
+
+<style>
+.app-header-border {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%,
+    rgba(138, 43, 226, 0) 10%,
+    rgba(138, 43, 226, 0.4) 25%,
+    rgba(138, 43, 226, 0.8) 40%,
+    rgba(138, 43, 226, 0.4) 55%,
+    rgba(138, 43, 226, 0) 70%,
+    transparent 80%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  z-index: 1000;
+  animation: gentleFlow 30s ease-in-out infinite;
+  filter: blur(0.5px);
+}
+
+@keyframes gentleFlow {
+  0% {
+    background-position: 0% 50%;
+    opacity: 0.6;
+  }
+  25% {
+    background-position: 50% 50%;
+    opacity: 0.8;
+  }
+  50% {
+    background-position: 100% 50%;
+    opacity: 0.7;
+  }
+  75% {
+    background-position: 50% 50%;
+    opacity: 0.9;
+  }
+  100% {
+    background-position: 0% 50%;
+    opacity: 0.6;
+  }
+}
+
+/* Add a subtle glow that follows the animation */
+.app-header-border::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  background: linear-gradient(180deg, 
+    rgba(138, 43, 226, 0.2) 0%,
+    rgba(138, 43, 226, 0.1) 30%,
+    transparent 100%
+  );
+  animation: gentleGlow 30s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes gentleGlow {
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.gamepad-cursor {
+  position: fixed;
+  width: 24px;
+  height: 24px;
+  border: 3px solid #8a2be2;
+  border-radius: 50%;
+  background: rgba(138, 43, 226, 0.3);
+  pointer-events: none;
+  z-index: 10000;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.2s;
+  box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
+}
+
+/* Global gamepad focus styles */
+.gamepad-focused {
+  position: relative !important;
+  z-index: 10 !important;
+  transition: all 0.2s ease !important;
+}
+
+/* Ensure pure black backgrounds */
+.v-application {
+  background: #000000 !important;
+}
+
+.v-main {
+  background: #000000 !important;
+}
+
+/* Remove any gray backgrounds */
+.v-sheet {
+  background: transparent !important;
+}
+
+/* Content cards should have subtle borders for OLED */
+.content-card {
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: all 0.3s ease;
+}
+
+.content-card:hover {
+  border-color: rgba(138, 43, 226, 0.3);
+}
+</style>
diff --git a/packages/renderer/src/components/gamepad/gamepadButton.vue b/packages/renderer/src/components/gamepad/gamepadButton.vue
new file mode 100644
index 00000000..c78d49ad
--- /dev/null
+++ b/packages/renderer/src/components/gamepad/gamepadButton.vue
@@ -0,0 +1,102 @@
+<template>
+  <span class="gamepad-button" :class="type">
+    {{ buttonDisplay }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  type: 'xbox' | 'playstation' | 'switch' | 'generic';
+  button: string;
+}>();
+
+const buttonMappings = {
+  xbox: {
+    a: 'A',
+    b: 'B',
+    x: 'X',
+    y: 'Y',
+    lb: 'LB',
+    rb: 'RB',
+    lt: 'LT',
+    rt: 'RT',
+    start: 'Menu',
+    select: 'View',
+  },
+  playstation: {
+    a: '✕',
+    b: '○',
+    x: '□',
+    y: '△',
+    lb: 'L1',
+    rb: 'R1',
+    lt: 'L2',
+    rt: 'R2',
+    start: 'Options',
+    select: 'Share',
+  },
+  switch: {
+    a: 'B',
+    b: 'A',
+    x: 'Y',
+    y: 'X',
+    lb: 'L',
+    rb: 'R',
+    lt: 'ZL',
+    rt: 'ZR',
+    start: '+',
+    select: '-',
+  },
+  generic: {
+    a: '1',
+    b: '2',
+    x: '3',
+    y: '4',
+    lb: 'L1',
+    rb: 'R1',
+    lt: 'L2',
+    rt: 'R2',
+    start: 'Start',
+    select: 'Select',
+  },
+};
+
+const buttonDisplay = computed(() => {
+  return buttonMappings[props.type][props.button as keyof typeof buttonMappings.xbox] || props.button;
+});
+</script>
+
+<style scoped>
+.gamepad-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  background: rgba(138, 43, 226, 0.2);
+  border: 1px solid rgba(138, 43, 226, 0.6);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.gamepad-button.playstation {
+  font-family: Arial, sans-serif;
+}
+
+.gamepad-button.xbox {
+  border-radius: 50%;
+  min-width: 24px;
+  padding: 0;
+}
+
+.gamepad-button.switch {
+  border-radius: 50%;
+  min-width: 24px;
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/gamepad/gamepadHints.vue b/packages/renderer/src/components/gamepad/gamepadHints.vue
new file mode 100644
index 00000000..4e3a26c7
--- /dev/null
+++ b/packages/renderer/src/components/gamepad/gamepadHints.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-fade-transition>
+    <v-sheet
+      v-if="gamepadState.connected && showHints"
+      color="transparent"
+      class="gamepad-hints"
+    >
+      <div class="hint-container">
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="a"
+          />
+          Select
+        </span>
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="b"
+          />
+          Back
+        </span>
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="x"
+          />
+          Stop
+        </span>
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="y"
+          />
+          Filter
+        </span>
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="start"
+          />
+          Menu
+        </span>
+        <span class="hint">
+          L3/R3 Play/Pause
+        </span>
+        <span class="hint">
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="lb"
+          />
+          /
+          <gamepad-button 
+            :type="gamepadState.type" 
+            button="rb"
+          />
+          Tabs
+        </span>
+        <span class="hint">
+          <v-icon size="small">gamepad</v-icon>
+          Move
+        </span>
+        <span class="hint">
+          <v-icon size="small">cursor-default-outline</v-icon>
+          Cursor
+        </span>
+      </div>
+    </v-sheet>
+  </v-fade-transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { GamepadState } from '/@/composables/useGamepad';
+import GamepadButton from './gamepadButton.vue';
+
+const props = defineProps<{
+  gamepadState: GamepadState;
+}>();
+
+const showHints = ref(true);
+let hasMovedSticks = false;
+
+// Hide hints when sticks are moved
+watch([() => props.gamepadState.leftStick, () => props.gamepadState.rightStick], ([leftStick, rightStick]) => {
+  if (!hasMovedSticks && (Math.abs(leftStick.x) > 0.2 || Math.abs(leftStick.y) > 0.2 || 
+      Math.abs(rightStick.x) > 0.2 || Math.abs(rightStick.y) > 0.2)) {
+    hasMovedSticks = true;
+    showHints.value = false;
+  }
+});
+
+// Show hints again when gamepad reconnects
+watch(() => props.gamepadState.connected, (connected) => {
+  if (connected && !hasMovedSticks) {
+    showHints.value = true;
+  }
+});
+</script>
+
+<style scoped>
+.gamepad-hints {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.hint-container {
+  display: flex;
+  gap: 20px;
+  padding: 12px 20px;
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/home/featuredSlider.vue b/packages/renderer/src/components/home/featuredSlider.vue
index deeb3d28..ce4d3325 100644
--- a/packages/renderer/src/components/home/featuredSlider.vue
+++ b/packages/renderer/src/components/home/featuredSlider.vue
@@ -77,6 +77,7 @@
           >
             <v-sheet
               color="transparent"
+              class="text-overlay"
             >
               <h5 class="text-h5 text-sm-h4">
                 {{ featuredItem.name }}
@@ -206,3 +207,12 @@ const nextSlideImage = computed(() => {
 const {getSiteColor} = useSiteColors();
 
 </script>
+
+<style scoped>
+.text-overlay {
+  background: rgba(0, 0, 0, 0.7) !important;
+  backdrop-filter: blur(4px);
+  border-radius: 12px;
+  padding: 24px;
+}
+</style>
diff --git a/packages/renderer/src/components/layout/gamepadNavBar.vue b/packages/renderer/src/components/layout/gamepadNavBar.vue
new file mode 100644
index 00000000..98b68cef
--- /dev/null
+++ b/packages/renderer/src/components/layout/gamepadNavBar.vue
@@ -0,0 +1,166 @@
+<template>
+  <nav class="gamepad-nav-bar">
+    <div class="nav-container">
+      <router-link to="/" class="logo-link">
+        <img src="/logo.svg" alt="Riff.CC" class="logo" />
+      </router-link>
+      <router-link
+        v-for="(tab, index) in tabs"
+        :key="tab.path"
+        :to="tab.path"
+        class="nav-tab"
+        :class="{ active: currentPath === tab.path }"
+        :data-navigable="true"
+        :tabindex="index"
+      >
+        <span class="tab-text">{{ tab.name }}</span>
+      </router-link>
+      <router-link to="/account" class="profile-link" :data-navigable="true">
+        <v-icon size="32" color="white">account</v-icon>
+      </router-link>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const tabs = [
+  { name: 'Home', path: '/' },
+  { name: 'Music', path: '/featured/music' },
+  { name: 'Movies', path: '/featured/movies' },
+  { name: 'TV Shows', path: '/featured/tv-shows' },
+];
+
+const currentPath = computed(() => route.path);
+</script>
+
+<style scoped>
+.gamepad-nav-bar {
+  position: fixed;
+  top: 1px;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(138, 43, 226, 0.2);
+}
+
+.nav-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 55px;
+  gap: 40px;
+  padding: 0 20px;
+  position: relative;
+}
+
+.logo-link {
+  position: absolute;
+  left: 15%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  height: 48px;
+  outline: none;
+}
+
+.logo {
+  height: 48px;
+  width: auto;
+  filter: brightness(0.9);
+  transition: filter 0.3s ease;
+}
+
+.logo-link:hover .logo {
+  filter: brightness(1.1);
+}
+
+.logo-link:focus {
+  box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.6);
+  border-radius: 4px;
+}
+
+.profile-link {
+  position: absolute;
+  right: 15%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: rgba(255, 255, 255, 0.9);
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  outline: none;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.profile-link:hover {
+  color: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.profile-link:focus {
+  box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.6);
+  background: rgba(138, 43, 226, 0.1);
+}
+
+.nav-tab {
+  position: relative;
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 12px 16px 4px 16px;
+  transition: all 0.3s ease;
+  outline: none;
+}
+
+.nav-tab:hover {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.nav-tab.active {
+  color: #fff;
+}
+
+.nav-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -13px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #8a2be2;
+  box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.nav-tab.active::after {
+  opacity: 1;
+}
+
+.nav-tab:focus::after {
+  opacity: 0.5;
+}
+
+.nav-tab:focus {
+  /* No focus box - just rely on the underline */
+  outline: none;
+}
+
+.tab-text {
+  position: relative;
+  z-index: 1;
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/misc/contentCard.vue b/packages/renderer/src/components/misc/contentCard.vue
index d9c45ff8..e553f903 100644
--- a/packages/renderer/src/components/misc/contentCard.vue
+++ b/packages/renderer/src/components/misc/contentCard.vue
@@ -6,11 +6,13 @@
   >
     <v-sheet
       v-bind="hoveringProps"
-      :class="cursorPointer ? 'cursor-pointer mx-auto' : 'mx-auto'"
+      :class="cursorPointer ? 'cursor-pointer mx-auto content-card' : 'mx-auto content-card'"
       color="transparent"
       :height="cardHeight"
       :width="cardWidth"
       :style="showDefederation ? `border: 1px solid ${getSiteColor(item.siteAddress)};` : ''"
+      data-navigable="true"
+      tabindex="0"
       @click="onClick"
     >
       <template v-if="isOverlapping">
diff --git a/packages/renderer/src/components/releases/audioPlayer.vue b/packages/renderer/src/components/releases/audioPlayer.vue
index 58d057d9..01b0edc5 100644
--- a/packages/renderer/src/components/releases/audioPlayer.vue
+++ b/packages/renderer/src/components/releases/audioPlayer.vue
@@ -6,6 +6,8 @@
     :elevation="24"
     height="100px"
     max-width="960px"
+    :data-navigable="true"
+    @dblclick="navigateToAlbum"
   >
     <audio
       ref="audioPlayerRef"
@@ -62,7 +64,31 @@
           color="transparent"
           class="flex-1-0 d-flex flex-column px-2 px-md-4"
         >
-          <p class="text-subtitle-2">{{ activeTrack?.title }}</p>
+          <p class="text-subtitle-2 d-flex align-center ga-1">
+            <span v-if="activeTrack?.artist">{{ activeTrack.artist }}</span>
+            <span 
+              v-if="activeTrack?.artist && activeTrack?.title"
+              :style="{
+                color: 'white',
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+                lineHeight: '1'
+              }"
+            >
+              ›
+            </span>
+            <span
+              v-if="activeTrack?.title"
+              class="track-name"
+              :style="{
+                color: 'rgba(168, 85, 247, 1)',
+                textShadow: '0 0 10px rgba(168, 85, 247, 0.7)',
+                fontWeight: '500'
+              }"
+            >
+              {{ activeTrack.title }}
+            </span>
+          </p>
           <v-slider
             v-model="progress"
             :max="audioPlayerRef?.duration"
@@ -73,6 +99,7 @@
             color="background"
             class="mx-0"
             hide-details
+            :data-navigable="true"
             @update:model-value="seekingTrack"
           ></v-slider>
           <div>
@@ -147,12 +174,14 @@
 <script setup lang="ts">
 import {onMounted, watch} from 'vue';
 import {useDisplay} from 'vuetify';
+import {useRouter} from 'vue-router';
 import {useAudioAlbum} from '/@/composables/audioAlbum';
 import {usePlaybackController} from '/@/composables/playbackController';
 import {usePlayerVolume} from '/@/composables/playerVolume';
 import { parseUrlOrCid } from '/@/utils';
 
 const {xs, smAndDown} = useDisplay();
+const router = useRouter();
 
 const {
   playerRef: audioPlayerRef,
@@ -195,6 +224,10 @@ const close = () => {
   handleOnClose();
 };
 
+const navigateToAlbum = () => {
+  router.back();
+};
+
 const defaultSkipTime = 10;
 onMounted(() => {
   if ('mediaSession' in navigator) {
diff --git a/packages/renderer/src/components/releases/videoPlayer.vue b/packages/renderer/src/components/releases/videoPlayer.vue
index e64ca0fe..c0dcfe36 100644
--- a/packages/renderer/src/components/releases/videoPlayer.vue
+++ b/packages/renderer/src/components/releases/videoPlayer.vue
@@ -6,24 +6,82 @@
     <template #default="{isHovering, props: propsTemplate}">
       <div
         v-bind="propsTemplate"
+        ref="containerRef"
         :class="floating ? 'floating-container' : 'position-relative w-100'"
+        :data-navigable="true"
+        @dblclick="navigateBack"
+        @mousedown="startDrag"
       >
         <v-btn
-          v-if="isHovering"
+          v-if="isHovering && !floating"
           density="comfortable"
-          :icon="floating ? '$close' : '$arrow-left'"
+          :icon="'$arrow-left'"
           class="position-absolute top-0 left-0 mt-3 ml-3"
           :style="{zIndex: 1000}"
-          @click="floating ? closeFloatingVideo() : canBack ? router.back() : router.push('/')"
+          @click="canBack ? router.back() : router.push('/')"
         ></v-btn>
+        
+        <!-- Floating video controls -->
+        <template v-if="floating">
+          <!-- Close button -->
+          <v-btn
+            v-if="isHovering"
+            density="comfortable"
+            icon="$close"
+            class="position-absolute top-0 right-0 mt-2 mr-2"
+            :style="{zIndex: 1000}"
+            size="small"
+            @click="closeFloatingVideo()"
+          ></v-btn>
+          
+          <!-- Now Playing bar -->
+          <v-sheet
+            color="rgba(0, 0, 0, 0.8)"
+            class="position-absolute top-0 w-100 d-flex align-center px-2"
+            height="32"
+            :style="{zIndex: 999}"
+          >
+            <span class="text-caption text-white text-truncate flex-grow-1">
+              Now Playing: {{ props.releaseName || floatingVideoRelease?.name || 'Video' }}
+            </span>
+            <v-btn
+              v-if="props.releaseId || floatingVideoRelease?.id"
+              icon="$chevron-right"
+              density="compact"
+              size="x-small"
+              variant="text"
+              @click="navigateToRelease"
+            ></v-btn>
+          </v-sheet>
+          
+          <!-- Center play arrow -->
+          <v-btn
+            v-if="isHovering && !isPlaying"
+            icon="$arrow-right-circle"
+            size="x-large"
+            variant="tonal"
+            class="position-absolute"
+            :style="{
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              zIndex: 1000
+            }"
+            @click="navigateToRelease"
+          ></v-btn>
+        </template>
         <video
           ref="videoPlayerRef"
           autoplay
           :style="{
-            maxHeight: `${displayHeight - 64}px`,
+            maxHeight: floating ? 'calc(100% - 32px)' : `${displayHeight - 64}px`,
             width: '100%',
-            height: '100%',
-            objectFit: 'contain',
+            height: floating ? 'calc(100% - 32px)' : '100%',
+            objectFit: floating ? 'cover' : 'contain',
+            position: floating ? 'absolute' : 'relative',
+            top: floating ? '32px' : '0',
+            left: 0,
+            backgroundColor: '#0a0a0a',
           }"
           :src="parseUrlOrCid(props.contentCid)"
           :controls="false"
@@ -34,12 +92,26 @@
           @progress="updateProgress"
         ></video>
 
-        <v-progress-circular
+        <!-- Loading overlay -->
+        <v-sheet
           v-if="isLoading"
-          indeterminate
-          size="32"
-          class="position-absolute top-0 right-0 bottom-0 left-0 ma-auto"
-        ></v-progress-circular>
+          :color="floating ? '#0a0a0a' : 'transparent'"
+          class="position-absolute d-flex align-center justify-center"
+          :style="{
+            top: floating ? '32px' : '0',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 998
+          }"
+        >
+          <v-progress-circular
+            indeterminate
+            size="48"
+            width="3"
+            color="primary"
+          ></v-progress-circular>
+        </v-sheet>
 
         <v-sheet
           v-if="isHovering"
@@ -53,6 +125,7 @@
             thumb-size="16px"
             hide-details
             :max="videoPlayerRef?.duration"
+            :data-navigable="true"
             @update:model-value="seekingTrack"
           >
             <template #prepend>
@@ -93,8 +166,8 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, watch} from 'vue';
-import {useRouter} from 'vue-router';
+import {computed, onBeforeUnmount, onMounted, watch, ref} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
 import {useDisplay} from 'vuetify';
 import {useAudioAlbum} from '../../composables/audioAlbum';
 import {useFloatingVideo} from '/@/composables/floatingVideo';
@@ -105,9 +178,13 @@ import { parseUrlOrCid } from '/@/utils';
 const props = defineProps<{
   contentCid: string;
   floating?: boolean;
+  releaseId?: string;
+  releaseName?: string;
 }>();
 
 const router = useRouter();
+const route = useRoute();
+const containerRef = ref<HTMLElement>();
 
 const {
   playerRef: videoPlayerRef,
@@ -127,7 +204,14 @@ const {
 
 const {volume, toggleVolume} = usePlayerVolume();
 const {albumFiles, activeTrack} = useAudioAlbum();
-const {floatingVideoSource, floatingVideoInitialTime, closeFloatingVideo} = useFloatingVideo();
+const {floatingVideoSource, floatingVideoInitialTime, floatingVideoRelease, closeFloatingVideo} = useFloatingVideo();
+
+// Dragging state
+const isDragging = ref(false);
+const isResizing = ref(false);
+const dragStart = ref({ x: 0, y: 0 });
+const containerPosition = ref({ x: 0, y: 0 });
+const containerSize = ref({ width: 384, height: 216 });
 
 watch(volume, v => {
   if (videoPlayerRef.value) {
@@ -144,13 +228,102 @@ const toggleFullscreen = (): void => {
   videoPlayerRef.value.requestFullscreen();
 };
 
+const navigateBack = () => {
+  router.back();
+};
+
+const navigateToRelease = () => {
+  const releaseId = props.releaseId || floatingVideoRelease.value?.id || (route.name === 'Release' ? route.params.id as string : undefined);
+  if (releaseId) {
+    // Close floating video before navigating
+    closeFloatingVideo();
+    router.push(`/release/${releaseId}`);
+  }
+};
+
+// Drag handlers
+const startDrag = (e: MouseEvent) => {
+  if (!props.floating || !containerRef.value) return;
+  
+  // Check if clicking on resize handle (top-left corner)
+  const rect = containerRef.value.getBoundingClientRect();
+  const isNearEdge = (
+    e.clientX < rect.left + 20 &&
+    e.clientY < rect.top + 52 && // 32px for Now Playing bar + 20px handle
+    e.clientY > rect.top + 32  // Below the Now Playing bar
+  );
+  
+  if (isNearEdge) {
+    isResizing.value = true;
+    dragStart.value = { x: e.clientX, y: e.clientY };
+    containerSize.value = { width: rect.width, height: rect.height };
+    containerPosition.value = { x: rect.left, y: rect.top };
+  } else {
+    isDragging.value = true;
+    dragStart.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    containerPosition.value = { x: rect.left, y: rect.top };
+  }
+  
+  document.addEventListener('mousemove', handleDrag);
+  document.addEventListener('mouseup', stopDrag);
+};
+
+const handleDrag = (e: MouseEvent) => {
+  if (!containerRef.value) return;
+  
+  if (isDragging.value) {
+    const newX = Math.max(0, Math.min(window.innerWidth - containerRef.value.offsetWidth, e.clientX - dragStart.value.x));
+    const newY = Math.max(0, Math.min(window.innerHeight - containerRef.value.offsetHeight, e.clientY - dragStart.value.y));
+    
+    containerRef.value.style.left = `${newX}px`;
+    containerRef.value.style.top = `${newY}px`;
+    containerRef.value.style.right = 'auto';
+    containerRef.value.style.bottom = 'auto';
+  } else if (isResizing.value) {
+    // For top-left resize, we need to move the position AND change the size
+    const deltaX = e.clientX - dragStart.value.x;
+    const deltaY = e.clientY - dragStart.value.y;
+    
+    // Calculate new size (inverse the deltas since we're resizing from top-left)
+    const newWidth = Math.max(320, Math.min(window.innerWidth * 0.8, containerSize.value.width - deltaX));
+    const newHeight = Math.max(180, Math.min(window.innerHeight * 0.8, containerSize.value.height - deltaY));
+    
+    // Calculate new position
+    const newLeft = Math.max(0, containerPosition.value.x + deltaX);
+    const newTop = Math.max(0, containerPosition.value.y + deltaY);
+    
+    // Only update if within bounds
+    if (newLeft + newWidth <= window.innerWidth && newTop + newHeight <= window.innerHeight) {
+      containerRef.value.style.width = `${newWidth}px`;
+      containerRef.value.style.height = `${newHeight}px`;
+      containerRef.value.style.left = `${newLeft}px`;
+      containerRef.value.style.top = `${newTop}px`;
+      containerRef.value.style.right = 'auto';
+      containerRef.value.style.bottom = 'auto';
+    }
+  }
+};
+
+const stopDrag = () => {
+  isDragging.value = false;
+  isResizing.value = false;
+  document.removeEventListener('mousemove', handleDrag);
+  document.removeEventListener('mouseup', stopDrag);
+};
+
 const defaultSkipTime = 10;
 onMounted((): void => {
   albumFiles.value = [];
   activeTrack.value = undefined;
 
-  if (props.floating && floatingVideoInitialTime.value) {
-    seekingTrack(floatingVideoInitialTime.value);
+  if (props.floating) {
+    if (floatingVideoInitialTime.value) {
+      seekingTrack(floatingVideoInitialTime.value);
+    }
+    // If we don't have release info from props but have it stored, keep using the stored info
+    if (!props.releaseId && !props.releaseName && floatingVideoRelease.value) {
+      // The stored release info will be used for navigation
+    }
   } else {
     closeFloatingVideo();
   }
@@ -182,6 +355,18 @@ onBeforeUnmount(() => {
   if (!props.floating && isPlaying.value && videoPlayerRef.value) {
     floatingVideoSource.value = props.contentCid;
     floatingVideoInitialTime.value = videoPlayerRef.value.currentTime;
+    
+    // Store release info - use props if available, otherwise try to get from current route
+    const releaseId = props.releaseId || (route.name === 'Release' ? route.params.id as string : undefined);
+    const releaseName = props.releaseName || 'Video';
+    
+    if (releaseId) {
+      floatingVideoRelease.value = {
+        id: releaseId,
+        name: releaseName,
+        contentCID: props.contentCid
+      };
+    }
   }
 });
 </script>
@@ -195,5 +380,27 @@ onBeforeUnmount(() => {
   height: 216px;
   z-index: 5000;
   margin: 0px 8px 8px 0px;
+  cursor: move;
+  user-select: none;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: #0a0a0a;
+  overflow: hidden;
+}
+
+.floating-container::after {
+  content: '';
+  position: absolute;
+  top: 32px; /* Below the Now Playing bar */
+  left: 0;
+  width: 20px;
+  height: 20px;
+  cursor: nwse-resize;
+  background: linear-gradient(225deg, transparent 50%, rgba(138, 43, 226, 0.3) 50%);
+  z-index: 1001;
+}
+
+.floating-container video {
+  pointer-events: auto;
 }
 </style>
diff --git a/packages/renderer/src/composables/floatingVideo.ts b/packages/renderer/src/composables/floatingVideo.ts
index 5eba5b62..ed93a2c6 100644
--- a/packages/renderer/src/composables/floatingVideo.ts
+++ b/packages/renderer/src/composables/floatingVideo.ts
@@ -2,16 +2,23 @@ import {ref} from 'vue';
 
 const floatingVideoSource = ref<string>();
 const floatingVideoInitialTime = ref<number>();
+const floatingVideoRelease = ref<{
+  id: string;
+  name: string;
+  contentCID: string;
+} | undefined>();
 
 const closeFloatingVideo = () => {
   floatingVideoSource.value = undefined;
   floatingVideoInitialTime.value = undefined;
+  floatingVideoRelease.value = undefined;
 };
 
 export const useFloatingVideo = () => {
   return {
     floatingVideoSource,
     floatingVideoInitialTime,
+    floatingVideoRelease,
     closeFloatingVideo,
   };
 };
diff --git a/packages/renderer/src/composables/useGamepad.ts b/packages/renderer/src/composables/useGamepad.ts
new file mode 100644
index 00000000..0faf3257
--- /dev/null
+++ b/packages/renderer/src/composables/useGamepad.ts
@@ -0,0 +1,242 @@
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+
+export interface GamepadState {
+  connected: boolean;
+  type: 'xbox' | 'playstation' | 'switch' | 'generic';
+  leftStick: { x: number; y: number };
+  rightStick: { x: number; y: number };
+  buttons: {
+    a: boolean;
+    b: boolean;
+    x: boolean;
+    y: boolean;
+    lb: boolean;
+    rb: boolean;
+    lt: number;
+    rt: number;
+    start: boolean;
+    select: boolean;
+    leftStickButton: boolean;
+    rightStickButton: boolean;
+    up: boolean;
+    down: boolean;
+    left: boolean;
+    right: boolean;
+  };
+}
+
+const DEAD_ZONE = 0.15;
+const TRIGGER_DEAD_ZONE = 0.1; // Dead zone for analog triggers
+const SCROLL_SPEED_MIN = 1;
+const SCROLL_SPEED_MAX = 20;
+
+export function useGamepad() {
+  const gamepadState = ref<GamepadState>({
+    connected: false,
+    type: 'generic',
+    leftStick: { x: 0, y: 0 },
+    rightStick: { x: 0, y: 0 },
+    buttons: {
+      a: false,
+      b: false,
+      x: false,
+      y: false,
+      lb: false,
+      rb: false,
+      lt: 0,
+      rt: 0,
+      start: false,
+      select: false,
+      leftStickButton: false,
+      rightStickButton: false,
+      up: false,
+      down: false,
+      left: false,
+      right: false,
+    },
+  });
+
+  const gamepadIndex = ref<number | null>(null);
+  const previousButtonStates = new Map<string, boolean>();
+  const buttonCallbacks = new Map<string, () => void>();
+
+  // Detect gamepad type from ID
+  function detectGamepadType(id: string): 'xbox' | 'playstation' | 'switch' | 'generic' {
+    const lowerId = id.toLowerCase();
+    if (lowerId.includes('xbox') || lowerId.includes('microsoft')) return 'xbox';
+    if (lowerId.includes('playstation') || lowerId.includes('dualshock') || lowerId.includes('dualsense')) return 'playstation';
+    if (lowerId.includes('switch') || lowerId.includes('nintendo')) return 'switch';
+    return 'generic';
+  }
+
+  // Apply dead zone to stick values
+  function applyDeadZone(value: number): number {
+    if (Math.abs(value) < DEAD_ZONE) return 0;
+    const sign = value > 0 ? 1 : -1;
+    return sign * ((Math.abs(value) - DEAD_ZONE) / (1 - DEAD_ZONE));
+  }
+
+  // Calculate scroll speed based on stick pressure
+  function calculateScrollSpeed(value: number): number {
+    const absValue = Math.abs(value);
+    return SCROLL_SPEED_MIN + (SCROLL_SPEED_MAX - SCROLL_SPEED_MIN) * absValue;
+  }
+
+  // Register button press callback
+  function onButtonPress(button: string, callback: () => void) {
+    buttonCallbacks.set(button, callback);
+  }
+
+  // Update gamepad state
+  function updateGamepad() {
+    if (gamepadIndex.value === null) return;
+
+    const gamepads = navigator.getGamepads();
+    const gamepad = gamepads[gamepadIndex.value];
+    
+    if (!gamepad) {
+      gamepadState.value.connected = false;
+      return;
+    }
+    
+    // Debug: Log raw input - commented out to reduce console spam
+    // if (Math.random() < 0.016) {
+    //   console.log('Gamepad state:', {
+    //     axes: gamepad.axes.slice(0, 4),
+    //     buttons: gamepad.buttons.slice(0, 16).map(b => b?.pressed)
+    //   });
+    // }
+
+    // Update stick positions with dead zone
+    gamepadState.value.leftStick = {
+      x: applyDeadZone(gamepad.axes[0]),
+      y: applyDeadZone(gamepad.axes[1]),
+    };
+    
+    gamepadState.value.rightStick = {
+      x: applyDeadZone(gamepad.axes[2]),
+      y: applyDeadZone(gamepad.axes[3]),
+    };
+
+    // Map buttons (standard gamepad mapping)
+    const buttonMappings = {
+      a: gamepad.buttons[0],
+      b: gamepad.buttons[1],
+      x: gamepad.buttons[2],
+      y: gamepad.buttons[3],
+      lb: gamepad.buttons[4],
+      rb: gamepad.buttons[5],
+      lt: gamepad.buttons[6],
+      rt: gamepad.buttons[7],
+      select: gamepad.buttons[8],
+      start: gamepad.buttons[9],
+      leftStickButton: gamepad.buttons[10],
+      rightStickButton: gamepad.buttons[11],
+      up: gamepad.buttons[12],
+      down: gamepad.buttons[13],
+      left: gamepad.buttons[14],
+      right: gamepad.buttons[15],
+    };
+
+    // Update button states and trigger callbacks
+    Object.entries(buttonMappings).forEach(([key, button]) => {
+      if (!button) return; // Skip if button doesn't exist
+      
+      const pressed = button.pressed;
+      const value = button.value;
+      
+      if (key === 'lt' || key === 'rt') {
+        // Apply dead zone to triggers
+        const triggerValue = value > TRIGGER_DEAD_ZONE ? value : 0;
+        (gamepadState.value.buttons as any)[key] = triggerValue;
+      } else {
+        const wasPressed = previousButtonStates.get(key) || false;
+        (gamepadState.value.buttons as any)[key] = pressed;
+        
+        // Trigger callback on button press (not release)
+        if (pressed && !wasPressed && buttonCallbacks.has(key)) {
+          buttonCallbacks.get(key)!();
+        }
+        
+        previousButtonStates.set(key, pressed);
+      }
+    });
+  }
+
+  // Computed values for easier access
+  const scrollSpeed = computed(() => ({
+    x: calculateScrollSpeed(gamepadState.value.leftStick.x),
+    y: calculateScrollSpeed(gamepadState.value.leftStick.y),
+  }));
+
+  const isMoving = computed(() => 
+    gamepadState.value.leftStick.x !== 0 || gamepadState.value.leftStick.y !== 0
+  );
+
+  // Gamepad connection handlers
+  function handleGamepadConnected(event: GamepadEvent) {
+    if (gamepadIndex.value === null) {
+      gamepadIndex.value = event.gamepad.index;
+      gamepadState.value.connected = true;
+      gamepadState.value.type = detectGamepadType(event.gamepad.id);
+      console.log(`Gamepad connected: ${event.gamepad.id} (${gamepadState.value.type})`);
+    }
+  }
+
+  function handleGamepadDisconnected(event: GamepadEvent) {
+    if (gamepadIndex.value === event.gamepad.index) {
+      gamepadIndex.value = null;
+      gamepadState.value.connected = false;
+      console.log('Gamepad disconnected');
+    }
+  }
+
+  // Animation frame for continuous updates
+  let animationFrameId: number;
+
+  function startGamepadPolling() {
+    function poll() {
+      updateGamepad();
+      animationFrameId = requestAnimationFrame(poll);
+    }
+    poll();
+  }
+
+  function stopGamepadPolling() {
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+    }
+  }
+
+  // Lifecycle hooks
+  onMounted(() => {
+    window.addEventListener('gamepadconnected', handleGamepadConnected);
+    window.addEventListener('gamepaddisconnected', handleGamepadDisconnected);
+    
+    // Check for already connected gamepads
+    const gamepads = navigator.getGamepads();
+    for (let i = 0; i < gamepads.length; i++) {
+      if (gamepads[i]) {
+        gamepadIndex.value = i;
+        gamepadState.value.connected = true;
+        gamepadState.value.type = detectGamepadType(gamepads[i]!.id);
+        break;
+      }
+    }
+    
+    startGamepadPolling();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('gamepadconnected', handleGamepadConnected);
+    window.removeEventListener('gamepaddisconnected', handleGamepadDisconnected);
+    stopGamepadPolling();
+  });
+
+  return {
+    gamepadState,
+    scrollSpeed,
+    isMoving,
+    onButtonPress,
+  };
+}
\ No newline at end of file
diff --git a/packages/renderer/src/composables/useGamepadNavigation.ts b/packages/renderer/src/composables/useGamepadNavigation.ts
new file mode 100644
index 00000000..98946cac
--- /dev/null
+++ b/packages/renderer/src/composables/useGamepadNavigation.ts
@@ -0,0 +1,356 @@
+import { ref, watch, onMounted, onUnmounted, type Ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useGamepad } from './useGamepad';
+import { useAudioAlbum } from './audioAlbum';
+import { useFloatingVideo } from './floatingVideo';
+
+interface NavigableElement {
+  element: HTMLElement;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function useGamepadNavigation() {
+  const router = useRouter();
+  const { gamepadState, onButtonPress } = useGamepad();
+  
+  const focusedElement = ref<HTMLElement | null>(null);
+  const navigableElements = ref<NavigableElement[]>([]);
+  const lastNavigationTime = ref(0);
+  const NAVIGATION_DELAY = 200; // ms between navigation actions
+  
+  // Custom cursor for right stick
+  const cursorPosition = ref({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+  const showCursor = ref(false);
+  
+  // Track which control method was used last
+  const lastControlMethod = ref<'leftStick' | 'rightStick'>('leftStick');
+  
+  // Cursor timeout
+  let cursorTimeoutId: number | undefined;
+  
+  // Tab navigation
+  const currentTabIndex = ref(0);
+  const tabs = ['/', '/featured/music', '/featured/movies', '/featured/tv-shows'];
+  
+  // Update navigable elements
+  function updateNavigableElements() {
+    const elements = document.querySelectorAll('[data-navigable="true"], a, button, [role="button"], .content-card');
+    navigableElements.value = Array.from(elements).map(el => {
+      const rect = (el as HTMLElement).getBoundingClientRect();
+      return {
+        element: el as HTMLElement,
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+        width: rect.width,
+        height: rect.height,
+      };
+    });
+  }
+  
+  // Find nearest element in a direction
+  function findNearestElement(direction: 'up' | 'down' | 'left' | 'right'): HTMLElement | null {
+    if (!focusedElement.value) {
+      return navigableElements.value[0]?.element || null;
+    }
+    
+    const currentRect = focusedElement.value.getBoundingClientRect();
+    const currentX = currentRect.left + currentRect.width / 2;
+    const currentY = currentRect.top + currentRect.height / 2;
+    
+    let candidates = navigableElements.value.filter(el => {
+      switch (direction) {
+        case 'up':
+          return el.y < currentY - 10;
+        case 'down':
+          return el.y > currentY + 10;
+        case 'left':
+          return el.x < currentX - 10;
+        case 'right':
+          return el.x > currentX + 10;
+      }
+    });
+    
+    // Sort by distance
+    candidates.sort((a, b) => {
+      const distA = Math.sqrt(Math.pow(a.x - currentX, 2) + Math.pow(a.y - currentY, 2));
+      const distB = Math.sqrt(Math.pow(b.x - currentX, 2) + Math.pow(b.y - currentY, 2));
+      return distA - distB;
+    });
+    
+    return candidates[0]?.element || null;
+  }
+  
+  // Focus an element with visual feedback
+  function focusElement(element: HTMLElement | null) {
+    // Remove previous focus
+    if (focusedElement.value) {
+      focusedElement.value.classList.remove('gamepad-focused');
+      focusedElement.value.style.removeProperty('box-shadow');
+      focusedElement.value.style.removeProperty('outline');
+    }
+    
+    if (element) {
+      element.focus();
+      element.classList.add('gamepad-focused');
+      // Purple neon glow for TV viewing
+      element.style.boxShadow = '0 0 0 3px rgba(138, 43, 226, 0.8), 0 0 20px rgba(138, 43, 226, 0.5)';
+      element.style.outline = 'none';
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      focusedElement.value = element;
+    }
+  }
+  
+  // Handle left stick navigation
+  watch([() => gamepadState.value.leftStick, () => gamepadState.value.buttons], ([stick, buttons]) => {
+    const now = Date.now();
+    if (now - lastNavigationTime.value < NAVIGATION_DELAY) return;
+    
+    // Update control method and hide cursor when using left stick
+    if (Math.abs(stick.x) > 0.1 || Math.abs(stick.y) > 0.1 || 
+        buttons.up || buttons.down || buttons.left || buttons.right) {
+      lastControlMethod.value = 'leftStick';
+      showCursor.value = false;
+      const cursorEl = document.getElementById('gamepad-cursor');
+      if (cursorEl) {
+        cursorEl.style.display = 'none';
+      }
+    }
+    
+    // D-pad navigation
+    if (buttons.up) {
+      const element = findNearestElement('up');
+      if (element) {
+        focusElement(element);
+        lastNavigationTime.value = now;
+      }
+    } else if (buttons.down) {
+      const element = findNearestElement('down');
+      if (element) {
+        focusElement(element);
+        lastNavigationTime.value = now;
+      }
+    } else if (buttons.left) {
+      const element = findNearestElement('left');
+      if (element) {
+        focusElement(element);
+        lastNavigationTime.value = now;
+      }
+    } else if (buttons.right) {
+      const element = findNearestElement('right');
+      if (element) {
+        focusElement(element);
+        lastNavigationTime.value = now;
+      }
+    }
+    
+    // Analog stick navigation
+    if (Math.abs(stick.x) > 0.5 || Math.abs(stick.y) > 0.5) {
+      let direction: 'up' | 'down' | 'left' | 'right';
+      
+      if (Math.abs(stick.x) > Math.abs(stick.y)) {
+        direction = stick.x > 0 ? 'right' : 'left';
+      } else {
+        direction = stick.y > 0 ? 'down' : 'up';
+      }
+      
+      const element = findNearestElement(direction);
+      if (element) {
+        focusElement(element);
+        lastNavigationTime.value = now;
+      }
+    }
+    
+    // Scroll with variable speed
+    if (Math.abs(stick.y) > 0.1) {
+      const scrollSpeed = 10 + Math.abs(stick.y) * 40; // 10-50px per frame
+      window.scrollBy(0, stick.y * scrollSpeed);
+    }
+  });
+  
+  // Handle right stick cursor
+  watch(() => gamepadState.value.rightStick, (stick) => {
+    if (Math.abs(stick.x) > 0.1 || Math.abs(stick.y) > 0.1) {
+      lastControlMethod.value = 'rightStick';
+      showCursor.value = true;
+      const speed = 10;
+      cursorPosition.value.x = Math.max(0, Math.min(window.innerWidth, cursorPosition.value.x + stick.x * speed));
+      // Normal Y axis - positive stick.y moves cursor down
+      cursorPosition.value.y = Math.max(0, Math.min(window.innerHeight, cursorPosition.value.y + stick.y * speed));
+      
+      // Update cursor element position
+      const cursorEl = document.getElementById('gamepad-cursor');
+      if (cursorEl) {
+        cursorEl.style.display = 'block';
+        cursorEl.style.opacity = '1';
+        cursorEl.style.left = `${cursorPosition.value.x}px`;
+        cursorEl.style.top = `${cursorPosition.value.y}px`;
+      }
+      
+      // Clear existing timeout and set new one
+      if (cursorTimeoutId) {
+        clearTimeout(cursorTimeoutId);
+      }
+      
+      // Fade cursor after 4 seconds of inactivity
+      cursorTimeoutId = setTimeout(() => {
+        const cursorEl = document.getElementById('gamepad-cursor');
+        if (cursorEl) {
+          cursorEl.style.transition = 'opacity 1s ease-out';
+          cursorEl.style.opacity = '0';
+          setTimeout(() => {
+            cursorEl.style.display = 'none';
+            showCursor.value = false;
+          }, 1000);
+        }
+      }, 4000) as unknown as number;
+    }
+  });
+  
+  // Button handlers
+  onButtonPress('a', () => {
+    // Select based on which control method was used last
+    if (lastControlMethod.value === 'rightStick' && showCursor.value) {
+      // Click at cursor position if right stick was used last
+      const element = document.elementFromPoint(cursorPosition.value.x, cursorPosition.value.y) as HTMLElement;
+      if (element && typeof element.click === 'function') {
+        element.click();
+      }
+    } else if (focusedElement.value && typeof focusedElement.value.click === 'function') {
+      // Click focused element if left stick was used last
+      focusedElement.value.click();
+    }
+  });
+  
+  onButtonPress('b', () => {
+    router.back();
+  });
+  
+  onButtonPress('x', () => {
+    // Stop any playing media
+    const { activeTrack } = useAudioAlbum();
+    const { floatingVideoSource, closeFloatingVideo } = useFloatingVideo();
+    
+    if (activeTrack.value) {
+      activeTrack.value = undefined;
+    }
+    if (floatingVideoSource.value) {
+      closeFloatingVideo();
+    }
+  });
+  
+  onButtonPress('y', () => {
+    // Toggle search/filter panel
+    const filterPanel = document.querySelector('[data-filter-panel]');
+    if (filterPanel) {
+      filterPanel.classList.toggle('show');
+    } else {
+      // Navigate to search if no filter panel present
+      router.push('/search');
+    }
+  });
+  
+  onButtonPress('lb', () => {
+    currentTabIndex.value = Math.max(0, currentTabIndex.value - 1);
+    router.push(tabs[currentTabIndex.value]);
+  });
+  
+  onButtonPress('rb', () => {
+    currentTabIndex.value = Math.min(tabs.length - 1, currentTabIndex.value + 1);
+    router.push(tabs[currentTabIndex.value]);
+  });
+  
+  // Removed - R3 is now used for play/pause
+  
+  onButtonPress('start', () => {
+    // Open menu
+    router.push('/menu');
+  });
+  
+  // L3/R3 for play/pause
+  const playPauseHandler = () => {
+    const { activeTrack } = useAudioAlbum();
+    const audioPlayer = document.querySelector('audio') as HTMLAudioElement;
+    const videoPlayer = document.querySelector('video') as HTMLVideoElement;
+    
+    if (audioPlayer) {
+      if (audioPlayer.paused) {
+        audioPlayer.play();
+      } else {
+        audioPlayer.pause();
+      }
+    } else if (videoPlayer) {
+      if (videoPlayer.paused) {
+        videoPlayer.play();
+      } else {
+        videoPlayer.pause();
+      }
+    } else if (focusedElement.value) {
+      // If no media is playing, try to click the focused element (e.g., play button)
+      focusedElement.value.click();
+    }
+  };
+  
+  onButtonPress('leftStickButton', playPauseHandler);
+  onButtonPress('rightStickButton', playPauseHandler);
+  
+  // Update navigable elements on route change and mutations
+  const observer = new MutationObserver(() => {
+    updateNavigableElements();
+  });
+  
+  // Clear focus on mouse click
+  function handleMouseClick() {
+    if (focusedElement.value) {
+      focusedElement.value.classList.remove('gamepad-focused');
+      focusedElement.value.style.removeProperty('box-shadow');
+      focusedElement.value.style.removeProperty('outline');
+      focusedElement.value = null;
+    }
+  }
+  
+  onMounted(() => {
+    updateNavigableElements();
+    observer.observe(document.body, { childList: true, subtree: true });
+    
+    // Add global mouse click handler
+    document.addEventListener('click', handleMouseClick);
+    
+    // Create cursor element
+    const cursor = document.createElement('div');
+    cursor.id = 'gamepad-cursor';
+    cursor.style.cssText = `
+      position: fixed;
+      width: 24px;
+      height: 24px;
+      border: 3px solid #8a2be2;
+      border-radius: 50%;
+      background: rgba(138, 43, 226, 0.3);
+      pointer-events: none;
+      z-index: 10000;
+      display: none;
+      transform: translate(-50%, -50%);
+      opacity: 1;
+    `;
+    document.body.appendChild(cursor);
+  });
+  
+  onUnmounted(() => {
+    observer.disconnect();
+    document.removeEventListener('click', handleMouseClick);
+    if (cursorTimeoutId) {
+      clearTimeout(cursorTimeoutId);
+    }
+    const cursor = document.getElementById('gamepad-cursor');
+    cursor?.remove();
+  });
+  
+  return {
+    focusedElement,
+    showCursor,
+    cursorPosition,
+    updateNavigableElements,
+  };
+}
\ No newline at end of file
diff --git a/packages/renderer/src/plugins/vuetify.ts b/packages/renderer/src/plugins/vuetify.ts
index 58111226..8e89d01f 100644
--- a/packages/renderer/src/plugins/vuetify.ts
+++ b/packages/renderer/src/plugins/vuetify.ts
@@ -48,6 +48,8 @@ import {
   mdiStar,
   mdiStarPlusOutline,
   mdiBlockHelper,
+  mdiGamepad,
+  mdiCursorDefaultOutline,
 } from '@mdi/js';
 
 const iconsAliasesMapping = {
@@ -88,6 +90,8 @@ const iconsAliasesMapping = {
   'star': mdiStar,
   'star-plus-outline': mdiStarPlusOutline,
   'block-helper': mdiBlockHelper,
+  'gamepad': mdiGamepad,
+  'cursor-default-outline': mdiCursorDefaultOutline,
 };
 
 const vuetify = createVuetify({
@@ -124,6 +128,9 @@ const vuetify = createVuetify({
           'primary-lighten-1': colors.purple.lighten1,
           'primary-darken-1': colors.purple.darken1,
           'primary-accent': colors.purple.accent2,
+          background: '#000000',
+          surface: '#000000',
+          'surface-variant': '#0a0a0a',
         },
       },
     },
diff --git a/packages/renderer/src/styles/gamepad.scss b/packages/renderer/src/styles/gamepad.scss
new file mode 100644
index 00000000..ee411442
--- /dev/null
+++ b/packages/renderer/src/styles/gamepad.scss
@@ -0,0 +1,153 @@
+// Gamepad-specific styles for OLED optimization
+
+// Override Vuetify backgrounds for pure black
+.v-application,
+.v-main,
+.v-card {
+  background-color: #000000 !important;
+}
+
+// Don't override v-sheet - let components decide their own backgrounds
+// This preserves gradients on featured slider and other overlays
+
+// Content sections with subtle borders
+.content-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 2rem;
+  margin-top: 2rem;
+}
+
+// Featured slider adjustments - preserve background images
+.v-carousel {
+  background: #000000 !important;
+  
+  // Allow carousel items to show their background images
+}
+
+// Content cards for OLED - no borders
+.content-card {
+  background: transparent !important;
+  border: none !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  
+  // Create a subtle background frame around the image
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 8px;
+    z-index: -1;
+    transition: all 0.3s ease;
+  }
+  
+  // Keep images clean
+  .v-img {
+    background: #000000 !important;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  
+  &:hover {
+    transform: scale(1.02);
+    
+    &::before {
+      background: rgba(255, 255, 255, 0.04);
+    }
+  }
+  
+  &.gamepad-focused {
+    transform: scale(1.05);
+    z-index: 10;
+    
+    &::before {
+      background: rgba(138, 43, 226, 0.1);
+      top: -6px;
+      left: -6px;
+      right: -6px;
+      bottom: -6px;
+    }
+  }
+}
+
+// Button styles for OLED
+.v-btn {
+  &:not(.v-btn--variant-elevated) {
+    background: rgba(255, 255, 255, 0.05) !important;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
+}
+
+// Text contrast for OLED
+.text-medium-emphasis {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.text-high-emphasis {
+  color: rgba(255, 255, 255, 0.95) !important;
+}
+
+// Smooth scrolling for gamepad
+html {
+  scroll-behavior: smooth;
+}
+
+// Hide scrollbars for cleaner TV experience
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+// Focus styles that work well on TV
+:focus {
+  outline: none !important;
+}
+
+.gamepad-focused,
+*:focus-visible:not(.nav-tab) {
+  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.8), 
+              0 0 20px rgba(138, 43, 226, 0.5) !important;
+  outline: none !important;
+  border-radius: 4px;
+}
+
+// Ensure images don't have gray backgrounds (except carousel items)
+.v-img:not(.v-carousel-item .v-img) {
+  background: #000000 !important;
+}
+
+// Allow carousel items to show their background images
+.v-carousel-item {
+  background: transparent !important;
+}
+
+// Footer adjustments
+footer {
+  background: #000000 !important;
+  border-top: 1px solid rgba(138, 43, 226, 0.2);
+}
+
+// Loading states
+.v-progress-circular {
+  color: #8a2be2 !important;
+}
+
+// Dialog backgrounds
+.v-dialog {
+  .v-card {
+    background: #0a0a0a !important;
+    border: 1px solid rgba(138, 43, 226, 0.3);
+  }
+}
\ No newline at end of file
diff --git a/packages/renderer/src/styles/main.scss b/packages/renderer/src/styles/main.scss
index f0d2d80d..63f5af51 100644
--- a/packages/renderer/src/styles/main.scss
+++ b/packages/renderer/src/styles/main.scss
@@ -8,3 +8,6 @@
 @use 'vuetify' with (
   $body-font-family: "Josefin Sans"
 );
+
+// Import gamepad-specific styles after @use
+@import './gamepad.scss';
diff --git a/packages/renderer/src/views/releasePage.vue b/packages/renderer/src/views/releasePage.vue
index 391f8125..a0538699 100644
--- a/packages/renderer/src/views/releasePage.vue
+++ b/packages/renderer/src/views/releasePage.vue
@@ -7,6 +7,8 @@
       <video-player
         v-if="['videos', 'movies'].includes(categorySlug)"
         :content-cid="targetRelease.contentCID"
+        :release-id="targetRelease.id"
+        :release-name="targetRelease.name"
       />
       <album-viewer
         v-else-if="['audio', 'music'].includes(categorySlug)"

From 558e295a5ea08ab34cdf9fbcde55a81a98a5f641 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sat, 2 Aug 2025 18:38:14 +0100
Subject: [PATCH 09/17] Update for Firefox - temporary hacks

---
 .../components/misc/infiniteReleaseList.vue   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/renderer/src/components/misc/infiniteReleaseList.vue b/packages/renderer/src/components/misc/infiniteReleaseList.vue
index 8c1bf61d..4ba2e1fa 100644
--- a/packages/renderer/src/components/misc/infiniteReleaseList.vue
+++ b/packages/renderer/src/components/misc/infiniteReleaseList.vue
@@ -122,6 +122,28 @@ const onIntersect = (isIntersecting: boolean) => {
   max-width: 100%;
 }
 
+/* Firefox fallback using feature detection */
+@supports (-moz-appearance: none) {
+  .grid-container {
+    /* Simplify container for Firefox */
+    display: block;
+    width: 100%;
+  }
+  
+  .releases-grid {
+    /* Keep same sizing but fix Firefox grid issues */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
+    gap: 0.5rem;
+    width: 100%;
+    margin: 0 auto;
+    justify-content: center;
+    /* Firefox-specific grid fixes */
+    grid-auto-flow: row;
+    align-items: start;
+  }
+}
+
 /* Disable all transitions for instant appearance */
 .infinite-release-list * {
   transition: none !important;

From 0780628d4abeebb8fbaca2319cdbfefcfc439f5d Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sun, 3 Aug 2025 02:05:55 +0100
Subject: [PATCH 10/17] Partial gamepad support

---
 CLAUDE.md                                     |   9 +-
 packages/renderer/src/App.vue                 |  79 +++++-
 .../src/components/account/accountMenu.vue    |  52 +++-
 .../src/components/home/featuredSlider.vue    |   6 +-
 .../src/components/layout/gamepadNavBar.vue   |  12 +-
 .../src/components/misc/contentCard.vue       |  24 +-
 .../src/components/misc/startMenu.vue         | 248 ++++++++++++++++++
 .../src/components/releases/audioPlayer.vue   |  14 +-
 .../src/composables/globalPlayback.ts         |  56 ++++
 .../src/composables/imageColorExtraction.ts   | 120 +++++++++
 .../renderer/src/composables/useGamepad.ts    |  37 ++-
 .../src/composables/useGamepadNavigation.ts   |  96 +++++--
 .../src/composables/useInputMethod.ts         |  64 +++++
 .../renderer/src/composables/userSession.ts   |   6 +-
 packages/renderer/src/views/homePage.vue      |   2 +-
 15 files changed, 754 insertions(+), 71 deletions(-)
 create mode 100644 packages/renderer/src/components/misc/startMenu.vue
 create mode 100644 packages/renderer/src/composables/globalPlayback.ts
 create mode 100644 packages/renderer/src/composables/imageColorExtraction.ts
 create mode 100644 packages/renderer/src/composables/useInputMethod.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 7859ec5e..ebb6d33d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -92,4 +92,11 @@ Flagship is Riff.CC's decentralized media platform for watching, sharing, and cu
 - Hot module replacement is configured for rapid development
 - TypeScript is used throughout for type safety
 - Vite configs in each package control build behavior
-- Content is distributed via P2P network with configurable replication factors
\ No newline at end of file
+- Content is distributed via P2P network with configurable replication factors
+
+## Important Instructions
+- NEVER use git checkout to revert changes - this will throw away hours of work
+- Always manually revert specific changes using the Edit tool
+- Do what has been asked; nothing more, nothing less
+- NEVER create files unless they're absolutely necessary
+- ALWAYS prefer editing existing files to creating new ones
\ No newline at end of file
diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 51b79a68..cb704835 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -34,6 +34,7 @@
       id="gamepad-cursor"
       class="gamepad-cursor"
     ></div>
+    <start-menu v-model="showStartMenu" />
   </v-app>
 </template>
 
@@ -46,6 +47,7 @@ import GamepadNavBar from '/@/components/layout/gamepadNavBar.vue';
 import audioPlayer from '/@/components/releases/audioPlayer.vue';
 import videoPlayer from '/@/components/releases/videoPlayer.vue';
 import GamepadHints from '/@/components/gamepad/gamepadHints.vue';
+import StartMenu from '/@/components/misc/startMenu.vue';
 
 import { useAudioAlbum } from '/@/composables/audioAlbum';
 import { useFloatingVideo } from '/@/composables/floatingVideo';
@@ -54,14 +56,19 @@ import { useLensInitialization } from '/@/composables/lensInitialization';
 import { useGamepad } from '/@/composables/useGamepad';
 import { useGamepadNavigation } from '/@/composables/useGamepadNavigation';
 import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useContentCategoriesQuery } from './plugins/lensService';
+import { useGlobalPlayback } from '/@/composables/globalPlayback';
+import { useInputMethod } from '/@/composables/useInputMethod';
 
 const { showDefederation } = useShowDefederation();
 const { activeTrack } = useAudioAlbum();
 const { floatingVideoSource, floatingVideoRelease } = useFloatingVideo();
 
 const { isLensReady, initLensService } = useLensInitialization();
-const { gamepadState } = useGamepad();
+const { gamepadState, onButtonPress } = useGamepad();
 const { showCursor } = useGamepadNavigation();
+const { currentInputMethod } = useInputMethod();
+
+const showStartMenu = ref(false);
 
 const MAGIC_KEY = 'magicmagic';
 
@@ -98,6 +105,20 @@ watchEffect(() => {
 
 onMounted(async () => {
   initLensService();
+  
+  // Setup gamepad controls
+  onButtonPress('start', () => {
+    showStartMenu.value = true;
+  });
+  
+  // Setup L3/R3 for play/pause
+  const { globalTogglePlay } = useGlobalPlayback();
+  onButtonPress('leftStickButton', () => {
+    globalTogglePlay();
+  });
+  onButtonPress('rightStickButton', () => {
+    globalTogglePlay();
+  });
 });
 
 
@@ -120,20 +141,21 @@ const { data: contentCategories } = useContentCategoriesQuery({
   top: 0;
   left: 0;
   right: 0;
-  height: 2px;
+  height: 1px;
   background: linear-gradient(90deg, 
-    transparent 0%,
-    rgba(138, 43, 226, 0) 10%,
-    rgba(138, 43, 226, 0.4) 25%,
-    rgba(138, 43, 226, 0.8) 40%,
-    rgba(138, 43, 226, 0.4) 55%,
-    rgba(138, 43, 226, 0) 70%,
-    transparent 80%,
+    rgba(98, 28, 166, 0.3) 0%,
+    rgba(98, 28, 166, 0.6) 15%,
+    rgba(98, 28, 166, 0.9) 30%,
+    rgba(98, 28, 166, 1) 40%,
+    rgba(98, 28, 166, 0.9) 50%,
+    rgba(98, 28, 166, 0.6) 65%,
+    rgba(98, 28, 166, 0.3) 80%,
+    rgba(98, 28, 166, 0.1) 95%,
     transparent 100%
   );
-  background-size: 200% 100%;
+  background-size: 150% 100%;
   z-index: 1000;
-  animation: gentleFlow 30s ease-in-out infinite;
+  animation: gentleFlow 20s ease-in-out infinite;
   filter: blur(0.5px);
 }
 
@@ -207,6 +229,27 @@ const { data: contentCategories } = useContentCategoriesQuery({
   transition: all 0.2s ease !important;
 }
 
+/* Hide hover effects when using gamepad */
+body.input-gamepad *:hover {
+  background-color: inherit !important;
+}
+
+/* Only show hover effects when using mouse */
+body.input-mouse *:hover {
+  transition: all 0.2s ease;
+}
+
+/* Only show gamepad focus when using gamepad */
+body.input-gamepad .gamepad-focused {
+  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.8), 0 0 20px rgba(138, 43, 226, 0.5) !important;
+}
+
+/* Hide gamepad focus when using mouse */
+body.input-mouse .gamepad-focused {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 /* Ensure pure black backgrounds */
 .v-application {
   background: #000000 !important;
@@ -230,4 +273,18 @@ const { data: contentCategories } = useContentCategoriesQuery({
 .content-card:hover {
   border-color: rgba(138, 43, 226, 0.3);
 }
+
+/* Prevent focus on non-interactive elements */
+div:not([data-navigable]):not(.content-card):focus,
+v-sheet:focus,
+v-container:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+
+/* Prevent text selection with gamepad */
+body.input-gamepad * {
+  user-select: none;
+}
 </style>
diff --git a/packages/renderer/src/components/account/accountMenu.vue b/packages/renderer/src/components/account/accountMenu.vue
index ef56372d..0623433b 100644
--- a/packages/renderer/src/components/account/accountMenu.vue
+++ b/packages/renderer/src/components/account/accountMenu.vue
@@ -3,9 +3,9 @@
     <template #activator="{props: activatorProps}">
       <v-avatar
         v-bind="activatorProps"
-        :image="userData?.avatar"
-        border
-        class="mr-2 d-none d-sm-block"
+        :image="userData?.avatar || 'data:image/svg+xml,%3csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'532\'%20height=\'532\'%20viewBox=\'0%200%20532%20532\'%20xmlns:xlink=\'http://www.w3.org/1999/xlink\'%3e%3cg%3e%3cg%3e%3ccircle%20cx=\'270.759\'%20cy=\'260.92941\'%20r=\'86.34897\'%20fill=\'%23a0616a\'/%3e%3cpolygon%20points=\'199.2879%20366.61365%20217.2879%20320.61365%20310.2879%20306.61365%20320.28003%20408.44043%20226.28003%20410.44043%20199.2879%20366.61365\'%20fill=\'%23a0616a\'/%3e%3c/g%3e%3cpath%20d=\'M357.94449,276.8613c-1.12067,4.48965-3.38602,15.17972-6.9238,15.23233-2.89023,.04208-5.65668-46.33466-2.76953-54.00568,3.31638-8.81271-5.39886-19.96062-11.96411-25.6832-11.80423-10.2894-38.00696,11.80466-64.65118,1.79587-.70633-.26482-.56558-.23502-8.97934-3.59174-25.88966-10.32974-27.2506-10.62788-28.73386-10.77521-12.55046-1.24167-27.86705,9.02844-34.12146,21.55038-6.50168,13.01653-1.06937,24.18106-7.18346,55.67184-.71246,3.67065-1.83138,8.90216-3.59174,8.97934-3.21819,.14029-6.3605-17.04846-7.18346-21.55038-3.44792-18.86186-6.7722-37.04675,0-57.46771,.73878-2.22729,5.29158-10.49458,14.36693-26.93799,13.0744-23.68825,19.65018-35.57709,21.55038-37.7132,13.62859-15.32624,38.43575-29.30734,59.26357-23.34626,10.52704,3.01299,8.63953,7.85691,21.55038,12.57105,23.00821,8.40057,43.00476-1.87303,46.69254,5.3876,1.9537,3.84602-3.51236,7.01686-3.59174,14.36693-.13593,12.6114,15.81424,16.25575,25.14212,28.73386,5.01447,6.70819,13.59753,6.78012-8.87228,96.78212l.00003,.00003Z\'%20fill=\'%232f2e41\'/%3e%3c/g%3e%3cpath%20d=\'M464.92017,442.61035c-3.48022,3.91016-7.09009,7.74023-10.83008,11.48047-50.23999,50.23926-117.04004,77.90918-188.09009,77.90918-61.40991,0-119.63989-20.66992-166.75-58.71973-.03003-.01953-.05005-.04004-.07983-.07031-6.25-5.03906-12.30005-10.39941-18.14014-16.05957,.10986-.87988,.22998-1.75,.35986-2.61035,.82007-5.7998,1.73022-11.33008,2.75-16.41992,8.3501-41.71973,118.22021-85.51953,121.08008-86.66016,.04004-.00977,.06006-.01953,.06006-.01953,0,0,14.14014,52.12012,74.72998,51.4502,41.27002-.4502,33.27002-51.4502,33.27002-51.4502,0,0,.5,.09961,1.43994,.2998,11.91992,2.53027,94.68018,20.70996,127.33008,45.52051,9.94995,7.55957,17.08984,23.66016,22.21997,42.85938,.21997,.82031,.42993,1.66016,.65015,2.49023Z\'%20fill=\'%236c63ff\'/%3e%3cpath%20d=\'M454.09009,77.91016C403.8501,27.6709,337.05005,0,266,0S128.15015,27.6709,77.90991,77.91016C27.67017,128.15039,0,194.9502,0,266c0,64.85059,23.05005,126.16016,65.29004,174.57031,4.03003,4.62988,8.23999,9.13965,12.61987,13.52051,1.03003,1.0293,2.07007,2.05957,3.12012,3.05957,5.84009,5.66016,11.89014,11.02051,18.14014,16.05957,.02979,.03027,.0498,.05078,.07983,.07031,47.11012,38.0498,105.3401,58.71973,166.75001,58.71973,71.05005,0,137.8501-27.66992,188.09009-77.90918,3.73999-3.74023,7.34985-7.57031,10.83008-11.48047,43.36987-48.71973,67.07983-110.83984,67.07983-176.61035,0-71.0498-27.66992-137.84961-77.90991-188.08984Zm10.17993,362.20996c-7.86987,8.9502-16.33008,17.37012-25.33008,25.18066-17.06982,14.84961-36.06982,27.5293-56.55981,37.62988-7.19019,3.5498-14.56006,6.7793-22.1001,9.66992-29.29004,11.24023-61.08008,17.39941-94.28003,17.39941-32.04004,0-62.76001-5.73926-91.18994-16.23926-11.67017-4.30078-22.94995-9.41016-33.78003-15.26074-1.59009-.85938-3.16992-1.72949-4.73999-2.61914-8.26001-4.68066-16.25-9.79004-23.91992-15.31055-10.98999-7.87988-21.3501-16.58984-30.98022-26.03027-5.3999-5.29004-10.55981-10.7998-15.48975-16.5293C26.09009,391.77051,2,331.65039,2,266,2,120.43066,120.42993,2,266,2s264,118.43066,264,264c0,66.66016-24.82983,127.62012-65.72998,174.12012Z\'%20fill=\'%233f3d56\'/%3e%3c/svg%3e'"
+        class="mr-2"
+        :style="{ cursor: 'pointer' }"
       />
     </template>
     <v-sheet
@@ -33,15 +33,51 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserSession } from '/@/composables/userSession';
+import { useAccountStatusQuery } from '/@/plugins/lensService/hooks';
 
 const router = useRouter();
 
 const { userData } = useUserSession();
-const menuItems = [
-  { label: 'Account', onClick: () => router.push('/account')},
-  { label: 'Settings', onClick: () => router.push('/account/settings')},
-  { label: 'Disconnect', onClick: () => { userData.value = null; }},
-];
+const { data: accountStatus } = useAccountStatusQuery();
+
+const canUpload = computed(() =>
+  accountStatus.value?.permissions.includes('release:create') ?? false,
+);
+
+const canAccessAdminPanel = computed(() => {
+  if (!accountStatus.value) {
+    return false;
+  }
+  if (accountStatus.value.isAdmin) {
+    return true;
+  }
+  if (accountStatus.value.roles.includes('moderator')) {
+    return true;
+  }
+  return false;
+});
+
+const menuItems = computed(() => {
+  const items = [
+    { label: 'Account', onClick: () => router.push('/account')},
+  ];
+  
+  if (canUpload.value) {
+    items.push({ label: 'Upload', onClick: () => router.push('/upload')});
+  }
+  
+  if (canAccessAdminPanel.value) {
+    items.push({ label: 'Admin', onClick: () => router.push('/admin')});
+  }
+  
+  items.push(
+    { label: 'Settings', onClick: () => router.push('/account/settings')},
+    { label: 'Disconnect', onClick: () => { userData.value = null; }},
+  );
+  
+  return items;
+});
 </script>
diff --git a/packages/renderer/src/components/home/featuredSlider.vue b/packages/renderer/src/components/home/featuredSlider.vue
index ce4d3325..e2153bff 100644
--- a/packages/renderer/src/components/home/featuredSlider.vue
+++ b/packages/renderer/src/components/home/featuredSlider.vue
@@ -24,7 +24,8 @@
           :style="{zIndex: 1000}"
           position="absolute"
           location="center"
-          variant="plain"
+          variant="text"
+          :ripple="false"
         >
         </v-btn>
       </v-sheet>
@@ -49,7 +50,8 @@
           :style="{zIndex: 1000}"
           position="absolute"
           location="center"
-          variant="plain"
+          variant="text"
+          :ripple="false"
         >
         </v-btn>
       </v-sheet>
diff --git a/packages/renderer/src/components/layout/gamepadNavBar.vue b/packages/renderer/src/components/layout/gamepadNavBar.vue
index 98b68cef..d199bd4d 100644
--- a/packages/renderer/src/components/layout/gamepadNavBar.vue
+++ b/packages/renderer/src/components/layout/gamepadNavBar.vue
@@ -15,9 +15,12 @@
       >
         <span class="tab-text">{{ tab.name }}</span>
       </router-link>
-      <router-link to="/account" class="profile-link" :data-navigable="true">
-        <v-icon size="32" color="white">account</v-icon>
-      </router-link>
+      <div class="profile-link">
+        <account-menu v-if="userData" />
+        <router-link v-else to="/account" :data-navigable="true">
+          <v-icon size="32" color="white">account</v-icon>
+        </router-link>
+      </div>
     </div>
   </nav>
 </template>
@@ -25,8 +28,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useUserSession } from '/@/composables/userSession';
+import accountMenu from '/@/components/account/accountMenu.vue';
 
 const route = useRoute();
+const { userData } = useUserSession();
 
 const tabs = [
   { name: 'Home', path: '/' },
diff --git a/packages/renderer/src/components/misc/contentCard.vue b/packages/renderer/src/components/misc/contentCard.vue
index e553f903..5d17aee6 100644
--- a/packages/renderer/src/components/misc/contentCard.vue
+++ b/packages/renderer/src/components/misc/contentCard.vue
@@ -107,10 +107,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useDisplay } from 'vuetify';
 import { useShowDefederation } from '/@/composables/showDefed';
 import { useSiteColors } from '/@/composables/siteColors';
+import { useImageColorExtraction } from '/@/composables/imageColorExtraction';
 import { type ReleaseItem } from '/@/types';
 import { parseUrlOrCid } from '/@/utils';
 import { useRouter } from 'vue-router';
@@ -118,6 +119,7 @@ import { useRouter } from 'vue-router';
 
 const { showDefederation } = useShowDefederation();
 const { getSiteColor } = useSiteColors();
+const { getColorTintedGradient } = useImageColorExtraction();
 const { xs } = useDisplay();
 const router = useRouter();
 
@@ -127,6 +129,24 @@ const props = defineProps<{
   onClick?: () => void;
 }>();
 
+// Dynamic gradient based on image color
+const dynamicGradient = ref<string>('to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)');
+
+// Extract color when component mounts or image changes
+onMounted(async () => {
+  if (props.item.categoryId === 'tvShow') {
+    const imageUrl = parseUrlOrCid(props.item.thumbnailCID);
+    dynamicGradient.value = await getColorTintedGradient(imageUrl);
+  }
+});
+
+watch(() => props.item.thumbnailCID, async (newCID) => {
+  if (props.item.categoryId === 'tvShow') {
+    const imageUrl = parseUrlOrCid(newCID);
+    dynamicGradient.value = await getColorTintedGradient(imageUrl);
+  }
+});
+
 const cardWidth = computed(() => {
   const categoryId = props.item.categoryId;
   if (categoryId === 'music') {
@@ -179,7 +199,7 @@ const isOverlapping = computed(() => {
 });
 
 const cardBackgroundGradient = computed(() => {
-  return props.item.categoryId === 'tvShow' ? 'to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)' : undefined;
+  return props.item.categoryId === 'tvShow' ? dynamicGradient.value : undefined;
 });
 
 
diff --git a/packages/renderer/src/components/misc/startMenu.vue b/packages/renderer/src/components/misc/startMenu.vue
new file mode 100644
index 00000000..422fe8e6
--- /dev/null
+++ b/packages/renderer/src/components/misc/startMenu.vue
@@ -0,0 +1,248 @@
+<template>
+  <v-dialog
+    v-model="show"
+    width="400"
+    persistent
+    no-click-animation
+  >
+    <v-card
+      color="grey-darken-4"
+      :elevation="24"
+      class="start-menu-card"
+    >
+      <v-list
+        color="transparent"
+        density="comfortable"
+      >
+        <v-list-item
+          title="⚙️ Settings"
+          :data-navigable="true"
+          @click="handleSettings"
+        ></v-list-item>
+        <v-list-item
+          title="🌓 Toggle Dark/Light Mode"
+          :data-navigable="true"
+          @click="toggleTheme"
+        ></v-list-item>
+        <v-list-item
+          title="🎮 Controls"
+          :data-navigable="true"
+          @click="showControls"
+        ></v-list-item>
+        <v-list-item
+          title="ℹ️ About Riff.CC"
+          :data-navigable="true"
+          @click="showAbout"
+        ></v-list-item>
+        <v-divider class="my-2"></v-divider>
+        <v-list-item
+          title="🏠 Home"
+          :data-navigable="true"
+          @click="goHome"
+        ></v-list-item>
+        <v-list-item
+          title="🎵 Music"
+          :data-navigable="true"
+          @click="goMusic"
+        ></v-list-item>
+        <v-list-item
+          title="🎬 Movies"
+          :data-navigable="true"
+          @click="goMovies"
+        ></v-list-item>
+        <v-list-item
+          title="📺 TV Shows"
+          :data-navigable="true"
+          @click="goTVShows"
+        ></v-list-item>
+        <v-divider class="my-2"></v-divider>
+        <v-list-item
+          title="❌ Close Menu"
+          :data-navigable="true"
+          @click="show = false"
+        ></v-list-item>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { useGamepad } from '/@/composables/useGamepad';
+import { useGamepadNavigation } from '/@/composables/useGamepadNavigation';
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+const show = ref(props.modelValue);
+const dialogRef = ref<HTMLElement>();
+const selectedIndex = ref(0);
+const menuItems = ref<HTMLElement[]>([]);
+
+const { onButtonPress, gamepadState } = useGamepad();
+const { focusedElement, lockNavigation, unlockNavigation } = useGamepadNavigation();
+
+// Store the previously focused element
+let previousFocus: HTMLElement | null = null;
+
+watch(() => props.modelValue, (value) => {
+  show.value = value;
+  if (value) {
+    // Lock navigation to menu only
+    lockNavigation();
+    // Store current focus and focus the menu
+    previousFocus = focusedElement.value;
+    nextTick(() => {
+      focusFirstMenuItem();
+    });
+  } else {
+    // Unlock navigation
+    unlockNavigation();
+    // Restore previous focus
+    if (previousFocus) {
+      previousFocus.focus();
+    }
+  }
+});
+
+watch(show, (value) => {
+  emit('update:modelValue', value);
+});
+
+// Focus management
+const focusFirstMenuItem = () => {
+  selectedIndex.value = 0;
+  const items = document.querySelectorAll('.start-menu-card .v-list-item');
+  if (items.length > 0) {
+    (items[0] as HTMLElement).focus();
+  }
+};
+
+// Handle gamepad navigation within menu
+const handleMenuNavigation = () => {
+  if (!show.value) return;
+  
+  const items = document.querySelectorAll('.start-menu-card .v-list-item');
+  if (items.length === 0) return;
+  
+  // D-pad navigation
+  if (gamepadState.value.buttons.down) {
+    selectedIndex.value = Math.min(selectedIndex.value + 1, items.length - 1);
+    (items[selectedIndex.value] as HTMLElement).focus();
+  } else if (gamepadState.value.buttons.up) {
+    selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+    (items[selectedIndex.value] as HTMLElement).focus();
+  }
+  
+  // A button to select
+  if (gamepadState.value.buttons.a) {
+    (items[selectedIndex.value] as HTMLElement).click();
+  }
+  
+  // B button to close
+  if (gamepadState.value.buttons.b) {
+    show.value = false;
+  }
+};
+
+onMounted(() => {
+  // Set up gamepad handlers for menu
+  const interval = setInterval(() => {
+    if (show.value) {
+      handleMenuNavigation();
+    }
+  }, 100);
+  
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+});
+
+// Menu actions that just close the menu
+const handleSettings = () => {
+  console.log('Settings clicked');
+  show.value = false;
+};
+
+const toggleTheme = () => {
+  console.log('Toggle theme - not yet implemented');
+  show.value = false;
+};
+
+const showControls = () => {
+  console.log('Show controls - not yet implemented');
+  show.value = false;
+};
+
+const showAbout = () => {
+  console.log('Show about - not yet implemented');
+  show.value = false;
+};
+
+const goHome = () => {
+  console.log('Go home clicked');
+  show.value = false;
+};
+
+const goMusic = () => {
+  console.log('Go to music clicked');
+  show.value = false;
+};
+
+const goMovies = () => {
+  console.log('Go to movies clicked');
+  show.value = false;
+};
+
+const goTVShows = () => {
+  console.log('Go to TV shows clicked');
+  show.value = false;
+};
+</script>
+
+<style scoped>
+/* Vuetify dialog backdrop override */
+:deep(.v-overlay__scrim) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.5) !important;
+  transition: all 0.3s ease;
+}
+
+.start-menu-card {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.v-list-item {
+  transition: background-color 0.2s ease;
+  padding: 12px 16px;
+}
+
+.v-list-item:hover,
+.v-list-item:focus {
+  background-color: rgba(138, 43, 226, 0.2);
+  outline: 2px solid rgba(138, 43, 226, 0.6);
+  outline-offset: -2px;
+}
+
+/* Hide focus outline from keyboard/gamepad but keep it accessible */
+.v-list-item:focus:not(:focus-visible) {
+  outline: 2px solid rgba(138, 43, 226, 0.6);
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/releases/audioPlayer.vue b/packages/renderer/src/components/releases/audioPlayer.vue
index 01b0edc5..9e4b40a1 100644
--- a/packages/renderer/src/components/releases/audioPlayer.vue
+++ b/packages/renderer/src/components/releases/audioPlayer.vue
@@ -3,6 +3,7 @@
     position="sticky"
     location="bottom right"
     class="w-100 border rounded-t-xl mx-auto"
+    color="black"
     :elevation="24"
     height="100px"
     max-width="960px"
@@ -172,12 +173,13 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, watch} from 'vue';
+import {onMounted, watch, onUnmounted} from 'vue';
 import {useDisplay} from 'vuetify';
 import {useRouter} from 'vue-router';
 import {useAudioAlbum} from '/@/composables/audioAlbum';
 import {usePlaybackController} from '/@/composables/playbackController';
 import {usePlayerVolume} from '/@/composables/playerVolume';
+import {useGlobalPlayback} from '/@/composables/globalPlayback';
 import { parseUrlOrCid } from '/@/utils';
 
 const {xs, smAndDown} = useDisplay();
@@ -230,6 +232,10 @@ const navigateToAlbum = () => {
 
 const defaultSkipTime = 10;
 onMounted(() => {
+  // Register global playback handlers
+  const { registerPlaybackHandlers } = useGlobalPlayback();
+  registerPlaybackHandlers({ play, pause, togglePlay });
+
   if ('mediaSession' in navigator) {
   navigator.mediaSession.setActionHandler('play', play);
   navigator.mediaSession.setActionHandler('pause', pause);
@@ -255,4 +261,10 @@ onMounted(() => {
   navigator.mediaSession.setActionHandler('nexttrack', handleNext);
 }
 });
+
+onUnmounted(() => {
+  // Clear global playback handlers when audio player is unmounted
+  const { clearPlaybackHandlers } = useGlobalPlayback();
+  clearPlaybackHandlers();
+});
 </script>
diff --git a/packages/renderer/src/composables/globalPlayback.ts b/packages/renderer/src/composables/globalPlayback.ts
new file mode 100644
index 00000000..65b5a7b2
--- /dev/null
+++ b/packages/renderer/src/composables/globalPlayback.ts
@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+
+// Global playback state
+const globalPlaybackHandlers = ref<{
+  play: (() => void) | null;
+  pause: (() => void) | null;
+  togglePlay: (() => void) | null;
+}>({
+  play: null,
+  pause: null,
+  togglePlay: null,
+});
+
+export function useGlobalPlayback() {
+  const registerPlaybackHandlers = (handlers: {
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+  }) => {
+    globalPlaybackHandlers.value = handlers;
+  };
+
+  const clearPlaybackHandlers = () => {
+    globalPlaybackHandlers.value = {
+      play: null,
+      pause: null,
+      togglePlay: null,
+    };
+  };
+
+  const globalTogglePlay = () => {
+    if (globalPlaybackHandlers.value.togglePlay) {
+      globalPlaybackHandlers.value.togglePlay();
+    }
+  };
+
+  const globalPlay = () => {
+    if (globalPlaybackHandlers.value.play) {
+      globalPlaybackHandlers.value.play();
+    }
+  };
+
+  const globalPause = () => {
+    if (globalPlaybackHandlers.value.pause) {
+      globalPlaybackHandlers.value.pause();
+    }
+  };
+
+  return {
+    registerPlaybackHandlers,
+    clearPlaybackHandlers,
+    globalTogglePlay,
+    globalPlay,
+    globalPause,
+  };
+}
\ No newline at end of file
diff --git a/packages/renderer/src/composables/imageColorExtraction.ts b/packages/renderer/src/composables/imageColorExtraction.ts
new file mode 100644
index 00000000..64e95859
--- /dev/null
+++ b/packages/renderer/src/composables/imageColorExtraction.ts
@@ -0,0 +1,120 @@
+import { ref, type Ref } from 'vue';
+
+/**
+ * Extracts the dominant color from an image and returns a tinted gradient
+ * Uses Canvas API to sample the image and calculate average color
+ */
+export function useImageColorExtraction() {
+  const extractedColors = ref<Map<string, string>>(new Map());
+
+  /**
+   * Extract dominant color from image URL
+   * Returns a gradient string with the color tinted darker
+   */
+  async function getColorTintedGradient(imageUrl: string | undefined): Promise<string> {
+    // Default gradient if no image
+    if (!imageUrl) {
+      return 'to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)';
+    }
+
+    // Check cache first
+    const cached = extractedColors.value.get(imageUrl);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      // Create an image element
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      
+      // Create a promise to wait for image load
+      const colorPromise = new Promise<string>((resolve) => {
+        img.onload = () => {
+          // Create canvas
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          
+          if (!ctx) {
+            resolve('to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)');
+            return;
+          }
+
+          // Set canvas size (small for performance)
+          const sampleSize = 50;
+          canvas.width = sampleSize;
+          canvas.height = sampleSize;
+          
+          // Draw scaled image
+          ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+          
+          // Get image data
+          const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+          const data = imageData.data;
+          
+          // Calculate average color
+          let r = 0, g = 0, b = 0;
+          let pixelCount = 0;
+          
+          for (let i = 0; i < data.length; i += 4) {
+            // Skip very dark or very light pixels
+            const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            if (brightness > 20 && brightness < 235) {
+              r += data[i];
+              g += data[i + 1];
+              b += data[i + 2];
+              pixelCount++;
+            }
+          }
+          
+          if (pixelCount === 0) {
+            resolve('to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)');
+            return;
+          }
+          
+          // Average the colors
+          r = Math.round(r / pixelCount);
+          g = Math.round(g / pixelCount);
+          b = Math.round(b / pixelCount);
+          
+          // Create gradient with darkened tint
+          // Top: 40% opacity with slight darkening
+          // Bottom: 60% opacity with more darkening
+          const topColor = `rgba(${Math.round(r * 0.7)},${Math.round(g * 0.7)},${Math.round(b * 0.7)},.4)`;
+          const bottomColor = `rgba(${Math.round(r * 0.5)},${Math.round(g * 0.5)},${Math.round(b * 0.5)},.6)`;
+          
+          const gradient = `to bottom, ${topColor}, ${bottomColor}`;
+          resolve(gradient);
+        };
+        
+        img.onerror = () => {
+          // Fallback gradient on error
+          resolve('to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)');
+        };
+      });
+      
+      // Start loading the image
+      img.src = imageUrl;
+      
+      // Wait with timeout
+      const gradient = await Promise.race([
+        colorPromise,
+        new Promise<string>((resolve) => 
+          setTimeout(() => resolve('to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)'), 2000)
+        )
+      ]);
+      
+      // Cache the result
+      extractedColors.value.set(imageUrl, gradient);
+      
+      return gradient;
+    } catch (error) {
+      console.error('Error extracting color:', error);
+      return 'to bottom, rgba(0,0,0,.4), rgba(0,0,0,.41)';
+    }
+  }
+
+  return {
+    getColorTintedGradient
+  };
+}
\ No newline at end of file
diff --git a/packages/renderer/src/composables/useGamepad.ts b/packages/renderer/src/composables/useGamepad.ts
index 0faf3257..7d5e65db 100644
--- a/packages/renderer/src/composables/useGamepad.ts
+++ b/packages/renderer/src/composables/useGamepad.ts
@@ -1,4 +1,5 @@
 import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useInputMethod } from './useInputMethod';
 
 export interface GamepadState {
   connected: boolean;
@@ -31,6 +32,8 @@ const SCROLL_SPEED_MIN = 1;
 const SCROLL_SPEED_MAX = 20;
 
 export function useGamepad() {
+  const { setInputMethod } = useInputMethod();
+  
   const gamepadState = ref<GamepadState>({
     connected: false,
     type: 'generic',
@@ -59,6 +62,7 @@ export function useGamepad() {
   const gamepadIndex = ref<number | null>(null);
   const previousButtonStates = new Map<string, boolean>();
   const buttonCallbacks = new Map<string, () => void>();
+  let hasRecentInput = false;
 
   // Detect gamepad type from ID
   function detectGamepadType(id: string): 'xbox' | 'playstation' | 'switch' | 'generic' {
@@ -108,15 +112,17 @@ export function useGamepad() {
     // }
 
     // Update stick positions with dead zone
-    gamepadState.value.leftStick = {
-      x: applyDeadZone(gamepad.axes[0]),
-      y: applyDeadZone(gamepad.axes[1]),
-    };
+    const leftX = applyDeadZone(gamepad.axes[0]);
+    const leftY = applyDeadZone(gamepad.axes[1]);
+    const rightX = applyDeadZone(gamepad.axes[2]);
+    const rightY = applyDeadZone(gamepad.axes[3]);
     
-    gamepadState.value.rightStick = {
-      x: applyDeadZone(gamepad.axes[2]),
-      y: applyDeadZone(gamepad.axes[3]),
-    };
+    gamepadState.value.leftStick = { x: leftX, y: leftY };
+    gamepadState.value.rightStick = { x: rightX, y: rightY };
+    
+    // Check if there's any gamepad input
+    const hasStickInput = Math.abs(leftX) > 0 || Math.abs(leftY) > 0 || 
+                         Math.abs(rightX) > 0 || Math.abs(rightY) > 0;
 
     // Map buttons (standard gamepad mapping)
     const buttonMappings = {
@@ -138,6 +144,9 @@ export function useGamepad() {
       right: gamepad.buttons[15],
     };
 
+    // Check if any button is pressed
+    let hasButtonInput = false;
+
     // Update button states and trigger callbacks
     Object.entries(buttonMappings).forEach(([key, button]) => {
       if (!button) return; // Skip if button doesn't exist
@@ -149,9 +158,11 @@ export function useGamepad() {
         // Apply dead zone to triggers
         const triggerValue = value > TRIGGER_DEAD_ZONE ? value : 0;
         (gamepadState.value.buttons as any)[key] = triggerValue;
+        if (triggerValue > 0) hasButtonInput = true;
       } else {
         const wasPressed = previousButtonStates.get(key) || false;
         (gamepadState.value.buttons as any)[key] = pressed;
+        if (pressed) hasButtonInput = true;
         
         // Trigger callback on button press (not release)
         if (pressed && !wasPressed && buttonCallbacks.has(key)) {
@@ -161,6 +172,16 @@ export function useGamepad() {
         previousButtonStates.set(key, pressed);
       }
     });
+    
+    // Set input method to gamepad if there's any input
+    if (hasStickInput || hasButtonInput) {
+      if (!hasRecentInput) {
+        setInputMethod('gamepad');
+        hasRecentInput = true;
+      }
+    } else {
+      hasRecentInput = false;
+    }
   }
 
   // Computed values for easier access
diff --git a/packages/renderer/src/composables/useGamepadNavigation.ts b/packages/renderer/src/composables/useGamepadNavigation.ts
index 98946cac..e625ca96 100644
--- a/packages/renderer/src/composables/useGamepadNavigation.ts
+++ b/packages/renderer/src/composables/useGamepadNavigation.ts
@@ -12,14 +12,17 @@ interface NavigableElement {
   height: number;
 }
 
+// Navigation lock for modal dialogs
+const navigationLocked = ref(false);
+
 export function useGamepadNavigation() {
   const router = useRouter();
   const { gamepadState, onButtonPress } = useGamepad();
   
   const focusedElement = ref<HTMLElement | null>(null);
   const navigableElements = ref<NavigableElement[]>([]);
-  const lastNavigationTime = ref(0);
-  const NAVIGATION_DELAY = 200; // ms between navigation actions
+  const lastStickDirection = ref({ x: 0, y: 0 });
+  const lastDpadState = ref({ up: false, down: false, left: false, right: false });
   
   // Custom cursor for right stick
   const cursorPosition = ref({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
@@ -37,17 +40,43 @@ export function useGamepadNavigation() {
   
   // Update navigable elements
   function updateNavigableElements() {
-    const elements = document.querySelectorAll('[data-navigable="true"], a, button, [role="button"], .content-card');
-    navigableElements.value = Array.from(elements).map(el => {
-      const rect = (el as HTMLElement).getBoundingClientRect();
-      return {
-        element: el as HTMLElement,
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2,
-        width: rect.width,
-        height: rect.height,
-      };
-    });
+    // If navigation is locked, only look for elements in the modal
+    if (navigationLocked.value) {
+      const elements = document.querySelectorAll('.start-menu-card [data-navigable="true"], .start-menu-card .v-list-item');
+      navigableElements.value = Array.from(elements).map(el => {
+        const rect = (el as HTMLElement).getBoundingClientRect();
+        return {
+          element: el as HTMLElement,
+          x: rect.left + rect.width / 2,
+          y: rect.top + rect.height / 2,
+          width: rect.width,
+          height: rect.height,
+        };
+      });
+    } else {
+      const elements = document.querySelectorAll('[data-navigable="true"], a[href], button:not(:disabled), [role="button"], .content-card[cursor-pointer], .v-btn:not(:disabled), .v-list-item');
+      navigableElements.value = Array.from(elements)
+        .filter(el => {
+          const element = el as HTMLElement;
+          // Filter out non-interactive elements
+          if (element.tagName === 'DIV' && !element.classList.contains('content-card') && !element.hasAttribute('data-navigable')) {
+            return false;
+          }
+          // Make sure element is visible
+          const rect = element.getBoundingClientRect();
+          return rect.width > 0 && rect.height > 0;
+        })
+        .map(el => {
+          const rect = (el as HTMLElement).getBoundingClientRect();
+          return {
+            element: el as HTMLElement,
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+            width: rect.width,
+            height: rect.height,
+          };
+        });
+    }
   }
   
   // Find nearest element in a direction
@@ -105,11 +134,11 @@ export function useGamepadNavigation() {
   
   // Handle left stick navigation
   watch([() => gamepadState.value.leftStick, () => gamepadState.value.buttons], ([stick, buttons]) => {
-    const now = Date.now();
-    if (now - lastNavigationTime.value < NAVIGATION_DELAY) return;
+    // Skip navigation if locked (modal is open)
+    if (navigationLocked.value) return;
     
     // Update control method and hide cursor when using left stick
-    if (Math.abs(stick.x) > 0.1 || Math.abs(stick.y) > 0.1 || 
+    if (Math.abs(stick.x) > 0.3 || Math.abs(stick.y) > 0.3 || 
         buttons.up || buttons.down || buttons.left || buttons.right) {
       lastControlMethod.value = 'leftStick';
       showCursor.value = false;
@@ -119,7 +148,7 @@ export function useGamepadNavigation() {
       }
     }
     
-    // D-pad navigation
+    // D-pad navigation (instant snap)
     if (buttons.up) {
       const element = findNearestElement('up');
       if (element) {
@@ -146,10 +175,11 @@ export function useGamepadNavigation() {
       }
     }
     
-    // Analog stick navigation
-    if (Math.abs(stick.x) > 0.5 || Math.abs(stick.y) > 0.5) {
+    // Left stick navigation (snap to elements, no free movement)
+    if (Math.abs(stick.x) > 0.6 || Math.abs(stick.y) > 0.6) {
       let direction: 'up' | 'down' | 'left' | 'right';
       
+      // Determine primary direction with stronger threshold
       if (Math.abs(stick.x) > Math.abs(stick.y)) {
         direction = stick.x > 0 ? 'right' : 'left';
       } else {
@@ -162,12 +192,6 @@ export function useGamepadNavigation() {
         lastNavigationTime.value = now;
       }
     }
-    
-    // Scroll with variable speed
-    if (Math.abs(stick.y) > 0.1) {
-      const scrollSpeed = 10 + Math.abs(stick.y) * 40; // 10-50px per frame
-      window.scrollBy(0, stick.y * scrollSpeed);
-    }
   });
   
   // Handle right stick cursor
@@ -264,10 +288,11 @@ export function useGamepadNavigation() {
   
   // Removed - R3 is now used for play/pause
   
-  onButtonPress('start', () => {
-    // Open menu
-    router.push('/menu');
-  });
+  // Start button is handled in App.vue for the start menu overlay
+  // onButtonPress('start', () => {
+  //   // Open menu
+  //   router.push('/menu');
+  // });
   
   // L3/R3 for play/pause
   const playPauseHandler = () => {
@@ -347,10 +372,23 @@ export function useGamepadNavigation() {
     cursor?.remove();
   });
   
+  // Lock/unlock navigation for modal dialogs
+  function lockNavigation() {
+    navigationLocked.value = true;
+    updateNavigableElements();
+  }
+  
+  function unlockNavigation() {
+    navigationLocked.value = false;
+    updateNavigableElements();
+  }
+
   return {
     focusedElement,
     showCursor,
     cursorPosition,
     updateNavigableElements,
+    lockNavigation,
+    unlockNavigation,
   };
 }
\ No newline at end of file
diff --git a/packages/renderer/src/composables/useInputMethod.ts b/packages/renderer/src/composables/useInputMethod.ts
new file mode 100644
index 00000000..0591c923
--- /dev/null
+++ b/packages/renderer/src/composables/useInputMethod.ts
@@ -0,0 +1,64 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export type InputMethod = 'mouse' | 'gamepad' | 'keyboard';
+
+const currentInputMethod = ref<InputMethod>('mouse');
+let lastMousePosition = { x: 0, y: 0 };
+let mouseCheckInterval: number | undefined;
+
+export function useInputMethod() {
+  function setInputMethod(method: InputMethod) {
+    if (currentInputMethod.value !== method) {
+      currentInputMethod.value = method;
+      updateBodyClass(method);
+    }
+  }
+
+  function updateBodyClass(method: InputMethod) {
+    document.body.classList.remove('input-mouse', 'input-gamepad', 'input-keyboard');
+    document.body.classList.add(`input-${method}`);
+  }
+
+  // Detect mouse movement
+  function handleMouseMove(e: MouseEvent) {
+    const moved = Math.abs(e.clientX - lastMousePosition.x) > 5 || 
+                  Math.abs(e.clientY - lastMousePosition.y) > 5;
+    
+    if (moved) {
+      lastMousePosition = { x: e.clientX, y: e.clientY };
+      setInputMethod('mouse');
+    }
+  }
+
+  // Detect keyboard input
+  function handleKeyboard(e: KeyboardEvent) {
+    // Ignore gamepad-simulated keyboard events
+    if (!e.isTrusted) return;
+    setInputMethod('keyboard');
+  }
+
+  onMounted(() => {
+    // Initialize body class
+    updateBodyClass(currentInputMethod.value);
+    
+    // Add event listeners
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('keydown', handleKeyboard);
+    
+    // Store initial mouse position
+    lastMousePosition = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('keydown', handleKeyboard);
+    if (mouseCheckInterval) {
+      clearInterval(mouseCheckInterval);
+    }
+  });
+
+  return {
+    currentInputMethod,
+    setInputMethod,
+  };
+}
\ No newline at end of file
diff --git a/packages/renderer/src/composables/userSession.ts b/packages/renderer/src/composables/userSession.ts
index 23a21d34..55583efc 100644
--- a/packages/renderer/src/composables/userSession.ts
+++ b/packages/renderer/src/composables/userSession.ts
@@ -11,15 +11,11 @@ const userData: Ref<UserData | null> = ref(null);
 
 export const useUserSession = () => {
   onMounted(async () => {
-    const svg = await [
-      import('../../public/undraw/undraw_pic_profile_re_7g2h.svg'),
-      import('../../public/undraw/undraw_profile_pic_re_iwgo.svg'),
-    ][Math.floor(Math.random() * 2)];
     userData.value = {
       id: '1',
       name: 'Test User',
       email: 'testing@riff.cc',
-      avatar: svg.default,
+      avatar: '', // Let the accountMenu component handle the default avatar
     };
   });
 
diff --git a/packages/renderer/src/views/homePage.vue b/packages/renderer/src/views/homePage.vue
index e59fb896..b14f9257 100644
--- a/packages/renderer/src/views/homePage.vue
+++ b/packages/renderer/src/views/homePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height pb-16">
+  <v-container fluid class="fill-height pb-16">
     <v-sheet
       v-if="isLoading"
       color="transparent"

From 4ff243c223a07e593f3baa9405290520f7816718 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sun, 3 Aug 2025 10:48:43 +0100
Subject: [PATCH 11/17] Draggable video player

---
 package.json                                  |   3 +-
 .../components/admin/featuredManagement.vue   | 471 +++++++++++++++---
 .../src/components/releases/albumViewer.vue   | 118 ++++-
 .../src/components/releases/videoPlayer.vue   | 318 +++++++++---
 4 files changed, 775 insertions(+), 135 deletions(-)

diff --git a/package.json b/package.json
index 1cb72cae..27a57e85 100644
--- a/package.json
+++ b/package.json
@@ -71,9 +71,8 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@riffcc/lens-sdk": "file:../lens-sdk",
+    "@riffcc/lens-sdk": "file:./lens-sdk",
     "@multiformats/multiaddr": "^12.5.1",
-    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
     "core-js": "^3.43.0",
diff --git a/packages/renderer/src/components/admin/featuredManagement.vue b/packages/renderer/src/components/admin/featuredManagement.vue
index e360f208..44f848bf 100644
--- a/packages/renderer/src/components/admin/featuredManagement.vue
+++ b/packages/renderer/src/components/admin/featuredManagement.vue
@@ -15,12 +15,26 @@
             ref="formRef"
             @submit.prevent="handleOnSubmit"
           >
-            <v-text-field
-              v-model="newFeaturedRelease.releaseId"
-              label="Release ID"
+            <v-autocomplete
+              v-model="selectedRelease"
+              :items="releases || []"
+              :loading="releasesLoading"
+              :item-title="(item) => item.name"
+              :item-value="(item) => item"
+              label="Select Release"
+              clearable
               validate-on="input"
-              :rules="rules"
-            ></v-text-field>
+              :rules="releaseRules"
+              @update:search="searchQuery = $event"
+            >
+              <template #item="{ props, item }">
+                <v-list-item
+                  v-bind="props"
+                  :title="item.raw.name"
+                  :subtitle="`ID: ${item.raw.id.substring(0, 8)}...`"
+                />
+              </template>
+            </v-autocomplete>
             <v-text-field
               v-model="newFeaturedRelease.startTime"
               type="datetime-local"
@@ -58,69 +72,93 @@
       <v-col
         cols="12"
         md="6"
-        lg="5"
+        lg="7"
       >
         <v-sheet
           class="px-6 py-4 mx-auto h-100"
-          max-width="448px"
+          max-width="600px"
           min-height="256px"
         >
           <h6 class="text-h6 font-weight-bold mb-4">Featured Releases</h6>
-          <v-list v-if="(featuredReleases?.length ?? 0) > 0">
-            <v-list-item
-              v-for="featuredRelease in featuredReleases"
+          <v-list 
+            v-if="(featuredWithReleases?.length ?? 0) > 0"
+            class="featured-list"
+          >
+            <template
+              v-for="(featuredRelease, index) in featuredWithReleases"
               :key="featuredRelease.id"
-              class="px-0"
-              :title="featuredRelease.releaseId"
             >
-              <template #title="{ title }">
-                <p class="text-subtitle-2 text-center">{{ title }}</p>
-              </template>
-              <template #prepend>
-                <v-sheet
-                  width="80"
-                  class="d-flex justify-center"
-                >
-                  <template v-if="filterActivedFeatured(featuredRelease)">
-                    <v-chip
-                      v-if="filterPromotedFeatured(featuredRelease)"
-                      color="yellow"
-                      size="small"
-                      class="w-100 d-flex justify-center"
-                    >
-                      Promoted
-                    </v-chip>
+              <v-list-item
+                class="px-0 featured-item"
+                :class="{ 'dragging': draggedIndex === index }"
+                :draggable="filterActivedFeatured(featuredRelease)"
+                @dragstart="onDragStart(index, $event)"
+                @dragend="onDragEnd"
+                @dragover="onDragOver(index, $event)"
+                @drop="onDrop(index, $event)"
+                @click="filterActivedFeatured(featuredRelease) ? editFeaturedRelease(featuredRelease) : null"
+                :style="{ cursor: filterActivedFeatured(featuredRelease) ? 'pointer' : 'default' }"
+              >
+                <template #prepend>
+                  <v-icon
+                    v-if="filterActivedFeatured(featuredRelease)"
+                    icon="mdi-drag-vertical"
+                    class="drag-handle mr-2"
+                    :style="{ cursor: 'grab' }"
+                  />
+                  <v-sheet
+                    width="90"
+                    class="d-flex justify-center"
+                  >
+                    <template v-if="filterActivedFeatured(featuredRelease)">
+                      <v-chip
+                        v-if="filterPromotedFeatured(featuredRelease)"
+                        color="yellow"
+                        size="small"
+                        class="w-100 d-flex justify-center"
+                      >
+                        Promoted
+                      </v-chip>
+                      <v-chip
+                        v-else
+                        color="green"
+                        size="small"
+                        class="w-100 d-flex justify-center"
+                      >
+                        Active
+                      </v-chip>
+                    </template>
                     <v-chip
                       v-else
-                      color="green"
+                      color="red"
                       size="small"
                       class="w-100 d-flex justify-center"
                     >
-                      Active
+                      Ended
                     </v-chip>
-                  </template>
-                  <v-chip
-                    v-else
-                    color="red"
+                  </v-sheet>
+                </template>
+                <template #title>
+                  <div class="d-flex flex-column">
+                    <span class="text-subtitle-1">{{ featuredRelease.releaseName || 'Loading...' }}</span>
+                    <span class="text-caption text-medium-emphasis">
+                      {{ formatDateRange(featuredRelease.startTime, featuredRelease.endTime) }}
+                    </span>
+                  </div>
+                </template>
+                <template #append>
+                  <v-btn
+                    :icon="filterActivedFeatured(featuredRelease) ? '$check' : 'mdi-delete'"
                     size="small"
-                    class="w-100 d-flex justify-center"
+                    density="compact"
+                    :color="filterActivedFeatured(featuredRelease) ? 'warning' : 'error'"
+                    @click.stop="filterActivedFeatured(featuredRelease) ? (featuredItemIdToEnd = featuredRelease) : confirmRemoveFeaturedRelease(featuredRelease)"
                   >
-                    Ended
-                  </v-chip>
-                </v-sheet>
-              </template>
-              <template #append>
-                <v-btn
-                  icon="$check"
-                  size="small"
-                  density="compact"
-                  :disabled="!filterActivedFeatured(featuredRelease)"
-                  :color="filterActivedFeatured(featuredRelease) ? 'blue' : 'default'"
-                  @click="featuredItemIdToEnd = featuredRelease"
-                >
-                </v-btn>
-              </template>
-            </v-list-item>
+                  </v-btn>
+                </template>
+              </v-list-item>
+              <v-divider v-if="index < featuredWithReleases.length - 1" />
+            </template>
           </v-list>
           <div
             v-else
@@ -131,12 +169,68 @@
         </v-sheet>
       </v-col>
     </v-row>
+    
+    <!-- Edit Dialog -->
+    <v-dialog
+      v-model="showEditDialog"
+      width="400"
+    >
+      <v-card>
+        <v-card-title>Edit Featured Release</v-card-title>
+        <v-card-text>
+          <v-form ref="editFormRef">
+            <v-text-field
+              v-model="editingFeatured.startTime"
+              type="datetime-local"
+              :min="minEditDate"
+              :max="maxDate"
+              :rules="rules"
+              label="Start at"
+            ></v-text-field>
+            <v-text-field
+              v-model="editingFeatured.endTime"
+              type="datetime-local"
+              :min="minEditEndDate"
+              :max="maxDate"
+              :rules="editEndAtRules"
+              label="End at"
+            ></v-text-field>
+            <v-switch
+              v-model="editingFeatured.promoted"
+              :color="editingFeatured.promoted ? 'primary' : 'default'"
+              label="Promoted"
+            ></v-switch>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text="Cancel"
+            @click="showEditDialog = false"
+          />
+          <v-btn
+            color="primary"
+            text="Save"
+            :loading="isLoading"
+            @click="saveEditedFeatured"
+          />
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    
     <confirmation-dialog
-      message="Are you sure you want to end this featured?"
+      message="Are you sure you want to end this featured release?"
       :dialog-open="Boolean(featuredItemIdToEnd)"
       :on-close="() => featuredItemIdToEnd = null"
       :on-confirm="confirmEndFeaturedRelease"
     ></confirmation-dialog>
+    
+    <confirmation-dialog
+      message="Remove this ended featured release from the list?"
+      :dialog-open="Boolean(featuredItemToRemove)"
+      :on-close="() => featuredItemToRemove = null"
+      :on-confirm="confirmRemoveFeaturedRelease"
+    ></confirmation-dialog>
   </v-container>
   <v-snackbar
     v-model="showSnackbar"
@@ -160,8 +254,15 @@ import { computed, onMounted, ref, watch, type Ref } from 'vue';
 import { useSnackbarMessage } from '/@/composables/snackbarMessage';
 import confirmationDialog from '/@/components/misc/confimationDialog.vue';
 import { filterActivedFeatured, filterPromotedFeatured } from '/@/utils';
-import type { FeaturedReleaseItem } from '/@/types';
-import { useAddFeaturedReleaseMutation, useEditFeaturedReleaseMutation, useGetFeaturedReleasesQuery } from '/@/plugins/lensService/hooks';
+import type { FeaturedReleaseItem, ReleaseItem } from '/@/types';
+import { 
+  useAddFeaturedReleaseMutation, 
+  useEditFeaturedReleaseMutation, 
+  useGetFeaturedReleasesQuery,
+  useGetReleasesQuery,
+  useGetReleaseQuery,
+  useDeleteFeaturedReleaseMutation
+} from '/@/plugins/lensService/hooks';
 
 const props = defineProps<{
   initialFeatureData: Partial<FeaturedReleaseItem> | null;
@@ -174,9 +275,36 @@ const emit = defineEmits<{
 const { snackbarMessage, showSnackbar, openSnackbar, closeSnackbar } = useSnackbarMessage();
 
 const { data: featuredReleases } = useGetFeaturedReleasesQuery();
+const { data: releases, isLoading: releasesLoading } = useGetReleasesQuery();
+
+// Enhanced featured releases with release names and sorted by order
+const featuredWithReleases = computed(() => {
+  if (!featuredReleases.value) return [];
+  
+  const enhanced = featuredReleases.value.map(featured => ({
+    ...featured,
+    releaseName: releases.value?.find(r => r.id === featured.releaseId)?.name || 'Unknown Release',
+    // Ensure order exists for TypeScript, but it might be undefined
+    order: (featured as any).order
+  }));
+  
+  // Sort by order field if present, otherwise by created date
+  return enhanced.sort((a, b) => {
+    // If both have order, sort by order (ascending)
+    if (a.order !== undefined && b.order !== undefined) {
+      return a.order - b.order;
+    }
+    // If only one has order, it comes first
+    if (a.order !== undefined) return -1;
+    if (b.order !== undefined) return 1;
+    // Otherwise sort by created date (newest first)
+    return new Date(b.created).getTime() - new Date(a.created).getTime();
+  });
+});
+
 const addFeaturedReleaseMutation = useAddFeaturedReleaseMutation({
   onSuccess: () => {
-    openSnackbar('Featured release created succefully.', 'success');
+    openSnackbar('Featured release created successfully.', 'success');
     resetForm();
   },
   onError: (e) => {
@@ -184,28 +312,61 @@ const addFeaturedReleaseMutation = useAddFeaturedReleaseMutation({
     openSnackbar(`Error creating featured release: ${e.message.slice(0, 200)}`, 'error');
   },
 });
+
 const editFeaturedReleaseMutation = useEditFeaturedReleaseMutation({
   onSuccess: () => {
-    openSnackbar('Featured release ended succefully.', 'success');
-    resetForm();
+    openSnackbar('Featured release updated successfully.', 'success');
+    showEditDialog.value = false;
+  },
+  onError: (e) => {
+    console.error('Error updating featured release:', e);
+    openSnackbar(`Error updating featured release: ${e.message.slice(0, 200)}`, 'error');
+  },
+});
+
+const deleteFeaturedReleaseMutation = useDeleteFeaturedReleaseMutation({
+  onSuccess: () => {
+    openSnackbar('Featured release removed successfully.', 'success');
   },
   onError: (e) => {
-    console.error('Error ending featured release:', e);
-    openSnackbar(`Error ending featured release: ${e.message.slice(0, 200)}`, 'error');
+    console.error('Error removing featured release:', e);
+    openSnackbar(`Error removing featured release: ${e.message.slice(0, 200)}`, 'error');
   },
 });
 
+const selectedRelease: Ref<ReleaseItem | null> = ref(null);
 const newFeaturedRelease: Ref<Partial<FeaturedReleaseItem>> = ref({});
+const searchQuery = ref('');
 
 const formRef = ref();
-const isLoading = computed(() => addFeaturedReleaseMutation.isPending.value || editFeaturedReleaseMutation.isPending.value);
+const editFormRef = ref();
+const reorderingLoading = ref(false);
+const isLoading = computed(() => 
+  addFeaturedReleaseMutation.isPending.value || 
+  editFeaturedReleaseMutation.isPending.value ||
+  deleteFeaturedReleaseMutation.isPending.value ||
+  reorderingLoading.value
+);
 
 const featuredItemIdToEnd: Ref<FeaturedReleaseItem | null> = ref(null);
+const featuredItemToRemove: Ref<FeaturedReleaseItem | null> = ref(null);
+
+// Edit dialog state
+const showEditDialog = ref(false);
+const editingFeatured: Ref<Partial<FeaturedReleaseItem>> = ref({});
+
+// Drag and drop state
+const draggedIndex = ref<number | null>(null);
+const dragOverIndex = ref<number | null>(null);
 
 const rules = [
   (value: string) => Boolean(value) || 'Required field.',
 ];
 
+const releaseRules = [
+  (value: ReleaseItem) => Boolean(value) || 'Please select a release.',
+];
+
 const endAtRules = [
   (value: string | null) => !newFeaturedRelease.value.startTime || Boolean(value) || 'End date is required if start date is set.',
   (value: string | null) => {
@@ -214,9 +375,19 @@ const endAtRules = [
   },
 ];
 
+const editEndAtRules = [
+  (value: string | null) => !editingFeatured.value.startTime || Boolean(value) || 'End date is required if start date is set.',
+  (value: string | null) => {
+    if (!value || !editingFeatured.value.startTime) return true;
+    return new Date(value) > new Date(editingFeatured.value.startTime) || 'End date must be after start date.';
+  },
+];
+
 const minDate = ref<string | null>(null);
 const maxDate = ref<string | null>(null);
 const minEndDate = ref<string | null>(null);
+const minEditDate = ref<string | null>(null);
+const minEditEndDate = ref<string | null>(null);
 
 onMounted(() => {
   const now = new Date();
@@ -231,11 +402,23 @@ watch(() => props.initialFeatureData, (newData) => {
     newFeaturedRelease.value = {
       ...newData,
     };
+    
+    // Find and select the release
+    if (newData.releaseId && releases.value) {
+      selectedRelease.value = releases.value.find(r => r.id === newData.releaseId) || null;
+    }
 
     emit('initial-data-consumed');
   }
 }, { immediate: true });
 
+watch(() => selectedRelease.value, (release) => {
+  if (release) {
+    newFeaturedRelease.value.releaseId = release.id;
+  } else {
+    newFeaturedRelease.value.releaseId = undefined;
+  }
+});
 
 watch(() => newFeaturedRelease.value.startTime, newStartAt => {
   minEndDate.value = null;
@@ -253,8 +436,17 @@ watch(() => newFeaturedRelease.value.startTime, newStartAt => {
   }
 });
 
+watch(() => editingFeatured.value.startTime, newStartAt => {
+  minEditEndDate.value = null;
+  if (newStartAt) {
+    const newDate = new Date(newStartAt);
+    newDate.setMinutes(newDate.getMinutes() + 10);
+    minEditEndDate.value = newDate.toISOString().substring(0, 16);
+  }
+});
 
 const resetForm = () => {
+  selectedRelease.value = null;
   newFeaturedRelease.value = {
     releaseId: undefined,
     startTime: undefined,
@@ -276,12 +468,19 @@ const readyToSave = computed(() => {
   ) {
     const startTime = (new Date(data.startTime)).toISOString();
     const endTime = (new Date(data.endTime)).toISOString();
+    
+    // Calculate the next order number
+    const maxOrder = featuredReleases.value?.reduce((max, item) => {
+      const itemOrder = (item as any).order;
+      return itemOrder !== undefined && itemOrder > max ? itemOrder : max;
+    }, -1) ?? -1;
 
     return {
       releaseId: data.releaseId,
       startTime,
       endTime,
       promoted: data.promoted,
+      order: maxOrder + 1,
     };
   }
   return undefined;
@@ -294,6 +493,33 @@ const handleOnSubmit = async () => {
   addFeaturedReleaseMutation.mutate(readyToSave.value);
 };
 
+const editFeaturedRelease = (featured: FeaturedReleaseItem) => {
+  const startDate = new Date(featured.startTime);
+  const endDate = new Date(featured.endTime);
+  
+  // Allow editing past dates for active features
+  minEditDate.value = startDate < new Date() ? startDate.toISOString().substring(0, 16) : new Date().toISOString().substring(0, 16);
+  
+  editingFeatured.value = {
+    ...featured,
+    startTime: startDate.toISOString().substring(0, 16),
+    endTime: endDate.toISOString().substring(0, 16),
+  };
+  showEditDialog.value = true;
+};
+
+const saveEditedFeatured = async () => {
+  if (!editFormRef.value?.isValid || !editingFeatured.value.id) return;
+  
+  const startTime = new Date(editingFeatured.value.startTime!).toISOString();
+  const endTime = new Date(editingFeatured.value.endTime!).toISOString();
+  
+  editFeaturedReleaseMutation.mutate({
+    ...editingFeatured.value as FeaturedReleaseItem,
+    startTime,
+    endTime,
+  });
+};
 
 const confirmEndFeaturedRelease = async () => {
   if (!featuredItemIdToEnd.value) return;
@@ -304,4 +530,127 @@ const confirmEndFeaturedRelease = async () => {
   featuredItemIdToEnd.value = null;
 };
 
+const confirmRemoveFeaturedRelease = (featured?: FeaturedReleaseItem) => {
+  if (featured) {
+    featuredItemToRemove.value = featured;
+  } else if (featuredItemToRemove.value) {
+    deleteFeaturedReleaseMutation.mutate(featuredItemToRemove.value.id);
+    featuredItemToRemove.value = null;
+  }
+};
+
+const formatDateRange = (startTime: string, endTime: string) => {
+  const start = new Date(startTime);
+  const end = new Date(endTime);
+  const now = new Date();
+  
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric',
+      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+    });
+  };
+  
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', { 
+      hour: 'numeric', 
+      minute: '2-digit',
+      hour12: true 
+    });
+  };
+  
+  if (start.toDateString() === end.toDateString()) {
+    return `${formatDate(start)} • ${formatTime(start)} - ${formatTime(end)}`;
+  } else {
+    return `${formatDate(start)} ${formatTime(start)} - ${formatDate(end)} ${formatTime(end)}`;
+  }
+};
+
+// Drag and drop handlers
+const onDragStart = (index: number, event: DragEvent) => {
+  draggedIndex.value = index;
+  event.dataTransfer!.effectAllowed = 'move';
+  event.dataTransfer!.setData('text/html', ''); // Firefox requires this
+};
+
+const onDragEnd = () => {
+  draggedIndex.value = null;
+  dragOverIndex.value = null;
+};
+
+const onDragOver = (index: number, event: DragEvent) => {
+  event.preventDefault();
+  event.dataTransfer!.dropEffect = 'move';
+  dragOverIndex.value = index;
+};
+
+const onDrop = async (dropIndex: number, event: DragEvent) => {
+  event.preventDefault();
+  
+  if (draggedIndex.value === null || draggedIndex.value === dropIndex) {
+    return;
+  }
+  
+  const items = [...featuredWithReleases.value];
+  const [draggedItem] = items.splice(draggedIndex.value, 1);
+  items.splice(dropIndex, 0, draggedItem);
+  
+  // Update order field for all items
+  try {
+    reorderingLoading.value = true;
+    
+    // Update each item with its new order
+    const updatePromises = items.map((item, index) => {
+      // Only update if order changed or item didn't have order before
+      if (item.order !== index || item.order === undefined) {
+        return editFeaturedReleaseMutation.mutateAsync({
+          ...item,
+          order: index
+        });
+      }
+      return Promise.resolve();
+    });
+    
+    await Promise.all(updatePromises);
+    openSnackbar('Featured releases reordered successfully!', 'success');
+    
+  } catch (error) {
+    console.error('Error reordering featured releases:', error);
+    openSnackbar('Failed to reorder featured releases', 'error');
+  } finally {
+    reorderingLoading.value = false;
+  }
+  
+  draggedIndex.value = null;
+  dragOverIndex.value = null;
+};
 </script>
+
+<style scoped>
+.featured-list {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.featured-item {
+  transition: all 0.3s ease;
+}
+
+.featured-item.dragging {
+  opacity: 0.5;
+}
+
+.featured-item:hover .drag-handle {
+  opacity: 1;
+}
+
+.drag-handle {
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+}
+
+.featured-item[draggable="true"]:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/releases/albumViewer.vue b/packages/renderer/src/components/releases/albumViewer.vue
index 4e2c40e7..24de027f 100644
--- a/packages/renderer/src/components/releases/albumViewer.vue
+++ b/packages/renderer/src/components/releases/albumViewer.vue
@@ -156,7 +156,7 @@
   </v-sheet>
 </template>
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, onUnmounted, ref} from 'vue';
 import {useRouter} from 'vue-router';
 import {useDisplay} from 'vuetify';
 import trackDownloaderDialog from './trackDownloader.vue';
@@ -178,6 +178,10 @@ const trackWarnings = ref<Map<number, string>>(new Map());
 const id3TrackData = ref<Map<number, { title: string; artist?: string }>>(new Map());
 const isFixingTracks = ref(false);
 
+// Abort controller for cancelling in-flight requests
+const abortController = ref<AbortController | null>(null);
+const audioElements = ref<HTMLAudioElement[]>([]);
+
 // Parse metadata if it's a string
 const metadata = computed(() => {
   if (typeof props.release.metadata === 'string') {
@@ -206,9 +210,22 @@ const totalDuration = computed(() => {
   const seconds = totalSeconds % 60;
   
   if (hours > 0) {
-    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    // Format as "1h 37m" for albums
+    if (minutes > 0) {
+      return `${hours}h ${minutes}m`;
+    } else {
+      return `${hours}h`;
+    }
+  } else if (totalSeconds >= 3600) {
+    // Exactly 1 hour
+    return '1h';
   } else {
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    // Format as "48m 5s" for albums under an hour
+    if (seconds > 0) {
+      return `${minutes}m ${seconds}s`;
+    } else {
+      return `${minutes}m`;
+    }
   }
 });
 
@@ -449,41 +466,98 @@ async function fixAllTrackTitles() {
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '';
-  const minutes = Math.floor(seconds / 60);
+  
+  const totalMinutes = Math.floor(seconds / 60);
   const remainingSeconds = Math.floor(seconds % 60);
-  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  
+  // If track is 60 minutes or longer, use hour format
+  if (totalMinutes >= 60) {
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (minutes > 0) {
+      return `${hours}h ${minutes}m`;
+    } else {
+      return `${hours}h`;
+    }
+  }
+  
+  // Otherwise use traditional minute:second format
+  return `${totalMinutes}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
 
 async function loadTrackMetadataAndVerify() {
+  // Cancel any previous requests
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+  
+  // Clear previous audio elements
+  audioElements.value.forEach(audio => {
+    audio.src = '';
+    audio.remove();
+  });
+  audioElements.value = [];
+  
+  // Create new abort controller
+  abortController.value = new AbortController();
+  const signal = abortController.value.signal;
+  
   // Load durations for all tracks, and ID3 tags only for admins
   const updatedTracks = await Promise.all(
     albumFiles.value.map(async (track, index) => {
+      if (signal.aborted) return track;
+      
       try {
         const url = parseUrlOrCid(track.cid);
         
         // Load audio metadata for duration if not already stored
         if (!track.duration) {
           const audio = new Audio();
+          audioElements.value.push(audio); // Track for cleanup
           audio.crossOrigin = 'anonymous';
           audio.src = url;
           
           const trackWithDuration = await new Promise<AudioTrack>((resolve) => {
-            audio.addEventListener('loadedmetadata', () => {
-              resolve({
-                ...track,
-                duration: formatTime(audio.duration)
-              });
-            });
+            const cleanup = () => {
+              audio.removeEventListener('loadedmetadata', onLoadedMetadata);
+              audio.removeEventListener('error', onError);
+            };
+            
+            const onLoadedMetadata = () => {
+              cleanup();
+              if (!signal.aborted) {
+                resolve({
+                  ...track,
+                  duration: formatTime(audio.duration)
+                });
+              } else {
+                resolve(track);
+              }
+            };
             
-            audio.addEventListener('error', () => {
-              console.warn(`Failed to load duration for track: ${track.title}`);
+            const onError = () => {
+              cleanup();
+              // Silently fail - durations should be stored in metadata anyway
               resolve(track); // Return track without duration on error
+            };
+            
+            audio.addEventListener('loadedmetadata', onLoadedMetadata);
+            audio.addEventListener('error', onError);
+            
+            // Check if aborted
+            signal.addEventListener('abort', () => {
+              cleanup();
+              audio.src = '';
+              resolve(track);
             });
             
             // Timeout after 10 seconds
             setTimeout(() => {
-              audio.src = ''; // Cancel loading
-              resolve(track);
+              if (!signal.aborted) {
+                cleanup();
+                audio.src = ''; // Cancel loading
+                resolve(track);
+              }
             }, 10000);
           });
           
@@ -548,4 +622,18 @@ onMounted(async () => {
     isLoading.value = false;
   }
 });
+
+onUnmounted(() => {
+  // Cancel any in-flight requests
+  if (abortController.value) {
+    abortController.value.abort();
+  }
+  
+  // Clean up audio elements
+  audioElements.value.forEach(audio => {
+    audio.src = '';
+    audio.remove();
+  });
+  audioElements.value = [];
+});
 </script>
diff --git a/packages/renderer/src/components/releases/videoPlayer.vue b/packages/renderer/src/components/releases/videoPlayer.vue
index c0dcfe36..0f747b60 100644
--- a/packages/renderer/src/components/releases/videoPlayer.vue
+++ b/packages/renderer/src/components/releases/videoPlayer.vue
@@ -36,6 +36,7 @@
           
           <!-- Now Playing bar -->
           <v-sheet
+            v-if="isHovering"
             color="rgba(0, 0, 0, 0.8)"
             class="position-absolute top-0 w-100 d-flex align-center px-2"
             height="32"
@@ -54,6 +55,26 @@
             ></v-btn>
           </v-sheet>
           
+          <!-- Resize handles -->
+          <template v-if="floating">
+            <div
+              class="resize-handle resize-handle-nw"
+              @mousedown="startResize('nw', $event)"
+            ></div>
+            <div
+              class="resize-handle resize-handle-ne"
+              @mousedown="startResize('ne', $event)"
+            ></div>
+            <div
+              class="resize-handle resize-handle-sw"
+              @mousedown="startResize('sw', $event)"
+            ></div>
+            <div
+              class="resize-handle resize-handle-se"
+              @mousedown="startResize('se', $event)"
+            ></div>
+          </template>
+          
           <!-- Center play arrow -->
           <v-btn
             v-if="isHovering && !isPlaying"
@@ -74,12 +95,12 @@
           ref="videoPlayerRef"
           autoplay
           :style="{
-            maxHeight: floating ? 'calc(100% - 32px)' : `${displayHeight - 64}px`,
+            maxHeight: floating ? '100%' : `${displayHeight - 64}px`,
             width: '100%',
-            height: floating ? 'calc(100% - 32px)' : '100%',
+            height: '100%',
             objectFit: floating ? 'cover' : 'contain',
-            position: floating ? 'absolute' : 'relative',
-            top: floating ? '32px' : '0',
+            position: 'relative',
+            top: 0,
             left: 0,
             backgroundColor: '#0a0a0a',
           }"
@@ -87,14 +108,46 @@
           :controls="false"
           crossorigin="anonymous"
           @click="togglePlay"
-          @loadeddata="play"
+          @loadeddata="onVideoLoaded"
           @canplay="canPlay"
           @progress="updateProgress"
+          @error="onVideoError"
+          @loadedmetadata="onLoadedMetadata"
         ></video>
 
+        <!-- Codec error overlay -->
+        <v-sheet
+          v-if="codecError"
+          color="rgba(0, 0, 0, 0.9)"
+          class="position-absolute d-flex align-center justify-center"
+          :style="{
+            top: floating ? '32px' : 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 998
+          }"
+        >
+          <div class="text-center pa-6">
+            <v-icon
+              size="64"
+              color="warning"
+              class="mb-4"
+            >mdi-alert-circle-outline</v-icon>
+            <h3 class="text-h6 mb-2">Unable to play this video</h3>
+            <p class="text-body-2 text-medium-emphasis">
+              We don't appear to support playing this video in your browser.<br>
+              Stay tuned, we'll hopefully fix it soon.
+            </p>
+            <p class="text-caption text-medium-emphasis mt-4">
+              {{ codecErrorDetails }}
+            </p>
+          </div>
+        </v-sheet>
+
         <!-- Loading overlay -->
         <v-sheet
-          v-if="isLoading"
+          v-if="isLoading && !codecError"
           :color="floating ? '#0a0a0a' : 'transparent'"
           class="position-absolute d-flex align-center justify-center"
           :style="{
@@ -209,9 +262,16 @@ const {floatingVideoSource, floatingVideoInitialTime, floatingVideoRelease, clos
 // Dragging state
 const isDragging = ref(false);
 const isResizing = ref(false);
+const resizeDirection = ref('');
 const dragStart = ref({ x: 0, y: 0 });
 const containerPosition = ref({ x: 0, y: 0 });
 const containerSize = ref({ width: 384, height: 216 });
+const initialSize = ref({ width: 0, height: 0 });
+const initialPosition = ref({ x: 0, y: 0 });
+
+// Codec error handling
+const codecError = ref(false);
+const codecErrorDetails = ref('');
 
 watch(volume, v => {
   if (videoPlayerRef.value) {
@@ -243,82 +303,184 @@ const navigateToRelease = () => {
 
 // Drag handlers
 const startDrag = (e: MouseEvent) => {
-  if (!props.floating || !containerRef.value) return;
+  if (!props.floating || !containerRef.value || isResizing.value) return;
   
-  // Check if clicking on resize handle (top-left corner)
   const rect = containerRef.value.getBoundingClientRect();
-  const isNearEdge = (
-    e.clientX < rect.left + 20 &&
-    e.clientY < rect.top + 52 && // 32px for Now Playing bar + 20px handle
-    e.clientY > rect.top + 32  // Below the Now Playing bar
-  );
-  
-  if (isNearEdge) {
-    isResizing.value = true;
-    dragStart.value = { x: e.clientX, y: e.clientY };
-    containerSize.value = { width: rect.width, height: rect.height };
-    containerPosition.value = { x: rect.left, y: rect.top };
-  } else {
-    isDragging.value = true;
-    dragStart.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    containerPosition.value = { x: rect.left, y: rect.top };
-  }
+  isDragging.value = true;
+  dragStart.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  containerPosition.value = { x: rect.left, y: rect.top };
   
   document.addEventListener('mousemove', handleDrag);
   document.addEventListener('mouseup', stopDrag);
 };
 
+const startResize = (direction: string, e: MouseEvent) => {
+  if (!props.floating || !containerRef.value) return;
+  
+  e.stopPropagation();
+  e.preventDefault();
+  
+  const rect = containerRef.value.getBoundingClientRect();
+  isResizing.value = true;
+  resizeDirection.value = direction;
+  dragStart.value = { x: e.clientX, y: e.clientY };
+  initialSize.value = { width: rect.width, height: rect.height };
+  initialPosition.value = { x: rect.left, y: rect.top };
+  
+  document.addEventListener('mousemove', handleResize);
+  document.addEventListener('mouseup', stopDrag);
+};
+
 const handleDrag = (e: MouseEvent) => {
-  if (!containerRef.value) return;
+  if (!containerRef.value || !isDragging.value || isResizing.value) return;
   
-  if (isDragging.value) {
-    const newX = Math.max(0, Math.min(window.innerWidth - containerRef.value.offsetWidth, e.clientX - dragStart.value.x));
-    const newY = Math.max(0, Math.min(window.innerHeight - containerRef.value.offsetHeight, e.clientY - dragStart.value.y));
-    
-    containerRef.value.style.left = `${newX}px`;
-    containerRef.value.style.top = `${newY}px`;
-    containerRef.value.style.right = 'auto';
-    containerRef.value.style.bottom = 'auto';
-  } else if (isResizing.value) {
-    // For top-left resize, we need to move the position AND change the size
-    const deltaX = e.clientX - dragStart.value.x;
-    const deltaY = e.clientY - dragStart.value.y;
-    
-    // Calculate new size (inverse the deltas since we're resizing from top-left)
-    const newWidth = Math.max(320, Math.min(window.innerWidth * 0.8, containerSize.value.width - deltaX));
-    const newHeight = Math.max(180, Math.min(window.innerHeight * 0.8, containerSize.value.height - deltaY));
-    
-    // Calculate new position
-    const newLeft = Math.max(0, containerPosition.value.x + deltaX);
-    const newTop = Math.max(0, containerPosition.value.y + deltaY);
-    
-    // Only update if within bounds
-    if (newLeft + newWidth <= window.innerWidth && newTop + newHeight <= window.innerHeight) {
-      containerRef.value.style.width = `${newWidth}px`;
-      containerRef.value.style.height = `${newHeight}px`;
-      containerRef.value.style.left = `${newLeft}px`;
-      containerRef.value.style.top = `${newTop}px`;
-      containerRef.value.style.right = 'auto';
-      containerRef.value.style.bottom = 'auto';
-    }
+  const newX = Math.max(0, Math.min(window.innerWidth - containerRef.value.offsetWidth, e.clientX - dragStart.value.x));
+  const newY = Math.max(0, Math.min(window.innerHeight - containerRef.value.offsetHeight, e.clientY - dragStart.value.y));
+  
+  containerRef.value.style.left = `${newX}px`;
+  containerRef.value.style.top = `${newY}px`;
+  containerRef.value.style.right = 'auto';
+  containerRef.value.style.bottom = 'auto';
+};
+
+const handleResize = (e: MouseEvent) => {
+  if (!isResizing.value || !containerRef.value) return;
+  
+  const deltaX = e.clientX - dragStart.value.x;
+  const deltaY = e.clientY - dragStart.value.y;
+  
+  let newWidth = initialSize.value.width;
+  let newHeight = initialSize.value.height;
+  let newX = initialPosition.value.x;
+  let newY = initialPosition.value.y;
+  
+  // Minimum sizes
+  const minWidth = 320;
+  const minHeight = 180;
+  
+  // Handle resizing based on direction
+  switch (resizeDirection.value) {
+    case 'se': // Southeast (bottom-right)
+      newWidth = Math.max(minWidth, initialSize.value.width + deltaX);
+      newHeight = Math.max(minHeight, initialSize.value.height + deltaY);
+      break;
+    case 'sw': // Southwest (bottom-left)
+      const swWidth = Math.max(minWidth, initialSize.value.width - deltaX);
+      if (swWidth !== initialSize.value.width - deltaX) {
+        newX = initialPosition.value.x + (initialSize.value.width - minWidth);
+      } else {
+        newX = initialPosition.value.x + deltaX;
+      }
+      newWidth = swWidth;
+      newHeight = Math.max(minHeight, initialSize.value.height + deltaY);
+      break;
+    case 'ne': // Northeast (top-right)
+      newWidth = Math.max(minWidth, initialSize.value.width + deltaX);
+      const neHeight = Math.max(minHeight, initialSize.value.height - deltaY);
+      if (neHeight !== initialSize.value.height - deltaY) {
+        newY = initialPosition.value.y + (initialSize.value.height - minHeight);
+      } else {
+        newY = initialPosition.value.y + deltaY;
+      }
+      newHeight = neHeight;
+      break;
+    case 'nw': // Northwest (top-left)
+      const nwWidth = Math.max(minWidth, initialSize.value.width - deltaX);
+      const nwHeight = Math.max(minHeight, initialSize.value.height - deltaY);
+      if (nwWidth !== initialSize.value.width - deltaX) {
+        newX = initialPosition.value.x + (initialSize.value.width - minWidth);
+      } else {
+        newX = initialPosition.value.x + deltaX;
+      }
+      if (nwHeight !== initialSize.value.height - deltaY) {
+        newY = initialPosition.value.y + (initialSize.value.height - minHeight);
+      } else {
+        newY = initialPosition.value.y + deltaY;
+      }
+      newWidth = nwWidth;
+      newHeight = nwHeight;
+      break;
   }
+  
+  // Constrain to window bounds
+  newX = Math.max(0, Math.min(window.innerWidth - newWidth, newX));
+  newY = Math.max(0, Math.min(window.innerHeight - newHeight, newY));
+  
+  // Update styles
+  containerRef.value.style.width = `${newWidth}px`;
+  containerRef.value.style.height = `${newHeight}px`;
+  containerRef.value.style.left = `${newX}px`;
+  containerRef.value.style.top = `${newY}px`;
+  containerRef.value.style.right = 'auto';
+  containerRef.value.style.bottom = 'auto';
 };
 
 const stopDrag = () => {
   isDragging.value = false;
   isResizing.value = false;
+  resizeDirection.value = '';
   document.removeEventListener('mousemove', handleDrag);
+  document.removeEventListener('mousemove', handleResize);
   document.removeEventListener('mouseup', stopDrag);
 };
 
 const defaultSkipTime = 10;
+
+// Video event handlers
+const onVideoLoaded = () => {
+  // Reset codec error when video loads successfully
+  codecError.value = false;
+  codecErrorDetails.value = '';
+  play();
+};
+
+const onLoadedMetadata = () => {
+  if (videoPlayerRef.value) {
+    // Check if video has valid dimensions
+    if (videoPlayerRef.value.videoWidth === 0 || videoPlayerRef.value.videoHeight === 0) {
+      codecError.value = true;
+      codecErrorDetails.value = 'Video stream appears to be missing or uses an unsupported codec';
+    }
+  }
+};
+
+const onVideoError = (event: Event) => {
+  const video = event.target as HTMLVideoElement;
+  if (video.error) {
+    codecError.value = true;
+    
+    // Provide user-friendly error messages
+    switch (video.error.code) {
+      case video.error.MEDIA_ERR_ABORTED:
+        codecErrorDetails.value = 'Video loading was aborted';
+        break;
+      case video.error.MEDIA_ERR_NETWORK:
+        codecErrorDetails.value = 'Network error while loading video';
+        break;
+      case video.error.MEDIA_ERR_DECODE:
+        codecErrorDetails.value = 'Video format or codec not supported';
+        break;
+      case video.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+        codecErrorDetails.value = 'Video format not supported by your browser';
+        break;
+      default:
+        codecErrorDetails.value = 'An unknown error occurred';
+    }
+  }
+};
+
 onMounted((): void => {
   albumFiles.value = [];
   activeTrack.value = undefined;
 
   if (props.floating) {
-    if (floatingVideoInitialTime.value) {
-      seekingTrack(floatingVideoInitialTime.value);
+    if (floatingVideoInitialTime.value && videoPlayerRef.value) {
+      // Wait for video to be ready before seeking
+      const seekToTime = floatingVideoInitialTime.value;
+      videoPlayerRef.value.addEventListener('loadedmetadata', () => {
+        videoPlayerRef.value!.currentTime = seekToTime;
+        floatingVideoInitialTime.value = 0; // Reset so we don't seek again
+      }, { once: true });
     }
     // If we don't have release info from props but have it stored, keep using the stored info
     if (!props.releaseId && !props.releaseName && floatingVideoRelease.value) {
@@ -403,4 +565,46 @@ onBeforeUnmount(() => {
 .floating-container video {
   pointer-events: auto;
 }
+
+/* Resize handles */
+.resize-handle {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  z-index: 1002;
+}
+
+.resize-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+}
+
+.resize-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+}
+
+.resize-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+}
+
+.resize-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+/* Optional: Visual hint on hover */
+.resize-handle:hover::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
 </style>

From 99c80a93b4db596bfec21e19f0681359392460e2 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sun, 3 Aug 2025 15:56:35 +0100
Subject: [PATCH 12/17] Update Dockerfile for new builds, improve maintenance
 import/export

---
 .gitignore                                    |  6 +++---
 docker/Dockerfile                             |  8 ++++---
 lens-sdk                                      |  1 -
 .../admin/maintenanceManagement.vue           | 21 ++++++++++++++++---
 4 files changed, 26 insertions(+), 10 deletions(-)
 delete mode 120000 lens-sdk

diff --git a/.gitignore b/.gitignore
index e4222e59..b40c441d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,9 +48,9 @@ playwright-report/
 
 *.txt
 
-<<<<<<< HEAD
 # lens-sdk
 lens-sdk
-=======
 .claude
->>>>>>> a0c28db (Improved releases view - CSS grid)
+
+# env
+.env.production
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 3f03bc8f..3f51084e 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -10,13 +10,15 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 # Set working directory
 WORKDIR /app
 
-# Copy package files
+# Copy package files and lens-sdk for local dependency
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY lens-sdk/ ./lens-sdk/
 
 # Install dependencies
-RUN pnpm install --frozen-lockfile --ignore-scripts --unsafe-perm
+# Using --no-frozen-lockfile temporarily due to lens-sdk path mismatch
+RUN pnpm install --no-frozen-lockfile --ignore-scripts --unsafe-perm
 
-# Copy source code
+# Copy remaining source code
 COPY . .
 
 # Generate Electron vendors file
diff --git a/lens-sdk b/lens-sdk
deleted file mode 120000
index f3b70753..00000000
--- a/lens-sdk
+++ /dev/null
@@ -1 +0,0 @@
-../lens-sdk
\ No newline at end of file
diff --git a/packages/renderer/src/components/admin/maintenanceManagement.vue b/packages/renderer/src/components/admin/maintenanceManagement.vue
index 13974e53..26a051ae 100644
--- a/packages/renderer/src/components/admin/maintenanceManagement.vue
+++ b/packages/renderer/src/components/admin/maintenanceManagement.vue
@@ -178,7 +178,21 @@ const exportAll = async () => {
   isExporting.value = true;
 
   try {
-    const cleanedReleases = cleanForExport(releases.value || []) as unknown[];
+    // Create mapping of category ID to slug
+    const categoryIdToSlugMap = new Map<string, string>();
+    if (contentCategories.value) {
+      contentCategories.value.forEach(cat => {
+        categoryIdToSlugMap.set(cat.id, cat.categoryId);
+      });
+    }
+
+    // Add categorySlug to each release
+    const releasesWithSlug = (releases.value || []).map(release => ({
+      ...release,
+      categorySlug: categoryIdToSlugMap.get(release.categoryId)
+    }));
+
+    const cleanedReleases = cleanForExport(releasesWithSlug) as unknown[];
     const cleanedFeaturedReleases = cleanForExport(featuredReleases.value || []) as unknown[];
 
     const exportData = {
@@ -334,8 +348,9 @@ const performImport = async () => {
     // Import releases
     for (const release of importData.releases) {
       try {
-        // Map category slug to actual ID
-        const mappedCategoryId = getCategoryIdFromSlug(release.categoryId);
+        // Use categorySlug if available, otherwise try to map the categoryId
+        const categoryToMap = release.categorySlug || release.categoryId;
+        const mappedCategoryId = getCategoryIdFromSlug(categoryToMap);
         
         // Extract the data without the __context
         const releaseData: ReleaseItem = {

From beba02a8f9f2d993d7b4e98b283975fd50bf66d2 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Sun, 3 Aug 2025 21:58:36 +0100
Subject: [PATCH 13/17] Check in new UI work

---
 CLAUDE.md                                     |  14 +
 package.json                                  |   2 +-
 packages/renderer/src/App.vue                 |  52 ++-
 .../src/components/admin/accessManagement.vue |   4 +-
 .../components/admin/contentManagement.vue    |  12 +-
 .../src/components/home/contentSection.vue    |   3 +-
 .../src/components/misc/contentCard.vue       |  12 +
 .../components/misc/infiniteReleaseList.vue   | 124 +++++-
 .../src/components/releases/releaseForm.vue   | 353 ++++++++++++++++--
 .../renderer/src/plugins/lensService/hooks.ts | 292 +++++++++++++++
 packages/renderer/src/plugins/router.ts       |   7 +
 packages/renderer/src/views/categoryPage.vue  | 135 ++++++-
 packages/renderer/src/views/homePage.vue      | 132 ++++++-
 packages/renderer/src/views/seriesPage.vue    | 299 +++++++++++++++
 14 files changed, 1372 insertions(+), 69 deletions(-)
 create mode 100644 packages/renderer/src/views/seriesPage.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index ebb6d33d..2b753fb3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -64,6 +64,20 @@ Flagship is Riff.CC's decentralized media platform for watching, sharing, and cu
    - Environment variables control build targets
    - Service layer abstracts platform differences
 
+4. **Hybrid Data Loading Architecture (PR #70)**
+   - **API-First Pre-fetching**: Attempts to load data from REST API immediately for instant UI
+   - **Graceful P2P Fallback**: Falls back to Peerbit when API is unavailable
+   - **Non-Blocking P2P Init**: Peerbit initializes in background without blocking UI
+   - **Smart Loading Screen**: Shows appropriate loading state based on data source
+   
+   Implementation details:
+   - Router guard in `plugins/router.ts` performs API health check
+   - If healthy, pre-fetches and seeds TanStack Query cache
+   - `composables/lensInitialization.ts` handles background P2P setup
+   - `getApiUrl()` dynamically constructs API URL from multiaddr
+   - Provides "near-instantaneous UI render" when API is available
+   - Degrades gracefully to P2P-only mode when necessary
+
 4. **Component Organization**
    ```
    packages/renderer/src/components/
diff --git a/package.json b/package.json
index 27a57e85..e04547c5 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@riffcc/lens-sdk": "file:./lens-sdk",
+    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@multiformats/multiaddr": "^12.5.1",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index cb704835..e23e5297 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container
-    v-if="!isLensReady && !releases && !featuredReleases && !contentCategories"
+    v-if="showSpinner"
     class="h-screen"
   >
     <v-sheet
@@ -13,7 +13,7 @@
       ></v-progress-circular>
     </v-sheet>
   </v-container>
-  <v-app v-else>
+  <v-app v-else-if="isLensReady || releases || featuredReleases || contentCategories">
     <div class="app-header-border"></div>
     <gamepad-nav-bar />
     <v-main min-height="100vh" class="mt-12">
@@ -75,7 +75,11 @@ const MAGIC_KEY = 'magicmagic';
 const yetToType = ref(MAGIC_KEY);
 
 onKeyStroke(e => {
-  if (!yetToType.value.length) return;
+  if (!yetToType.value.length) {
+    // Reset for next time
+    yetToType.value = MAGIC_KEY;
+    return;
+  }
   if (e.key === yetToType.value[0]) {
     yetToType.value = yetToType.value.slice(1);
   } else {
@@ -84,25 +88,12 @@ onKeyStroke(e => {
 });
 
 watchEffect(() => {
-  if (!yetToType.value.length) showDefederation.value = true;
-});
-
-const CURTAIN_KEY = 'curtain';
-const yetToTypeCurtain = ref(CURTAIN_KEY);
-
-onKeyStroke(e => {
-  if (!yetToTypeCurtain.value.length) return;
-  if (e.key === yetToTypeCurtain.value[0]) {
-    yetToTypeCurtain.value = yetToTypeCurtain.value.slice(1);
-  } else {
-    yetToTypeCurtain.value = CURTAIN_KEY;
+  if (!yetToType.value.length) {
+    // Toggle defederation view when magic key is fully typed
+    showDefederation.value = !showDefederation.value;
   }
 });
 
-watchEffect(() => {
-  if (!yetToTypeCurtain.value.length) showDefederation.value = false;
-});
-
 onMounted(async () => {
   initLensService();
   
@@ -133,6 +124,29 @@ const {  data: featuredReleases } = useGetFeaturedReleasesQuery({
 const { data: contentCategories } = useContentCategoriesQuery({
   enabled: isLensReady,
 });
+
+// Delay showing spinner for 100ms to make app feel faster
+const showSpinner = ref(false);
+let spinnerTimer: ReturnType<typeof setTimeout> | null = null;
+
+onMounted(() => {
+  spinnerTimer = setTimeout(() => {
+    if (!isLensReady.value && !releases.value && !featuredReleases.value && !contentCategories.value) {
+      showSpinner.value = true;
+    }
+  }, 100);
+});
+
+// Clear timer if data loads quickly
+watchEffect(() => {
+  if (isLensReady.value || releases.value || featuredReleases.value || contentCategories.value) {
+    if (spinnerTimer) {
+      clearTimeout(spinnerTimer);
+      spinnerTimer = null;
+    }
+    showSpinner.value = false;
+  }
+});
 </script>
 
 <style>
diff --git a/packages/renderer/src/components/admin/accessManagement.vue b/packages/renderer/src/components/admin/accessManagement.vue
index 4a4475f5..6c2911b2 100644
--- a/packages/renderer/src/components/admin/accessManagement.vue
+++ b/packages/renderer/src/components/admin/accessManagement.vue
@@ -58,13 +58,13 @@
             >
               <template #prepend>
                 <v-icon
-                  :icon="admin.super ? '$account-supervisor' : '$account'"
+                  :icon="admin.super ? 'mdi-account-supervisor' : 'mdi-account'"
                   size="small"
                 ></v-icon>
               </template>
               <template #append>
                 <v-btn
-                  icon="$delete"
+                  icon="mdi-delete"
                   size="small"
                   @click="confirmDeleteAdminDialog = true"
                 >
diff --git a/packages/renderer/src/components/admin/contentManagement.vue b/packages/renderer/src/components/admin/contentManagement.vue
index 18ebfa34..92bf40a4 100644
--- a/packages/renderer/src/components/admin/contentManagement.vue
+++ b/packages/renderer/src/components/admin/contentManagement.vue
@@ -31,6 +31,9 @@
           lgAndUp ? item.contentCID : `${item.contentCID.slice(0, 6)}...${item.contentCID.slice(-6)}`
         }}</span>
       </template>
+      <template #item.category="{ item }">
+        {{ getCategoryName(item.categoryId) }}
+      </template>
       <template #item.actions="{ item }">
         <v-menu v-if="smAndDown">
           <template #activator="{ props }">
@@ -179,12 +182,13 @@ import {
   parseUrlOrCid,
   // getStatusColor,
 } from '/@/utils';
-import { useDeleteReleaseMutation, useGetReleasesQuery } from '/@/plugins/lensService/hooks';
+import { useDeleteReleaseMutation, useGetReleasesQuery, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
 
 
 const { lgAndUp, smAndDown } = useDisplay();
 
 const { data: releases, isLoading } = useGetReleasesQuery();
+const { data: contentCategories } = useContentCategoriesQuery();
 const deleteReleaseMutation = useDeleteReleaseMutation({
   onSuccess: () => {
     openSnackbar('Release deleted successfully.', 'success');
@@ -230,6 +234,12 @@ const targetReleaseToDelete = ref<ReleaseItem | null>(null);
 
 const { snackbarMessage, showSnackbar, openSnackbar, closeSnackbar } = useSnackbarMessage();
 
+// Get category display name from category ID
+const getCategoryName = (categoryId: string): string => {
+  const category = contentCategories.value?.find(c => c.id === categoryId);
+  return category?.displayName || categoryId;
+};
+
 function handleSuccess(message: string) {
   openSnackbar(message, 'success');
   targetReleaseToEdit.value = null;
diff --git a/packages/renderer/src/components/home/contentSection.vue b/packages/renderer/src/components/home/contentSection.vue
index a8ea09ac..89a9b5a8 100644
--- a/packages/renderer/src/components/home/contentSection.vue
+++ b/packages/renderer/src/components/home/contentSection.vue
@@ -38,5 +38,4 @@ defineProps<{
   onPrevious?: () => void;
   onNext?: () => void;
 }>();
-
-</script>
+</script>
\ No newline at end of file
diff --git a/packages/renderer/src/components/misc/contentCard.vue b/packages/renderer/src/components/misc/contentCard.vue
index 5d17aee6..37666e4b 100644
--- a/packages/renderer/src/components/misc/contentCard.vue
+++ b/packages/renderer/src/components/misc/contentCard.vue
@@ -32,6 +32,12 @@
           >
             {{ cardSubtitle }}
           </p>
+          <p
+            v-if="item.metadata?.isSeries && item.metadata?.episodeCount"
+            class="ml-4 text-caption"
+          >
+            {{ item.metadata.episodeCount }} episode{{ item.metadata.episodeCount !== 1 ? 's' : '' }}
+          </p>
           <template v-if="isHovering">
             <v-icon
               v-if="item.categoryId === 'music'"
@@ -101,6 +107,12 @@
         >
           {{ cardSubtitle }}
         </p>
+        <p
+          v-if="item.metadata?.isSeries && item.metadata?.episodeCount"
+          class="text-caption text-center text-medium-emphasis"
+        >
+          {{ item.metadata.episodeCount }} episode{{ item.metadata.episodeCount !== 1 ? 's' : '' }}
+        </p>
       </template>
     </v-sheet>
   </v-hover>
diff --git a/packages/renderer/src/components/misc/infiniteReleaseList.vue b/packages/renderer/src/components/misc/infiniteReleaseList.vue
index 4ba2e1fa..7568badb 100644
--- a/packages/renderer/src/components/misc/infiniteReleaseList.vue
+++ b/packages/renderer/src/components/misc/infiniteReleaseList.vue
@@ -42,10 +42,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { ReleaseItem } from '/@/types';
 import ContentCard from './contentCard.vue';
-import { useGetReleasesQuery } from '/@/plugins/lensService/hooks';
+import { useGetReleasesQuery, useGetStructuresQuery, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
 import type { SearchOptions } from '@riffcc/lens-sdk';
 
 const props = defineProps<{
@@ -67,15 +67,129 @@ const { data: releases, isLoading } = useGetReleasesQuery({
   searchOptions: props.searchOptions,
 });
 
+// Get content categories to check if this is a TV category
+const { data: contentCategories } = useContentCategoriesQuery();
+
+// Check if this is the TV shows category
+const isTVCategory = computed(() => {
+  if (!props.categoryFilter || !contentCategories.value) return false;
+  const category = contentCategories.value.find(c => c.id === props.categoryFilter);
+  return category?.displayName === 'TV Shows' || category?.categoryId === 'tv-shows';
+});
+
+// Fetch structures for TV series grouping
+const { data: structures, isLoading: isStructuresLoading, error: structuresError } = useGetStructuresQuery({
+  enabled: isTVCategory,
+  searchOptions: { fetch: 1000 }
+});
+
+// Debug structures
+watch(structures, (newStructures) => {
+  if (isTVCategory.value) {
+    console.log('Structures updated:', newStructures?.length || 0, 'structures');
+    if (newStructures && newStructures.length > 0) {
+      console.log('First structure:', newStructures[0]);
+    }
+  }
+}, { immediate: true });
+
 // Filter releases by category if needed
 const filteredReleases = computed(() => {
   if (!releases.value) return [];
 
-  if (props.categoryFilter) {
-    return releases.value.filter(release => release.categoryId === props.categoryFilter);
+  let categoryReleases = releases.value;
+  if (props.categoryFilter && contentCategories.value) {
+    // Find the category to get all its IDs (from different lenses)
+    const category = contentCategories.value.find(c => c.id === props.categoryFilter);
+    if (category && category.allIds) {
+      // Filter by all IDs from federated categories
+      categoryReleases = releases.value.filter(release => 
+        category.allIds.includes(release.categoryId)
+      );
+    } else {
+      // Fallback to single ID filter
+      categoryReleases = releases.value.filter(release => release.categoryId === props.categoryFilter);
+    }
+  }
+
+  // If this is a TV category, group episodes by series
+  if (isTVCategory.value) {
+    const seriesMap = new Map<string, any>();
+    const seriesStructures = structures.value ? 
+      structures.value.filter((s: any) => s.type === 'series') : [];
+    
+    for (const release of categoryReleases) {
+      const seriesId = release.metadata?.seriesId;
+      
+      if (seriesId) {
+        // Episode belongs to a series
+        const series = seriesStructures.find((s: any) => s.id === seriesId);
+        
+        if (!seriesMap.has(seriesId)) {
+          if (series) {
+            // Create series tile
+            seriesMap.set(seriesId, {
+              id: series.id,
+              name: series.name,
+              categoryId: props.categoryFilter,
+              thumbnailCID: series.thumbnailCID || release.thumbnailCID,
+              contentCID: release.contentCID,
+              description: series.description,
+              metadata: {
+                isSeries: true,
+                episodeCount: 0,
+                episodes: [],
+                ...series.metadata
+              }
+            });
+          } else {
+            // Fallback series tile - try to extract series name from episode
+            // Episodes might have the series name in their name like "SeriesName - S01E01 - Episode Title"
+            let seriesName = `Series ${seriesId.substring(0, 8)}...`;
+            
+            // Try to extract series name from episode name if it follows a pattern
+            const episodeName = release.name || '';
+            // Common patterns: "Series Name - S01E01", "Series Name S01E01", "Series Name 1x01"
+            const seriesMatch = episodeName.match(/^(.+?)(?:\s*[-–]\s*)?(?:S\d+E\d+|Season|\d+x\d+|Episode)/i);
+            if (seriesMatch) {
+              seriesName = seriesMatch[1].trim();
+            }
+            
+            seriesMap.set(seriesId, {
+              id: seriesId,
+              name: seriesName,
+              categoryId: props.categoryFilter,
+              thumbnailCID: release.thumbnailCID,
+              contentCID: release.contentCID,
+              metadata: {
+                isSeries: true,
+                isPseudoSeries: true,
+                episodeCount: 0,
+                episodes: []
+              }
+            });
+          }
+        }
+        
+        // Add episode to series
+        seriesMap.get(seriesId).metadata.episodeCount++;
+        seriesMap.get(seriesId).metadata.episodes.push(release);
+      } else {
+        // Standalone episode
+        seriesMap.set(release.id, {
+          ...release,
+          metadata: {
+            ...release.metadata,
+            isStandaloneEpisode: true
+          }
+        });
+      }
+    }
+    
+    return Array.from(seriesMap.values());
   }
 
-  return releases.value;
+  return categoryReleases;
 });
 
 // Calculate visible releases based on current page
diff --git a/packages/renderer/src/components/releases/releaseForm.vue b/packages/renderer/src/components/releases/releaseForm.vue
index ee9608e5..1659e60a 100644
--- a/packages/renderer/src/components/releases/releaseForm.vue
+++ b/packages/renderer/src/components/releases/releaseForm.vue
@@ -7,7 +7,7 @@
   >
     <v-text-field
       v-model="releaseItem.name"
-      label="Name"
+      :label="isTVCategory ? 'Episode Name' : 'Name'"
       :rules="[rules.required]"
     />
     <v-text-field
@@ -21,6 +21,53 @@
       :rules="[rules.required]"
       label="Category"
     />
+    
+    <!-- TV Show Fields -->
+    <template v-if="isTVCategory">
+      <v-autocomplete
+        v-model="selectedSeriesId"
+        :items="seriesItems"
+        :loading="structuresQuery.isLoading.value"
+        label="TV Series"
+        placeholder="Type to search or create new series..."
+        :rules="[rules.required]"
+        clearable
+        @update:search="seriesSearchText = $event"
+      >
+        <template v-if="shouldShowCreateSeriesOption" #append-item>
+          <v-list-item
+            @click="createNewSeries"
+            class="text-primary"
+          >
+            <v-list-item-title>
+              <v-icon start>mdi-plus</v-icon>
+              Create "{{ seriesSearchText }}"
+            </v-list-item-title>
+          </v-list-item>
+        </template>
+      </v-autocomplete>
+      
+      <v-row v-if="selectedSeriesId">
+        <v-col cols="6">
+          <v-text-field
+            v-model.number="seasonNumber"
+            label="Season Number"
+            type="number"
+            :rules="[rules.required, rules.positiveNumber]"
+            @update:model-value="handleSeasonChange"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-text-field
+            v-model.number="episodeNumber"
+            label="Episode Number"
+            type="number"
+            :rules="[rules.required, rules.positiveNumber]"
+          />
+        </v-col>
+      </v-row>
+    </template>
+    
     <v-text-field
       v-model="releaseItem.thumbnailCID"
       label="Thumbnail CID (Optional)"
@@ -55,8 +102,8 @@
           :key="fieldName"
         >
           <v-select
-            v-if="fieldConfig.options"
-            :items="fieldConfig.options"
+            v-if="(fieldConfig as any).options"
+            :items="(fieldConfig as any).options"
             :label="formatFieldLabel(fieldName)"
             :model-value="String((releaseItem.metadata && releaseItem.metadata[fieldName]) || '')"
             @update:model-value="(v) => handleChangeMetadataField(fieldName, v)"
@@ -65,13 +112,13 @@
             v-else
             :label="formatFieldLabel(fieldName)"
             :model-value="String((releaseItem.metadata && releaseItem.metadata[fieldName]) || '')"
-            :type="fieldConfig.type || 'text'"
+            :type="(fieldConfig as any).type || 'text'"
             @update:model-value="(v) => handleChangeMetadataField(fieldName, v)"
           >
             <template #append-inner>
               <v-tooltip
                 location="top"
-                :text="fieldConfig.description || ''"
+                :text="(fieldConfig as any).description || ''"
               >
                 <template #activator="{props: tooltipProps}">
                   <v-icon
@@ -111,7 +158,15 @@ import {cid} from 'is-ipfs';
 import {computed, onMounted, ref, watch} from 'vue';
 import type { ReleaseItem } from '/@/types';
 import type { ContentCategoryMetadataField, ReleaseData } from '@riffcc/lens-sdk';
-import { useAddReleaseMutation, useEditReleaseMutation, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
+import { 
+  useAddReleaseMutation, 
+  useEditReleaseMutation, 
+  useContentCategoriesQuery,
+  useGetStructuresQuery,
+  useAddStructureMutation,
+  useEditStructureMutation
+} from '/@/plugins/lensService/hooks';
+// import { StringMatch, StringMatchMethod } from '@peerbit/document';
 
 const props = defineProps<{
   initialData?: ReleaseItem;
@@ -134,11 +189,27 @@ const openAdvanced = ref<boolean>();
 
 const releaseItem = ref<Partial<ReleaseItem>>({});
 
+// TV-specific state
+const selectedSeriesId = ref<string>('');
+const seriesSearchText = ref<string>('');
+const seasonNumber = ref<number>(1);
+const episodeNumber = ref<number>(1);
+const selectedSeasonId = ref<string>('');
+
 const rules = {
   required: (v: string) => Boolean(v) || 'Required field.',
   isValidCid: (v: string) => !v || cid(v) || 'Please enter a valid CID.',
+  positiveNumber: (v: number) => v > 0 || 'Must be a positive number.',
 };
 
+// Check if TV category is selected (moved before structuresQuery to avoid circular dependency)
+const isTVCategory = computed(() => {
+  const category = contentCategories.value?.find(c => c.id === releaseItem.value.categoryId);
+  // Check both categoryId and displayName for TV shows (handle corrupted data)
+  const isTV = category?.categoryId === 'tv-shows' || category?.displayName === 'TV Shows';
+  return isTV;
+});
+
 const addReleaseMutation = useAddReleaseMutation({
   onSuccess: () => {
     emit('update:success', 'Release added successfully!');
@@ -162,12 +233,86 @@ const editReleaseMutation = useEditReleaseMutation({
 });
 
 
+// Fetch structures for TV shows (both series and seasons)
+const structuresQuery = useGetStructuresQuery({
+  searchOptions: {
+    // Fetch all structures, we'll filter them in computed properties
+    fetch: 1000,
+  },
+  enabled: computed(() => {
+    const enabled = isTVCategory.value;
+    console.log('Structures query enabled:', enabled, 'isTVCategory:', isTVCategory.value);
+    return enabled;
+  }),
+});
+
+// Watch for structure query errors
+watch(() => structuresQuery.error.value, (error) => {
+  if (error) {
+    console.error('Failed to fetch structures:', error);
+  }
+});
+
+const addStructureMutation = useAddStructureMutation({
+  onSuccess: (response) => {
+    console.log('Structure created successfully:', response);
+  },
+  onError: (e) => {
+    console.error('Error creating structure:', e);
+  },
+});
+
+const editStructureMutation = useEditStructureMutation({
+  onSuccess: (response) => {
+    console.log('Structure updated successfully:', response);
+  },
+  onError: (e) => {
+    console.error('Error updating structure:', e);
+  },
+});
+
 const contentCategoriesItems = computed(() => contentCategories.value?.map(item => ({
   id: item.id,
   value: item.id,
   title: item.displayName,
 })));
 
+// Get list of series for autocomplete
+const seriesItems = computed(() => {
+  console.log('Computing series items, structures query state:', {
+    isLoading: structuresQuery.isLoading.value,
+    isError: structuresQuery.isError.value,
+    error: structuresQuery.error.value,
+    dataLength: structuresQuery.data.value?.length
+  });
+  
+  if (!structuresQuery.data.value) {
+    console.log('No structures data available');
+    return [];
+  }
+  
+  console.log('All structures:', structuresQuery.data.value);
+  
+  const series = structuresQuery.data.value
+    .filter((s: any) => s.type === 'series')
+    .map((s: any) => ({
+      value: s.id,
+      title: s.name,
+    }));
+  console.log('Filtered series for autocomplete:', series);
+  return series;
+});
+
+// Check if we should show the "Create new series" option
+const shouldShowCreateSeriesOption = computed(() => {
+  if (!seriesSearchText.value || seriesSearchText.value.length < 2) return false;
+  // Check if series already exists
+  const exists = structuresQuery.data.value?.some(
+    (s: any) => s.name.toLowerCase() === seriesSearchText.value.toLowerCase()
+  );
+  return !exists;
+});
+
 const selectedContentCategory = computed(() => {
   if (!contentCategories.value || !releaseItem.value.categoryId) {
     console.log('Advanced button disabled: no categories or categoryId', {
@@ -222,6 +367,21 @@ onMounted(() => {
       ...props.initialData,
       metadata: props.initialData.metadata || {},
     };
+    
+    // If editing a TV episode, initialize the TV-specific fields
+    if (props.initialData.metadata?.seriesId) {
+      selectedSeriesId.value = props.initialData.metadata.seriesId as string;
+      seasonNumber.value = (props.initialData.metadata.seasonNumber as number) || 1;
+      episodeNumber.value = (props.initialData.metadata.episodeNumber as number) || 1;
+      selectedSeasonId.value = (props.initialData.metadata.seasonId as string) || '';
+      
+      console.log('Initialized TV episode fields:', {
+        seriesId: selectedSeriesId.value,
+        seasonNumber: seasonNumber.value,
+        episodeNumber: episodeNumber.value,
+        seasonId: selectedSeasonId.value
+      });
+    }
   }
 });
 
@@ -232,6 +392,15 @@ watch(() => releaseItem.value.categoryId, () => {
   }
 });
 
+// Watch for series selection changes
+watch(selectedSeriesId, (newId) => {
+  console.log('Selected series ID changed:', newId);
+  if (newId) {
+    // When a series is selected, trigger season handling
+    handleSeasonChange();
+  }
+});
+
 const readyToSave = computed(() => {
   if (
     releaseItem.value.name &&
@@ -244,30 +413,166 @@ const readyToSave = computed(() => {
   return undefined;
 });
 
-const handleOnSubmit = () => {
+// Create a new TV series
+const createNewSeries = async () => {
+  if (!seriesSearchText.value) return;
+  
+  console.log('Creating new series:', seriesSearchText.value);
+  
+  try {
+    const response = await addStructureMutation.mutateAsync({
+      name: seriesSearchText.value,
+      type: 'series',
+      description: '',
+      itemIds: [],
+    });
+    
+    console.log('Series creation response:', response);
+    
+    if (response.success) {
+      // The response might have the ID in different fields
+      const newSeriesId = response.id || response.hash;
+      if (newSeriesId) {
+        selectedSeriesId.value = newSeriesId;
+        console.log('Series created with ID:', newSeriesId);
+        // Refetch structures to include the new series
+        await structuresQuery.refetch();
+        
+        // Clear the search text
+        seriesSearchText.value = '';
+      } else {
+        console.error('No ID returned from series creation');
+      }
+    } else {
+      console.error('Series creation failed:', response);
+    }
+  } catch (error) {
+    console.error('Failed to create series:', error);
+    emit('update:error', `Failed to create series: ${error.message}`);
+  }
+};
+
+// Handle season change - check if we need to create a new season structure
+const handleSeasonChange = async () => {
+  if (!selectedSeriesId.value || !seasonNumber.value) return;
+  
+  console.log('Handling season change:', { seriesId: selectedSeriesId.value, seasonNumber: seasonNumber.value });
+  
+  // Check if season structure already exists
+  const seasonName = `Season ${seasonNumber.value}`;
+  const existingSeason = structuresQuery.data.value?.find(
+    (s: any) => s.type === 'season' && 
+        s.parentId === selectedSeriesId.value && 
+        s.name === seasonName
+  );
+  
+  if (existingSeason) {
+    console.log('Found existing season:', existingSeason);
+    selectedSeasonId.value = existingSeason.id;
+  } else {
+    console.log('Creating new season:', seasonName);
+    try {
+      // Create new season structure
+      const response = await addStructureMutation.mutateAsync({
+        name: seasonName,
+        type: 'season',
+        parentId: selectedSeriesId.value,
+        order: seasonNumber.value,
+        itemIds: [],
+      });
+      
+      console.log('Season creation response:', response);
+      
+      if (response.success) {
+        const newSeasonId = response.id || response.hash;
+        if (newSeasonId) {
+          selectedSeasonId.value = newSeasonId;
+          console.log('Season created with ID:', newSeasonId);
+          await structuresQuery.refetch();
+        } else {
+          console.error('No ID returned from season creation');
+        }
+      } else {
+        console.error('Season creation failed:', response);
+      }
+    } catch (error) {
+      console.error('Failed to create season:', error);
+    }
+  }
+};
+
+const handleOnSubmit = async () => {
   if (!readyToSave.value) return;
 
   const data = readyToSave.value;
+  
+  // If this is a TV episode, ensure we have the proper structure hierarchy
+  if (isTVCategory.value && selectedSeriesId.value) {
+    console.log('Processing TV episode submission:', {
+      seriesId: selectedSeriesId.value,
+      seasonNumber: seasonNumber.value,
+      episodeNumber: episodeNumber.value
+    });
+    
+    // Ensure season structure exists
+    await handleSeasonChange();
+    
+    // Add episode metadata
+    if (!data.metadata) data.metadata = {};
+    data.metadata.seasonNumber = seasonNumber.value;
+    data.metadata.episodeNumber = episodeNumber.value;
+    data.metadata.seriesId = selectedSeriesId.value;
+    data.metadata.seasonId = selectedSeasonId.value;
+    
+    console.log('Episode metadata set:', data.metadata);
+  }
 
   if (props.mode === 'edit' && data.id) {
-    editReleaseMutation.mutate({
-    id: data.id,
-    name: data.name!,
-    categoryId: data.categoryId!,
-    contentCID: data.contentCID!,
-    thumbnailCID: data.thumbnailCID,
-    metadata: data.metadata,
-    siteAddress: data.siteAddress!,
-    postedBy: data.postedBy!,
-  });
+    const response = await editReleaseMutation.mutateAsync({
+      id: data.id,
+      name: data.name!,
+      categoryId: data.categoryId!,
+      contentCID: data.contentCID!,
+      thumbnailCID: data.thumbnailCID,
+      metadata: data.metadata,
+      siteAddress: data.siteAddress!,
+      postedBy: data.postedBy as any,
+    });
+    
+    // If TV episode and successful, add to season's itemIds
+    if (isTVCategory.value && selectedSeasonId.value && response.success) {
+      await updateSeasonWithEpisode(response.id!);
+    }
   } else {
-    addReleaseMutation.mutate({
-    name: data.name!,
-    categoryId: data.categoryId!,
-    contentCID: data.contentCID!,
-    thumbnailCID: data.thumbnailCID,
-    metadata: data.metadata,
-  });
+    const response = await addReleaseMutation.mutateAsync({
+      name: data.name!,
+      categoryId: data.categoryId!,
+      contentCID: data.contentCID!,
+      thumbnailCID: data.thumbnailCID,
+      metadata: data.metadata,
+    });
+    
+    // If TV episode and successful, add to season's itemIds
+    if (isTVCategory.value && selectedSeasonId.value && response.success) {
+      await updateSeasonWithEpisode(response.id!);
+    }
+  }
+};
+
+// Add episode to season's itemIds
+const updateSeasonWithEpisode = async (episodeId: string) => {
+  if (!selectedSeasonId.value) return;
+  
+  // Fetch current season structure
+  const seasons = await structuresQuery.refetch();
+  const season = seasons.data.value?.find((s: any) => s.id === selectedSeasonId.value);
+  
+  if (season && !season.itemIds.includes(episodeId)) {
+    // Update season with new episode
+    await editStructureMutation.mutateAsync({
+      ...season,
+      itemIds: [...season.itemIds, episodeId],
+    });
   }
 };
 
diff --git a/packages/renderer/src/plugins/lensService/hooks.ts b/packages/renderer/src/plugins/lensService/hooks.ts
index 737d7197..de43aa9e 100644
--- a/packages/renderer/src/plugins/lensService/hooks.ts
+++ b/packages/renderer/src/plugins/lensService/hooks.ts
@@ -1,5 +1,6 @@
 import { inject, type Ref } from 'vue';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { API_URL } from '../router';
 import type {
   HashResponse,
   IdResponse,
@@ -349,3 +350,294 @@ export function useDeleteSubscriptionMutation(options?: {
     },
   });
 }
+
+// #### STRUCTURE QUERIES & MUTATIONS ####
+export function useGetStructureQuery(id: string, options?: { enabled?: boolean | Ref<boolean> }) {
+  const { lensService } = useLensService();
+  return useQuery({
+    queryKey: ['structure', id],
+    queryFn: async () => {
+      try {
+        // Try API first for immediate data
+        const apiUrl = `${API_URL}/structures/${id}`;
+        try {
+          const response = await fetch(apiUrl);
+          if (response.ok) {
+            const structure = await response.json();
+            return structure ? {
+              ...structure,
+              metadata: structure.metadata ? JSON.parse(structure.metadata) : undefined,
+            } : null;
+          }
+        } catch (apiError) {
+          console.warn('API fetch failed, falling back to Peerbit:', apiError);
+        }
+        
+        // Fallback to Peerbit if API fails
+        const structure = await lensService.getStructure(id);
+        return structure ? {
+          ...structure,
+          metadata: structure.metadata ? JSON.parse(structure.metadata) : undefined,
+        } : null;
+      } catch (error) {
+        console.error('Failed to fetch structure:', error);
+        return null;
+      }
+    },
+    enabled: options?.enabled ?? true,
+    retry: 1,
+  });
+}
+
+export function useGetStructuresQuery(options?: {
+  enabled?: boolean | Ref<boolean>;
+  staleTime?: number;
+  searchOptions?: SearchOptions;
+}) {
+  const { lensService } = useLensService();
+  return useQuery({
+    queryKey: ['structures', options?.searchOptions],
+    queryFn: async () => {
+      try {
+        // Try API first for immediate data
+        const apiUrl = `${API_URL}/structures`;
+        try {
+          const response = await fetch(apiUrl);
+          if (response.ok) {
+            const structures = await response.json();
+            return structures.map((s: any) => ({
+              ...s,
+              metadata: s.metadata ? JSON.parse(s.metadata) : undefined,
+            }));
+          }
+        } catch (apiError) {
+          console.warn('API fetch failed, falling back to Peerbit:', apiError);
+        }
+        
+        // Fallback to Peerbit if API fails
+        const structures = await lensService.getStructures(options?.searchOptions);
+        return structures.map(s => ({
+          ...s,
+          metadata: s.metadata ? JSON.parse(s.metadata) : undefined,
+        }));
+      } catch (error) {
+        console.error('Failed to fetch structures:', error);
+        return [];
+      }
+    },
+    enabled: options?.enabled ?? true,
+    staleTime: options?.staleTime ?? 1000 * 60 * 5,
+    retry: 1,
+  });
+}
+
+export function useAddStructureMutation(options?: {
+  onSuccess?: (response: HashResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: AddInput<{
+      name: string;
+      type: string;
+      description?: string;
+      thumbnailCID?: string;
+      bannerCID?: string;
+      parentId?: string;
+      itemIds?: string[];
+      metadata?: AnyObject;
+      order?: number;
+    }>) => {
+      return await lensService.addStructure({
+        ...data,
+        metadata: data.metadata ? JSON.stringify(data.metadata) : undefined,
+      });
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
+
+export function useEditStructureMutation(options?: {
+  onSuccess?: (response: HashResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: EditInput<{
+      name: string;
+      type: string;
+      description?: string;
+      thumbnailCID?: string;
+      bannerCID?: string;
+      parentId?: string;
+      itemIds?: string[];
+      metadata?: AnyObject;
+      order?: number;
+    }>) => {
+      return await lensService.editStructure({
+        ...data,
+        metadata: data.metadata ? JSON.stringify(data.metadata) : undefined,
+      });
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+      queryClient.invalidateQueries({ queryKey: ['structure', response.id] });
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
+
+export function useDeleteStructureMutation(options?: {
+  onSuccess?: (response: IdResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      return await lensService.deleteStructure(id);
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+      queryClient.invalidateQueries({ queryKey: ['structure', response.id] });
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
+
+// #### ARTIST QUERIES & MUTATIONS (convenience wrappers) ####
+export function useGetArtistQuery(id: string, options?: { enabled?: boolean | Ref<boolean> }) {
+  const { lensService } = useLensService();
+  return useQuery({
+    queryKey: ['artist', id],
+    queryFn: async () => {
+      const artist = await lensService.getArtist(id);
+      return artist ? {
+        ...artist,
+        metadata: artist.metadata ? JSON.parse(artist.metadata) : undefined,
+      } : undefined;
+    },
+    enabled: options?.enabled ?? true,
+  });
+}
+
+export function useGetArtistsQuery(options?: {
+  enabled?: boolean | Ref<boolean>;
+  staleTime?: number;
+}) {
+  const { lensService } = useLensService();
+  return useQuery({
+    queryKey: ['artists'],
+    queryFn: async () => {
+      const artists = await lensService.getArtists();
+      return artists.map(a => ({
+        ...a,
+        metadata: a.metadata ? JSON.parse(a.metadata) : undefined,
+      }));
+    },
+    enabled: options?.enabled ?? true,
+    staleTime: options?.staleTime ?? 1000 * 60 * 5,
+  });
+}
+
+export function useAddArtistMutation(options?: {
+  onSuccess?: (response: HashResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: AddInput<{
+      name: string;
+      bio?: string;
+      avatarCID?: string;
+      bannerCID?: string;
+      links?: string[];
+      metadata?: AnyObject;
+    }>) => {
+      return await lensService.addArtist({
+        ...data,
+        metadata: data.metadata ? JSON.stringify(data.metadata) : undefined,
+      });
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
+
+export function useEditArtistMutation(options?: {
+  onSuccess?: (response: HashResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: EditInput<{
+      name: string;
+      bio?: string;
+      avatarCID?: string;
+      bannerCID?: string;
+      links?: string[];
+      metadata?: AnyObject;
+    }>) => {
+      return await lensService.editArtist({
+        ...data,
+        metadata: data.metadata ? JSON.stringify(data.metadata) : undefined,
+      });
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+      queryClient.invalidateQueries({ queryKey: ['artist', response.id] });
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
+
+export function useDeleteArtistMutation(options?: {
+  onSuccess?: (response: IdResponse) => void;
+  onError?: (e: Error) => void;
+}) {
+  const { lensService } = useLensService();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      return await lensService.deleteArtist(id);
+    },
+    onSuccess: (response) => {
+      options?.onSuccess?.(response);
+      queryClient.invalidateQueries({ queryKey: ['artists'] });
+      queryClient.invalidateQueries({ queryKey: ['artist', response.id] });
+      queryClient.invalidateQueries({ queryKey: ['structures'] });
+    },
+    onError: (error) => {
+      options?.onError?.(error);
+    },
+  });
+}
diff --git a/packages/renderer/src/plugins/router.ts b/packages/renderer/src/plugins/router.ts
index 2c2912d6..abb9ba8f 100644
--- a/packages/renderer/src/plugins/router.ts
+++ b/packages/renderer/src/plugins/router.ts
@@ -15,6 +15,7 @@ const ReleasePage = () => import('/@/views/releasePage.vue');
 const TermsPage = () => import('/@/views/termsPage.vue');
 const UploadPage = () => import('/@/views/uploadPage.vue');
 const CategoryPage = () => import('../views/categoryPage.vue');
+const SeriesPage = () => import('../views/seriesPage.vue');
 
 /**
  * Parses the VITE_LENS_NODE environment variable to build the base API URL.
@@ -223,6 +224,12 @@ const routes: Array<RouteRecordRaw> = [
     component: CategoryPage,
     props: route => ({ ...route.params, showAll: true }),
   },
+  {
+    path: '/series/:id',
+    name: 'Series',
+    component: SeriesPage,
+    props: true,
+  },
 ];
 
 const router = createRouter({
diff --git a/packages/renderer/src/views/categoryPage.vue b/packages/renderer/src/views/categoryPage.vue
index 36971634..2d909383 100644
--- a/packages/renderer/src/views/categoryPage.vue
+++ b/packages/renderer/src/views/categoryPage.vue
@@ -1,14 +1,14 @@
 <template>
   <v-container
     fluid
-    class="fill-height pb-16 px-3"
+    class="pb-16 px-3"
   >
     <template v-if="props.showAll">
       <!-- Show all releases with infinite scroll -->
       <p class="text-h6 text-sm-h5 font-weight-bold mb-4">{{ pageCategory?.displayName }}</p>
       <infinite-release-list
         :category-filter="pageCategory?.id"
-        @release-click="(release) => router.push(`/release/${release.id}`)"
+        @release-click="handleItemClick"
       />
     </template>
 
@@ -34,7 +34,7 @@
             <content-card
               :item="item"
               cursor-pointer
-              @click="router.push(`/release/${item.id}`)"
+              @click="handleItemClick(item)"
             />
           </v-col>
         </content-section>
@@ -58,7 +58,7 @@ import { useRouter } from 'vue-router';
 import ContentSection from '/@/components/home/contentSection.vue';
 import ContentCard from '/@/components/misc/contentCard.vue';
 import InfiniteReleaseList from '/@/components/misc/infiniteReleaseList.vue';
-import { useContentCategoriesQuery, useGetReleasesQuery, useGetFeaturedReleasesQuery } from '/@/plugins/lensService/hooks';
+import { useContentCategoriesQuery, useGetReleasesQuery, useGetFeaturedReleasesQuery, useGetStructuresQuery } from '/@/plugins/lensService/hooks';
 import { filterActivedFeatured } from '/@/utils';
 import type { ReleaseItem } from '/@/types';
 
@@ -72,14 +72,30 @@ const { data: contentCategories } = useContentCategoriesQuery();
 const { data: releases, isLoading: isReleasesLoading } = useGetReleasesQuery();
 const { data: featuredReleases, isLoading: isFeaturedLoading } = useGetFeaturedReleasesQuery();
 
-const isLoading = computed(() => isReleasesLoading.value || isFeaturedLoading.value);
-
 const pageCategory = computed(() => {
-  const categoryId = props.category;
-  const category = contentCategories.value?.find((cat) => cat.categoryId === categoryId);
-  return category;
+  const slug = props.category; // This is the slug from the URL like "tv-shows"
+  
+  // Find category by categoryId (slug) - API now merges duplicates
+  return contentCategories.value?.find((cat) => cat.categoryId === slug);
+});
+
+// Fetch structures for TV shows
+const isTVCategory = computed(() => {
+  // Check if this is the TV category page
+  if (props.category === 'tv-shows') return true;
+  // Also check by display name in case of corrupted category data
+  const category = pageCategory.value;
+  return category?.displayName === 'TV Shows';
+});
+const { data: structures, isLoading: isStructuresLoading, error: structuresError } = useGetStructuresQuery({
+  enabled: isTVCategory,
+  // Retry less aggressively if service isn't ready
+  retry: 1,
+  retryDelay: 1000
 });
 
+const isLoading = computed(() => isReleasesLoading.value || isFeaturedLoading.value || (isTVCategory.value && isStructuresLoading.value));
+
 // Get featured releases that are active and in this category
 const featuredReleasesInCategory = computed<ReleaseItem[]>(() => {
   if (!releases.value || !featuredReleases.value) return [];
@@ -90,11 +106,110 @@ const featuredReleasesInCategory = computed<ReleaseItem[]>(() => {
     .map(fr => fr.releaseId);
 
   // Filter releases that are both featured and in this category
-  return releases.value.filter(r =>
+  const categoryReleases = releases.value.filter(r =>
     r.id &&
     activeFeaturedReleaseIds.includes(r.id) &&
     r.categoryId === pageCategory.value?.id,
   );
+
+  // For TV shows, group by series and return series tiles
+  if (isTVCategory.value) {
+    const seriesMap = new Map<string, any>();
+    
+    // Get all series structures if available
+    const seriesStructures = structures.value ? 
+      structures.value.filter((s: any) => s.type === 'series') : [];
+    
+    console.log('TV Category - Processing releases:', categoryReleases.length, 'Series structures:', seriesStructures.length, 'Error loading structures:', structuresError.value);
+    
+    // For each episode, find its series
+    for (const release of categoryReleases) {
+      const seriesId = release.metadata?.seriesId;
+      
+      if (seriesId) {
+        // Episode has a series ID from the upload form
+        const series = seriesStructures.find((s: any) => s.id === seriesId);
+        
+        if (!seriesMap.has(seriesId)) {
+          // Create entry for the series
+          if (series) {
+            // We have the series structure
+            seriesMap.set(seriesId, {
+              id: series.id,
+              name: series.name,
+              categoryId: pageCategory.value?.id,
+              thumbnailCID: series.thumbnailCID || release.thumbnailCID,
+              contentCID: release.contentCID,
+              description: series.description,
+              metadata: {
+                isSeries: true,
+                episodeCount: 0,
+                episodes: [],
+                ...series.metadata
+              }
+            });
+          } else {
+            // Series structure doesn't exist yet, but we know it's part of a series
+            // This shouldn't happen if upload form works correctly, but handle it anyway
+            seriesMap.set(seriesId, {
+              id: seriesId,
+              name: `Series ${seriesId.substring(0, 8)}...`, // Fallback name
+              categoryId: pageCategory.value?.id,
+              thumbnailCID: release.thumbnailCID,
+              contentCID: release.contentCID,
+              description: `TV Series`,
+              metadata: {
+                isSeries: true,
+                isPseudoSeries: true,
+                episodeCount: 0,
+                episodes: []
+              }
+            });
+          }
+        }
+        
+        // Add episode to series
+        seriesMap.get(seriesId).metadata.episodeCount++;
+        seriesMap.get(seriesId).metadata.episodes.push(release);
+        
+        // Sort episodes by season and episode number
+        seriesMap.get(seriesId).metadata.episodes.sort((a: any, b: any) => {
+          const aSeason = a.metadata?.seasonNumber || 0;
+          const bSeason = b.metadata?.seasonNumber || 0;
+          const aEpisode = a.metadata?.episodeNumber || 0;
+          const bEpisode = b.metadata?.episodeNumber || 0;
+          
+          if (aSeason !== bSeason) return aSeason - bSeason;
+          return aEpisode - bEpisode;
+        });
+      } else {
+        // Episode without series metadata - show as standalone
+        // This is likely old content or improperly uploaded
+        seriesMap.set(release.id, {
+          ...release,
+          metadata: {
+            ...release.metadata,
+            isStandaloneEpisode: true
+          }
+        });
+      }
+    }
+    
+    console.log('Series map created:', seriesMap.size, 'series/episodes');
+    return Array.from(seriesMap.values());
+  }
+
+  return categoryReleases;
 });
 
+// Handle clicking on items - navigate to series or release page
+const handleItemClick = (item: ReleaseItem) => {
+  if (item.metadata?.isSeries) {
+    // Navigate to the series view page
+    router.push(`/series/${item.id}`);
+  } else {
+    router.push(`/release/${item.id}`);
+  }
+};
+
 </script>
diff --git a/packages/renderer/src/views/homePage.vue b/packages/renderer/src/views/homePage.vue
index b14f9257..98116446 100644
--- a/packages/renderer/src/views/homePage.vue
+++ b/packages/renderer/src/views/homePage.vue
@@ -61,7 +61,18 @@
             <content-card
               :item="item"
               cursor-pointer
-              @click="router.push(`/release/${item.id}`)"
+              @click="handleItemClick(item)"
+            />
+          </v-col>
+          <!-- Ghost items to maintain alignment -->
+          <v-col
+            v-for="n in Math.max(0, 8 - section.items.length)"
+            :key="`ghost-${section.id}-${n}`"
+            style="visibility: hidden;"
+          >
+            <content-card
+              :item="{}"
+              cursor-pointer
             />
           </v-col>
         </content-section>
@@ -78,7 +89,7 @@ import ContentSection from '/@/components/home/contentSection.vue';
 import ContentCard from '/@/components/misc/contentCard.vue';
 import FeaturedSlider from '/@/components/home/featuredSlider.vue';
 import type { ReleaseItem } from '/@/types';
-import { useContentCategoriesQuery, useGetFeaturedReleasesQuery, useGetReleasesQuery } from '/@/plugins/lensService/hooks';
+import { useContentCategoriesQuery, useGetFeaturedReleasesQuery, useGetReleasesQuery, useGetStructuresQuery } from '/@/plugins/lensService/hooks';
 import { filterActivedFeatured, filterPromotedFeatured } from '../utils';
 
 const router = useRouter();
@@ -97,6 +108,14 @@ const {
 
 const { data: contentCategories } = useContentCategoriesQuery();
 
+// Fetch structures for TV series - only load when needed and handle errors gracefully
+const { data: structures } = useGetStructuresQuery({
+  retry: 1,
+  retryDelay: 1000,
+  // Only enable if we have releases
+  enabled: computed(() => !!releases.value && releases.value.length > 0)
+});
+
 const activedFeaturedReleases = computed<ReleaseItem[]>(() => {
   if (!releases.value || !featuredReleases.value) return [];
   const activedFeaturedReleasesIds = featuredReleases.value
@@ -130,12 +149,105 @@ const activeSections = computed(() => {
 
   return contentCategories.value
     .filter(category => category.featured)
+    .sort((a, b) => {
+      // Put TV Shows last
+      if (a.displayName === 'TV Shows') return 1;
+      if (b.displayName === 'TV Shows') return -1;
+      return 0;
+    })
     .map(featuredCategory => {
-      // Use the category's ID (UUID) to match releases, not the slug
-      const items = releasesByCategory.get(featuredCategory.id) || [];
+      // Collect releases from all federated category IDs
+      let items: ReleaseItem[] = [];
+      if (featuredCategory.allIds) {
+        // Merged category - get releases from all IDs
+        for (const catId of featuredCategory.allIds) {
+          items.push(...(releasesByCategory.get(catId) || []));
+        }
+      } else {
+        // Single category (backward compatibility)
+        items = releasesByCategory.get(featuredCategory.id) || [];
+      }
+      
+      // For TV shows, group episodes by series
+      // Check both categoryId and displayName for TV category (handle corrupted data)
+      if (featuredCategory.categoryId === 'tv-shows' || featuredCategory.displayName === 'TV Shows') {
+        const seriesMap = new Map<string, any>();
+        const seriesStructures = structures.value ? 
+          structures.value.filter((s: any) => s.type === 'series') : [];
+        
+        for (const release of items) {
+          const seriesId = release.metadata?.seriesId;
+          
+          if (seriesId) {
+            // Episode has a series ID
+            const series = seriesStructures.find((s: any) => s.id === seriesId);
+            
+            if (!seriesMap.has(seriesId)) {
+              if (series) {
+                seriesMap.set(seriesId, {
+                  id: series.id,
+                  name: series.name,
+                  categoryId: featuredCategory.id,
+                  thumbnailCID: series.thumbnailCID || release.thumbnailCID,
+                  contentCID: release.contentCID,
+                  description: series.description,
+                  metadata: {
+                    isSeries: true,
+                    episodeCount: 0,
+                    episodes: [],
+                    ...series.metadata
+                  }
+                });
+              } else {
+                // Series structure missing
+                seriesMap.set(seriesId, {
+                  id: seriesId,
+                  name: `Series ${seriesId.substring(0, 8)}...`,
+                  categoryId: featuredCategory.id,
+                  thumbnailCID: release.thumbnailCID,
+                  contentCID: release.contentCID,
+                  description: `TV Series`,
+                  metadata: {
+                    isSeries: true,
+                    isPseudoSeries: true,
+                    episodeCount: 0,
+                    episodes: []
+                  }
+                });
+              }
+            }
+            
+            seriesMap.get(seriesId).metadata.episodeCount++;
+            seriesMap.get(seriesId).metadata.episodes.push(release);
+            
+            // Sort episodes
+            seriesMap.get(seriesId).metadata.episodes.sort((a: any, b: any) => {
+              const aSeason = a.metadata?.seasonNumber || 0;
+              const bSeason = b.metadata?.seasonNumber || 0;
+              const aEpisode = a.metadata?.episodeNumber || 0;
+              const bEpisode = b.metadata?.episodeNumber || 0;
+              
+              if (aSeason !== bSeason) return aSeason - bSeason;
+              return aEpisode - bEpisode;
+            });
+          } else {
+            // Standalone episode without series
+            seriesMap.set(release.id, {
+              ...release,
+              metadata: {
+                ...release.metadata,
+                isStandaloneEpisode: true
+              }
+            });
+          }
+        }
+        
+        items = Array.from(seriesMap.values());
+      }
+      
       return {
         id: featuredCategory.categoryId,
-        title: featuredCategory.categoryId === 'tv-shows' ? featuredCategory.displayName : `Featured ${featuredCategory.displayName}`,
+        title: featuredCategory.categoryId === 'tv-shows' ? 'Featured TV' : `Featured ${featuredCategory.displayName}`,
         items: items.slice(0, limitPerCategory),
         navigationPath: `/featured/${featuredCategory.categoryId}`,
       };
@@ -160,4 +272,14 @@ const noContent = computed(() => {
   }
   return releases.value?.length === 0 && featuredReleases.value?.length === 0;
 });
+
+// Handle clicking on items - navigate to series or release page
+const handleItemClick = (item: any) => {
+  if (item.metadata?.isSeries) {
+    // Navigate to the series view page
+    router.push(`/series/${item.id}`);
+  } else {
+    router.push(`/release/${item.id}`);
+  }
+};
 </script>
diff --git a/packages/renderer/src/views/seriesPage.vue b/packages/renderer/src/views/seriesPage.vue
new file mode 100644
index 00000000..49c1b1cd
--- /dev/null
+++ b/packages/renderer/src/views/seriesPage.vue
@@ -0,0 +1,299 @@
+<template>
+  <v-container fluid class="pb-16">
+    <!-- Loading state -->
+    <v-sheet
+      v-if="isLoading"
+      color="transparent"
+      class="d-flex w-100 fill-height align-center justify-center"
+    >
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        size="64"
+      ></v-progress-circular>
+    </v-sheet>
+
+    <!-- Series not found -->
+    <v-sheet
+      v-else-if="!series && !isLoading"
+      color="transparent"
+      class="d-flex flex-column mx-auto mt-8"
+      max-width="20rem"
+    >
+      <v-icon
+        size="64"
+        class="mb-4 text-center"
+        color="grey"
+      >$television-off</v-icon>
+      <p class="text-h6 text-center mb-2">Series not found</p>
+      <p class="text-body-2 text-center text-grey mb-4">
+        The series you're looking for doesn't exist or has been removed.
+      </p>
+      <v-btn
+        color="primary"
+        @click="router.push('/featured/tv-shows')"
+      >
+        Browse TV Shows
+      </v-btn>
+    </v-sheet>
+
+    <!-- Series content -->
+    <template v-else-if="series">
+      <!-- Series header -->
+      <v-row class="mb-6">
+        <v-col cols="12" md="3">
+          <v-img
+            :src="parseUrlOrCid(series.thumbnailCID || episodes[0]?.thumbnailCID)"
+            aspect-ratio="0.75"
+            cover
+            rounded="lg"
+            class="elevation-4"
+          >
+            <template #placeholder>
+              <v-sheet
+                color="grey-darken-3"
+                class="d-flex align-center justify-center fill-height"
+              >
+                <v-icon size="64" color="grey">$television</v-icon>
+              </v-sheet>
+            </template>
+          </v-img>
+        </v-col>
+        
+        <v-col cols="12" md="9">
+          <h1 class="text-h3 text-sm-h2 font-weight-bold mb-2">{{ series.name }}</h1>
+          
+          <div class="d-flex align-center ga-4 mb-4">
+            <v-chip size="small" color="primary">
+              {{ totalSeasons }} {{ totalSeasons === 1 ? 'Season' : 'Seasons' }}
+            </v-chip>
+            <v-chip size="small" color="secondary">
+              {{ episodes.length }} {{ episodes.length === 1 ? 'Episode' : 'Episodes' }}
+            </v-chip>
+          </div>
+
+          <p v-if="series.description" class="text-body-1 mb-4">
+            {{ series.description }}
+          </p>
+
+          <!-- Play first episode button -->
+          <v-btn
+            v-if="firstEpisode"
+            color="primary"
+            size="large"
+            prepend-icon="$play"
+            @click="router.push(`/release/${firstEpisode.id}`)"
+          >
+            Play First Episode
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-divider class="my-6" />
+
+      <!-- Season selector -->
+      <v-tabs
+        v-if="seasons.length > 0"
+        v-model="selectedSeasonTab"
+        class="mb-6"
+        color="primary"
+      >
+        <v-tab
+          v-for="season in seasons"
+          :key="season.id"
+          :value="season.id"
+        >
+          {{ season.name }}
+        </v-tab>
+      </v-tabs>
+
+      <!-- Episodes grid -->
+      <div v-if="currentSeasonEpisodes.length > 0">
+        <h2 class="text-h5 font-weight-bold mb-4">
+          {{ selectedSeason?.name || 'Episodes' }}
+        </h2>
+        
+        <v-row>
+          <v-col
+            v-for="episode in currentSeasonEpisodes"
+            :key="episode.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+          >
+            <v-card
+              class="episode-card"
+              rounded="lg"
+              @click="router.push(`/release/${episode.id}`)"
+            >
+              <v-img
+                :src="parseUrlOrCid(episode.thumbnailCID)"
+                aspect-ratio="1.78"
+                cover
+              >
+                <template #placeholder>
+                  <v-sheet
+                    color="grey-darken-3"
+                    class="d-flex align-center justify-center fill-height"
+                  >
+                    <v-icon size="48" color="grey">$television-play</v-icon>
+                  </v-sheet>
+                </template>
+              </v-img>
+              
+              <v-card-text>
+                <p class="text-caption text-grey mb-1">
+                  Episode {{ episode.metadata?.episodeNumber || '?' }}
+                </p>
+                <p class="text-body-2 font-weight-medium">
+                  {{ episode.name }}
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+
+      <!-- No episodes message -->
+      <v-sheet
+        v-else
+        color="transparent"
+        class="d-flex flex-column mx-auto mt-8"
+        max-width="20rem"
+      >
+        <p class="text-body-1 text-center text-grey">
+          No episodes available for this season.
+        </p>
+      </v-sheet>
+    </template>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { 
+  useGetStructureQuery, 
+  useGetStructuresQuery,
+  useGetReleasesQuery 
+} from '/@/plugins/lensService/hooks';
+import { parseUrlOrCid } from '/@/utils';
+import type { ReleaseItem } from '/@/types';
+
+const route = useRoute();
+const router = useRouter();
+
+// Get series ID from route
+const seriesId = computed(() => route.params.id as string);
+
+// Fetch the series structure
+const { data: series, isLoading: isSeriesLoading } = useGetStructureQuery(seriesId.value);
+
+// Fetch all structures to get seasons
+const { data: structures, isLoading: isStructuresLoading } = useGetStructuresQuery({
+  searchOptions: { fetch: 1000 }
+});
+
+// Fetch all releases to get episodes
+const { data: releases, isLoading: isReleasesLoading } = useGetReleasesQuery({
+  searchOptions: { fetch: 1000 }
+});
+
+const isLoading = computed(() => 
+  isSeriesLoading.value || isStructuresLoading.value || isReleasesLoading.value
+);
+
+// Get all seasons for this series
+const seasons = computed(() => {
+  if (!structures.value || !seriesId.value) return [];
+  
+  return structures.value
+    .filter((s: any) => s.type === 'season' && s.parentId === seriesId.value)
+    .sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
+});
+
+// Get total number of seasons
+const totalSeasons = computed(() => seasons.value.length || 1);
+
+// Selected season tab
+const selectedSeasonTab = ref<string>('');
+
+// Set initial selected season
+watch(seasons, (newSeasons) => {
+  if (newSeasons.length > 0 && !selectedSeasonTab.value) {
+    selectedSeasonTab.value = newSeasons[0].id;
+  }
+}, { immediate: true });
+
+// Get selected season
+const selectedSeason = computed(() => 
+  seasons.value.find((s: any) => s.id === selectedSeasonTab.value)
+);
+
+// Get all episodes for this series
+const episodes = computed<ReleaseItem[]>(() => {
+  if (!releases.value || !seriesId.value) return [];
+  
+  return releases.value.filter(
+    (r: ReleaseItem) => r.metadata?.seriesId === seriesId.value
+  );
+});
+
+// Get episodes for current season
+const currentSeasonEpisodes = computed<ReleaseItem[]>(() => {
+  if (!episodes.value) return [];
+  
+  // If we have seasons, filter by selected season
+  if (selectedSeason.value) {
+    return episodes.value
+      .filter((e: ReleaseItem) => e.metadata?.seasonId === selectedSeason.value.id)
+      .sort((a: ReleaseItem, b: ReleaseItem) => {
+        const aNum = a.metadata?.episodeNumber || 0;
+        const bNum = b.metadata?.episodeNumber || 0;
+        return aNum - bNum;
+      });
+  }
+  
+  // No seasons, show all episodes
+  return episodes.value.sort((a: ReleaseItem, b: ReleaseItem) => {
+    const aSeason = a.metadata?.seasonNumber || 1;
+    const bSeason = b.metadata?.seasonNumber || 1;
+    const aEpisode = a.metadata?.episodeNumber || 0;
+    const bEpisode = b.metadata?.episodeNumber || 0;
+    
+    if (aSeason !== bSeason) return aSeason - bSeason;
+    return aEpisode - bEpisode;
+  });
+});
+
+// Get first episode for play button
+const firstEpisode = computed(() => {
+  if (episodes.value.length === 0) return null;
+  
+  // Sort all episodes and return the first
+  const sorted = [...episodes.value].sort((a: ReleaseItem, b: ReleaseItem) => {
+    const aSeason = a.metadata?.seasonNumber || 1;
+    const bSeason = b.metadata?.seasonNumber || 1;
+    const aEpisode = a.metadata?.episodeNumber || 0;
+    const bEpisode = b.metadata?.episodeNumber || 0;
+    
+    if (aSeason !== bSeason) return aSeason - bSeason;
+    return aEpisode - bEpisode;
+  });
+  
+  return sorted[0];
+});
+</script>
+
+<style scoped>
+.episode-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.episode-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+}
+</style>
\ No newline at end of file

From a371540c43e8fddbced6cacc28d6ab8799a7e3fd Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Mon, 4 Aug 2025 07:06:38 +0100
Subject: [PATCH 14/17] Update structures panel

---
 CLAUDE.md                                     |   28 +
 docs/STRUCTURES.md                            |  170 +++
 package.json                                  |    3 +-
 .../src/components/admin/structureForm.vue    |  303 +++++
 .../components/admin/structuresManagement.vue | 1041 +++++++++++++++++
 .../src/components/misc/contentCard.vue       |   32 +-
 packages/renderer/src/views/adminPage.vue     |   12 +
 pnpm-lock.yaml                                |    8 +
 8 files changed, 1593 insertions(+), 4 deletions(-)
 create mode 100644 docs/STRUCTURES.md
 create mode 100644 packages/renderer/src/components/admin/structureForm.vue
 create mode 100644 packages/renderer/src/components/admin/structuresManagement.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index 2b753fb3..568dc1c6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -108,6 +108,34 @@ Flagship is Riff.CC's decentralized media platform for watching, sharing, and cu
 - Vite configs in each package control build behavior
 - Content is distributed via P2P network with configurable replication factors
 
+## CRITICAL DATA STRUCTURE NOTES
+
+### Category and Release Structure
+**Category object** has:
+- `id` - The hash/unique identifier for the category
+- `slug` - The slug identifier (e.g., 'tv-shows', 'music', 'movies')
+
+**Release object** has:
+- `categoryId` - References the category's hash ID
+- `categorySlug` - References the category's slug
+
+When filtering releases by category type, use `categorySlug` on the release, NOT `categoryId`!
+
+### Structures System
+Structures are completely generic organizational containers documented in `docs/STRUCTURES.md`. They can represent ANY hierarchical relationship - artists/albums, TV shows/seasons, book series/volumes, courses/lessons, etc. The system is designed for efficient PeerBit queries across arbitrary hierarchies using `parentId` relationships and content references via `metadata.structureId`.
+
+## Key Implementation Details
+
+### Series and Episodes
+- Series structures should only exist when they have actual episodes
+- Episodes link to series via `metadata.seriesId` matching the series structure's `id`
+- Seasons are tracked via `metadata.seasonNumber` on episodes
+
+### Important Reminders
+- Check this file before making assumptions about data structures
+- When something works on one page but not another, the issue is usually simple
+- Focus on fixing exactly what's requested without adding complexity
+
 ## Important Instructions
 - NEVER use git checkout to revert changes - this will throw away hours of work
 - Always manually revert specific changes using the Edit tool
diff --git a/docs/STRUCTURES.md b/docs/STRUCTURES.md
new file mode 100644
index 00000000..7bc9a295
--- /dev/null
+++ b/docs/STRUCTURES.md
@@ -0,0 +1,170 @@
+# Structures Documentation
+
+This document details the structure system in Riff.CC - a generic hierarchical organization system for ANY type of content.
+
+## Overview
+
+Structures are completely generic containers that can represent ANY organizational entity and form arbitrary hierarchies. They are designed to enable efficient PeerBit queries across complex relationships.
+
+A structure can be:
+- **Artist** (containing albums, songs, collaborations)
+- **Author** (containing book series, individual books)
+- **Director** (containing filmographies, TV shows)
+- **Actor** (containing performances across different media)
+- **TV Show** (containing seasons)
+- **Season** (containing episodes)  
+- **Album** (containing tracks)
+- **Book Series** (containing volumes)
+- **Course** (containing lessons)
+- **Any other organizational concept**
+
+## Data Model
+
+### Structure Schema
+
+```typescript
+interface Structure {
+  id: string;              // Unique identifier
+  type: string;            // Completely arbitrary - 'artist', 'album', 'tv-show', 'season', 'course', etc.
+  title: string;           // Display name
+  description?: string;    // Optional description
+  thumbnail?: string;      // CID for thumbnail image
+  parentId?: string;       // References parent structure (completely optional)
+  categoryId?: string;     // Optional reference to content category
+  categorySlug?: string;   // Optional category slug
+  createdAt: Date;
+  updatedAt: Date;
+}
+```
+
+### Content Relationship
+
+Content (releases) can reference structures through metadata:
+
+```typescript
+interface Release {
+  // ... standard release fields
+  metadata: {
+    structureId?: string;     // References ANY structure
+    parentStructureId?: string; // References parent structure
+    // ... other metadata
+  };
+}
+```
+
+## Hierarchy Examples
+
+### Music Organization
+```
+Artist: "Radiohead" (type: 'artist')
+├── Album: "OK Computer" (type: 'album', parentId: radiohead-id)
+│   ├── Track: "Paranoid Android" (metadata.structureId: ok-computer-id)
+│   └── Track: "Karma Police" (metadata.structureId: ok-computer-id)
+└── Album: "In Rainbows" (type: 'album', parentId: radiohead-id)
+    ├── Track: "15 Step" (metadata.structureId: in-rainbows-id)
+    └── Track: "Bodysnatchers" (metadata.structureId: in-rainbows-id)
+```
+
+### TV Organization
+```
+TV Show: "Breaking Bad" (type: 'tv-show')
+├── Season: "Season 1" (type: 'season', parentId: breaking-bad-id)
+│   ├── Episode: "Pilot" (metadata.structureId: season-1-id)
+│   └── Episode: "Cat's in the Bag..." (metadata.structureId: season-1-id)
+└── Season: "Season 2" (type: 'season', parentId: breaking-bad-id)
+```
+
+### Book Series Organization
+```
+Author: "J.K. Rowling" (type: 'author')
+└── Series: "Harry Potter" (type: 'book-series', parentId: jk-rowling-id)
+    ├── Book: "Philosopher's Stone" (metadata.structureId: harry-potter-id)
+    └── Book: "Chamber of Secrets" (metadata.structureId: harry-potter-id)
+```
+
+## Query Patterns
+
+The power of structures lies in efficient PeerBit queries across hierarchical relationships:
+
+### Find all content under a structure
+```typescript
+// Find all tracks in an album
+const tracks = await site.releases.query({
+  'metadata.structureId': albumId
+});
+
+// Find all episodes in a season
+const episodes = await site.releases.query({
+  'metadata.structureId': seasonId
+});
+```
+
+### Find all child structures
+```typescript
+// Find all albums by an artist
+const albums = await site.structures.query({
+  parentId: artistId
+});
+
+// Find all seasons of a TV show
+const seasons = await site.structures.query({
+  parentId: tvShowId
+});
+```
+
+### Multi-level queries
+```typescript
+// Find everything by an artist (albums + standalone tracks)
+const artistAlbums = await site.structures.query({ parentId: artistId });
+const directTracks = await site.releases.query({ 'metadata.structureId': artistId });
+
+// Get all tracks from all albums
+const allAlbumTracks = [];
+for (const album of artistAlbums) {
+  const tracks = await site.releases.query({ 'metadata.structureId': album.id });
+  allAlbumTracks.push(...tracks);
+}
+```
+
+## Key Design Principles
+
+1. **Completely Generic**: No hardcoded content types or relationships
+2. **Arbitrary Hierarchies**: Any structure can be parent/child of any other
+3. **Efficient P2P Queries**: Designed for optimal PeerBit query performance
+4. **Optional Relationships**: All relationships are optional - structures can be standalone
+5. **Flexible Metadata**: Content can reference structures however makes sense
+
+## Common Patterns
+
+### Standalone Content
+Content doesn't need to belong to any structure:
+```typescript
+// A standalone documentary
+{
+  title: "Free Culture Documentary",
+  // no metadata.structureId - completely independent
+}
+```
+
+### Multiple Structure References
+Content can reference multiple structures:
+```typescript
+// A song that's part of an album AND a compilation
+{
+  title: "Bohemian Rhapsody",
+  metadata: {
+    structureId: albumId,        // Part of "A Night at the Opera"
+    compilationIds: [comp1, comp2] // Also in various compilations
+  }
+}
+```
+
+### Cross-Category Structures
+Structures can span different content categories:
+```typescript
+// A director structure containing both movies and TV shows
+Director: "Christopher Nolan" (type: 'director')
+├── Movie: "Inception" (categorySlug: 'movies', metadata.structureId: nolan-id)
+├── Movie: "Interstellar" (categorySlug: 'movies', metadata.structureId: nolan-id)
+└── TV Show: "Westworld" (categorySlug: 'tv-shows', metadata.structureId: nolan-id)
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index e04547c5..f3c5e14c 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/luxon": "^3.6.2",
     "@types/node": "^22.15.33",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.35.0",
     "@typescript-eslint/parser": "^8.35.0",
     "@vitejs/plugin-vue": "^5.2.4",
@@ -71,8 +72,8 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@multiformats/multiaddr": "^12.5.1",
+    "@riffcc/lens-sdk": "file:../lens-sdk",
     "@tanstack/vue-query": "^5.81.2",
     "@vueuse/core": "^12.8.2",
     "core-js": "^3.43.0",
diff --git a/packages/renderer/src/components/admin/structureForm.vue b/packages/renderer/src/components/admin/structureForm.vue
new file mode 100644
index 00000000..4768428c
--- /dev/null
+++ b/packages/renderer/src/components/admin/structureForm.vue
@@ -0,0 +1,303 @@
+<template>
+  <v-form @submit.prevent="handleSubmit">
+    <v-select
+      v-model="formData.type"
+      :items="structureTypes"
+      item-title="label"
+      item-value="value"
+      label="Structure Type"
+      :disabled="mode === 'edit'"
+      required
+    ></v-select>
+    
+    <v-text-field
+      v-model="formData.name"
+      label="Name"
+      required
+    ></v-text-field>
+    
+    <v-textarea
+      v-model="formData.description"
+      label="Description"
+      rows="3"
+    ></v-textarea>
+    
+    <v-text-field
+      v-model="formData.thumbnailCID"
+      label="Thumbnail CID"
+      placeholder="Enter IPFS CID for thumbnail"
+      prepend-icon="$image"
+      hint="Upload image to IPFS and paste the CID here"
+    ></v-text-field>
+    
+    <!-- Type-specific fields -->
+    <template v-if="formData.type === 'series'">
+      <v-divider class="my-4"></v-divider>
+      <p class="text-subtitle-2 mb-2">Series Information</p>
+      <v-text-field
+        v-model.number="formData.metadata.seasons"
+        label="Number of Seasons"
+        type="number"
+        min="1"
+      ></v-text-field>
+      <v-select
+        v-model="formData.metadata.genres"
+        :items="tvGenres"
+        label="Genres"
+        multiple
+        chips
+        closable-chips
+      ></v-select>
+      <v-text-field
+        v-model="formData.metadata.releaseYear"
+        label="Release Year"
+        type="number"
+        min="1900"
+        :max="new Date().getFullYear() + 1"
+      ></v-text-field>
+    </template>
+    
+    <template v-else-if="formData.type === 'artist'">
+      <v-divider class="my-4"></v-divider>
+      <p class="text-subtitle-2 mb-2">Artist Information</p>
+      <v-select
+        v-model="formData.metadata.genres"
+        :items="musicGenres"
+        label="Genres"
+        multiple
+        chips
+        closable-chips
+      ></v-select>
+      <v-text-field
+        v-model="formData.metadata.country"
+        label="Country"
+      ></v-text-field>
+      <v-text-field
+        v-model="formData.metadata.website"
+        label="Website"
+        type="url"
+      ></v-text-field>
+    </template>
+    
+    <template v-else-if="formData.type === 'season'">
+      <v-divider class="my-4"></v-divider>
+      <p class="text-subtitle-2 mb-2">Season Information</p>
+      <v-autocomplete
+        v-model="formData.parentId"
+        :items="availableSeries"
+        item-title="name"
+        item-value="id"
+        label="Parent Series"
+        required
+      ></v-autocomplete>
+      <v-text-field
+        v-model.number="formData.metadata.seasonNumber"
+        label="Season Number"
+        type="number"
+        min="1"
+        required
+      ></v-text-field>
+      <v-text-field
+        v-model.number="formData.metadata.episodeCount"
+        label="Number of Episodes"
+        type="number"
+        min="1"
+      ></v-text-field>
+    </template>
+    
+    <template v-else-if="formData.type === 'tag'">
+      <v-divider class="my-4"></v-divider>
+      <p class="text-subtitle-2 mb-2">Tag Information</p>
+      <v-text-field
+        v-model="formData.metadata.color"
+        label="Tag Color"
+        type="color"
+      ></v-text-field>
+      <v-select
+        v-model="formData.metadata.category"
+        :items="['genre', 'mood', 'theme', 'style', 'other']"
+        label="Tag Category"
+      ></v-select>
+    </template>
+    
+    <template v-else-if="formData.type === 'collection'">
+      <v-divider class="my-4"></v-divider>
+      <p class="text-subtitle-2 mb-2">Collection Information</p>
+      <v-select
+        v-model="formData.metadata.collectionType"
+        :items="['playlist', 'album', 'compilation', 'franchise', 'custom']"
+        label="Collection Type"
+      ></v-select>
+      <v-switch
+        v-model="formData.metadata.isPublic"
+        label="Public Collection"
+      ></v-switch>
+      <v-switch
+        v-model="formData.metadata.allowContributions"
+        label="Allow Contributions"
+      ></v-switch>
+    </template>
+    
+    <v-btn
+      type="submit"
+      color="primary"
+      block
+      class="mt-4"
+      :loading="isSubmitting"
+    >
+      {{ mode === 'edit' ? 'Update' : 'Create' }} Structure
+    </v-btn>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useAddStructureMutation, useEditStructureMutation, useGetStructuresQuery } from '/@/plugins/lensService/hooks';
+import { v4 as uuidv4 } from 'uuid';
+
+const props = defineProps<{
+  initialData?: any;
+  mode?: 'create' | 'edit';
+  initialType?: string;
+  parentContext?: { parentId: string; parentName: string };
+}>();
+
+const emit = defineEmits<{
+  'update:success': [message: string];
+  'update:error': [message: string];
+}>();
+
+const createMutation = useAddStructureMutation();
+const updateMutation = useEditStructureMutation();
+const { data: structures } = useGetStructuresQuery();
+
+const isSubmitting = ref(false);
+
+const formData = ref({
+  id: '',
+  type: 'series',
+  name: '',
+  description: '',
+  thumbnailCID: '',
+  metadata: {
+    seasons: 1,
+    genres: [] as string[],
+    releaseYear: new Date().getFullYear(),
+    country: '',
+    website: '',
+    seasonNumber: 1,
+    episodeCount: 0,
+    color: '#1976D2',
+    category: 'other',
+    collectionType: 'custom',
+    isPublic: true,
+    allowContributions: false,
+  },
+  parentId: '',
+});
+
+const structureTypes = [
+  { label: 'Artist', value: 'artist' },
+  { label: 'Tag', value: 'tag' },
+  { label: 'Collection', value: 'collection' },
+];
+
+const tvGenres = [
+  'Action', 'Adventure', 'Animation', 'Comedy', 'Crime', 'Documentary',
+  'Drama', 'Fantasy', 'Horror', 'Mystery', 'Romance', 'Sci-Fi',
+  'Thriller', 'Western', 'Reality', 'Game Show', 'Talk Show',
+];
+
+const musicGenres = [
+  'Rock', 'Pop', 'Hip Hop', 'R&B', 'Electronic', 'Jazz', 'Classical',
+  'Country', 'Blues', 'Metal', 'Punk', 'Folk', 'Reggae', 'Latin',
+  'World', 'Experimental', 'Ambient', 'Indie',
+];
+
+const availableSeries = computed(() => {
+  if (!structures.value) return [];
+  return structures.value.filter((s: any) => s.type === 'series');
+});
+
+onMounted(() => {
+  if (props.initialData) {
+    formData.value = {
+      ...props.initialData,
+      metadata: {
+        ...formData.value.metadata,
+        ...props.initialData.metadata,
+      },
+    };
+  } else {
+    // Set initial type if provided
+    if (props.initialType) {
+      formData.value.type = props.initialType;
+    }
+    // Set parent context if provided
+    if (props.parentContext) {
+      formData.value.parentId = props.parentContext.parentId;
+    }
+  }
+});
+
+
+async function handleSubmit() {
+  isSubmitting.value = true;
+  
+  try {
+    const structureData = {
+      ...formData.value,
+      id: formData.value.id || uuidv4(),
+      // Clean up metadata based on type
+      metadata: Object.fromEntries(
+        Object.entries(formData.value.metadata).filter(([_, v]) => v !== '' && v !== null)
+      ),
+    };
+    
+    if (props.mode === 'edit') {
+      // For editing, we need to include the immutable properties
+      const editData = {
+        ...structureData,
+        postedBy: props.initialData.postedBy,
+        siteAddress: props.initialData.siteAddress,
+      };
+      await updateMutation.mutateAsync(editData);
+      emit('update:success', 'Structure updated successfully');
+    } else {
+      await createMutation.mutateAsync(structureData);
+      emit('update:success', 'Structure created successfully');
+    }
+    
+    // Reset form if creating
+    if (props.mode !== 'edit') {
+      formData.value = {
+        id: '',
+        type: 'series',
+        name: '',
+        description: '',
+        thumbnailCID: '',
+        metadata: {
+          seasons: 1,
+          genres: [],
+          releaseYear: new Date().getFullYear(),
+          country: '',
+          website: '',
+          seasonNumber: 1,
+          episodeCount: 0,
+          color: '#1976D2',
+          category: 'other',
+          collectionType: 'custom',
+          isPublic: true,
+          allowContributions: false,
+        },
+        parentId: '',
+      };
+    }
+  } catch (error) {
+    console.error('Error saving structure:', error);
+    emit('update:error', 'Failed to save structure');
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
\ No newline at end of file
diff --git a/packages/renderer/src/components/admin/structuresManagement.vue b/packages/renderer/src/components/admin/structuresManagement.vue
new file mode 100644
index 00000000..fd3a3f55
--- /dev/null
+++ b/packages/renderer/src/components/admin/structuresManagement.vue
@@ -0,0 +1,1041 @@
+<template>
+  <v-container>
+    <v-sheet class="px-6 py-4 mx-auto" max-width="1200px">
+      <!-- Header -->
+      <v-list-item class="px-0">
+        <template #append>
+          <v-dialog v-model="createStructureDialog" width="auto">
+            <template #activator="{props: activatorProps}">
+              <v-btn
+                icon="$plus-circle"
+                variant="text"
+                density="comfortable"
+                size="small"
+                v-bind="activatorProps"
+              ></v-btn>
+            </template>
+            <v-sheet width="600px" max-height="620px" class="pa-8 ma-auto">
+              <structure-form
+                :initial-type="currentStructureType"
+                :parent-context="parentContext"
+                @update:error="handleError"
+                @update:success="handleSuccess"
+              />
+            </v-sheet>
+          </v-dialog>
+        </template>
+        <h3>Manage Structures</h3>
+      </v-list-item>
+      <v-divider class="mt-2 mb-4"></v-divider>
+      
+      <!-- Breadcrumb Navigation -->
+      <v-breadcrumbs v-if="breadcrumbs.length > 0" :items="breadcrumbs" class="pa-0 mb-4">
+        <template #divider>
+          <v-icon icon="$chevron-right"></v-icon>
+        </template>
+        <template #item="{ item }">
+          <v-btn
+            variant="text"
+            size="small"
+            @click="navigateToBreadcrumb(item)"
+          >
+            {{ item.title }}
+          </v-btn>
+        </template>
+      </v-breadcrumbs>
+      
+      <!-- Loading state -->
+      <v-progress-linear
+        v-if="isLoading"
+        indeterminate
+        color="primary"
+        class="mt-4"
+      ></v-progress-linear>
+      
+      <!-- Main Categories View -->
+      <div v-else-if="currentView === 'categories'">
+        <v-row>
+          <!-- TV Shows Category -->
+          <v-col cols="12" md="6">
+            <v-card @click="navigateToCategory('tv')">
+              <v-card-title class="d-flex align-center">
+                <v-icon icon="$television" class="mr-2"></v-icon>
+                TV Shows
+                <v-spacer></v-spacer>
+                <v-chip>{{ tvSeriesCount }}</v-chip>
+              </v-card-title>
+              <v-card-text>
+                Manage TV series, seasons, and episodes
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <!-- Music Category -->
+          <v-col cols="12" md="6">
+            <v-card @click="navigateToCategory('music')">
+              <v-card-title class="d-flex align-center">
+                <v-icon icon="$music" class="mr-2"></v-icon>
+                Music
+                <v-spacer></v-spacer>
+                <v-chip>{{ artistCount }}</v-chip>
+              </v-card-title>
+              <v-card-text>
+                Manage artists, albums, and musical releases
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <!-- Tags Category -->
+          <v-col cols="12" md="6">
+            <v-card @click="navigateToCategory('tags')">
+              <v-card-title class="d-flex align-center">
+                <v-icon icon="$tag" class="mr-2"></v-icon>
+                Tags
+                <v-spacer></v-spacer>
+                <v-chip>{{ tagCount }}</v-chip>
+              </v-card-title>
+              <v-card-text>
+                Manage content tags and categories
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <!-- Collections Category -->
+          <v-col cols="12" md="6">
+            <v-card @click="navigateToCategory('collections')">
+              <v-card-title class="d-flex align-center">
+                <v-icon icon="$folder" class="mr-2"></v-icon>
+                Collections
+                <v-spacer></v-spacer>
+                <v-chip>{{ collectionCount }}</v-chip>
+              </v-card-title>
+              <v-card-text>
+                Manage custom collections and playlists
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+      
+      <!-- TV Shows List View -->
+      <div v-else-if="currentView === 'tv-list'">
+        <div class="d-flex align-center mb-4">
+          <h4>TV Shows</h4>
+          <v-spacer></v-spacer>
+          <v-btn
+            variant="outlined"
+            @click="showAllEpisodes"
+          >
+            All Episodes
+          </v-btn>
+        </div>
+        
+        <v-list v-if="tvSeries.length > 0" lines="two">
+          <v-list-item
+            v-for="series in tvSeries"
+            :key="series.id"
+            @click="navigateToSeries(series)"
+          >
+            <template #prepend>
+              <v-avatar>
+                <v-img
+                  v-if="series.thumbnailCID"
+                  :src="parseUrlOrCid(series.thumbnailCID)"
+                  cover
+                ></v-img>
+                <v-icon v-else icon="$television"></v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ series.name }}</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ formatSeasonCount(getSeriesSeasonCount(series.id)) }} • 
+              {{ formatEpisodeCount(getSeriesEpisodeCount(series.id)) }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                icon="$pencil"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="editStructure(series)"
+              ></v-btn>
+              <v-btn
+                icon="$delete"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="deleteStructure(series)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+        <v-alert v-else type="info" variant="tonal">
+          No TV series yet. Series will appear automatically when you upload TV episodes with series information.
+        </v-alert>
+      </div>
+      
+      <!-- Series Detail View (Seasons) -->
+      <div v-else-if="currentView === 'series-detail'">
+        <div class="d-flex align-center mb-4">
+          <h4>{{ currentSeries?.name }}</h4>
+          <v-spacer></v-spacer>
+        </div>
+        
+        <!-- Seasons List -->
+        <template v-if="currentSeasons.length > 0">
+          <h5 class="mb-2">Seasons</h5>
+          <v-list lines="two">
+            <v-list-item
+              v-for="season in currentSeasons"
+              :key="season.id"
+              @click="navigateToSeason(season)"
+            >
+              <template #prepend>
+                <v-avatar>
+                  <v-img
+                    v-if="season.thumbnailCID"
+                    :src="parseUrlOrCid(season.thumbnailCID)"
+                    cover
+                  ></v-img>
+                  <v-icon v-else icon="$numeric"></v-icon>
+                </v-avatar>
+              </template>
+              <v-list-item-title>
+                {{ season.name || `Season ${season.metadata?.seasonNumber}` }}
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                {{ getSeasonEpisodeCount(season.id, currentSeries?.id, season.metadata?.seasonNumber) }} Episodes
+              </v-list-item-subtitle>
+              <template #append>
+                <v-btn
+                  icon="$pencil"
+                  variant="text"
+                  density="comfortable"
+                  size="small"
+                  @click.stop="editStructure(season)"
+                ></v-btn>
+                <v-btn
+                  icon="$delete"
+                  variant="text"
+                  density="comfortable"
+                  size="small"
+                  @click.stop="deleteStructure(season)"
+                ></v-btn>
+              </template>
+            </v-list-item>
+          </v-list>
+        </template>
+        
+        <!-- Episodes without seasons -->
+        <template v-if="orphanEpisodes.length > 0">
+          <h5 class="mt-4 mb-2">Uncategorized Episodes</h5>
+          <v-list lines="two">
+            <v-list-item
+              v-for="episode in orphanEpisodes"
+              :key="episode.id"
+              @click="navigateToRelease(episode.id)"
+            >
+              <template #prepend>
+                <v-avatar>
+                  <v-img
+                    v-if="episode.thumbnailCID"
+                    :src="parseUrlOrCid(episode.thumbnailCID)"
+                    cover
+                  ></v-img>
+                  <v-icon v-else icon="$play"></v-icon>
+                </v-avatar>
+              </template>
+              <v-list-item-title>{{ episode.name }}</v-list-item-title>
+              <v-list-item-subtitle>
+                Episode {{ episode.metadata?.episodeNumber }}
+              </v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </template>
+      </div>
+      
+      <!-- Season Detail View (Episodes) -->
+      <div v-else-if="currentView === 'season-detail'">
+        <div class="d-flex align-center mb-4">
+          <h4>{{ currentSeason?.name || `Season ${currentSeason?.metadata?.seasonNumber}` }}</h4>
+          <v-spacer></v-spacer>
+        </div>
+        
+        <v-list lines="two">
+          <v-list-item
+            v-for="episode in currentEpisodes"
+            :key="episode.id"
+            @click="navigateToRelease(episode.id)"
+          >
+            <template #prepend>
+              <v-avatar>
+                <v-img
+                  v-if="episode.thumbnailCID"
+                  :src="parseUrlOrCid(episode.thumbnailCID)"
+                  cover
+                ></v-img>
+                <v-icon v-else icon="$play"></v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ episode.name }}</v-list-item-title>
+            <v-list-item-subtitle>
+              Episode {{ episode.metadata?.episodeNumber }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                icon="$open-in-new"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="navigateToRelease(episode.id)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+      </div>
+      
+      <!-- Music/Artists List View -->
+      <div v-else-if="currentView === 'music-list'">
+        <div class="d-flex align-center mb-4">
+          <h4>Artists</h4>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            prepend-icon="$plus"
+            @click="createNewStructure('artist')"
+          >
+            New Artist
+          </v-btn>
+          <v-btn
+            class="ml-2"
+            variant="outlined"
+            @click="showAllMusicReleases"
+          >
+            All Releases
+          </v-btn>
+        </div>
+        
+        <v-list lines="two">
+          <v-list-item
+            v-for="artist in artists"
+            :key="artist.id"
+            @click="navigateToArtist(artist)"
+          >
+            <template #prepend>
+              <v-avatar>
+                <v-img
+                  v-if="artist.thumbnailCID"
+                  :src="parseUrlOrCid(artist.thumbnailCID)"
+                  cover
+                ></v-img>
+                <v-icon v-else icon="$account-music"></v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ artist.name }}</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ artist.metadata?.genres?.join(', ') || 'No genres' }} • 
+              {{ getArtistReleaseCount(artist.id) }} Releases
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                icon="$pencil"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="editStructure(artist)"
+              ></v-btn>
+              <v-btn
+                icon="$delete"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="deleteStructure(artist)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+      </div>
+      
+      <!-- Artist Detail View -->
+      <div v-else-if="currentView === 'artist-detail'">
+        <div class="d-flex align-center mb-4">
+          <h4>{{ currentArtist?.name }}</h4>
+          <v-spacer></v-spacer>
+        </div>
+        
+        <v-list lines="two">
+          <v-list-item
+            v-for="release in currentArtistReleases"
+            :key="release.id"
+            @click="navigateToRelease(release.id)"
+          >
+            <template #prepend>
+              <v-avatar>
+                <v-img
+                  v-if="release.thumbnailCID"
+                  :src="parseUrlOrCid(release.thumbnailCID)"
+                  cover
+                ></v-img>
+                <v-icon v-else icon="$music"></v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ release.name }}</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ release.metadata?.releaseYear || 'Unknown year' }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                icon="$open-in-new"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="navigateToRelease(release.id)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+      </div>
+      
+      <!-- Tags List View -->
+      <div v-else-if="currentView === 'tags-list'">
+        <div class="d-flex align-center mb-4">
+          <h4>Tags</h4>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            prepend-icon="$plus"
+            @click="createNewStructure('tag')"
+          >
+            New Tag
+          </v-btn>
+        </div>
+        
+        <v-chip-group>
+          <v-chip
+            v-for="tag in tags"
+            :key="tag.id"
+            :color="tag.metadata?.color"
+            closable
+            @click="editStructure(tag)"
+            @click:close="deleteStructure(tag)"
+          >
+            {{ tag.name }}
+          </v-chip>
+        </v-chip-group>
+      </div>
+      
+      <!-- Collections List View -->
+      <div v-else-if="currentView === 'collections-list'">
+        <div class="d-flex align-center mb-4">
+          <h4>Collections</h4>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            prepend-icon="$plus"
+            @click="createNewStructure('collection')"
+          >
+            New Collection
+          </v-btn>
+        </div>
+        
+        <v-list lines="two">
+          <v-list-item
+            v-for="collection in collections"
+            :key="collection.id"
+            @click="navigateToCollection(collection)"
+          >
+            <template #prepend>
+              <v-avatar>
+                <v-img
+                  v-if="collection.thumbnailCID"
+                  :src="parseUrlOrCid(collection.thumbnailCID)"
+                  cover
+                ></v-img>
+                <v-icon v-else icon="$folder"></v-icon>
+              </v-avatar>
+            </template>
+            <v-list-item-title>{{ collection.name }}</v-list-item-title>
+            <v-list-item-subtitle>
+              {{ collection.metadata?.collectionType || 'Custom' }} • 
+              {{ collection.itemIds?.length || 0 }} items
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                icon="$pencil"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="editStructure(collection)"
+              ></v-btn>
+              <v-btn
+                icon="$delete"
+                variant="text"
+                density="comfortable"
+                size="small"
+                @click.stop="deleteStructure(collection)"
+              ></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+      </div>
+      
+      <!-- All Episodes View -->
+      <div v-else-if="currentView === 'all-episodes'">
+        <div class="d-flex align-center mb-4">
+          <h4>All TV Episodes</h4>
+          <v-spacer></v-spacer>
+        </div>
+        
+        <v-data-table
+          :headers="episodeTableHeaders"
+          :items="allTVEpisodes"
+          :items-per-page="25"
+        >
+          <template #item.name="{ item }">
+            <div class="d-flex align-center">
+              <v-avatar size="32" class="mr-2">
+                <v-img
+                  v-if="item.thumbnailCID"
+                  :src="parseUrlOrCid(item.thumbnailCID)"
+                ></v-img>
+                <v-icon v-else size="small">$play</v-icon>
+              </v-avatar>
+              {{ item.name }}
+            </div>
+          </template>
+          <template #item.series="{ item }">
+            {{ item.metadata?.seriesName || 'Unknown' }}
+          </template>
+          <template #item.season="{ item }">
+            S{{ String(item.metadata?.seasonNumber || 0).padStart(2, '0') }}
+          </template>
+          <template #item.episode="{ item }">
+            E{{ String(item.metadata?.episodeNumber || 0).padStart(2, '0') }}
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn
+              icon="$open-in-new"
+              variant="text"
+              density="comfortable"
+              size="small"
+              @click="navigateToRelease(item.id)"
+            ></v-btn>
+          </template>
+        </v-data-table>
+      </div>
+      
+      <!-- All Music Releases View -->
+      <div v-else-if="currentView === 'all-music'">
+        <div class="d-flex align-center mb-4">
+          <h4>All Music Releases</h4>
+          <v-spacer></v-spacer>
+        </div>
+        
+        <v-data-table
+          :headers="musicTableHeaders"
+          :items="allMusicReleases"
+          :items-per-page="25"
+        >
+          <template #item.name="{ item }">
+            <div class="d-flex align-center">
+              <v-avatar size="32" class="mr-2">
+                <v-img
+                  v-if="item.thumbnailCID"
+                  :src="parseUrlOrCid(item.thumbnailCID)"
+                ></v-img>
+                <v-icon v-else size="small">$music</v-icon>
+              </v-avatar>
+              {{ item.name }}
+            </div>
+          </template>
+          <template #item.artist="{ item }">
+            {{ item.metadata?.author || 'Unknown' }}
+          </template>
+          <template #item.year="{ item }">
+            {{ item.metadata?.releaseYear || '-' }}
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn
+              icon="$open-in-new"
+              variant="text"
+              density="comfortable"
+              size="small"
+              @click="navigateToRelease(item.id)"
+            ></v-btn>
+          </template>
+        </v-data-table>
+      </div>
+    </v-sheet>
+  </v-container>
+  
+  <!-- Edit dialog -->
+  <v-dialog v-model="editStructureDialog" max-width="600px">
+    <v-card class="py-3">
+      <v-card-title>
+        <span class="text-h6 ml-2">Edit Structure</span>
+      </v-card-title>
+      <v-card-text>
+        <structure-form
+          :initial-data="editedStructure"
+          mode="edit"
+          @update:error="handleError"
+          @update:success="handleSuccess"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="editStructureDialog = false"
+        >
+          Cancel
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  
+  <!-- Delete confirmation -->
+  <confirmation-dialog
+    message="Are you sure you want to delete this structure?"
+    :dialog-open="confirmDeleteDialog"
+    @close="() => {confirmDeleteDialog = false}"
+    @confirm="confirmDelete"
+  ></confirmation-dialog>
+  
+  <!-- Snackbar -->
+  <v-snackbar
+    v-model="showSnackbar"
+    :color="snackbarMessage?.type ?? 'default'"
+  >
+    {{ snackbarMessage?.text }}
+    <template #actions>
+      <v-btn
+        color="white"
+        variant="text"
+        @click="closeSnackbar"
+      >
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue';
+import { useRouter } from 'vue-router';
+import { useGetStructuresQuery, useGetReleasesQuery, useDeleteStructureMutation, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
+import { useSnackbarMessage } from '/@/composables/snackbarMessage';
+import { parseUrlOrCid } from '/@/utils';
+import confirmationDialog from '/@/components/misc/confimationDialog.vue';
+import structureForm from '/@/components/admin/structureForm.vue';
+
+const router = useRouter();
+const { data: structures, isLoading: isStructuresLoading } = useGetStructuresQuery();
+const { data: releases, isLoading: isReleasesLoading } = useGetReleasesQuery();
+const { data: contentCategories } = useContentCategoriesQuery();
+const deleteStructureMutation = useDeleteStructureMutation();
+
+const isLoading = computed(() => isStructuresLoading.value || isReleasesLoading.value);
+
+// View state
+const currentView = ref<'categories' | 'tv-list' | 'series-detail' | 'season-detail' | 'music-list' | 'artist-detail' | 'tags-list' | 'collections-list' | 'all-episodes' | 'all-music'>('categories');
+const currentSeries = ref<any>(null);
+const currentSeason = ref<any>(null);
+const currentArtist = ref<any>(null);
+const currentStructureType = ref<string>('series');
+const parentContext = ref<any>(null);
+
+// Dialog states
+const createStructureDialog = ref(false);
+const editStructureDialog = ref(false);
+const confirmDeleteDialog = ref(false);
+
+const editedStructure = ref<any>({});
+const deleteTarget = ref<any>(null);
+
+const { snackbarMessage, showSnackbar, openSnackbar, closeSnackbar } = useSnackbarMessage();
+
+// Computed properties for different structure types
+const tvSeries = computed(() => {
+  if (!structures.value) return [];
+  // Show all series structures (empty ones will be cleaned up automatically)
+  return structures.value.filter((s: any) => s.type === 'series');
+});
+
+// Get all season structures (for cleanup)
+const allSeasons = computed(() => {
+  if (!structures.value) return [];
+  return structures.value.filter((s: any) => s.type === 'season');
+});
+
+// Auto-cleanup empty seasons and series
+watchEffect(async () => {
+  if (!releases.value || !structures.value) return;
+  
+  // Find empty seasons (seasons with no episodes)
+  const emptySeasons = allSeasons.value.filter(season => {
+    const episodeCount = releases.value?.filter((r: any) => 
+      r.categorySlug === 'tv-shows' && 
+      r.metadata?.seriesId === season.parentId &&
+      r.metadata?.seasonNumber === season.metadata?.seasonNumber
+    ).length || 0;
+    
+    return episodeCount === 0;
+  });
+  
+  // Delete empty seasons
+  for (const emptySeason of emptySeasons) {
+    console.log(`Deleting empty season: ${emptySeason.name || `Season ${emptySeason.metadata?.seasonNumber}`}`);
+    try {
+      await deleteStructureMutation.mutateAsync(emptySeason.id);
+    } catch (error) {
+      console.error('Failed to delete empty season:', error);
+    }
+  }
+  
+  // Find empty series (series with no episodes)
+  const emptySeries = tvSeries.value.filter(series => {
+    return getSeriesEpisodeCount(series.id) === 0;
+  });
+  
+  // Delete empty series
+  for (const emptySeriesItem of emptySeries) {
+    console.log(`Deleting empty series: ${emptySeriesItem.name}`);
+    try {
+      await deleteStructureMutation.mutateAsync(emptySeriesItem.id);
+    } catch (error) {
+      console.error('Failed to delete empty series:', error);
+    }
+  }
+});
+
+const artists = computed(() => {
+  if (!structures.value) return [];
+  return structures.value.filter((s: any) => s.type === 'artist');
+});
+
+const tags = computed(() => {
+  if (!structures.value) return [];
+  return structures.value.filter((s: any) => s.type === 'tag');
+});
+
+const collections = computed(() => {
+  if (!structures.value) return [];
+  return structures.value.filter((s: any) => s.type === 'collection');
+});
+
+const currentSeasons = computed(() => {
+  if (!structures.value || !currentSeries.value) return [];
+  // Only show seasons that have episodes
+  return structures.value
+    .filter((s: any) => 
+      s.type === 'season' && 
+      s.parentId === currentSeries.value.id &&
+      getSeasonEpisodeCount(s.id, currentSeries.value.id, s.metadata?.seasonNumber) > 0
+    )
+    .sort((a: any, b: any) => (a.metadata?.seasonNumber || 0) - (b.metadata?.seasonNumber || 0));
+});
+
+const currentEpisodes = computed(() => {
+  if (!releases.value || !currentSeason.value) return [];
+  
+  // Episodes that belong to this season
+  return releases.value
+    .filter((r: any) => 
+      r.categorySlug === 'tv-shows' && 
+      r.metadata?.seriesId === currentSeries.value?.id &&
+      r.metadata?.seasonNumber === currentSeason.value?.metadata?.seasonNumber
+    )
+    .sort((a: any, b: any) => (a.metadata?.episodeNumber || 0) - (b.metadata?.episodeNumber || 0));
+});
+
+const orphanEpisodes = computed(() => {
+  if (!releases.value || !currentSeries.value) return [];
+  
+  // Episodes that belong to this series but have no season
+  return releases.value
+    .filter((r: any) => 
+      r.categorySlug === 'tv-shows' && 
+      r.metadata?.seriesId === currentSeries.value.id &&
+      !r.metadata?.seasonNumber
+    );
+});
+
+const currentArtistReleases = computed(() => {
+  if (!releases.value || !currentArtist.value) return [];
+  return releases.value
+    .filter((r: any) => 
+      r.categorySlug === 'music' && 
+      r.metadata?.artistId === currentArtist.value.id
+    );
+});
+
+const allTVEpisodes = computed(() => {
+  if (!releases.value) return [];
+  return releases.value.filter((r: any) => r.categorySlug === 'tv-shows');
+});
+
+const allMusicReleases = computed(() => {
+  if (!releases.value) return [];
+  return releases.value.filter((r: any) => r.categorySlug === 'music');
+});
+
+// Counts
+const tvSeriesCount = computed(() => tvSeries.value.length);
+const artistCount = computed(() => artists.value.length);
+const tagCount = computed(() => tags.value.length);
+const collectionCount = computed(() => collections.value.length);
+
+// Breadcrumbs
+const breadcrumbs = computed(() => {
+  const items = [];
+  
+  if (currentView.value !== 'categories') {
+    items.push({ title: 'Categories', value: 'categories' });
+  }
+  
+  if (currentView.value === 'tv-list' || currentView.value === 'series-detail' || currentView.value === 'season-detail' || currentView.value === 'all-episodes') {
+    items.push({ title: 'TV Shows', value: 'tv-list' });
+  }
+  
+  if (currentView.value === 'series-detail' || currentView.value === 'season-detail') {
+    items.push({ title: currentSeries.value?.name || 'Series', value: 'series-detail' });
+  }
+  
+  if (currentView.value === 'season-detail') {
+    items.push({ 
+      title: currentSeason.value?.name || `Season ${currentSeason.value?.metadata?.seasonNumber}`, 
+      value: 'season-detail' 
+    });
+  }
+  
+  if (currentView.value === 'music-list' || currentView.value === 'artist-detail' || currentView.value === 'all-music') {
+    items.push({ title: 'Music', value: 'music-list' });
+  }
+  
+  if (currentView.value === 'artist-detail') {
+    items.push({ title: currentArtist.value?.name || 'Artist', value: 'artist-detail' });
+  }
+  
+  if (currentView.value === 'tags-list') {
+    items.push({ title: 'Tags', value: 'tags-list' });
+  }
+  
+  if (currentView.value === 'collections-list') {
+    items.push({ title: 'Collections', value: 'collections-list' });
+  }
+  
+  if (currentView.value === 'all-episodes') {
+    items.push({ title: 'All Episodes', value: 'all-episodes' });
+  }
+  
+  if (currentView.value === 'all-music') {
+    items.push({ title: 'All Releases', value: 'all-music' });
+  }
+  
+  return items;
+});
+
+// Table headers
+const episodeTableHeaders = [
+  { title: 'Episode', key: 'name' },
+  { title: 'Series', key: 'series' },
+  { title: 'Season', key: 'season' },
+  { title: 'Episode', key: 'episode' },
+  { title: 'Actions', key: 'actions', sortable: false }
+];
+
+const musicTableHeaders = [
+  { title: 'Title', key: 'name' },
+  { title: 'Artist', key: 'artist' },
+  { title: 'Year', key: 'year' },
+  { title: 'Actions', key: 'actions', sortable: false }
+];
+
+// Helper functions
+function getSeriesEpisodeCount(seriesId: string): number {
+  if (!releases.value) return 0;
+  
+  // Count episodes that belong to this series
+  return releases.value.filter((r: any) => 
+    r.categorySlug === 'tv-shows' && 
+    r.metadata?.seriesId === seriesId
+  ).length;
+}
+
+function getSeriesSeasonCount(seriesId: string): number {
+  if (!releases.value) return 0;
+  
+  // Get unique season numbers from episodes of this series
+  const seasonNumbers = new Set(
+    releases.value
+      .filter((r: any) => 
+        r.categorySlug === 'tv-shows' && 
+        r.metadata?.seriesId === seriesId && 
+        r.metadata?.seasonNumber !== undefined
+      )
+      .map((r: any) => r.metadata.seasonNumber)
+  );
+  
+  return seasonNumbers.size;
+}
+
+function formatSeasonCount(count: number): string {
+  return count === 1 ? '1 Season' : `${count} Seasons`;
+}
+
+function formatEpisodeCount(count: number): string {
+  return count === 1 ? '1 Episode' : `${count} Episodes`;
+}
+
+function getSeasonEpisodeCount(seasonId: string, seriesId?: string, seasonNumber?: number): number {
+  if (!releases.value) return 0;
+  
+  // If we have series and season info, count actual episodes
+  if (seriesId && seasonNumber !== undefined) {
+    return releases.value.filter((r: any) => 
+      r.categoryId === 'tv-shows' && 
+      r.metadata?.seriesId === seriesId &&
+      r.metadata?.seasonNumber === seasonNumber
+    ).length;
+  }
+  
+  // Fallback to metadata count
+  const season = structures.value?.find((s: any) => s.id === seasonId);
+  return season?.metadata?.episodeCount || 0;
+}
+
+function getArtistReleaseCount(artistId: string): number {
+  if (!releases.value) return 0;
+  return releases.value.filter((r: any) => 
+    r.categorySlug === 'music' && r.metadata?.artistId === artistId
+  ).length;
+}
+
+// Navigation functions
+function navigateToCategory(category: string) {
+  switch (category) {
+    case 'tv':
+      currentView.value = 'tv-list';
+      break;
+    case 'music':
+      currentView.value = 'music-list';
+      break;
+    case 'tags':
+      currentView.value = 'tags-list';
+      break;
+    case 'collections':
+      currentView.value = 'collections-list';
+      break;
+  }
+}
+
+function navigateToSeries(series: any) {
+  // Store the full series structure (not filtered)
+  currentSeries.value = structures.value?.find((s: any) => s.id === series.id) || series;
+  currentView.value = 'series-detail';
+}
+
+function navigateToSeason(season: any) {
+  currentSeason.value = season;
+  currentView.value = 'season-detail';
+}
+
+function navigateToArtist(artist: any) {
+  currentArtist.value = artist;
+  currentView.value = 'artist-detail';
+}
+
+function navigateToCollection(collection: any) {
+  // TODO: Implement collection detail view
+  openSnackbar('Collection detail view coming soon', 'info');
+}
+
+function navigateToRelease(releaseId: string) {
+  router.push(`/release/${releaseId}`);
+}
+
+function navigateToBreadcrumb(item: any) {
+  currentView.value = item.value;
+  
+  // Reset context when navigating up
+  if (item.value === 'categories' || item.value === 'tv-list' || item.value === 'music-list') {
+    currentSeries.value = null;
+    currentSeason.value = null;
+    currentArtist.value = null;
+  }
+  
+  if (item.value === 'series-detail') {
+    currentSeason.value = null;
+  }
+}
+
+function showAllEpisodes() {
+  currentView.value = 'all-episodes';
+}
+
+function showAllMusicReleases() {
+  currentView.value = 'all-music';
+}
+
+function createNewStructure(type: string) {
+  currentStructureType.value = type;
+  
+  // Set parent context if applicable
+  if (type === 'season' && currentSeries.value) {
+    parentContext.value = {
+      parentId: currentSeries.value.id,
+      parentName: currentSeries.value.name
+    };
+  } else {
+    parentContext.value = null;
+  }
+  
+  createStructureDialog.value = true;
+}
+
+// CRUD operations
+function handleSuccess(message: string) {
+  openSnackbar(message, 'success');
+  createStructureDialog.value = false;
+  editStructureDialog.value = false;
+}
+
+function handleError(message: string) {
+  openSnackbar(message, 'error');
+}
+
+function editStructure(structure: any) {
+  editedStructure.value = { ...structure };
+  editStructureDialog.value = true;
+}
+
+function deleteStructure(structure: any) {
+  deleteTarget.value = structure;
+  confirmDeleteDialog.value = true;
+}
+
+async function confirmDelete() {
+  try {
+    if (deleteTarget.value) {
+      await deleteStructureMutation.mutateAsync(deleteTarget.value.id);
+      openSnackbar('Structure deleted successfully', 'success');
+    }
+  } catch (error) {
+    handleError('Failed to delete structure');
+  }
+  confirmDeleteDialog.value = false;
+}
+</script>
+
+<style scoped>
+.v-card {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.v-card:hover {
+  transform: translateY(-2px);
+}
+</style>
\ No newline at end of file
diff --git a/packages/renderer/src/components/misc/contentCard.vue b/packages/renderer/src/components/misc/contentCard.vue
index 37666e4b..c9588878 100644
--- a/packages/renderer/src/components/misc/contentCard.vue
+++ b/packages/renderer/src/components/misc/contentCard.vue
@@ -179,12 +179,25 @@ const cardHeight = computed(() => {
 
 const cardTitle = computed(() => {
   const categoryId = props.item.categoryId;
+  const metadata = props.item.metadata;
+  
   if (categoryId === 'music') {
     return props.item.name;
   }
-  if (categoryId === 'tvShow') {
+  
+  // For TV content - check if it's a series or an episode
+  if (categoryId === 'tvShow' || metadata?.seriesId) {
+    // If it's a series tile (has isSeries flag)
+    if (metadata?.isSeries) {
+      return props.item.name;
+    }
+    // If it's an episode, show the series name if available
+    if (metadata?.seriesName) {
+      return metadata.seriesName;
+    }
     return props.item.name;
   }
+  
   if (categoryId === 'movie') {
     return props.item.name;
   }
@@ -193,12 +206,25 @@ const cardTitle = computed(() => {
 
 const cardSubtitle = computed(() => {
   const categoryId = props.item.categoryId;
+  const metadata = props.item.metadata;
+  
   if (categoryId === 'music') {
     return props.item.metadata?.['author'] ?? '';
   }
-  if (categoryId === 'tvShow') {
-    return props.item.metadata?.['seasons'] ? `${props.item.metadata['seasons']} Seasons` : undefined;
+  
+  // For TV content - check if it's a series or an episode
+  if (categoryId === 'tvShow' || metadata?.seriesId) {
+    // If it's a series tile
+    if (metadata?.isSeries) {
+      return metadata?.['seasons'] ? `${metadata['seasons']} Seasons` : undefined;
+    }
+    // If it's an episode, show season and episode info
+    if (metadata?.seasonNumber !== undefined && metadata?.episodeNumber !== undefined) {
+      return `S${String(metadata.seasonNumber).padStart(2, '0')}E${String(metadata.episodeNumber).padStart(2, '0')}: ${props.item.name}`;
+    }
+    return props.item.name;
   }
+  
   // Default
   if (categoryId === 'movie') {
     return props.item.metadata?.['releaseYear'] ? `(${props.item.metadata['releaseYear']})` : undefined;
diff --git a/packages/renderer/src/views/adminPage.vue b/packages/renderer/src/views/adminPage.vue
index 019c057d..f35f919d 100644
--- a/packages/renderer/src/views/adminPage.vue
+++ b/packages/renderer/src/views/adminPage.vue
@@ -47,6 +47,12 @@
         >
           Categories
         </v-tab>
+        <v-tab
+          slider-color="primary"
+          value="structures"
+        >
+          Structures
+        </v-tab>
         <v-tab
           slider-color="primary"
           value="maintenance"
@@ -91,6 +97,11 @@
         >
           <categories-management></categories-management>
         </v-window-item>
+        <v-window-item
+          value="structures"
+        >
+          <structures-management></structures-management>
+        </v-window-item>
         <v-window-item
           value="maintenance"
         >
@@ -110,6 +121,7 @@ import featuredManagement from '/@/components/admin/featuredManagement.vue';
 import subscriptionManagement from '/@/components/admin/subscriptionManagement.vue';
 import siteManagement from '/@/components/admin/siteManagement.vue';
 import categoriesManagement from '/@/components/admin/categoriesManagement.vue';
+import structuresManagement from '/@/components/admin/structuresManagement.vue';
 import maintenanceManagement from '/@/components/admin/maintenanceManagement.vue';
 import type { PartialFeaturedReleaseItem } from '/@//types';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38b25373..0275b1f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ importers:
       '@types/node':
         specifier: ^22.15.33
         version: 22.15.33
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.35.0
         version: 8.35.0(@typescript-eslint/parser@8.35.0(eslint@9.29.0)(typescript@5.8.3))(eslint@9.29.0)(typescript@5.8.3)
@@ -1546,6 +1549,9 @@ packages:
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
   '@types/verror@1.10.11':
     resolution: {integrity: sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==}
 
@@ -7365,6 +7371,8 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/uuid@10.0.0': {}
+
   '@types/verror@1.10.11':
     optional: true
 

From 49c950e9f2141e556d45d64bb5b26791bd940b56 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Mon, 4 Aug 2025 09:39:13 +0100
Subject: [PATCH 15/17] Full defederated filtering, half working TV shows
 implementation

---
 .../admin/maintenanceManagement.vue           | 135 +++++++++++++++++-
 .../components/admin/structuresManagement.vue | 104 ++++++++++----
 .../components/misc/infiniteReleaseList.vue   |  43 +++---
 .../renderer/src/plugins/lensService/hooks.ts |   2 +-
 packages/renderer/src/plugins/vuetify.ts      |   8 ++
 packages/renderer/src/views/categoryPage.vue  |  16 ++-
 6 files changed, 250 insertions(+), 58 deletions(-)

diff --git a/packages/renderer/src/components/admin/maintenanceManagement.vue b/packages/renderer/src/components/admin/maintenanceManagement.vue
index 26a051ae..9c1e787f 100644
--- a/packages/renderer/src/components/admin/maintenanceManagement.vue
+++ b/packages/renderer/src/components/admin/maintenanceManagement.vue
@@ -65,6 +65,28 @@
       </v-card-text>
     </v-card>
 
+    <v-card class="mt-6">
+      <v-card-title>Cleanup Empty Structures</v-card-title>
+      <v-card-text>
+        <p class="mb-4">Remove empty structures (TV series, seasons, artists, albums) that have no associated content.</p>
+        <v-btn
+          color="warning"
+          prepend-icon="$delete"
+          :loading="isCleaningUp"
+          @click="cleanupEmptyStructures"
+        >
+          Cleanup Empty Structures
+        </v-btn>
+        <v-alert
+          v-if="cleanupResults"
+          :type="cleanupResults.error ? 'error' : 'success'"
+          class="mt-4"
+        >
+          {{ cleanupResults.message }}
+        </v-alert>
+      </v-card-text>
+    </v-card>
+
     <v-dialog
       v-model="confirmDialog"
       max-width="500"
@@ -113,15 +135,17 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useAddReleaseMutation, useEditReleaseMutation, useDeleteReleaseMutation, useAddFeaturedReleaseMutation, useEditFeaturedReleaseMutation, useDeleteFeaturedReleaseMutation, useContentCategoriesQuery } from '/@/plugins/lensService/hooks';
+import { useGetReleasesQuery, useGetFeaturedReleasesQuery, useAddReleaseMutation, useEditReleaseMutation, useDeleteReleaseMutation, useAddFeaturedReleaseMutation, useEditFeaturedReleaseMutation, useDeleteFeaturedReleaseMutation, useContentCategoriesQuery, useGetStructuresQuery, useDeleteStructureMutation } from '/@/plugins/lensService/hooks';
 import { useSnackbarMessage } from '/@/composables/snackbarMessage';
 import type { ReleaseItem } from '/@/types';
 
 const isExporting = ref(false);
 const isImporting = ref(false);
+const isCleaningUp = ref(false);
 const importMode = ref<'upsert' | 'replace'>('upsert');
 const importFile = ref<File | null>(null);
 const confirmDialog = ref(false);
+const cleanupResults = ref<{ message: string; error: boolean } | null>(null);
 
 const { snackbarMessage, showSnackbar, openSnackbar, closeSnackbar } = useSnackbarMessage();
 
@@ -434,4 +458,113 @@ const performImport = async () => {
     isImporting.value = false;
   }
 };
+
+// Structures query and mutation for cleanup
+const { data: structures } = useGetStructuresQuery();
+const deleteStructureMutation = useDeleteStructureMutation();
+
+// Cleanup empty structures
+const cleanupEmptyStructures = async () => {
+  isCleaningUp.value = true;
+  cleanupResults.value = null;
+  
+  try {
+    if (!structures.value || !releases.value) {
+      cleanupResults.value = { message: 'No structures or releases found', error: true };
+      return;
+    }
+    
+    let deletedCount = 0;
+    const errors: string[] = [];
+    
+    // Find empty series (series with no episodes)
+    const tvSeries = structures.value.filter((s: any) => s.type === 'series');
+    for (const series of tvSeries) {
+      const hasEpisodes = releases.value.some((r: any) => 
+        r.metadata?.seriesId === series.id
+      );
+      
+      if (!hasEpisodes) {
+        try {
+          await deleteStructureMutation.mutateAsync(series.id);
+          deletedCount++;
+          console.log(`Deleted empty series: ${series.name}`);
+        } catch (error) {
+          errors.push(`Failed to delete series ${series.name}: ${error}`);
+        }
+      }
+    }
+    
+    // Find empty seasons (seasons with no episodes)
+    const seasons = structures.value.filter((s: any) => s.type === 'season');
+    for (const season of seasons) {
+      const hasEpisodes = releases.value.some((r: any) => 
+        r.metadata?.seriesId === season.parentId &&
+        r.metadata?.seasonNumber === season.metadata?.seasonNumber
+      );
+      
+      if (!hasEpisodes) {
+        try {
+          await deleteStructureMutation.mutateAsync(season.id);
+          deletedCount++;
+          console.log(`Deleted empty season: ${season.name || `Season ${season.metadata?.seasonNumber}`}`);
+        } catch (error) {
+          errors.push(`Failed to delete season ${season.name}: ${error}`);
+        }
+      }
+    }
+    
+    // Find empty artists (artists with no releases)
+    const artists = structures.value.filter((s: any) => s.type === 'artist');
+    for (const artist of artists) {
+      const hasReleases = releases.value.some((r: any) => 
+        r.metadata?.artistId === artist.id || r.metadata?.structureId === artist.id
+      );
+      
+      if (!hasReleases) {
+        try {
+          await deleteStructureMutation.mutateAsync(artist.id);
+          deletedCount++;
+          console.log(`Deleted empty artist: ${artist.name}`);
+        } catch (error) {
+          errors.push(`Failed to delete artist ${artist.name}: ${error}`);
+        }
+      }
+    }
+    
+    // Find empty albums (albums with no tracks)
+    const albums = structures.value.filter((s: any) => s.type === 'album');
+    for (const album of albums) {
+      const hasTracks = releases.value.some((r: any) => 
+        r.metadata?.albumId === album.id || r.metadata?.structureId === album.id
+      );
+      
+      if (!hasTracks) {
+        try {
+          await deleteStructureMutation.mutateAsync(album.id);
+          deletedCount++;
+          console.log(`Deleted empty album: ${album.name}`);
+        } catch (error) {
+          errors.push(`Failed to delete album ${album.name}: ${error}`);
+        }
+      }
+    }
+    
+    if (errors.length > 0) {
+      cleanupResults.value = { 
+        message: `Deleted ${deletedCount} empty structures. Errors: ${errors.join(', ')}`, 
+        error: true 
+      };
+    } else {
+      cleanupResults.value = { 
+        message: `Successfully deleted ${deletedCount} empty structures`, 
+        error: false 
+      };
+    }
+  } catch (error) {
+    cleanupResults.value = { message: `Cleanup failed: ${error}`, error: true };
+  } finally {
+    isCleaningUp.value = false;
+  }
+};
 </script>
diff --git a/packages/renderer/src/components/admin/structuresManagement.vue b/packages/renderer/src/components/admin/structuresManagement.vue
index fd3a3f55..a66116a5 100644
--- a/packages/renderer/src/components/admin/structuresManagement.vue
+++ b/packages/renderer/src/components/admin/structuresManagement.vue
@@ -669,14 +669,25 @@ const allSeasons = computed(() => {
   return structures.value.filter((s: any) => s.type === 'season');
 });
 
-// Auto-cleanup empty seasons and series
-watchEffect(async () => {
-  if (!releases.value || !structures.value) return;
+// Store references to empty structures for manual cleanup
+const emptyStructures = computed(() => {
+  if (!releases.value || !structures.value || !contentCategories.value) return { series: [], seasons: [] };
+  
+  // Get all TV show category IDs (including federated)
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
   
   // Find empty seasons (seasons with no episodes)
   const emptySeasons = allSeasons.value.filter(season => {
     const episodeCount = releases.value?.filter((r: any) => 
-      r.categorySlug === 'tv-shows' && 
+      tvCategoryIds.has(r.categoryId) && 
       r.metadata?.seriesId === season.parentId &&
       r.metadata?.seasonNumber === season.metadata?.seasonNumber
     ).length || 0;
@@ -684,30 +695,15 @@ watchEffect(async () => {
     return episodeCount === 0;
   });
   
-  // Delete empty seasons
-  for (const emptySeason of emptySeasons) {
-    console.log(`Deleting empty season: ${emptySeason.name || `Season ${emptySeason.metadata?.seasonNumber}`}`);
-    try {
-      await deleteStructureMutation.mutateAsync(emptySeason.id);
-    } catch (error) {
-      console.error('Failed to delete empty season:', error);
-    }
-  }
-  
   // Find empty series (series with no episodes)
   const emptySeries = tvSeries.value.filter(series => {
     return getSeriesEpisodeCount(series.id) === 0;
   });
   
-  // Delete empty series
-  for (const emptySeriesItem of emptySeries) {
-    console.log(`Deleting empty series: ${emptySeriesItem.name}`);
-    try {
-      await deleteStructureMutation.mutateAsync(emptySeriesItem.id);
-    } catch (error) {
-      console.error('Failed to delete empty series:', error);
-    }
-  }
+  return {
+    series: emptySeries,
+    seasons: emptySeasons
+  };
 });
 
 const artists = computed(() => {
@@ -772,13 +768,37 @@ const currentArtistReleases = computed(() => {
 });
 
 const allTVEpisodes = computed(() => {
-  if (!releases.value) return [];
-  return releases.value.filter((r: any) => r.categorySlug === 'tv-shows');
+  if (!releases.value || !contentCategories.value) return [];
+  
+  // Get all TV show category IDs (including federated)
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
+  
+  return releases.value.filter((r: any) => tvCategoryIds.has(r.categoryId));
 });
 
 const allMusicReleases = computed(() => {
-  if (!releases.value) return [];
-  return releases.value.filter((r: any) => r.categorySlug === 'music');
+  if (!releases.value || !contentCategories.value) return [];
+  
+  // Get all music category IDs (including federated)
+  const musicCategoryIds = new Set<string>();
+  contentCategories.value.forEach(cat => {
+    if (cat.categoryId === 'music') {
+      musicCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => musicCategoryIds.add(id));
+      }
+    }
+  });
+  
+  return releases.value.filter((r: any) => musicCategoryIds.has(r.categoryId));
 });
 
 // Counts
@@ -855,23 +875,45 @@ const musicTableHeaders = [
 
 // Helper functions
 function getSeriesEpisodeCount(seriesId: string): number {
-  if (!releases.value) return 0;
+  if (!releases.value || !contentCategories.value) return 0;
+  
+  // Get all TV show category IDs (including federated)
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
   
   // Count episodes that belong to this series
   return releases.value.filter((r: any) => 
-    r.categorySlug === 'tv-shows' && 
+    tvCategoryIds.has(r.categoryId) && 
     r.metadata?.seriesId === seriesId
   ).length;
 }
 
 function getSeriesSeasonCount(seriesId: string): number {
-  if (!releases.value) return 0;
+  if (!releases.value || !contentCategories.value) return 0;
+  
+  // Get all TV show category IDs (including federated)
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
   
   // Get unique season numbers from episodes of this series
   const seasonNumbers = new Set(
     releases.value
       .filter((r: any) => 
-        r.categorySlug === 'tv-shows' && 
+        tvCategoryIds.has(r.categoryId) && 
         r.metadata?.seriesId === seriesId && 
         r.metadata?.seasonNumber !== undefined
       )
diff --git a/packages/renderer/src/components/misc/infiniteReleaseList.vue b/packages/renderer/src/components/misc/infiniteReleaseList.vue
index 7568badb..02716b82 100644
--- a/packages/renderer/src/components/misc/infiniteReleaseList.vue
+++ b/packages/renderer/src/components/misc/infiniteReleaseList.vue
@@ -49,7 +49,8 @@ import { useGetReleasesQuery, useGetStructuresQuery, useContentCategoriesQuery }
 import type { SearchOptions } from '@riffcc/lens-sdk';
 
 const props = defineProps<{
-  categoryFilter?: string;
+  categoryFilter?: string;  // Category ID (hash) to filter by
+  categorySlug?: string;    // Category slug (e.g., 'music', 'tv-shows') to filter by
   searchOptions?: SearchOptions;
   pageSize?: number;
 }>();
@@ -63,18 +64,14 @@ const PAGE_SIZE = props.pageSize || 60; // Show many items to fill ultrawide scr
 const currentPage = ref(1);
 
 // Fetch releases with the configured batch size (100)
-const { data: releases, isLoading } = useGetReleasesQuery({
-  searchOptions: props.searchOptions,
-});
+const { data: releases, isLoading } = useGetReleasesQuery();
 
 // Get content categories to check if this is a TV category
 const { data: contentCategories } = useContentCategoriesQuery();
 
 // Check if this is the TV shows category
 const isTVCategory = computed(() => {
-  if (!props.categoryFilter || !contentCategories.value) return false;
-  const category = contentCategories.value.find(c => c.id === props.categoryFilter);
-  return category?.displayName === 'TV Shows' || category?.categoryId === 'tv-shows';
+  return props.categorySlug === 'tv-shows' || props.categoryFilter === 'tv-shows';
 });
 
 // Fetch structures for TV series grouping
@@ -93,23 +90,31 @@ watch(structures, (newStructures) => {
   }
 }, { immediate: true });
 
-// Filter releases by category if needed
+// Filter releases client-side if we have a category filter
 const filteredReleases = computed(() => {
   if (!releases.value) return [];
 
   let categoryReleases = releases.value;
-  if (props.categoryFilter && contentCategories.value) {
-    // Find the category to get all its IDs (from different lenses)
-    const category = contentCategories.value.find(c => c.id === props.categoryFilter);
-    if (category && category.allIds) {
-      // Filter by all IDs from federated categories
-      categoryReleases = releases.value.filter(release => 
-        category.allIds.includes(release.categoryId)
-      );
-    } else {
-      // Fallback to single ID filter
-      categoryReleases = releases.value.filter(release => release.categoryId === props.categoryFilter);
+  
+  // Filter by category slug if specified (for federation support)
+  if (props.categorySlug && contentCategories.value) {
+    // Find all categories with this slug
+    const matchingCategories = contentCategories.value.filter(c => c.categoryId === props.categorySlug);
+    if (matchingCategories.length > 0) {
+      // Get all category IDs including federated ones
+      const allCategoryIds = new Set<string>();
+      for (const cat of matchingCategories) {
+        allCategoryIds.add(cat.id);
+        if (cat.allIds) {
+          cat.allIds.forEach(id => allCategoryIds.add(id));
+        }
+      }
+      // Filter releases that match any of these category IDs
+      categoryReleases = categoryReleases.filter(r => allCategoryIds.has(r.categoryId));
     }
+  } else if (props.categoryFilter) {
+    // Direct category ID filter (for non-federated)
+    categoryReleases = categoryReleases.filter(r => r.categoryId === props.categoryFilter);
   }
 
   // If this is a TV category, group episodes by series
diff --git a/packages/renderer/src/plugins/lensService/hooks.ts b/packages/renderer/src/plugins/lensService/hooks.ts
index de43aa9e..0d8c5e15 100644
--- a/packages/renderer/src/plugins/lensService/hooks.ts
+++ b/packages/renderer/src/plugins/lensService/hooks.ts
@@ -1,4 +1,4 @@
-import { inject, type Ref } from 'vue';
+import { inject, type Ref, computed, unref } from 'vue';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { API_URL } from '../router';
 import type {
diff --git a/packages/renderer/src/plugins/vuetify.ts b/packages/renderer/src/plugins/vuetify.ts
index 8e89d01f..6ff0eb07 100644
--- a/packages/renderer/src/plugins/vuetify.ts
+++ b/packages/renderer/src/plugins/vuetify.ts
@@ -50,6 +50,10 @@ import {
   mdiBlockHelper,
   mdiGamepad,
   mdiCursorDefaultOutline,
+  mdiTelevision,
+  mdiMusic,
+  mdiTag,
+  mdiFolder,
 } from '@mdi/js';
 
 const iconsAliasesMapping = {
@@ -92,6 +96,10 @@ const iconsAliasesMapping = {
   'block-helper': mdiBlockHelper,
   'gamepad': mdiGamepad,
   'cursor-default-outline': mdiCursorDefaultOutline,
+  'television': mdiTelevision,
+  'music': mdiMusic,
+  'tag': mdiTag,
+  'folder': mdiFolder,
 };
 
 const vuetify = createVuetify({
diff --git a/packages/renderer/src/views/categoryPage.vue b/packages/renderer/src/views/categoryPage.vue
index 2d909383..339842b1 100644
--- a/packages/renderer/src/views/categoryPage.vue
+++ b/packages/renderer/src/views/categoryPage.vue
@@ -7,7 +7,7 @@
       <!-- Show all releases with infinite scroll -->
       <p class="text-h6 text-sm-h5 font-weight-bold mb-4">{{ pageCategory?.displayName }}</p>
       <infinite-release-list
-        :category-filter="pageCategory?.id"
+        :category-slug="props.category"
         @release-click="handleItemClick"
       />
     </template>
@@ -106,11 +106,15 @@ const featuredReleasesInCategory = computed<ReleaseItem[]>(() => {
     .map(fr => fr.releaseId);
 
   // Filter releases that are both featured and in this category
-  const categoryReleases = releases.value.filter(r =>
-    r.id &&
-    activeFeaturedReleaseIds.includes(r.id) &&
-    r.categoryId === pageCategory.value?.id,
-  );
+  // Look up each release's category to check if it matches our target slug
+  const targetSlug = pageCategory.value?.categoryId; // e.g., 'music', 'tv-shows'
+  const categoryReleases = releases.value.filter(r => {
+    if (!r.id || !activeFeaturedReleaseIds.includes(r.id)) return false;
+    
+    // Look up this release's category
+    const releaseCategory = contentCategories.value?.find(c => c.id === r.categoryId);
+    return releaseCategory?.categoryId === targetSlug;
+  });
 
   // For TV shows, group by series and return series tiles
   if (isTVCategory.value) {

From 7a758da723f889dfb93bc9a96062572fd10b52a7 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Mon, 4 Aug 2025 09:58:40 +0100
Subject: [PATCH 16/17] Improve TV shows structures

---
 .../components/admin/structuresManagement.vue | 89 ++++++++++++++++---
 .../src/components/releases/releaseForm.vue   | 44 ++++++---
 2 files changed, 111 insertions(+), 22 deletions(-)

diff --git a/packages/renderer/src/components/admin/structuresManagement.vue b/packages/renderer/src/components/admin/structuresManagement.vue
index a66116a5..b0d6b8e3 100644
--- a/packages/renderer/src/components/admin/structuresManagement.vue
+++ b/packages/renderer/src/components/admin/structuresManagement.vue
@@ -14,14 +14,14 @@
                 v-bind="activatorProps"
               ></v-btn>
             </template>
-            <v-sheet width="600px" max-height="620px" class="pa-8 ma-auto">
+            <v-card width="600px" max-height="620px" class="pa-8 ma-auto">
               <structure-form
                 :initial-type="currentStructureType"
                 :parent-context="parentContext"
                 @update:error="handleError"
                 @update:success="handleSuccess"
               />
-            </v-sheet>
+            </v-card>
           </v-dialog>
         </template>
         <h3>Manage Structures</h3>
@@ -182,8 +182,8 @@
         </div>
         
         <!-- Seasons List -->
+        <h5 class="mb-2">Seasons</h5>
         <template v-if="currentSeasons.length > 0">
-          <h5 class="mb-2">Seasons</h5>
           <v-list lines="two">
             <v-list-item
               v-for="season in currentSeasons"
@@ -225,6 +225,11 @@
             </v-list-item>
           </v-list>
         </template>
+        <template v-else>
+          <v-alert type="info" variant="tonal" class="mb-4">
+            No seasons found. Seasons will be automatically created when you add or edit episodes with season numbers.
+          </v-alert>
+        </template>
         
         <!-- Episodes without seasons -->
         <template v-if="orphanEpisodes.length > 0">
@@ -723,23 +728,46 @@ const collections = computed(() => {
 
 const currentSeasons = computed(() => {
   if (!structures.value || !currentSeries.value) return [];
-  // Only show seasons that have episodes
+  // Show all seasons for this series
   return structures.value
     .filter((s: any) => 
       s.type === 'season' && 
-      s.parentId === currentSeries.value.id &&
-      getSeasonEpisodeCount(s.id, currentSeries.value.id, s.metadata?.seasonNumber) > 0
+      s.parentId === currentSeries.value.id
     )
+    .map((s: any) => {
+      // Parse metadata if it's a string
+      let metadata = s.metadata;
+      if (typeof metadata === 'string') {
+        try {
+          metadata = JSON.parse(metadata);
+        } catch (e) {
+          console.error('Failed to parse season metadata:', e);
+          metadata = {};
+        }
+      }
+      return { ...s, metadata };
+    })
     .sort((a: any, b: any) => (a.metadata?.seasonNumber || 0) - (b.metadata?.seasonNumber || 0));
 });
 
 const currentEpisodes = computed(() => {
   if (!releases.value || !currentSeason.value) return [];
   
+  // Get all TV category hashes for federation support
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value?.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
+  
   // Episodes that belong to this season
   return releases.value
     .filter((r: any) => 
-      r.categorySlug === 'tv-shows' && 
+      tvCategoryIds.has(r.categoryId) && 
       r.metadata?.seriesId === currentSeries.value?.id &&
       r.metadata?.seasonNumber === currentSeason.value?.metadata?.seasonNumber
     )
@@ -749,10 +777,21 @@ const currentEpisodes = computed(() => {
 const orphanEpisodes = computed(() => {
   if (!releases.value || !currentSeries.value) return [];
   
+  // Get all TV category hashes for federation support
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value?.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
+  
   // Episodes that belong to this series but have no season
   return releases.value
     .filter((r: any) => 
-      r.categorySlug === 'tv-shows' && 
+      tvCategoryIds.has(r.categoryId) && 
       r.metadata?.seriesId === currentSeries.value.id &&
       !r.metadata?.seasonNumber
     );
@@ -781,7 +820,22 @@ const allTVEpisodes = computed(() => {
     }
   });
   
-  return releases.value.filter((r: any) => tvCategoryIds.has(r.categoryId));
+  return releases.value
+    .filter((r: any) => tvCategoryIds.has(r.categoryId))
+    .map((episode: any) => {
+      // Find the series structure to get the name
+      const seriesId = episode.metadata?.seriesId;
+      const series = seriesId ? structures.value?.find((s: any) => s.id === seriesId && s.type === 'series') : null;
+      
+      // Enrich the episode with series name
+      return {
+        ...episode,
+        metadata: {
+          ...episode.metadata,
+          seriesName: series?.name || 'Unknown'
+        }
+      };
+    });
 });
 
 const allMusicReleases = computed(() => {
@@ -934,18 +988,29 @@ function formatEpisodeCount(count: number): string {
 function getSeasonEpisodeCount(seasonId: string, seriesId?: string, seasonNumber?: number): number {
   if (!releases.value) return 0;
   
+  // Get all TV category hashes for federation support
+  const tvCategoryIds = new Set<string>();
+  contentCategories.value?.forEach(cat => {
+    if (cat.categoryId === 'tv-shows') {
+      tvCategoryIds.add(cat.id);
+      if (cat.allIds) {
+        cat.allIds.forEach(id => tvCategoryIds.add(id));
+      }
+    }
+  });
+  
   // If we have series and season info, count actual episodes
   if (seriesId && seasonNumber !== undefined) {
     return releases.value.filter((r: any) => 
-      r.categoryId === 'tv-shows' && 
+      tvCategoryIds.has(r.categoryId) && 
       r.metadata?.seriesId === seriesId &&
       r.metadata?.seasonNumber === seasonNumber
     ).length;
   }
   
-  // Fallback to metadata count
+  // Fallback to checking season's itemIds
   const season = structures.value?.find((s: any) => s.id === seasonId);
-  return season?.metadata?.episodeCount || 0;
+  return season?.itemIds?.length || 0;
 }
 
 function getArtistReleaseCount(artistId: string): number {
diff --git a/packages/renderer/src/components/releases/releaseForm.vue b/packages/renderer/src/components/releases/releaseForm.vue
index 1659e60a..8f95be72 100644
--- a/packages/renderer/src/components/releases/releaseForm.vue
+++ b/packages/renderer/src/components/releases/releaseForm.vue
@@ -461,9 +461,21 @@ const handleSeasonChange = async () => {
   // Check if season structure already exists
   const seasonName = `Season ${seasonNumber.value}`;
   const existingSeason = structuresQuery.data.value?.find(
-    (s: any) => s.type === 'season' && 
-        s.parentId === selectedSeriesId.value && 
-        s.name === seasonName
+    (s: any) => {
+      if (s.type !== 'season' || s.parentId !== selectedSeriesId.value) return false;
+      
+      // Check by metadata seasonNumber first, then by name
+      if (s.metadata) {
+        try {
+          const meta = typeof s.metadata === 'string' ? JSON.parse(s.metadata) : s.metadata;
+          if (meta.seasonNumber === seasonNumber.value) return true;
+        } catch (e) {
+          // Invalid metadata, fall through to name check
+        }
+      }
+      
+      return s.name === seasonName;
+    }
   );
   
   if (existingSeason) {
@@ -479,6 +491,7 @@ const handleSeasonChange = async () => {
         parentId: selectedSeriesId.value,
         order: seasonNumber.value,
         itemIds: [],
+        metadata: JSON.stringify({ seasonNumber: seasonNumber.value }),
       });
       
       console.log('Season creation response:', response);
@@ -540,8 +553,9 @@ const handleOnSubmit = async () => {
     });
     
     // If TV episode and successful, add to season's itemIds
+    // Use the original episode ID (data.id) not response.id since we're editing
     if (isTVCategory.value && selectedSeasonId.value && response.success) {
-      await updateSeasonWithEpisode(response.id!);
+      await updateSeasonWithEpisode(data.id);
     }
   } else {
     const response = await addReleaseMutation.mutateAsync({
@@ -567,12 +581,22 @@ const updateSeasonWithEpisode = async (episodeId: string) => {
   const seasons = await structuresQuery.refetch();
   const season = seasons.data.value?.find((s: any) => s.id === selectedSeasonId.value);
   
-  if (season && !season.itemIds.includes(episodeId)) {
-    // Update season with new episode
-    await editStructureMutation.mutateAsync({
-      ...season,
-      itemIds: [...season.itemIds, episodeId],
-    });
+  if (season) {
+    // Check if episode is already in itemIds
+    const currentItemIds = season.itemIds || [];
+    if (!currentItemIds.includes(episodeId)) {
+      console.log('Adding episode to season itemIds:', { seasonId: season.id, episodeId });
+      // Update season with new episode
+      await editStructureMutation.mutateAsync({
+        ...season,
+        itemIds: [...currentItemIds, episodeId],
+      });
+      console.log('Episode added to season successfully');
+    } else {
+      console.log('Episode already in season itemIds');
+    }
+  } else {
+    console.error('Season not found:', selectedSeasonId.value);
   }
 };
 

From 34e8ceac057be4be80c7e4ee01233ecaa7074ae5 Mon Sep 17 00:00:00 2001
From: Benjamin Arntzen <zorlin@gmail.com>
Date: Mon, 4 Aug 2025 10:48:23 +0100
Subject: [PATCH 17/17] Displayname stuff

---
 CLAUDE.md                                     |  3 +-
 .../components/admin/structuresManagement.vue | 42 ++++++++++++++++---
 .../src/components/releases/releaseForm.vue   | 19 ++++++---
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 568dc1c6..35b49ed3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -141,4 +141,5 @@ Structures are completely generic organizational containers documented in `docs/
 - Always manually revert specific changes using the Edit tool
 - Do what has been asked; nothing more, nothing less
 - NEVER create files unless they're absolutely necessary
-- ALWAYS prefer editing existing files to creating new ones
\ No newline at end of file
+- ALWAYS prefer editing existing files to creating new ones
+- Browser navigation rule: Unless explicitly stated, the USER navigates, Claude only screenshots - never use browser navigation tools without explicit permission
\ No newline at end of file
diff --git a/packages/renderer/src/components/admin/structuresManagement.vue b/packages/renderer/src/components/admin/structuresManagement.vue
index b0d6b8e3..55c764ec 100644
--- a/packages/renderer/src/components/admin/structuresManagement.vue
+++ b/packages/renderer/src/components/admin/structuresManagement.vue
@@ -764,14 +764,44 @@ const currentEpisodes = computed(() => {
     }
   });
   
+  // Get the season number from metadata (handle both parsed and string)
+  let seasonNumber = currentSeason.value?.metadata?.seasonNumber;
+  if (seasonNumber === undefined && typeof currentSeason.value?.metadata === 'string') {
+    try {
+      const parsed = JSON.parse(currentSeason.value.metadata);
+      seasonNumber = parsed.seasonNumber;
+    } catch (e) {
+      console.error('Failed to parse season metadata:', e);
+    }
+  }
+  
+  console.log('Looking for episodes with:', {
+    seriesId: currentSeries.value?.id,
+    seasonNumber,
+    categoryIds: Array.from(tvCategoryIds)
+  });
+  
   // Episodes that belong to this season
-  return releases.value
-    .filter((r: any) => 
-      tvCategoryIds.has(r.categoryId) && 
-      r.metadata?.seriesId === currentSeries.value?.id &&
-      r.metadata?.seasonNumber === currentSeason.value?.metadata?.seasonNumber
-    )
+  const episodes = releases.value
+    .filter((r: any) => {
+      const matches = tvCategoryIds.has(r.categoryId) && 
+        r.metadata?.seriesId === currentSeries.value?.id &&
+        r.metadata?.seasonNumber === seasonNumber;
+      if (r.metadata?.seriesId === currentSeries.value?.id) {
+        console.log('Episode check:', r.name, {
+          hasCategory: tvCategoryIds.has(r.categoryId),
+          seriesMatch: r.metadata?.seriesId === currentSeries.value?.id,
+          seasonMatch: r.metadata?.seasonNumber === seasonNumber,
+          episodeSeasonNumber: r.metadata?.seasonNumber,
+          lookingForSeasonNumber: seasonNumber
+        });
+      }
+      return matches;
+    })
     .sort((a: any, b: any) => (a.metadata?.episodeNumber || 0) - (b.metadata?.episodeNumber || 0));
+    
+  console.log('Found episodes:', episodes.length);
+  return episodes;
 });
 
 const orphanEpisodes = computed(() => {
diff --git a/packages/renderer/src/components/releases/releaseForm.vue b/packages/renderer/src/components/releases/releaseForm.vue
index 8f95be72..26672d93 100644
--- a/packages/renderer/src/components/releases/releaseForm.vue
+++ b/packages/renderer/src/components/releases/releaseForm.vue
@@ -271,11 +271,20 @@ const editStructureMutation = useEditStructureMutation({
   },
 });
 
-const contentCategoriesItems = computed(() => contentCategories.value?.map(item => ({
-  id: item.id,
-  value: item.id,
-  title: item.displayName,
-})));
+const contentCategoriesItems = computed(() => {
+  if (!contentCategories.value) return [];
+  
+  // Only show categories created by our own site (not federated ones)
+  const ourSiteAddress = import.meta.env.VITE_SITE_ADDRESS;
+  
+  return contentCategories.value
+    .filter(item => item.siteAddress === ourSiteAddress) // Only our site's categories
+    .map(item => ({
+      id: item.id,
+      value: item.id,
+      title: item.displayName,
+    }));
+});
 
 // Get list of series for autocomplete
 const seriesItems = computed(() => {