From f5ceb872e0f010e17b9dfdf779a22733083c1eaf Mon Sep 17 00:00:00 2001 From: GHStaK Date: Tue, 24 Mar 2026 16:50:20 +0900 Subject: [PATCH] Fix GIPHY UI cache mismatch --- TODO.md | 13 +++++++++++++ frontend/app.js | 7 +++++-- frontend/index.html | 24 ++++++------------------ 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/TODO.md b/TODO.md index e24a01f..fb8c359 100644 --- a/TODO.md +++ b/TODO.md @@ -268,6 +268,19 @@ - backend debug broadcasts ## Recent Change Log +- Date: `2026-03-24` +- What changed: + - Removed the large GIPHY image-mode info box entirely and replaced it with a minimal inline prompt bar plus `Powered by GIPHY` label. + - Hardened frontend visibility toggling so stale cached HTML/JS combinations do not crash on missing elements. + - Bumped the frontend asset version again so browsers are forced onto the latest image-search UI bundle after the GIPHY panel changes. +- Why it changed: + - Real user logs showed a client-side `Cannot read properties of null (reading 'classList')` error caused by stale frontend asset mismatch, which prevented image results from rendering, and the remaining large image-mode box was still not desired in the UI. +- How it was verified: + - log review of `ai-media-hub-2026-03-24T07-48-19-085Z.log` + - `node --check frontend/app.js` +- What is still risky or incomplete: + - Users with aggressively cached browser sessions may still need one hard refresh to fully drop older HTML/JS combinations already loaded in an open tab. + - Date: `2026-03-24` - What changed: - Simplified the GIPHY image-search UX so it presents raw search results instead of looking like an AI-evaluated result flow. diff --git a/frontend/app.js b/frontend/app.js index c75f41d..fdf9cd0 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -11,7 +11,7 @@ const searchSubmitButton = document.getElementById("searchSubmitButton"); const searchResultsViewport = document.getElementById("searchResultsViewport"); const mediaTypeToggles = Array.from(document.querySelectorAll("[data-media-type-toggle]")); const platformToggles = Array.from(document.querySelectorAll("[data-platform-toggle]")); -const imageSearchSandbox = document.getElementById("imageSearchSandbox"); +const imagePromptBar = document.getElementById("imagePromptBar"); const imagePromptChips = Array.from(document.querySelectorAll("[data-image-prompt]")); const dropzone = document.getElementById("dropzone"); const fileInput = document.getElementById("fileInput"); @@ -169,6 +169,9 @@ function setStatus(label, progress) { } function setHidden(element, hidden, visibleDisplayClass = "flex") { + if (!element) { + return; + } element.classList.toggle("hidden", hidden); if (visibleDisplayClass) { element.classList.toggle(visibleDisplayClass, !hidden); @@ -335,7 +338,7 @@ function renderImageResults(items = []) { function applyMediaTypeUI() { const isImageMode = activeMediaType === "image"; syncMediaTypeButtons(); - setHidden(imageSearchSandbox, !isImageMode, "block"); + setHidden(imagePromptBar, !isImageMode, "flex"); setHidden(queryVariants, true, ""); showWarning(""); searchResultsViewport.classList.toggle("image-results-scroll", isImageMode); diff --git a/frontend/index.html b/frontend/index.html index 5b24b35..b992331 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -52,23 +52,11 @@ -