From 3b48a5fa804d38321fb1789c8358f9738aab4150 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Wed, 27 Aug 2025 17:53:47 +1000
Subject: [PATCH] fix (tag): tag hovering issue

---
 public/assets/components/sidebar.js         | 29 ++++++++++++---------
 public/assets/pages/filespage/modal_tag.css |  2 +-
 public/assets/pages/filespage/thing.css     |  3 ++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/public/assets/components/sidebar.js b/public/assets/components/sidebar.js
index fb5d8eda..394cb5eb 100644
--- a/public/assets/components/sidebar.js
+++ b/public/assets/components/sidebar.js
@@ -249,11 +249,12 @@ async function ctrlTagPane(render, { tags, path }) {
             rxjs.catchError(() => rxjs.of({ tags: [] })),
         ),
     ).pipe(
-        rxjs.map(({ tags, response }) => {
+        // feature: create the DOM
+        rxjs.mergeMap(({ tags, response }) => {
             render($page);
             if (tags.length === 0) {
                 $page.classList.add("hidden");
-                return {};
+                return rxjs.EMPTY;
             }
             $page.classList.remove("hidden");
             const $fragment = document.createDocumentFragment();
@@ -280,8 +281,9 @@ async function ctrlTagPane(render, { tags, path }) {
                 }
                 $fragment.appendChild($tag);
             });
-            return { $list: renderTaglist($fragment), response };
+            return rxjs.of({ $list: renderTaglist($fragment), response });
         }),
+        // feature: tag mouse hover effect
         rxjs.tap(({ $list, response }) => {
             if (isMobile) return;
             else if (!response) return;
@@ -296,16 +298,19 @@ async function ctrlTagPane(render, { tags, path }) {
                     if (tags.indexOf(tagname) === -1) continue;
                     paths.push(path);
                 }
-                $tag.onmouseenter = () => document.querySelectorAll(".component_thing").forEach(($thing) => {
-                    const thingpath = $thing.getAttribute("data-path");
-                    for (let i=0; i<paths.length; i++) {
-                        if (paths[i].indexOf(thingpath) === 0) {
-                            $thing.classList.add("hover");
-                            $tag.onmouseleave = () => $thing.classList.remove("hover");
-                            break;
+                $tag.onmouseenter = () => {
+                    const $things = document.querySelectorAll(".component_thing");
+                    $things.forEach(($thing) => {
+                        const thingpath = $thing.getAttribute("data-path");
+                        for (let i=0; i<paths.length; i++) {
+                            if (paths[i].indexOf(thingpath) === 0) {
+                                $thing.classList.add("hover");
+                                break;
+                            }
                         }
-                    }
-                });
+                    });
+                    $tag.onmouseleave = () => $things.forEach(($thing) => $thing.classList.remove("hover"));
+                };
             });
         }),
     ));
diff --git a/public/assets/pages/filespage/modal_tag.css b/public/assets/pages/filespage/modal_tag.css
index 7a4c4028..047524ac 100644
--- a/public/assets/pages/filespage/modal_tag.css
+++ b/public/assets/pages/filespage/modal_tag.css
@@ -9,7 +9,7 @@
     border: 2px solid var(--border);
     border-radius: 5px;
     padding: 5px 10px;
-    color: var(--color);
+    color: rgba(0,0,0,0.75);
     width: 100%;
     display: block;
     box-sizing: border-box;
diff --git a/public/assets/pages/filespage/thing.css b/public/assets/pages/filespage/thing.css
index 2decfacc..ffb83a33 100644
--- a/public/assets/pages/filespage/thing.css
+++ b/public/assets/pages/filespage/thing.css
@@ -254,7 +254,8 @@
 .list > .component_thing.view-grid img.thumbnail {
     transition: 0.2s ease-out transform;
 }
-.list > .component_thing.view-grid.not-selected:hover img.thumbnail {
+.list > .component_thing.view-grid.not-selected:hover img.thumbnail,
+.list > .component_thing.view-grid.not-selected.hover img.thumbnail {
     transform: scale(0.6);
 }
 .list > .component_thing.view-grid.not-selected:hover .image_layer {