Static path, search dropdown, async follow

2026-07-15 10:46:22 +02:00
parent 5861da89b3
commit d7d68b9ab0
14 changed files with 64 additions and 36 deletions
@@ -0,0 +1,12 @@
+/* DiscDrop custom styles */
+html { scroll-behavior: smooth; }
+
+/* Hide empty search dropdown */
+#search-dropdown:empty { display: none; }
+
+/* Remove native search input artifacts */
+input[type="text"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+}
@@ -1,3 +0,0 @@
-/* DiscDrop custom styles */
-html { scroll-behavior: smooth; }
-#search-dropdown:empty { display: none; }
@@ -4,18 +4,18 @@
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>DiscDrop – Artists</title>
-    <link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg"/>
+    <link rel="icon" type="image/svg+xml" href="/img/favicon.svg"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/[email protected]"></script>
-    <link rel="stylesheet" href="/static/css/app.css"/>
-    <script src="/static/js/app.js" defer></script>
+    <link rel="stylesheet" href="/css/app.css"/>
+    <script src="/js/app.js" defer></script>
 </head>
 <body>
 <header class="sticky top-0 z-30 bg-base-100/90 backdrop-blur border-b border-base-300">
    <div class="navbar flex flex-wrap justify-center gap-4 px-4 py-3 max-w-5xl mx-auto">
        <div class="flex items-center gap-2">
-            <img src="/static/img/logo.svg" alt="DiscDrop logo" class="h-9 w-9"/>
+            <img src="/img/logo.svg" alt="DiscDrop logo" class="h-9 w-9"/>
            <span class="text-xl font-bold">DiscDrop</span>
        </div>
        <div class="flex items-center gap-2">
@@ -16,3 +16,10 @@
    <p class="text-sm">Search for an artist above and click <strong>Follow</strong> to start tracking their release groups.</p>
 </div>
 {/if}
+{#if autoRefresh?? && autoRefresh}
+<div hx-get="/feed?offset=0"
+     hx-target="#feed-list"
+     hx-swap="innerHTML"
+     hx-trigger="load delay:3s"
+     class="hidden"></div>
+{/if}
@@ -3,7 +3,7 @@
         alt="cover"
         loading="lazy"
         class="w-16 h-16 rounded object-cover bg-base-200"
-         onerror="this.onerror=null;this.src='/static/img/no-cover.svg'"/>
+         onerror="this.onerror=null;this.src='/img/no-cover.svg'"/>

    <div class="flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-2">
@@ -4,38 +4,37 @@
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>DiscDrop</title>
-    <link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg"/>
+    <link rel="icon" type="image/svg+xml" href="/img/favicon.svg"/>
    <link rel="alternate" type="application/rss+xml" title="DiscDrop – New Releases" href="/rss"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/[email protected]"></script>
-    <link rel="stylesheet" href="/static/css/app.css"/>
-    <script src="/static/js/app.js" defer></script>
+    <link rel="stylesheet" href="/css/app.css"/>
+    <script src="/js/app.js" defer></script>
 </head>
 <body>
 <header class="sticky top-0 z-30 bg-base-100/90 backdrop-blur border-b border-base-300">
    <div class="navbar flex flex-wrap justify-center gap-4 px-4 py-3 max-w-5xl mx-auto">
        <div class="flex items-center gap-2">
-            <img src="/static/img/logo.svg" alt="DiscDrop logo" class="h-9 w-9"/>
+            <img src="/img/logo.svg" alt="DiscDrop logo" class="h-9 w-9"/>
            <span class="text-xl font-bold">DiscDrop</span>
        </div>

        <div id="search-wrap" class="relative flex-1 min-w-[220px] max-w-xl">
-            <form id="search-form" class="join w-full" autocomplete="off">
-                <input
-                        id="search-input"
-                        type="search"
-                        name="q"
-                        placeholder="Search MusicBrainz artists…"
-                        class="input input-bordered join-item w-full"
-                        hx-get="/search/artists"
-                        hx-trigger="input changed delay:300ms"
-                        hx-target="#search-dropdown"
-                        hx-swap="innerHTML"
-                        hx-include="this"/>
-            </form>
+            <input
+                    id="search-input"
+                    type="text"
+                    name="q"
+                    placeholder="Search MusicBrainz artists…"
+                    class="input input-bordered w-full"
+                    autocomplete="off"
+                    hx-get="/search/artists"
+                    hx-trigger="input changed delay:300ms"
+                    hx-target="#search-dropdown"
+                    hx-swap="innerHTML"
+                    hx-include="this"/>
            <div id="search-dropdown"
-                 class="absolute left-0 right-0 z-40 mt-1 bg-base-100 rounded-box shadow-lg border border-base-300 max-h-96 overflow-y-auto"></div>
+                 class="absolute left-0 right-0 top-full z-40 mt-1 bg-base-100 rounded-box shadow-lg border border-base-300 max-h-96 overflow-y-auto"></div>
        </div>

        <div class="flex items-center gap-2">