From b9cc47cd00645aef93677b2558d60d229b41d2fc Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 2 Aug 2026 15:08:36 +0200
Subject: [PATCH] chore(frontend): organize missing type filter styles

---
 tests/test_css_loader.mjs                     | 19 +++++++++++++++++++
 web/css/README.md                             |  1 +
 .../missing-type-filter.css}                  |  0
 web/utils/css_loader.js                       |  2 +-
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 tests/test_css_loader.mjs
 rename web/{resolver/missing_type_filter.css => css/missing-type-filter.css} (100%)

diff --git a/tests/test_css_loader.mjs b/tests/test_css_loader.mjs
new file mode 100644
index 0000000..96ea605
--- /dev/null
+++ b/tests/test_css_loader.mjs
@@ -0,0 +1,19 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+const loaderSource = await readFile(
+  new URL('../web/utils/css_loader.js', import.meta.url),
+  'utf8'
+);
+const filterStylesheetSource = await readFile(
+  new URL('../web/css/missing-type-filter.css', import.meta.url),
+  'utf8'
+);
+
+test('CSS loader registers the missing model type filter stylesheet', () => {
+  assert.match(loaderSource, /['"]\.\/css\/missing-type-filter\.css['"]/);
+  assert.doesNotMatch(loaderSource, /['"]\.\/resolver\/missing_type_filter\.css['"]/);
+  assert.match(loaderSource, /addStylesheet\(getUrl\(file\)\)/);
+  assert.match(filterStylesheetSource, /\.mr-missing-type-filter-menu/);
+});
diff --git a/web/css/README.md b/web/css/README.md
index 0beb88a..1d32aa3 100644
--- a/web/css/README.md
+++ b/web/css/README.md
@@ -12,6 +12,7 @@ This directory contains the core stylesheets and token system for the `comfyui-m
   5. *Component Tokens, Badges, Shadows & Layout Dimensions* (buttons, inputs, status badges, shadows, gradients, scrollbars, and drawer widths)
 - **`resolver-main.css`**: Styles for the main dialog, missing models browser, tab contents, lists, search tables, and model details views.
 - **`resolver-shell.css`**: Styles for the outer modal shell, sidebar docking panel, window controls, and queue drawer.
+- **`missing-type-filter.css`**: Styles for the Missing Models type filter control and menu.
 
 ## Usage Guidelines
 
diff --git a/web/resolver/missing_type_filter.css b/web/css/missing-type-filter.css
similarity index 100%
rename from web/resolver/missing_type_filter.css
rename to web/css/missing-type-filter.css
diff --git a/web/utils/css_loader.js b/web/utils/css_loader.js
index 73dc566..abc2196 100644
--- a/web/utils/css_loader.js
+++ b/web/utils/css_loader.js
@@ -20,7 +20,7 @@ export function loadAllStyles() {
             './css/css-variables.css',
             './css/resolver-shell.css',
             './css/resolver-main.css',
-            './resolver/missing_type_filter.css',
+            './css/missing-type-filter.css',
         ];
         
         cssFiles.forEach(file => {