Milstolpe 2+3: ikon, sök (artist/album/låt) och Hämta-till-Lidarr

- Ikon: SVG-favicon (indigo-gradient + balknot), används i topbar, login och som favicon - GET /api/search: artister/album via Lidarrs metadata-API (funkar även när musicbrainz.org är nere), låtar via MusicBrainz recording-sök; 503 med svenskt felmeddelande när källan inte svarar - POST /api/add: slår upp via lidarr:<mbid>, artist läggs bevakad med searchForMissingAlbums, album bevakat med searchForNewAlbum (artisten följer med obevakad), låtar mappas till album/artist; 'already' när det redan finns - Söksida med Jellyseerr-lik kortgrid: poster/fallback, typ-badge, Hämta-knapp med busy/klar/finns-lägen; sökfältet i topbaren aktivt - 7 nya tester (mappning + rutter med stubbat Lidarr), totalt 11 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01824ZrvG2mDYYrmwqypLNup
2026-08-01 00:47:37 +02:00
parent 4e0a8aae13
commit 92d1a7b7ec
12 changed files with 581 additions and 18 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>lyssnarr</title>
  </head>
  <body>
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6366f1"/>
+      <stop offset="1" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="14" fill="url(#g)"/>
+  <g fill="#ffffff">
+    <polygon points="26,19 46,14 46,21 30,25"/>
+    <rect x="26" y="19" width="4" height="27" rx="1"/>
+    <rect x="42" y="14" width="4" height="27" rx="1"/>
+    <circle cx="24" cy="46" r="6.5"/>
+    <circle cx="40" cy="41" r="6.5"/>
+  </g>
+</svg>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,9 +1,19 @@
 <script setup>
+import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

 const route = useRoute()
 const router = useRouter()

+const q = ref(route.query.q ?? '')
+const scope = ref(route.query.type ?? 'artist')
+
+function doSearch() {
+  const term = q.value.trim()
+  if (!term) return
+  router.push({ name: 'search', query: { q: term, type: scope.value } })
+}
+
 async function logout() {
  await fetch('/api/logout', { method: 'POST' })
  router.push({ name: 'login' })
@@ -12,16 +22,17 @@ async function logout() {

 <template>
  <header v-if="route.name !== 'login'" class="topbar">
-    <div class="brand">
-      <span class="note">♪</span> lyssnarr
-    </div>
-    <div class="search">
-      <input
-        type="search"
-        placeholder="Sök artister, album, låtar… (kommer i milstolpe 3)"
-        disabled
-      />
-    </div>
+    <router-link class="brand" :to="{ name: 'discover' }">
+      <img src="/favicon.svg" alt="" class="logo" /> lyssnarr
+    </router-link>
+    <form class="search" @submit.prevent="doSearch">
+      <select v-model="scope" aria-label="Söktyp">
+        <option value="artist">Artister</option>
+        <option value="album">Album</option>
+        <option value="track">Låtar</option>
+      </select>
+      <input v-model="q" type="search" placeholder="Sök musik att hämta…" />
+    </form>
    <button class="ghost" @click="logout">Logga ut</button>
  </header>
  <main>
@@ -44,19 +55,35 @@ async function logout() {
 }

 .brand {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
+  color: var(--text);
 }

-.note {
-  color: var(--accent-hover);
+.logo {
+  width: 1.7rem;
+  height: 1.7rem;
 }

 .search {
  flex: 1;
-  max-width: 34rem;
+  max-width: 38rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.search select {
+  font: inherit;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.6rem;
 }

 .ghost {
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -31,7 +31,7 @@ async function login() {
 <template>
  <div class="wrap">
    <form class="card" @submit.prevent="login">
-      <h1><span class="note">♪</span> lyssnarr</h1>
+      <h1><img src="/favicon.svg" alt="" class="logo" /> lyssnarr</h1>
      <p class="dim">Logga in för att upptäcka ny musik</p>
      <input
        v-model="password"
@@ -66,11 +66,15 @@ async function login() {

 h1 {
  margin: 0;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
 }

-.note {
-  color: var(--accent-hover);
+.logo {
+  width: 2.2rem;
+  height: 2.2rem;
 }

 .dim {
--- a/frontend/src/pages/SearchPage.vue
+++ b/frontend/src/pages/SearchPage.vue
@@ -0,0 +1,192 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const results = ref([])
+const loading = ref(false)
+const error = ref('')
+const added = ref({}) // mbid -> 'busy' | 'done' | 'fanns'
+
+async function search() {
+  const { q, type } = route.query
+  if (!q) return
+  loading.value = true
+  error.value = ''
+  results.value = []
+  try {
+    const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&type=${encodeURIComponent(type ?? 'artist')}`)
+    const body = await res.json()
+    if (!res.ok) {
+      error.value = body.error ?? 'sökningen misslyckades'
+      return
+    }
+    results.value = body
+  } catch {
+    error.value = 'sökningen misslyckades'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function grab(item) {
+  added.value = { ...added.value, [item.mbid]: 'busy' }
+  try {
+    const res = await fetch('/api/add', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        kind: item.kind,
+        mbid: item.mbid,
+        artistMbid: item.artistMbid,
+        albumMbid: item.albumMbid,
+      }),
+    })
+    const body = await res.json()
+    if (!res.ok) {
+      error.value = body.error ?? 'kunde inte hämta'
+      added.value = { ...added.value, [item.mbid]: undefined }
+      return
+    }
+    added.value = { ...added.value, [item.mbid]: body.already ? 'fanns' : 'done' }
+  } catch {
+    error.value = 'kunde inte hämta'
+    added.value = { ...added.value, [item.mbid]: undefined }
+  }
+}
+
+const typeLabel = { artist: 'artister', album: 'album', track: 'låtar' }
+
+watch(() => route.query, search, { immediate: true })
+</script>
+
+<template>
+  <section>
+    <h2>
+      Sökresultat <span class="dim">— {{ typeLabel[route.query.type] ?? '' }} som matchar "{{ route.query.q }}"</span>
+    </h2>
+
+    <p v-if="loading" class="dim">Söker…</p>
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="!loading && !error && results.length === 0" class="dim">Inga träffar.</p>
+
+    <div class="grid">
+      <article v-for="r in results" :key="r.mbid" class="card">
+        <div class="poster">
+          <img v-if="r.poster" :src="r.poster" alt="" loading="lazy" @error="r.poster = null" />
+          <span v-else class="note">♪</span>
+          <span class="kind">{{ { artist: 'Artist', album: 'Album', track: 'Låt' }[r.kind] }}</span>
+        </div>
+        <div class="meta">
+          <strong :title="r.name">{{ r.name }}</strong>
+          <span class="dim" :title="r.secondary">{{ r.secondary }} <template v-if="r.year">· {{ r.year }}</template></span>
+        </div>
+        <button
+          v-if="r.inLibrary || added[r.mbid] === 'fanns'"
+          class="have"
+          disabled
+        >
+          ✓ I biblioteket
+        </button>
+        <button
+          v-else-if="added[r.mbid] === 'done'"
+          class="have"
+          disabled
+        >
+          ✓ Hämtas
+        </button>
+        <button v-else :disabled="added[r.mbid] === 'busy'" @click="grab(r)">
+          {{ added[r.mbid] === 'busy' ? 'Lägger till…' : '⤓ Hämta' }}
+        </button>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+h2 {
+  margin: 0 0 1rem;
+}
+
+.dim {
+  color: var(--text-dim);
+  font-weight: 400;
+}
+
+.error {
+  color: var(--danger);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
+  gap: 1rem;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  background: var(--card);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0.8rem;
+  padding: 0.7rem;
+  transition: background 0.15s;
+}
+
+.card:hover {
+  background: var(--card-hover);
+}
+
+.poster {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: linear-gradient(160deg, #312e81, #1e1b4b);
+  display: grid;
+  place-items: center;
+}
+
+.poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.note {
+  font-size: 2.5rem;
+  color: var(--accent-hover);
+}
+
+.kind {
+  position: absolute;
+  top: 0.4rem;
+  left: 0.4rem;
+  font-size: 0.7rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 0.4rem;
+  background: rgba(17, 24, 39, 0.8);
+  color: var(--text-dim);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  min-height: 2.6rem;
+}
+
+.meta strong,
+.meta .dim {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.have {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: var(--text-dim);
+  cursor: default;
+}
+</style>
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -1,11 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import DiscoverPage from './pages/DiscoverPage.vue'
 import LoginPage from './pages/LoginPage.vue'
+import SearchPage from './pages/SearchPage.vue'

 export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'discover', component: DiscoverPage },
+    { path: '/search', name: 'search', component: SearchPage },
    { path: '/login', name: 'login', component: LoginPage },
  ],
 })