Top sidebar button.

README.md

@@ -28,11 +28,28 @@ Currently it is still missing some features it should have.
 
 ## TODO:
 
-### Downloading tab
+### Model Copying
 
-- ☐ Replace Install tab with Downloading tab (more practical IMO).
+- ☐ Copy image?
-- ☐ Download a model from a url.
+
-- ☐ Choose save path/directory to download within vaild model directories. (Alert Yes/No if need to create new dirs?)
+### Model info window/panel (server load/send on demand)
+
+- ☐ Info icon `ⓘ` button to view.
+- ☐ Optional (re)download `📥︎` model info from the internet and cache the text file locally. (requires checksum?)
+  - ☐ Radio buttons to swap between downloaded and server view.
+- ☐ Delete model with warning popup.
+
+### Settings
+
+- ☐ Add `settings.yaml` and add file to `.gitignore`. (Generate if not there.)
+- ☐ Exclude hidden folders with a `.` prefix.
+- ☐ Include a optional string to always add to searches.
+- ☐ Enable optional checksum to detect if a model is already downloaded.
+- ☐ Enable/Disable add and copy buttons.
+- ☐ Allow user to drag width of sidebar or height of bottom bar and remember it.
+- ☐ Hide/Show model extension.
+- ☐ Optionally remove embedding extension.
+- ☐ Strict model drag on node widget textbox.
 
 ### Search filtering and sort
 
@@ -47,24 +64,6 @@ Currently it is still missing some features it should have.
   - ☐ Frequently used (ascending/decending)
 - ☐ `or` vs `and` type of keyword search (currently `and`)
 
-### Settings
-
-- ☐ Add `settings.yaml` and add file to `.gitignore`.
-- ☐ Exclude hidden folders with a `.` prefix.
-- ☐ Include a optional string to always add to searches.
-- ☐ Enable optional checksum to detect if a model is already downloaded.
-- ☐ Enable/Disable add and copy buttons.
-- ☐ Allow user to drag width of sidebar or height of bottom bar and remember it.
-- ☐ Hide/Show model extension.
-- ☐ Optionally remove embedding extension.
-- ☐ Strict model drag on node widget textbox.
-
-### Model info window/panel (server load/send on demand)
-
-- ☐ Info icon `ⓘ` button to view.
-- ☐ Optional (re)download `📥︎` model info from the internet and cache the text file locally. (requires checksum?)
-- ☐ Delete model with warning popup.
-
 ### Image preview
 
 - ☐ Support multiple preview images. (swipe?)
@@ -76,3 +75,11 @@ Currently it is still missing some features it should have.
 
 - ☐ Proper naming and labeling.
 - ☐ Tool tips?
+
+### Directory Browser and Downloading tab
+
+(NOTE: It is a impossible to put a model automatically in the correct folder if model type information is not given or ambigious. To fully solve this requires making a file browser where files can be moved around.)
+
+- ☐ Replace Install tab with Downloading tab (more practical IMO).
+- ☐ Download a model from a url.
+- ☐ Choose save path/directory to download within vaild model directories. (Alert Yes/No if need to create new dirs?)

web/model-manager.css

@@ -186,6 +186,11 @@
     left: 25%;
 }
 
+.model-manager.sidebar-top {
+    height: 50%;
+    top: 25%;
+}
+
 .model-manager.sidebar-bottom {
     height: 50%;
     top: 75%;

web/model-manager.js

@@ -293,7 +293,6 @@ class ModelGrid {
         }, 500, element, name);
     }
 
-    
     static #addModel(event, modelType, path) {
         let successful = false;
         if (modelType !== "embeddings") {
@@ -524,7 +523,7 @@ class ModelManager extends ComfyDialog {
                 parent: document.body,
             },
             [
-                $el("div.comfy-modal-content", [
+                $el("div.comfy-modal-content", [ // TODO: settings.top_bar_left_to_right or settings.top_bar_right_to_left
                     $el("div.topbar-buttons",
                         [
                             $el("div.sidebar-buttons",
@@ -536,6 +535,10 @@ class ModelManager extends ComfyDialog {
                                     textContent: "◧",
                                     onclick: (event) => this.#setSidebar(event),
                                 }),
+                                $el("button.icon-button", {
+                                    textContent: "⬒",
+                                    onclick: (event) => this.#setSidebar(event),
+                                }),
                                 $el("button.icon-button", {
                                     textContent: "⬓",
                                     onclick: (event) => this.#setSidebar(event),
@@ -746,6 +749,7 @@ class ModelManager extends ComfyDialog {
 
     #modelGridUpdate() {
         const searchText = this.#el.modelContentFilter.value;
+        // TODO: settings.always_append_to_search
         const modelType = this.#el.modelTypeSelect.value;
         const models = this.#data.models;
         const modelList = ModelGrid.filter(models[modelType], searchText);
@@ -776,7 +780,7 @@ class ModelManager extends ComfyDialog {
         }
 
         const modelManager = this.element;
-        const sidebarStates = ["sidebar-left", "sidebar-bottom", "sidebar-right"];
+        const sidebarStates = ["sidebar-left", "sidebar-top", "sidebar-bottom", "sidebar-right"];
         let stateIndex;
         for (stateIndex = 0; stateIndex < sidebarStates.length; stateIndex++) {
             const state = sidebarStates[stateIndex];
@@ -826,5 +830,3 @@ app.registerExtension({
         );
     },
 });
-
-// ◧ ◨ ⬒ ⬓ ⛶ ✚