From 8e8d03fcb0e8e151f663081e83298ee35fd30546 Mon Sep 17 00:00:00 2001
From: Chili Palmer <hugoms@me.com>
Date: Sun, 26 Apr 2026 13:05:21 +0200
Subject: [PATCH] fix: thumbnails again working

---
 priv/ui/live.js            | 38 ++++++++++++++++++++++++++++++++++++++
 test/bds/ui/shell_test.exs | 11 +++++++++++
 2 files changed, 49 insertions(+)

diff --git a/priv/ui/live.js b/priv/ui/live.js
index 414ea4b..f82ed52 100644
--- a/priv/ui/live.js
+++ b/priv/ui/live.js
@@ -34,6 +34,26 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   };
 
+  const setMediaThumbnailLoaded = (image, loaded) => {
+    const thumbnail = image?.closest(".media-thumbnail");
+
+    if (!thumbnail) {
+      return;
+    }
+
+    if (loaded) {
+      thumbnail.classList.add("is-loaded");
+    } else {
+      thumbnail.classList.remove("is-loaded");
+    }
+  };
+
+  const syncMediaThumbnailState = (root) => {
+    root.querySelectorAll(".media-thumbnail-image").forEach((image) => {
+      setMediaThumbnailLoaded(image, Boolean(image.complete && image.naturalWidth > 0));
+    });
+  };
+
   const normalizeShortcutKey = (key) => String(key || "").toLowerCase();
 
   const shortcutTargetIsEditable = (event) => {
@@ -264,9 +284,24 @@ document.addEventListener("DOMContentLoaded", () => {
           });
         };
 
+        this.handleThumbnailLoad = (event) => {
+          if (event.target instanceof HTMLImageElement && event.target.classList.contains("media-thumbnail-image")) {
+            setMediaThumbnailLoaded(event.target, true);
+          }
+        };
+
+        this.handleThumbnailError = (event) => {
+          if (event.target instanceof HTMLImageElement && event.target.classList.contains("media-thumbnail-image")) {
+            setMediaThumbnailLoaded(event.target, false);
+          }
+        };
+
         window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.addEventListener("keydown", this.handleShortcutKeyDown, true);
+        this.el.addEventListener("load", this.handleThumbnailLoad, true);
+        this.el.addEventListener("error", this.handleThumbnailError, true);
         this.el.addEventListener("change", this.handleChange);
+        syncMediaThumbnailState(this.el);
         this.restoreStoredWorkbenchSession();
       },
 
@@ -281,11 +316,14 @@ document.addEventListener("DOMContentLoaded", () => {
           }
         }
 
+        syncMediaThumbnailState(this.el);
         this.persistWorkbenchSession();
       },
 
       destroyed() {
         this.el.removeEventListener("mousedown", this.handleMouseDown);
+        this.el.removeEventListener("load", this.handleThumbnailLoad, true);
+        this.el.removeEventListener("error", this.handleThumbnailError, true);
         this.el.removeEventListener("change", this.handleChange);
         window.removeEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.removeEventListener("keydown", this.handleShortcutKeyDown, true);
diff --git a/test/bds/ui/shell_test.exs b/test/bds/ui/shell_test.exs
index b7bcdf4..a321395 100644
--- a/test/bds/ui/shell_test.exs
+++ b/test/bds/ui/shell_test.exs
@@ -130,6 +130,17 @@ defmodule BDS.UI.ShellTest do
     assert live_ex =~ "encoded_workbench_session"
   end
 
+  test "desktop shell assets reveal loaded media sidebar thumbnails" do
+    css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
+    live_js = File.read!("/Users/gb/Projects/bDS2/priv/ui/live.js")
+
+    assert css =~ ".media-thumbnail.is-loaded .media-thumbnail-image"
+    assert css =~ ".media-thumbnail.is-loaded .media-thumbnail-fallback"
+    assert live_js =~ "media-thumbnail-image"
+    assert live_js =~ "classList.add(\"is-loaded\")"
+    assert live_js =~ "classList.remove(\"is-loaded\")"
+  end
+
   test "desktop shell css keeps the status bar and hidden menu alignment rules" do
     css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")