feat(ui): elevate compact layout to primary default with 48px slim industrial header

ARCHITECTURE.md

@@ -93,11 +93,12 @@ DOM or live LiteGraph state.
   the sidebar action bar's circular astrological runic compass watermark (`#anomalous-sidebar-actions::before`) is completely disabled (`display: none !important`), and any backdrop textures are desaturated with `grayscale(100%)` to prevent blue color bleeding;
   all primary action highlights, scan wizard controls, and switches use titanium white (`#e5e7eb` / `#ffffff`) with warm studio amber (`#f59e0b`) accents instead of cold blue/cyan;
   the modal adopts a disciplined "workshop / archive" aesthetic: removing exaggerated `clip-path` chamfers in favor of clean 8px architectural engineering geometry (`border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1)`);
+  the master header (`#anomalous-header`) and sidebar brand bar (`#anomalous-brand-bar`) are tightly calibrated to a 48px slim industrial profile with 32px compact controls, maximizing vertical canvas real estate for model thumbnails;
   supports 3 unified Display Modes sharing identical DOM structure and UX logic:
-  - Standard Mode (标准模式, default): Balanced 200px cards, 340px height, pure solid obsidian canvas with zero wallpaper distraction;
-  - Compact Mode (高密度模式, power users): 140px min-width, 220px card height, 10px gaps, optimized for high-density scanning;
+  - Compact Mode (紧凑模式, primary default): 140px min-width, 220px card height, tight 10px gaps/14px rows, 5px sidebar folder rows, optimized for high-density scanning and instant visual discovery (Blender Asset Browser inspired);
+  - Standard Mode (标准模式, comfortable): Balanced 200px cards, 340px height, comfortable whitespace rhythm;
   - Aesthetic Mode (沉浸模式): Subtle 8% grayscale ambient archive watermark with frosted glass borders;
-  cards feature unified 8px geometry (`border-radius: 8px`), restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`),
+  cards feature unified 6px/8px geometry, restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`),
   seamless docking fallbacks, and a micro-floating capsule tooltip system
   (`.anomalous-tooltip-target`) providing unambiguous, bilingual action semantics across all vector tools.
 - `ui_gallery_detail.js` owns the studio modal Image Detail Workbench,

web/modules/locales.js

@@ -709,8 +709,8 @@ export const i18n = {
         sidebarAllInfoComplete: '✨ 所有模型信息已完整',
         sidebarUiScale: 'UI 缩放',
         sidebarViewMode: '展示模式',
+        sidebarViewModeCompact: '紧凑模式',
         sidebarViewModeStandard: '标准模式',
-        sidebarViewModeCompact: '高密度',
         sidebarViewModeAesthetic: '沉浸模式',
         sidebarBgAtmosphere: '背景氛围',
         sidebarBgAtmosphereHelp: '调节底图星图蓝图的可见度（0%为纯净黑曜石）',
@@ -1775,8 +1775,8 @@ export const i18n = {
         sidebarAllInfoComplete: '✨ All Model Info is Complete',
         sidebarUiScale: 'UI Scale',
         sidebarViewMode: 'View Mode',
-        sidebarViewModeStandard: 'Standard',
         sidebarViewModeCompact: 'Compact',
+        sidebarViewModeStandard: 'Standard',
         sidebarViewModeAesthetic: 'Aesthetic',
         sidebarBgAtmosphere: 'Background Atmosphere',
         sidebarBgAtmosphereHelp: 'Adjust blueprint backdrop opacity (0% is pure solid dark)',

web/modules/ui_sidebar.js

@@ -56,7 +56,7 @@ export function createDOM() {
         const savedBgOpacity = localStorage.getItem('anomalous_bg_opacity') || '0.2';
         container.style.setProperty('--anomalous-bg-opacity', savedBgOpacity);
 
-        const savedViewMode = localStorage.getItem('anomalous_view_mode') || 'standard';
+        const savedViewMode = localStorage.getItem('anomalous_view_mode') || 'compact';
         container.classList.add(`view-mode-${savedViewMode}`);
 
         // Sidebar
@@ -65,7 +65,10 @@ export function createDOM() {
         this.sidebarWrapper.style.position = 'relative';
 
         const brandBar = document.createElement('div');
-        brandBar.style.padding = '15px 15px 10px 15px';
+        brandBar.id = 'anomalous-brand-bar';
+        brandBar.style.padding = '0 14px';
+        brandBar.style.height = '48px';
+        brandBar.style.boxSizing = 'border-box';
         brandBar.style.display = 'flex';
         brandBar.style.alignItems = 'center';
         brandBar.style.justifyContent = 'space-between';
@@ -1559,14 +1562,14 @@ export function createDOM() {
         viewModeGroup.style.border = '1px solid rgba(255, 255, 255, 0.06)';
 
         const modeDefinitions = [
-            { id: 'standard', key: 'sidebarViewModeStandard' },
             { id: 'compact', key: 'sidebarViewModeCompact' },
+            { id: 'standard', key: 'sidebarViewModeStandard' },
             { id: 'aesthetic', key: 'sidebarViewModeAesthetic' }
         ];
 
-        let currentViewMode = localStorage.getItem('anomalous_view_mode') || 'standard';
-        if (!['standard', 'compact', 'aesthetic'].includes(currentViewMode)) {
-            currentViewMode = 'standard';
+        let currentViewMode = localStorage.getItem('anomalous_view_mode') || 'compact';
+        if (!['compact', 'standard', 'aesthetic'].includes(currentViewMode)) {
+            currentViewMode = 'compact';
         }
 
         const modeBtnElements = [];
@@ -1754,7 +1757,7 @@ export function createDOM() {
                 localStorage.removeItem('anomalous_ui_scale');
                 localStorage.removeItem('anomalous_bg_opacity');
                 localStorage.removeItem('anomalous_view_mode');
-                applyViewMode('standard');
+                applyViewMode('compact');
                 container.style.left = '5%';
                 container.style.top = '5%';
                 container.style.width = '90%';

web/styles.css

@@ -313,7 +313,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
 }
 
 #anomalous-header {
-    height: 60px;
+    height: 48px;
     background: var(--comfy-menu-bg, #333);
     display: flex;
     align-items: center;
@@ -514,56 +514,96 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
    Display Modes: Standard, Compact, Aesthetic
    ========================================================================== */
 
-/* Mode 1: Standard (Default) - Clean, balanced, 8px architectural geometry */
-#anomalous-container.view-mode-standard #anomalous-grid,
-#anomalous-container:not(.view-mode-compact):not(.view-mode-aesthetic) #anomalous-grid {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-    row-gap: 28px;
-    padding: 20px;
-}
-
-#anomalous-container.view-mode-standard .anomalous-card,
-#anomalous-container:not(.view-mode-compact):not(.view-mode-aesthetic) .anomalous-card {
-    height: 340px;
-    border-radius: 8px;
-}
-
-/* Mode 2: Compact (Power User / High Density) */
-#anomalous-container.view-mode-compact #anomalous-grid {
+/* Mode 2: Compact (Primary / Default / High Density) */
+#anomalous-container.view-mode-compact #anomalous-grid,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) #anomalous-grid {
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
     gap: 10px !important;
     row-gap: 14px !important;
     padding: 12px !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card {
+#anomalous-container.view-mode-compact .anomalous-card,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card {
     height: 220px !important;
     border-radius: 6px !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card-labels {
-    padding: 6px 8px 6px !important;
+#anomalous-container.view-mode-compact .anomalous-card-labels,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-labels {
+    padding: 18px 8px 6px !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card-title {
+#anomalous-container.view-mode-compact .anomalous-card-title,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-title {
     font-size: 0.82em !important;
-    line-height: 1.2 !important;
+    line-height: 1.25 !important;
+    margin-bottom: 2px !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card-filename {
+#anomalous-container.view-mode-compact .anomalous-card-filename,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-filename {
     font-size: 0.72em !important;
+    opacity: 0.85 !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card-badge {
+#anomalous-container.view-mode-compact .anomalous-card-badge,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-badge {
+    top: 6px !important;
+    left: 6px !important;
+    max-width: 65px !important;
     font-size: 0.65em !important;
     padding: 1px 4px !important;
+    border-radius: 3px !important;
 }
 
-#anomalous-container.view-mode-compact .anomalous-card-action-btn {
+#anomalous-container.view-mode-compact .anomalous-card-action-btn,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn {
     width: 22px !important;
     height: 22px !important;
-    font-size: 0.72em !important;
+    top: 6px !important;
+    font-size: 11px !important;
+    border-radius: 4px !important;
+}
+
+#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-apply,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-apply {
+    right: 6px !important;
+}
+
+#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-scan,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-scan {
+    right: 32px !important;
+}
+
+#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-edit,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-edit {
+    right: 58px !important;
+}
+
+#anomalous-container.view-mode-compact .anomalous-folder-item,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-folder-item {
+    padding: 5px 12px !important;
+    font-size: 0.86em !important;
+}
+
+#anomalous-container.view-mode-compact .anomalous-type-header,
+#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-type-header {
+    padding: 6px 12px !important;
+    font-size: 0.85em !important;
+}
+
+/* Mode 1: Standard - Clean, balanced, 8px architectural geometry */
+#anomalous-container.view-mode-standard #anomalous-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    row-gap: 28px;
+    padding: 20px;
+}
+
+#anomalous-container.view-mode-standard .anomalous-card {
+    height: 340px;
+    border-radius: 8px;
 }
 
 /* Mode 3: Aesthetic (Subtle Ambient Depth) */
@@ -11718,15 +11758,25 @@ button:hover .anomalous-btn-icon {
    ========================================================================== */
 
 /* 1. Normal Mode Master Header (Neutral Charcoal Frosted Glass) */
+#anomalous-brand-bar {
+    height: 48px !important;
+    padding: 0 14px !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
 #anomalous-header {
-    height: 60px;
+    height: 48px !important;
     background: rgba(20, 20, 23, 0.85) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     display: flex !important;
     align-items: center !important;
     justify-content: space-between !important;
-    padding: 0 20px !important;
+    padding: 0 16px !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
     cursor: move;
@@ -11766,7 +11816,9 @@ button:hover .anomalous-btn-icon {
 
 #anomalous-header button {
     margin-right: 0;
-    padding: 8px 18px;
+    padding: 6px 14px;
+    height: 32px;
+    box-sizing: border-box;
     background: rgba(255, 255, 255, 0.05);
     color: #d1d5db;
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -11776,7 +11828,7 @@ button:hover .anomalous-btn-icon {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 0.96em;
+    font-size: 0.9em;
     font-weight: 500;
     backdrop-filter: blur(8px);
     transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -11791,7 +11843,9 @@ button:hover .anomalous-btn-icon {
 }
 
 #anomalous-dock-btn {
-    padding: 8px 12px !important;
+    padding: 6px 10px !important;
+    height: 32px !important;
+    box-sizing: border-box !important;
     display: inline-flex !important;
     align-items: center;
     justify-content: center;