YT Music-knapp på korten + Veckans låtar (egen låtförslags-batch)

- MusicCard: ▶ YT-knapp öppnar music.youtube.com-sökning på artist/låt/album
- Låtförslag: egen batch-typ 'tracks' — signaler: 10 senast gillade
  (Liked Music-listan i Youtubarr-DB, fallback senaste tillägg) + 10 mest
  spelade i Jellyfin (SortBy=PlayCount); egen Gemini-prompt för enskilda
  låtar; berikas med artist-MBID så Hämta lägger in artisten i Lidarr
- Upptäck: egen 'Veckans låtar'-ruta med senaste 10 + generera-knapp
- Schema: trackIntervalDays (default 7, 0 = av) i inställningarna,
  schemaläggaren kör båda typerna oberoende
- Förslag-sidan märker batcher med typ; 26 tester gröna

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01824ZrvG2mDYYrmwqypLNup

frontend/src/components/MusicCard.vue

@@ -1,9 +1,17 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({ item: { type: Object, required: true } })
 const state = ref('') // '' | 'busy' | 'done' | 'fanns' | 'fel'
 
+const ytUrl = computed(() => {
+  const q =
+    props.item.kind === 'artist'
+      ? props.item.name
+      : `${props.item.secondary ?? ''} ${props.item.name}`.trim()
+  return `https://music.youtube.com/search?q=${encodeURIComponent(q)}`
+})
+
 async function grab() {
   state.value = 'busy'
   try {
@@ -43,12 +51,15 @@ async function grab() {
       </span>
       <p v-if="item.motivation" class="motivation">{{ item.motivation }}</p>
     </div>
-    <button v-if="item.inLibrary || state === 'fanns'" class="have" disabled>✓ I biblioteket</button>
-    <button v-else-if="state === 'done'" class="have" disabled>✓ Hämtas</button>
-    <button v-else-if="!item.mbid" class="have" disabled title="hittades inte i Lidarrs metadata">går ej att hämta</button>
-    <button v-else :disabled="state === 'busy'" @click="grab">
-      {{ state === 'busy' ? 'Lägger till…' : state === 'fel' ? 'Försök igen' : '⤓ Hämta' }}
-    </button>
+    <div class="buttons">
+      <button v-if="item.inLibrary || state === 'fanns'" class="have" disabled>✓ I biblioteket</button>
+      <button v-else-if="state === 'done'" class="have" disabled>✓ Hämtas</button>
+      <button v-else-if="!item.mbid" class="have" disabled title="hittades inte i Lidarrs metadata">går ej att hämta</button>
+      <button v-else :disabled="state === 'busy'" @click="grab">
+        {{ state === 'busy' ? 'Lägger till…' : state === 'fel' ? 'Försök igen' : '⤓ Hämta' }}
+      </button>
+      <a class="yt" :href="ytUrl" target="_blank" rel="noopener" title="Öppna i YouTube Music">▶ YT</a>
+    </div>
   </article>
 </template>
 
@@ -134,4 +145,33 @@ async function grab() {
   color: var(--text-dim);
   cursor: default;
 }
+
+.buttons {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.buttons button {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.yt {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  padding: 0.55rem 0.7rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 60, 60, 0.45);
+  color: #ff8080;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.yt:hover {
+  background: rgba(255, 60, 60, 0.12);
+}
 </style>

frontend/src/pages/DiscoverPage.vue

@@ -3,24 +3,34 @@ import { onMounted, ref } from 'vue'
 import MusicCard from '../components/MusicCard.vue'
 
 const items = ref([])
+const tracks = ref([])
 const lastRun = ref(null)
+const lastTrackRun = ref(null)
 const intervalHours = ref(24)
-const busy = ref(false)
+const trackIntervalDays = ref(7)
+const busy = ref({})
 const error = ref('')
 
 async function load() {
   const res = await fetch('/api/suggest/latest')
   const body = await res.json()
   items.value = body.items
+  tracks.value = body.tracks
   lastRun.value = body.lastRun
+  lastTrackRun.value = body.lastTrackRun
   intervalHours.value = body.intervalHours
+  trackIntervalDays.value = body.trackIntervalDays
 }
 
-async function generate() {
-  busy.value = true
+async function generate(type) {
+  busy.value = { ...busy.value, [type]: true }
   error.value = ''
   try {
-    const res = await fetch('/api/suggest/run', { method: 'POST' })
+    const res = await fetch('/api/suggest/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type }),
+    })
     const body = await res.json()
     if (!res.ok) {
       error.value = body.error ?? 'genereringen misslyckades'
@@ -30,7 +40,7 @@ async function generate() {
   } catch {
     error.value = 'genereringen misslyckades'
   } finally {
-    busy.value = false
+    busy.value = { ...busy.value, [type]: false }
   }
 }
 
@@ -53,8 +63,8 @@ onMounted(load)
           <template v-else> · schema: av</template>
         </span>
         <router-link class="link" :to="{ name: 'suggestions' }">Alla förslag →</router-link>
-        <button :disabled="busy" @click="generate">
-          {{ busy ? 'Genererar… (kan ta en halv minut)' : '✨ Generera nya förslag' }}
+        <button :disabled="busy.mix" @click="generate('mix')">
+          {{ busy.mix ? 'Genererar… (kan ta en halv minut)' : '✨ Generera nya förslag' }}
         </button>
       </div>
     </div>
@@ -74,6 +84,31 @@ onMounted(load)
         lagt till på YouTube Music.
       </p>
     </div>
+
+    <div class="head tracks-head">
+      <h2>Veckans låtar</h2>
+      <div class="actions">
+        <span class="dim">
+          Senaste körning: {{ fmt(lastTrackRun) }}
+          <template v-if="trackIntervalDays"> · schema: var {{ trackIntervalDays }}:e dag</template>
+          <template v-else> · schema: av</template>
+        </span>
+        <button :disabled="busy.tracks" @click="generate('tracks')">
+          {{ busy.tracks ? 'Genererar…' : '🎵 Generera låtförslag' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="tracks.length" class="grid">
+      <MusicCard v-for="(r, i) in tracks" :key="`t-${r.mbid ?? r.name}-${i}`" :item="r" />
+    </div>
+    <div v-else class="empty small">
+      <p class="dim">
+        Inga låtförslag ännu — genereras automatiskt varje vecka utifrån dina
+        senast gillade låtar (YT Music) och mest spelade (Jellyfin), eller
+        direkt via knappen.
+      </p>
+    </div>
   </section>
 </template>
 
@@ -117,6 +152,14 @@ h2 {
   gap: 1rem;
 }
 
+.tracks-head {
+  margin-top: 2rem;
+}
+
+.empty.small {
+  padding: 2rem 1rem;
+}
+
 .empty {
   display: grid;
   place-items: center;

frontend/src/pages/SettingsPage.vue

@@ -6,6 +6,7 @@ const jellyfin = ref({ url: '', apiKey: '', userId: '' })
 const ytmusic = ref({ clientId: '', clientSecret: '' })
 const saved = ref({ gemini: {}, jellyfin: {}, ytmusic: {}, suggest: {} })
 const intervalHours = ref(24)
+const trackIntervalDays = ref(7)
 const results = ref({}) // service -> {ok, message}
 const busy = ref({})
 const jfUsers = ref([])
@@ -18,23 +19,21 @@ onMounted(async () => {
   jellyfin.value.url = saved.value.jellyfin.url
   jellyfin.value.userId = saved.value.jellyfin.userId
   intervalHours.value = saved.value.suggest?.intervalHours ?? 24
+  trackIntervalDays.value = saved.value.suggest?.trackIntervalDays ?? 7
 })
 
 async function saveInterval() {
   await fetch('/api/settings', {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ suggest: { intervalHours: Number(intervalHours.value) } }),
+    body: JSON.stringify({
+      suggest: {
+        intervalHours: Number(intervalHours.value),
+        trackIntervalDays: Number(trackIntervalDays.value),
+      },
+    }),
   })
-  results.value = {
-    ...results.value,
-    suggest: {
-      ok: true,
-      message: Number(intervalHours.value)
-        ? `sparat — nya förslag var ${intervalHours.value}:e timme`
-        : 'sparat — schemat är avstängt',
-    },
-  }
+  results.value = { ...results.value, suggest: { ok: true, message: 'sparat ✓' } }
 }
 
 async function saveAndTest(service) {
@@ -205,9 +204,12 @@ async function connectYtMusic() {
         Hur ofta nya Gemini-förslag hämtas automatiskt. Sätt 0 för att stänga
         av — du kan alltid klicka "Generera nya förslag" på Upptäck-sidan.
       </p>
-      <label>Intervall (timmar)
+      <label>Artist/album-förslag — intervall (timmar)
         <input v-model="intervalHours" type="number" min="0" step="1" />
       </label>
+      <label>Låtförslag ("Veckans låtar") — intervall (dagar)
+        <input v-model="trackIntervalDays" type="number" min="0" step="1" />
+      </label>
       <div class="row">
         <button @click="saveInterval">Spara</button>
         <span v-if="results.suggest" :class="results.suggest.ok ? 'ok' : 'fail'">{{ results.suggest.message }}</span>

frontend/src/pages/SuggestionsPage.vue

@@ -42,7 +42,7 @@ onMounted(load)
         @click="pick(b.id)"
       >
         <strong>#{{ b.id }}</strong> — {{ fmt(b.createdAt) }}
-        <span class="dim">{{ b.count }} förslag · {{ b.trigger }}</span>
+        <span class="dim">{{ b.type === 'tracks' ? 'låtar' : 'artister/album' }} · {{ b.count }} förslag · {{ b.trigger }}</span>
       </button>
     </aside>