From cd1ea0ee2eef5ab8d8d176d71e61b5f93b7a09a5 Mon Sep 17 00:00:00 2001
From: DemonGatanjieu <1027066412@qq.com>
Date: Wed, 16 Sep 2026 18:44:24 +0800
Subject: [PATCH] feat(ui): redesign toolbox into spacious 3-column grid with
 moderate icons and 9-item capacity

---
 ARCHITECTURE.md |  2 +-
 web/styles.css  | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 93a7c29..4c6f905 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -86,7 +86,7 @@ DOM or live LiteGraph state.
 - `sidebar_actions.js` owns the sidebar bottom action hover-reveal short labels (100ms), singleton dynamic DOM tooltip bubbles (`#anomalous-sidebar-tooltip-bubble`, 600ms), and anti-flicker pointer stability guards (opacity-based icon transitions, pointer-events isolation, fixed box model).
 - `tool_registry.js` centralizes metadata, SVG icons, and stable IDs for the 8 catalog tools and 2 fixed anchors (Toolbox and Settings).
 - `shortcut_layout.js` provides tool layout utilities and fallbacks. The bottom shortcut bar maintains the clean fixed 4-tool setup (`scan`, `doctor`, `assistant`, `materials`) plus two anchors (`toolbox`, `settings`), directly executable via click without drag complexity.
-- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a dedicated spacious 2x2 utility catalog (`workflow-transfer`, `prompt-studio`, `prompt-translator`, `model-sources`) with recognizable color emoji icons and direct execution.
+- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a spacious 3-column utility catalog with 9-item capacity (currently holding 4: `workflow-transfer`, `prompt-studio`, `prompt-translator`, `model-sources`) with moderate recognizable color emoji icons and direct execution.
 - `ui_grid.js` and model-detail modules own model presentation; `ui_gallery.js`
   and `ui_gallery_detail.js` own generated-image browsing and inspection.
 - `ui_recipes.js` / `ui_recipe_detail.js`, `ui_notebooks.js`, and `ui_materials.js`
diff --git a/web/styles.css b/web/styles.css
index 71da68f..50e9a3f 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1036,15 +1036,15 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     position: absolute;
     bottom: 50px;
     left: 10px;
-    width: 248px;
-    min-height: auto;
+    width: 256px;
+    min-height: 280px;
     box-sizing: border-box;
     background: rgba(22, 22, 26, 0.98);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 12px;
-    padding: 12px 12px 10px;
+    padding: 12px 10px 10px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
     z-index: 999999 !important;
     transition: left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -1069,8 +1069,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 
 .anomalous-toolbox-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
     margin: 4px 0 6px;
     align-content: start;
     flex: 1;
@@ -1082,12 +1082,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding: 14px 6px 12px;
-    min-height: 72px;
+    padding: 10px 4px 8px;
+    min-height: 62px;
     box-sizing: border-box;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.07);
-    border-radius: 10px;
+    border-radius: 8px;
     cursor: pointer;
     position: relative;
     user-select: none;
@@ -1106,9 +1106,9 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 .anomalous-toolbox-tile-icon {
-    font-size: 26px;
+    font-size: 20px;
     line-height: 1;
-    margin-bottom: 7px;
+    margin-bottom: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1116,7 +1116,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 .anomalous-toolbox-tile-label {
-    font-size: 11.5px;
+    font-size: 11px;
     font-weight: 500;
     color: #e2e8f0;
     white-space: nowrap;
@@ -1147,7 +1147,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     align-items: center;
     justify-content: space-between;
     padding: 6px 4px 2px;
-    margin-top: 4px;
+    margin-top: auto;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
 }