Tighten source filters and add platform toggles

frontend/app.js

@@ -5,6 +5,7 @@ const searchQuery = document.getElementById("searchQuery");
 const searchResults = document.getElementById("searchResults");
 const searchWarning = document.getElementById("searchWarning");
 const queryVariants = document.getElementById("queryVariants");
+const platformToggles = Array.from(document.querySelectorAll("[data-platform-toggle]"));
 const dropzone = document.getElementById("dropzone");
 const fileInput = document.getElementById("fileInput");
 const uploadResult = document.getElementById("uploadResult");
@@ -35,6 +36,7 @@ let cropStart = 0;
 let cropEnd = 0;
 let cropMax = 0;
 let activeThumb = null;
+const activePlatforms = new Set(["envato", "artgrid", "google video"]);
 
 function setStatus(label, progress) {
   statusLabel.textContent = label;
@@ -87,6 +89,19 @@ function renderQueryVariants(queries = []) {
   queryVariants.classList.remove("hidden");
 }
 
+function syncPlatformButtons() {
+  for (const button of platformToggles) {
+    const platform = button.dataset.platformToggle;
+    const active = activePlatforms.has(platform);
+    button.classList.toggle("bg-white", active);
+    button.classList.toggle("text-black", active);
+    button.classList.toggle("border-white", active);
+    button.classList.toggle("bg-transparent", !active);
+    button.classList.toggle("text-zinc-300", !active);
+    button.classList.toggle("border-white/20", !active);
+  }
+}
+
 function connectWS() {
   const protocol = window.location.protocol === "https:" ? "wss" : "ws";
   const socket = new WebSocket(`${protocol}://${window.location.host}/ws`);
@@ -145,12 +160,13 @@ function renderResults(results) {
     if (item.previewVideoUrl) {
       previewVideo.src = item.previewVideoUrl;
       previewVideo.poster = item.thumbnailUrl || "";
-      node.addEventListener("mouseenter", () => {
+      const mediaArea = node.querySelector(".relative");
+      mediaArea.addEventListener("mouseenter", () => {
         overlays.forEach((overlay) => overlay.classList.add("hidden"));
         previewVideo.classList.remove("hidden");
         previewVideo.play().catch(() => {});
       });
-      node.addEventListener("mouseleave", () => {
+      mediaArea.addEventListener("mouseleave", () => {
         previewVideo.pause();
         previewVideo.currentTime = 0;
         previewVideo.classList.add("hidden");
@@ -169,7 +185,7 @@ searchForm.addEventListener("submit", async (event) => {
     const data = await api("/api/search", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ query: searchQuery.value }),
+      body: JSON.stringify({ query: searchQuery.value, platforms: Array.from(activePlatforms) }),
     });
     renderResults(data.results || []);
     renderQueryVariants(data.queries || []);
@@ -368,6 +384,18 @@ previewThumbnail.addEventListener("load", () => {
     previewMediaFrame.style.aspectRatio = `${previewThumbnail.naturalWidth} / ${previewThumbnail.naturalHeight}`;
   }
 });
+for (const button of platformToggles) {
+  button.addEventListener("click", () => {
+    const platform = button.dataset.platformToggle;
+    if (activePlatforms.has(platform) && activePlatforms.size > 1) {
+      activePlatforms.delete(platform);
+    } else {
+      activePlatforms.add(platform);
+    }
+    syncPlatformButtons();
+  });
+}
 
 connectWS();
+syncPlatformButtons();
 setStatus("idle", 0);

frontend/index.html

@@ -35,6 +35,11 @@
               <h2 class="text-2xl font-semibold text-white">AI Smart Discovery</h2>
             </div>
           </div>
+          <div class="mb-4 flex flex-wrap gap-3">
+            <button data-platform-toggle="envato" class="platform-toggle rounded-full border border-white bg-white px-4 py-2 text-sm font-medium text-black">Envato</button>
+            <button data-platform-toggle="artgrid" class="platform-toggle rounded-full border border-white bg-white px-4 py-2 text-sm font-medium text-black">Artgrid</button>
+            <button data-platform-toggle="google video" class="platform-toggle rounded-full border border-white bg-white px-4 py-2 text-sm font-medium text-black">Google Video</button>
+          </div>
           <form id="searchForm" class="flex flex-col gap-3 md:flex-row">
             <input id="searchQuery" type="text" placeholder="한글 검색어를 입력하세요" class="flex-1 rounded-2xl border border-white/10 bg-black/40 px-5 py-4 text-base text-white outline-none ring-0 placeholder:text-zinc-500" />
             <button class="rounded-2xl border border-white bg-white px-7 py-4 text-base font-medium text-black transition hover:bg-zinc-200">AI Search</button>
@@ -139,6 +144,6 @@
       </a>
     </template>
 
-    <script src="/app.js?v=20260313f" defer></script>
+    <script src="/app.js?v=20260313g" defer></script>
   </body>
 </html>