From 6bf291a5827d039706916d7e536490bedcc1ca54 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Fri, 16 May 2025 11:56:26 +1000
Subject: [PATCH] fix (tag): UX for tagging

---
 public/assets/pages/filespage/modal_tag.css | 52 ++++++++++++++-------
 public/assets/pages/filespage/modal_tag.js  |  9 ++--
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/public/assets/pages/filespage/modal_tag.css b/public/assets/pages/filespage/modal_tag.css
index dd78b445..36a898ab 100644
--- a/public/assets/pages/filespage/modal_tag.css
+++ b/public/assets/pages/filespage/modal_tag.css
@@ -1,37 +1,55 @@
 .component_tag {
     font-size: 1rem;
 }
+.component_tag [data-bind="taglist"] {
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    margin: -10px;
+    padding: 20px 10px 10px 10px;
+}
 .component_tag input {
-    font-size: 1.15rem;
+    font-size: 1rem;
     border: 2px solid var(--border);
-    border-radius: 3px;
-    padding: 2px 5px;
+    border-radius: 5px;
+    padding: 5px 10px;
     color: var(--color);
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
 }
 .component_tag input::placeholder {
     color: rgba(0,0,0,0.2);
 }
-.component_tag .box {
+.component_tag .tag {
     display: flex;
-    background: var(--bg-color);
-    transition: background 0.1s ease;
-    padding: 2px 5px 2px 8px;
-    border-radius: 3px;
+    background: #f2f2f2;
+    transition: all 0.1s ease;
+    padding: 2px 5px 2px 10px;
+    border-radius: 5px;
+    margin: 0;
     font-size: 0.95rem;
+    cursor: pointer;
 }
-.component_tag .box.active {
-    background: var(--primary);
+.component_tag .tag.active {
+    background: var(--dark);
+    color: #f2f2f2;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 }
-.component_tag .box > div {
-    flex-grow: 1;
-}
-.component_tag .box img {
-    width: 20px;
-    background: rgba(0, 0, 0, 0.05);
+.component_tag .tag svg {
+    width: 15px;
+    height: 15px;
     border-radius: 50%;
     margin-left: 5px;
+    padding: 4px;
 }
-.component_tag .box img[alt="close"] {
+.touch-no .component_tag .tag svg:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+.touch-no .component_tag .tag.active svg:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+.component_tag .tag img[alt="close"] {
     width: 14px;
     padding: 5px;
 }
diff --git a/public/assets/pages/filespage/modal_tag.js b/public/assets/pages/filespage/modal_tag.js
index 628925dc..8a05aad1 100644
--- a/public/assets/pages/filespage/modal_tag.js
+++ b/public/assets/pages/filespage/modal_tag.js
@@ -6,9 +6,12 @@ import t from "../../locales/index.js";
 const ICON_CLOSE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=";
 
 const $tmpl = createElement(`
-    <div class="box no-select">
+    <div class="tag no-select">
         <div class="ellipsis">Projects</div>
-        <img class="component_icon" draggable="false" src="${ICON_CLOSE}" alt="close">
+        <svg class="component_icon" draggable="false" alt="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
     </div>
 `);
 
@@ -22,7 +25,7 @@ export default function(render, { path }) {
     const $modal = createElement(`
         <div class="component_tag">
             <form>
-                <input class="component_input" type="text" placeholder="${t("Create a Tag")}" value="">
+                <input type="text" placeholder="${t("Create a Tag")}" value="">
             </form>
             <div class="scroll-y" data-bind="taglist"></div>
         </div>