From cfa1781192689fbe3eaa2bfe261f6f648963d5fa Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 25 May 2026 14:25:58 +0000
Subject: [PATCH] refactor: hero featured item is a plain link like all other
 cards

Remove the separate Play and Info buttons from the CollageHero featured
item. All collage items (including the featured one) are now uniform
<a href> links that navigate to the detail page.

- CollageHero: remove hasResumePosition prop, play/info emits, and
  associated play button logic
- App.vue: remove @play and @info bindings from CollageHero
- Delete unused HeroSection.vue component and its styles
---
 frontend/src/App.vue                    |   9 --
 frontend/src/components/CollageHero.vue |  77 ++----------
 frontend/src/components/HeroSection.vue | 153 ------------------------
 frontend/src/styles/main.css            |  96 +--------------
 4 files changed, 10 insertions(+), 325 deletions(-)
 delete mode 100644 frontend/src/components/HeroSection.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7cdea10..e4f2350 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -84,9 +84,6 @@
               :key="`movie-hero-${movieCollageItems.length}-${movieFeaturedItem?.id || 'none'}`"
               :items="movieCollageItems"
               :featured-item="movieFeaturedItem"
-              :has-resume-position="hasResumePosition"
-              @play="handlePlay"
-              @info="showDetail"
               @select="showDetail"
             />
             <!-- Spacer for header overlay -->
@@ -110,9 +107,6 @@
               :key="`series-hero-${seriesCollageItems.length}-${seriesFeaturedItem?.id || 'none'}`"
               :items="seriesCollageItems"
               :featured-item="seriesFeaturedItem"
-              :has-resume-position="hasResumePosition"
-              @play="handlePlay"
-              @info="showDetail"
               @select="showDetail"
             />
             <!-- Spacer for header overlay -->
@@ -140,9 +134,6 @@
             :key="`search-hero-${searchCollageItems.length}-${searchFeaturedItem?.id || 'none'}`"
             :items="searchCollageItems"
             :featured-item="searchFeaturedItem"
-            :has-resume-position="hasResumePosition"
-            @play="handlePlay"
-            @info="showDetail"
             @select="showDetail"
           />
           <!-- Spacer for header overlay -->
diff --git a/frontend/src/components/CollageHero.vue b/frontend/src/components/CollageHero.vue
index 01f9d33..31264a1 100644
--- a/frontend/src/components/CollageHero.vue
+++ b/frontend/src/components/CollageHero.vue
@@ -3,9 +3,8 @@
     <!-- Diagonal collage grid -->
     <div class="collage-grid">
       <template v-for="(item, index) in collageItems" :key="item.id">
-        <component
-          :is="index !== 0 ? 'a' : 'div'"
-          :ref="(el: HTMLElement | null) => setItemRef(el, index)"
+        <a
+          :ref="(el: unknown) => setItemRef(el as HTMLElement | null, index)"
           class="collage-item"
           :class="[
             `collage-item-${index}`,
@@ -17,8 +16,8 @@
             },
           ]"
           v-bind="getItemAttrs(index)"
-          :href="index !== 0 ? getItemHref(item) : undefined"
-          @click="handleItemClick($event, item, index)"
+          :href="getItemHref(item)"
+          @click="handleItemClick($event, item)"
           @focus="focusedIndex = index"
         >
           <!-- Featured item with hexagonal clip -->
@@ -107,18 +106,6 @@
               <span v-if="getResolution(item)" class="meta-quality">{{ getResolution(item) }}</span>
             </div>
             <p v-if="getOverview(item)" class="collage-overview">{{ getOverview(item) }}</p>
-            <div class="collage-buttons">
-              <button class="btn btn-primary" @click.stop="handlePlay(item)">
-                ▶ {{ getPlayLabel(item) }}
-              </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>
             <span class="hover-title">{{ item.title }}</span>
@@ -126,7 +113,7 @@
               >★ {{ getRating(item)?.toFixed(1) }}</span
             >
           </div>
-        </component>
+        </a>
       </template>
     </div>
   </section>
@@ -433,7 +420,7 @@ function handleKeyDown(e: KeyboardEvent) {
       const item = collageItems.value[focusedIndex.value]
       e.preventDefault()
       e.stopPropagation()
-      if (item) activateItem(item, focusedIndex.value)
+      if (item) activateItem(item)
     }
     return
   }
@@ -476,12 +463,9 @@ function isItemVisible(index: number): boolean {
 const props = defineProps<{
   items: MediaItem[]
   featuredItem?: MediaItem | null
-  hasResumePosition: (filePath: string | null) => boolean
 }>()
 
 const emit = defineEmits<{
-  play: [string]
-  info: [MediaItem]
   select: [MediaItem]
 }>()
 
@@ -589,48 +573,15 @@ function getOverview(item: MediaItem): string | null {
   return overview.length > 150 ? overview.slice(0, 150) + "..." : overview
 }
 
-function getPlayableFile(item: MediaItem): string | null {
-  if (item.type === "movies") {
-    const movie = item.data as Movie
-    return Object.values(movie.torrents || {})[0]?.playable_file ?? null
-  }
-  const series = item.data as Series
-  for (const season of series.seasons || []) {
-    for (const episode of season.episodes || []) {
-      for (const torrent of Object.values(episode.torrents || {})) {
-        if (torrent.playable_file) return torrent.playable_file
-      }
-    }
-  }
-  return null
-}
-
-function handlePlay(item: MediaItem) {
-  const file = getPlayableFile(item)
-  if (file) emit("play", file)
-}
-
-function getPlayLabel(item: MediaItem): string {
-  return props.hasResumePosition(getPlayableFile(item)) ? "Continue" : "Play"
-}
-
 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 activateItem(item: MediaItem) {
+  emit("select", item)
 }
 
-function handleItemClick(event: MouseEvent, item: MediaItem, index: number) {
-  if (index === 0) {
-    emit("info", item)
-    return
-  }
+function handleItemClick(event: MouseEvent, item: MediaItem) {
   // Let modified clicks navigate natively
   if (
     event.button !== 0 ||
@@ -1089,16 +1040,6 @@ html:not(.mouse-active) .collage-item.nav-focused .hex-focus-outline {
   max-width: 450px;
 }
 
-.collage-buttons {
-  display: flex;
-  gap: 10px;
-}
-
-.collage-buttons .btn {
-  padding: 10px 24px;
-  font-size: 0.95rem;
-}
-
 /* Hover info for non-featured items */
 .collage-item-hover {
   position: absolute;
diff --git a/frontend/src/components/HeroSection.vue b/frontend/src/components/HeroSection.vue
deleted file mode 100644
index 9dfc8f6..0000000
--- a/frontend/src/components/HeroSection.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <section class="hero">
-    <div
-      v-if="coverUrl"
-      class="hero-background"
-      :style="{ backgroundImage: `url('${coverUrl}')` }"
-    ></div>
-    <div class="hero-content">
-      <h1 class="hero-title">{{ item.title }}</h1>
-      <div class="hero-meta">
-        <span v-if="item.year" class="hero-year">{{ item.year }}</span>
-        <span v-if="rating" class="hero-rating" :class="ratingClass">
-          ★ {{ rating.toFixed(1) }}
-        </span>
-        <span v-if="resolution" class="hero-quality">{{ resolution }}</span>
-        <span v-if="quality" class="hero-quality">{{ quality }}</span>
-      </div>
-      <p v-if="overview" class="hero-overview">{{ overview }}</p>
-      <div class="hero-buttons">
-        <button class="btn btn-primary" @click="handlePlay" :disabled="!playableFile">
-          ▶ Play
-        </button>
-        <a
-          class="btn btn-secondary"
-          :href="detailHref"
-          @click.prevent="$emit('info', item)"
-        >
-          ℹ More Info
-        </a>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import type { MediaItem, Movie, Series } from "../types"
-import { getCoverUrl } from "../api"
-
-const props = defineProps<{
-  item: MediaItem
-}>()
-
-const emit = defineEmits<{
-  play: [string]
-  info: [MediaItem]
-}>()
-
-const coverUrl = computed(() => {
-  return getCoverUrl(props.item.cover_path, props.item.root_id)
-})
-
-const resolution = computed(() => {
-  if (props.item.type === "movies") {
-    const movie = props.item.data as Movie
-    const torrents = Object.values(movie.torrents || {})
-    return torrents.length > 0 ? torrents[0].resolution : null
-  }
-  return null
-})
-
-const quality = computed(() => {
-  if (props.item.type === "movies") {
-    const movie = props.item.data as Movie
-    const torrents = Object.values(movie.torrents || {})
-    return torrents.length > 0 ? torrents[0].quality : null
-  }
-  return null
-})
-
-const rating = computed(() => {
-  if (props.item.type === "movies") {
-    return (props.item.data as Movie).info?.rating
-  }
-  return (props.item.data as Series).info?.rating
-})
-
-const ratingClass = computed(() => {
-  if (!rating.value) return ""
-  if (rating.value >= 7.5) return "rating-high"
-  if (rating.value >= 6) return "rating-medium"
-  return "rating-low"
-})
-
-const overview = computed(() => {
-  if (props.item.type === "movies") {
-    const o = (props.item.data as Movie).info?.overview
-    return o ? (o.length > 200 ? o.slice(0, 200) + "..." : o) : null
-  }
-  const o = (props.item.data as Series).info?.overview
-  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
-    const torrents = Object.values(movie.torrents || {})
-    return torrents.length > 0 ? torrents[0].playable_file : null
-  }
-  // For series, get first available file from episodes
-  const series = props.item.data as Series
-  for (const season of series.seasons || []) {
-    for (const episode of season.episodes || []) {
-      const torrents = Object.values(episode.torrents || {})
-      for (const torrent of torrents) {
-        if (torrent.playable_file) {
-          return torrent.playable_file
-        }
-      }
-    }
-  }
-  return null
-})
-
-function handlePlay() {
-  if (playableFile.value) {
-    emit("play", playableFile.value)
-  }
-}
-</script>
-
-<style scoped>
-.hero-rating {
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.rating-high {
-  color: #46d369;
-}
-
-.rating-medium {
-  color: #f9a825;
-}
-
-.rating-low {
-  color: #e53935;
-}
-
-.hero-overview {
-  max-width: 500px;
-  color: var(--text-secondary);
-  font-size: 0.95rem;
-  line-height: 1.5;
-  margin-top: 12px;
-}
-</style>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 7c75c70..2fb460f 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -251,91 +251,6 @@ html.mouse-active .header-settings-btn:hover {
   padding-top: 40px;
 }
 
-/* Hero section - kept for backwards compatibility but not used */
-.hero {
-  position: relative;
-  height: 70vh;
-  max-height: 600px;
-  min-height: 400px;
-  display: flex;
-  align-items: flex-end;
-  padding: 0 4% 8%;
-  background-color: var(--bg-primary);
-  overflow: hidden;
-}
-
-.hero-background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 60%;
-  height: 100%;
-  background-size: contain;
-  background-position: right top;
-  background-repeat: no-repeat;
-  mask-image: linear-gradient(
-    to left,
-    rgba(0, 0, 0, 0.6) 0%,
-    rgba(0, 0, 0, 0.3) 60%,
-    transparent 100%
-  );
-  -webkit-mask-image: linear-gradient(
-    to left,
-    rgba(0, 0, 0, 0.6) 0%,
-    rgba(0, 0, 0, 0.3) 60%,
-    transparent 100%
-  );
-}
-
-.hero::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 200px;
-  background: var(--gradient-fade);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-  max-width: 600px;
-}
-
-.hero-title {
-  font-size: 3rem;
-  font-weight: 700;
-  margin-bottom: 16px;
-  text-shadow: 2px 2px 4px var(--shadow-color);
-}
-
-.hero-meta {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-  font-size: 1rem;
-}
-
-.hero-year {
-  color: var(--text-secondary);
-}
-
-.hero-quality {
-  background: var(--bg-secondary);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-weight: 600;
-}
-
-.hero-buttons {
-  display: flex;
-  gap: 12px;
-  margin-top: 24px;
-}
-
 /* Blinking animation for button focus */
 @keyframes btn-outline-blink {
   0%,
@@ -853,16 +768,7 @@ html.mouse-active .release-item:hover {
     --section-padding: 3%;
   }
 
-  .hero {
-    height: 50vh;
-    min-height: 300px;
-  }
-
-  .hero-title {
-    font-size: 1.5rem;
-  }
-
-  .header-nav {
+    .header-nav {
     gap: 10px;
   }