From 76c426546bda0a9a6c935946cf2d0cb63ca11a1c Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 25 May 2026 14:21:13 +0000
Subject: [PATCH] refactor: media cards use proper <a href> links instead of JS
 navigation

MediaCard, MediaRow, CollageHero, HeroSection, and MediaDetail cast
cards now render as <a> tags with real hrefs. Modified clicks
(ctrl+click, middle-click) navigate natively, enabling open-in-new-tab
and link copying. Plain left-clicks continue through the existing
showDetail flow for side-effects like focus-state saving.
---
 frontend/src/components/CollageHero.vue       | 47 ++++++++++++++++---
 frontend/src/components/HeroSection.vue       | 12 ++++-
 frontend/src/components/MediaCard.vue         | 28 +++++++++--
 frontend/src/components/MediaDetail.vue       |  8 ++--
 frontend/src/components/MediaRow.vue          | 11 ++++-
 frontend/src/composables/useMediaWebSocket.ts |  2 +
 frontend/src/styles/main.css                  |  2 +
 mediahive/hivescan/indexer.py                 |  8 ++--
 mediahive/index_store.py                      | 15 +++---
 9 files changed, 104 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/CollageHero.vue b/frontend/src/components/CollageHero.vue
index 3bcbf9c..01f9d33 100644
--- a/frontend/src/components/CollageHero.vue
+++ b/frontend/src/components/CollageHero.vue
@@ -3,8 +3,9 @@
     <!-- Diagonal collage grid -->
     <div class="collage-grid">
       <template v-for="(item, index) in collageItems" :key="item.id">
-        <div
-          :ref="(el) => setItemRef(el as HTMLElement, index)"
+        <component
+          :is="index !== 0 ? 'a' : 'div'"
+          :ref="(el: HTMLElement | null) => setItemRef(el, index)"
           class="collage-item"
           :class="[
             `collage-item-${index}`,
@@ -16,7 +17,8 @@
             },
           ]"
           v-bind="getItemAttrs(index)"
-          @click="handleItemClick(item, index)"
+          :href="index !== 0 ? getItemHref(item) : undefined"
+          @click="handleItemClick($event, item, index)"
           @focus="focusedIndex = index"
         >
           <!-- Featured item with hexagonal clip -->
@@ -109,7 +111,13 @@
               <button class="btn btn-primary" @click.stop="handlePlay(item)">
                 ▶ {{ getPlayLabel(item) }}
               </button>
-              <button class="btn btn-secondary" @click.stop="$emit('info', item)">ℹ Info</button>
+              <a
+                class="btn btn-secondary"
+                :href="getItemHref(item)"
+                @click.prevent="$emit('info', item)"
+              >
+                ℹ Info
+              </a>
             </div>
           </div>
           <div class="collage-item-hover" v-else>
@@ -118,7 +126,7 @@
               >★ {{ getRating(item)?.toFixed(1) }}</span
             >
           </div>
-        </div>
+        </component>
       </template>
     </div>
   </section>
@@ -425,7 +433,7 @@ function handleKeyDown(e: KeyboardEvent) {
       const item = collageItems.value[focusedIndex.value]
       e.preventDefault()
       e.stopPropagation()
-      if (item) handleItemClick(item, focusedIndex.value)
+      if (item) activateItem(item, focusedIndex.value)
     }
     return
   }
@@ -606,13 +614,36 @@ function getPlayLabel(item: MediaItem): string {
   return props.hasResumePosition(getPlayableFile(item)) ? "Continue" : "Play"
 }
 
-function handleItemClick(item: MediaItem, index: number) {
+function getItemHref(item: MediaItem): string {
+  return `#/${item.type}/${item.id}`
+}
+
+function activateItem(item: MediaItem, index: number) {
   if (index === 0) {
     emit("info", item)
   } else {
     emit("select", item)
   }
 }
+
+function handleItemClick(event: MouseEvent, item: MediaItem, index: number) {
+  if (index === 0) {
+    emit("info", item)
+    return
+  }
+  // Let modified clicks navigate natively
+  if (
+    event.button !== 0 ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return
+  }
+  event.preventDefault()
+  emit("select", item)
+}
 </script>
 
 <style scoped>
@@ -642,6 +673,8 @@ function handleItemClick(item: MediaItem, index: number) {
     filter 0.3s ease,
     opacity 0.3s ease,
     visibility 0.3s ease;
+  text-decoration: none;
+  color: inherit;
 }
 
 /* Media (images and videos) fill the collage item */
diff --git a/frontend/src/components/HeroSection.vue b/frontend/src/components/HeroSection.vue
index d869fa2..9dfc8f6 100644
--- a/frontend/src/components/HeroSection.vue
+++ b/frontend/src/components/HeroSection.vue
@@ -20,7 +20,13 @@
         <button class="btn btn-primary" @click="handlePlay" :disabled="!playableFile">
           ▶ Play
         </button>
-        <button class="btn btn-secondary" @click="$emit('info', item)">ℹ More Info</button>
+        <a
+          class="btn btn-secondary"
+          :href="detailHref"
+          @click.prevent="$emit('info', item)"
+        >
+          ℹ More Info
+        </a>
       </div>
     </div>
   </section>
@@ -85,6 +91,10 @@ const overview = computed(() => {
   return o ? (o.length > 200 ? o.slice(0, 200) + "..." : o) : null
 })
 
+const detailHref = computed(() => {
+  return `#/${props.item.type}/${props.item.id}`
+})
+
 const playableFile = computed(() => {
   if (props.item.type === "movies") {
     const movie = props.item.data as Movie
diff --git a/frontend/src/components/MediaCard.vue b/frontend/src/components/MediaCard.vue
index 4702445..9cbdcc4 100644
--- a/frontend/src/components/MediaCard.vue
+++ b/frontend/src/components/MediaCard.vue
@@ -1,9 +1,11 @@
 <template>
-  <div
+  <component
+    :is="href ? 'a' : 'div'"
     class="media-card"
     v-bind="navAttributes"
     :data-item-id="item.id"
-    @click="$emit('click')"
+    :href="href || undefined"
+    @click="handleClick"
     @keydown.enter.prevent="$emit('click')"
   >
     <div class="media-card-poster">
@@ -78,7 +80,7 @@
         </div>
       </template>
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -91,12 +93,30 @@ const props = defineProps<{
   item: MediaItem
   navRow?: number
   navCol?: number
+  href?: string
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   click: []
 }>()
 
+function handleClick(event: MouseEvent) {
+  // Let modified clicks (middle-click, ctrl+click, etc.) navigate natively
+  if (
+    event.button !== 0 ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return
+  }
+  // Prevent default navigation for plain left-clicks and synthetic clicks
+  // so that parent handlers can manage side-effects and routing
+  event.preventDefault()
+  emit("click")
+}
+
 const navAttributes = computed(() => {
   if (props.navRow !== undefined && props.navCol !== undefined) {
     return navAttrs(props.navRow, props.navCol)
diff --git a/frontend/src/components/MediaDetail.vue b/frontend/src/components/MediaDetail.vue
index 715e961..cfa486f 100644
--- a/frontend/src/components/MediaDetail.vue
+++ b/frontend/src/components/MediaDetail.vue
@@ -106,14 +106,14 @@
             </div>
 
             <div v-if="limitedMovieCast.length > 0" class="cast-list" data-sync-scroll-row="true">
-              <div
+              <a
                 v-for="(castMember, castIndex) in limitedMovieCast"
                 :key="`${castMember.name}-${castMember.character || ''}`"
                 class="cast-card media-card"
                 v-bind="navAttrs(2, movieVersions.length + castIndex)"
-                role="button"
+                :href="`#/?q=${encodeURIComponent(castMember.name)}`"
                 :title="`Search for ${castMember.name}`"
-                @click="handleCastSelect(castMember.name)"
+                @click.prevent="handleCastSelect(castMember.name)"
               >
                 <img
                   v-if="castMember.profile_path && !castMember.profile_path.startsWith('/')"
@@ -133,7 +133,7 @@
                     castMember.character
                   }}</span>
                 </div>
-              </div>
+              </a>
             </div>
 
             <!-- Main content -->
diff --git a/frontend/src/components/MediaRow.vue b/frontend/src/components/MediaRow.vue
index 8739166..0ab70bc 100644
--- a/frontend/src/components/MediaRow.vue
+++ b/frontend/src/components/MediaRow.vue
@@ -10,13 +10,14 @@
       :item="item"
       :nav-row="rowIndex"
       :nav-col="index"
+      :href="getItemHref(item)"
       @click="$emit('select', item)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { MediaItem } from "../types"
+import type { MediaItem, EpisodeWithSeries } from "../types"
 import MediaCard from "./MediaCard.vue"
 
 defineProps<{
@@ -28,4 +29,12 @@ defineProps<{
 defineEmits<{
   select: [MediaItem]
 }>()
+
+function getItemHref(item: MediaItem): string | undefined {
+  if (item.type === "episode") {
+    const epData = item.data as EpisodeWithSeries
+    return `#/series/${epData.series.id}`
+  }
+  return `#/${item.type}/${item.id}`
+}
 </script>
diff --git a/frontend/src/composables/useMediaWebSocket.ts b/frontend/src/composables/useMediaWebSocket.ts
index 049456c..cb3543d 100644
--- a/frontend/src/composables/useMediaWebSocket.ts
+++ b/frontend/src/composables/useMediaWebSocket.ts
@@ -89,6 +89,7 @@ export function useMediaWebSocket() {
     const torrentsB = annotateTorrents(b.torrents, b.root_id)
     return {
       ...a,
+      id: getContentHash(a.id),
       torrents: mergeTorrentDicts(torrentsA, torrentsB),
       info: a.info || b.info,
       cover_path: a.cover_path || b.cover_path,
@@ -171,6 +172,7 @@ export function useMediaWebSocket() {
     }
     return {
       ...a,
+      id: getContentHash(a.id),
       seasons: Array.from(seasonMap.values()).sort((a, b) => a.season_number - b.season_number),
       info: a.info || b.info,
       cover_path: a.cover_path || b.cover_path,
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index fa04469..7c75c70 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -473,6 +473,8 @@ html:not(.mouse-active) .btn-secondary.nav-focused {
     box-shadow var(--transition-medium);
   position: relative;
   outline: none;
+  text-decoration: none;
+  color: inherit;
 }
 
 html.mouse-active .media-card:hover,
diff --git a/mediahive/hivescan/indexer.py b/mediahive/hivescan/indexer.py
index 4fe4df6..63c46e6 100644
--- a/mediahive/hivescan/indexer.py
+++ b/mediahive/hivescan/indexer.py
@@ -474,7 +474,7 @@ async def _process_movies(
 
         display_title = tmdb_info.title
         content_hash = hashlib.md5(f"movie:{tmdb_id}".encode()).hexdigest()[:12]
-        item_id = f"{root_id}:{content_hash}" if root_id else content_hash
+        item_id = content_hash
         media_folder = get_media_folder_path(display_title, year, "movie", cover_dir)
 
         # Find/download cover
@@ -562,7 +562,7 @@ async def _process_movies(
         title = group_data["title"]
         year = group_data["year"]
         content_hash = hashlib.md5(f"movie:{title}:{year}".encode()).hexdigest()[:12]
-        item_id = f"{root_id}:{content_hash}" if root_id else content_hash
+        item_id = content_hash
 
         cover_path = (
             await find_cover_image(title, year, "movie", cover_dir)
@@ -721,7 +721,7 @@ async def _process_series(
 
         display_title = tmdb_info.title
         content_hash = hashlib.md5(f"series:{tmdb_id}".encode()).hexdigest()[:12]
-        series_id = f"{root_id}:{content_hash}" if root_id else content_hash
+        series_id = content_hash
 
         logger.debug("  [%d/%d] %s", series_idx, len(tmdb_groups), display_title)
 
@@ -795,7 +795,7 @@ async def _process_series(
         items = group_data["items"]
         title = group_data["title"]
         content_hash = hashlib.md5(f"series:{title}".encode()).hexdigest()[:12]
-        series_id = f"{root_id}:{content_hash}" if root_id else content_hash
+        series_id = content_hash
 
         cover_path = (
             await find_cover_image(title, None, "series", cover_dir)
diff --git a/mediahive/index_store.py b/mediahive/index_store.py
index 6494613..9bf2585 100644
--- a/mediahive/index_store.py
+++ b/mediahive/index_store.py
@@ -73,15 +73,10 @@ class IndexStore:
     # ------------------------------------------------------------------
 
     def _maybe_migrate_id(self, item_id: str) -> str:
-        """Normalize item ID to this store's current root_id namespace."""
-        if not self.root_id:
-            return item_id
+        """Strip any legacy root_id prefix, leaving only the content hash."""
         if ":" in item_id:
-            # If snapshot was created under a different root_id prefix,
-            # remap to current root_id while preserving content hash.
-            _, content_hash = item_id.split(":", 1)
-            return f"{self.root_id}:{content_hash}"
-        return f"{self.root_id}:{item_id}"
+            return item_id.split(":", 1)[1]
+        return item_id
 
     async def load_snapshot(self) -> None:
         """Load index from disk snapshot (recovery on startup)."""
@@ -216,6 +211,7 @@ class IndexStore:
 
     def upsert_movie(self, item: Movie) -> bool:
         """Insert or update a movie. Returns True if it was a real change."""
+        item.id = self._maybe_migrate_id(item.id)
         if not item.root_id and self.root_id:
             item.root_id = self.root_id
         existing = self.movies.get(item.id)
@@ -229,6 +225,7 @@ class IndexStore:
 
     def upsert_series(self, item: Series) -> bool:
         """Insert or update a series. Returns True if it was a real change."""
+        item.id = self._maybe_migrate_id(item.id)
         if not item.root_id and self.root_id:
             item.root_id = self.root_id
         existing = self.series.get(item.id)
@@ -242,12 +239,14 @@ class IndexStore:
 
     def remove_movie(self, item_id: str) -> None:
         """Remove a movie from the index and broadcast."""
+        item_id = self._maybe_migrate_id(item_id)
         self.movies.pop(item_id, None)
         self._schedule_snapshot()
         self._broadcast(Remove(kind="movie", id=item_id))
 
     def remove_series(self, item_id: str) -> None:
         """Remove a series from the index and broadcast."""
+        item_id = self._maybe_migrate_id(item_id)
         self.series.pop(item_id, None)
         self._schedule_snapshot()
         self._broadcast(Remove(kind="series", id=item_id))