From 9194c0b8b2f249e639ffa720016574398b343d95 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 18 Mar 2024 21:59:41 -0400
Subject: [PATCH] fix more bugs. clean up more.

---
 html/extra-networks-pane-dirs.html        |   9 -
 html/extra-networks-pane-tree.html        |  13 -
 html/extra-networks-pane.html             |  57 ++-
 javascript/extraNetworks.js               | 407 ++++++++++-----------
 javascript/extraNetworksClusterizeList.js |  87 +++--
 modules/shared_options.py                 |   4 +-
 modules/ui_extra_networks.py              | 410 ++++++++++------------
 style.css                                 | 164 ++++-----
 8 files changed, 561 insertions(+), 590 deletions(-)
 delete mode 100644 html/extra-networks-pane-dirs.html
 delete mode 100644 html/extra-networks-pane-tree.html

diff --git a/html/extra-networks-pane-dirs.html b/html/extra-networks-pane-dirs.html
deleted file mode 100644
index 3ded6f12a..000000000
--- a/html/extra-networks-pane-dirs.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="extra-network-content extra-network-content--dirs">
-    <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs-view'>
-        {dirs_html}
-    </div>
-    <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll'>
-        <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'></div>
-    </div>
-</div>
-{cards_data_div}
diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html
deleted file mode 100644
index 2ee0d3c0b..000000000
--- a/html/extra-networks-pane-tree.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="extra-network-content extra-network-content--tree resize-handle-row">
-    <div
-        id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
-        class='extra-network-tree clusterize-scroll {tree_list_scroll_area_div_extra_class}'
-        style='flex-basis: {extra_networks_tree_view_default_width}px;'>
-        <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area' class='extra-network-tree-content clusterize-content'></div>
-    </div>
-    <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll' style='flex-grow: 1;'>
-        <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'></div>
-    </div>
-</div>
-{tree_data_div}
-{cards_data_div}
\ No newline at end of file
diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index fab128471..7b7de80f1 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -1,5 +1,5 @@
-<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane {tree_view_div_default_display_class}'>
-    <div id="{tabname}_{extra_networks_tabname}_controls" class="extra-network-control" style="display:none">
+<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
+    <div id="{tabname}_{extra_networks_tabname}_controls" class="extra-network-controls" style="display:none">
         <div class="extra-network-control--search">
             <span class="extra-network-control--search-icon">
                 <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
@@ -12,16 +12,16 @@
                 type="text"
                 placeholder="Search"
             >
-            <button role="button" class="extra-network-control--search-clear" onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
+            <button role="button" class="extra-network-control extra-network-control--search-clear" onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
                 <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
                     <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path>
                 </svg>
             </button>
         </div>
-        <small>Sort: </small>
-        <div 
+        <small>Sort<br>Mode</small>
+        <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_path"
-            class="extra-network-control--sort-mode {sort_path_active}"
+            class="extra-network-control extra-network-control--sort-mode {sort_path_active}"
             data-sort-mode="path"
             title="Sort by path"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
@@ -30,7 +30,7 @@
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_name"
-            class="extra-network-control--sort-mode {sort_name_active}"
+            class="extra-network-control extra-network-control--sort-mode {sort_name_active}"
             data-sort-mode="name"
             title="Sort by name"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
@@ -39,7 +39,7 @@
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_date_created"
-            class="extra-network-control--sort-mode {sort_date_created_active}"
+            class="extra-network-control extra-network-control--sort-mode {sort_date_created_active}"
             data-sort-mode="date_created"
             title="Sort by date created"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
@@ -48,7 +48,7 @@
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_date_modified"
-            class="extra-network-control--sort-mode {sort_date_modified_active}"
+            class="extra-network-control extra-network-control--sort-mode {sort_date_modified_active}"
             data-sort-mode="date_modified"
             title="Sort by date modified"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
@@ -59,19 +59,25 @@
         <small> </small>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
-            class="extra-network-control--sort-dir"
+            class="extra-network-control extra-network-control--sort-dir"
             data-sort-dir="{data_sort_dir}"
             title="Sort ascending"
             onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
             <i class="extra-network-control--icon extra-network-control--icon"></i>
         </div>
-
-
         <small> </small>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_dirs_view"
+            class="extra-network-control extra-network-control--dirs-view {btn_dirs_view_enabled_class}"
+            title="Enable Directory View"
+            onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--icon extra-network-control--dirs-view-icon"></i>
+        </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_tree_view"
-            class="extra-network-control--tree-view {tree_view_btn_extra_class}"
+            class="extra-network-control extra-network-control--tree-view {btn_tree_view_enabled_class}"
             title="Enable Tree View"
             onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
@@ -79,12 +85,33 @@
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_refresh"
-            class="extra-network-control--refresh"
+            class="extra-network-control extra-network-control--refresh"
             title="Refresh page"
             onclick="extraNetworksControlRefreshOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
             <i class="extra-network-control--icon extra-network-control--refresh-icon"></i>
         </div>
     </div>
-    {pane_content}
+    <div id="{tabname}_{extra_networks_tabname}_pane_content" class="extra-network-content extra-network-content--container">
+        <div id='{tabname}_{extra_networks_tabname}_dirs' class="extra-network-content extra-network-content--dirs {dirs_default_display_class}">
+            {dirs_html}
+        </div>
+        <div class="extra-network-content extra-network-content--cards resize-handle-row">
+            <div
+                id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
+                class='extra-network-tree clusterize-scroll {tree_default_display_class}'
+                style='flex-basis: {extra_networks_tree_view_default_width}px;'>
+                <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area' class='extra-network-tree-content clusterize-content'>
+                    <div class="clusterize-no-data">Loading...</div>
+                </div>
+            </div>
+            <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll' style='flex-grow: 1;'>
+                <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'>
+                    <div class="clusterize-no-data">Loading...</div>
+                </div>
+            </div>
+        </div>
+        {tree_data_div}
+        {cards_data_div}
+    </div>
 </div>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 737052e0b..fd30d085a 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -2,23 +2,20 @@ const re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/;
 const re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g;
 const re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/;
 const re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g;
-const extraNetworksApplyFilter = {};
-const extraNetworksApplySort = {};
 const activePromptTextarea = {};
 const clusterizers = {};
+const clusterizers_initial_load = {};
 const extra_networks_json_proxy = {};
 const extra_networks_proxy_listener = setupProxyListener(
     extra_networks_json_proxy,
-    function() {},
+    () => {},
     proxyJsonUpdated,
 );
 var globalPopup = null;
 var globalPopupInner = null;
 const storedPopupIds = {};
 const extraPageUserMetadataEditors = {};
-const uiAfterScriptsCallbacks = [];
-var uiAfterScriptsTimeout = null;
-var executedAfterScripts = false;
+var initialUiOptionsLoaded = false;
 
 function waitForElement(selector) {
     /** Promise that waits for an element to exist in DOM. */
@@ -34,7 +31,6 @@ function waitForElement(selector) {
             }
         });
 
-        // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
         observer.observe(document.documentElement, {
             childList: true,
             subtree: true
@@ -44,9 +40,32 @@ function waitForElement(selector) {
 
 function waitForInitialUiOptionsLoaded() {
     return new Promise(resolve => {
-        (function _wait_for_bool() {
+        (function _waitForBool() {
             if (initialUiOptionsLoaded) return resolve();
-            setTimeout(_wait_for_bool, 100);
+            setTimeout(_waitForBool, 100);
+        })();
+    });
+}
+
+function waitForKeyInObject(obj) {
+    // obj must be object of form {obj: <object to watch for key>, k: <key to watch>, }
+    return new Promise(resolve => {
+        (function _waitForKeyInObject() {
+            if (obj.k in obj.obj) {
+                return resolve();
+            }
+            setTimeout(_waitForKeyInObject, 100);
+        })();
+    });
+}
+
+function waitForValueInObject(obj) {
+    return new Promise(resolve => {
+        (function _waitForValueInObject() {
+            if (obj.k in obj.obj && obj.obj[obj.k] == obj.v) {
+                return resolve();
+            }
+            setTimeout(_waitForValueInObject, 100);
         })();
     });
 }
@@ -67,13 +86,12 @@ function setupProxyListener(target, pre_handler, post_handler) {
 function proxyJsonUpdated(k, v) {
     /** Callback triggered when JSON data is updated by the proxy listener. */
     // use `this` for current object
-    // We don't do error handling here because we want to fail gracefully if data is
-    // not yet present.
     if (!(v.dataset.tabnameFull in clusterizers)) {
         // Clusterizers not yet initialized.
         return;
     }
     clusterizers[v.dataset.tabnameFull][v.dataset.proxyName].parseJson(v.dataset.json);
+    clusterizers_initial_load[v.dataset.tabnameFull] = true;
 }
 
 function toggleCss(key, css, enable) {
@@ -94,145 +112,107 @@ function toggleCss(key, css, enable) {
 }
 
 function extraNetworksRefreshTab(tabname_full) {
-    if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
-        // Reapply controls since they don't change on refresh.
-        let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
-        let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`);
+    clusterizers_initial_load[tabname_full] = false;
+    // Reapply controls since they don't change on refresh.
+    let btn_dirs_view = gradioApp().querySelector(`#${tabname_full}_extra_dirs_view`);
+    let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
 
-        if (btn_tree_view.classList.contains("extra-network-control--enabled")) {
-            div_tree_list.classList.toggle("hidden", false); // unhide
-        } else {
-            div_tree_list.classList.toggle("hidden", true); // hide
-        }
-    }
+    let div_dirs = gradioApp().querySelector(`#${tabname_full}_dirs`);
+    let div_tree = gradioApp().querySelector(`#${tabname_full}_tree_list_scroll_area`);
 
-    // If clusterizer isnt initialized for tab, just return.
-    if (!(tabname_full in clusterizers)) {
-        return;
-    }
+    // Remove "hidden" class if button is enabled, otherwise add it.
+    div_dirs.classList.toggle("hidden", !btn_dirs_view.classList.contains("extra-network-control--enabled"));
+    div_tree.classList.toggle("hidden", !btn_tree_view.classList.contains("extra-network-control--enabled"));
 
-    extraNetworksEnableClusterizer(tabname_full);
-
-    // Force check update of data.
-    for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) {
-        extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
-    }
-
-    // Rebuild to both update the data and to refresh the sizes of rows.
-    extraNetworksRebuildClusterizers(tabname_full);
+    waitForKeyInObject({k: tabname_full, v: clusterizers}).then(() => {
+        extraNetworksClusterizersEnable(tabname_full);
+        extraNetworksForceUpdateData(tabname_full);
+        extraNetworksClusterizersRebuild(tabname_full, false);
+    });
 }
 
-function setupExtraNetworksForTab(tabname) {
-    function registerPrompt(tabname, id) {
-        var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
+function extraNetworksRegisterPromptForTab(tabname, id) {
+    var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
 
-        if (!activePromptTextarea[tabname]) {
-            activePromptTextarea[tabname] = textarea;
-        }
-
-        textarea.addEventListener("focus", function() {
-            activePromptTextarea[tabname] = textarea;
-        });
+    if (!activePromptTextarea[tabname]) {
+        activePromptTextarea[tabname] = textarea;
     }
 
-    var tabnav = gradioApp().querySelector(`#${tabname}_extra_tabs > div.tab-nav`);
-    var controlsDiv = document.createElement("div");
-    controlsDiv.classList.add("extra-networks-controls-div");
-    tabnav.appendChild(controlsDiv);
-    tabnav.insertBefore(controlsDiv, null);
-
-    var this_tab = gradioApp().querySelector(`#${tabname}_extra_tabs`);
-    this_tab.querySelectorAll(`:scope > .tabitem[id^="${tabname}_"]`).forEach(function(elem) {
-        console.log("SETTING UP TAB:", elem.id);
-        let tabname_full = elem.id;
-        let txt_search;
-
-        var applyFilter = function() {
-            if (!(tabname_full in clusterizers)) {
-                console.error(`applyFilter: ${tabname_full} not in clusterizers:`);
-                return;
-            }
-            // We only want to sort/filter cards lists
-            clusterizers[tabname_full].cards_list.applyFilter(txt_search.value);
-        };
-        extraNetworksApplyFilter[tabname_full] = applyFilter;
-
-        var applySort = function() {
-            if (!(tabname_full in clusterizers)) {
-                console.error(`applySort: ${tabname_full} not in clusterizers:`);
-                return;
-            }
-            // We only want to sort/filter cards lists
-            clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts
-        };
-        extraNetworksApplySort[tabname_full] = applySort;
-        /** #TODO
-         * Figure out if we can use the following in the clusterize setup:
-         * var frag = document.createDocumentFragment();
-         * sortedCards.forEach(function(card) {
-         *     frag.appendChild(card);
-         * });
-         * parent.appendChild(frag);
-         */
-
-        // Wait for all required elements before setting up the tab.
-        waitForInitialUiOptionsLoaded()
-            .then(() => {
-                waitForElement(`#${tabname_full}_extra_search`)
-                    .then((el) => { txt_search = el; return; });
-            })
-            .then(() => {
-                if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
-                    waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`)
-                        .then(() => { return; });
-                } else {
-                    waitForElement(`#${tabname_full}_dirs`)
-                        .then(() => { return; });
-                }
-            })
-            .then(() => {
-                waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`)
-                    .then(() => { return; });
-            })
-            .then(() => {
-                // Now that we have our elements in DOM, we create the clusterize lists.
-                clusterizers[tabname_full] = {
-                    cards_list: new ExtraNetworksClusterizeCardsList({
-                            scroll_id: `${tabname_full}_cards_list_scroll_area`,
-                            content_id: `${tabname_full}_cards_list_content_area`,
-                    }),
-                };
-
-                if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
-                    clusterizers[tabname_full].tree_list = new ExtraNetworksClusterizeTreeList({
-                        scroll_id: `${tabname_full}_tree_list_scroll_area`,
-                        content_id: `${tabname_full}_tree_list_content_area`,
-                    });
-                }
-
-                // Debounce search text input. This way we only search after user is done typing.
-                let typing_timer;
-                let done_typing_interval_ms = 250;
-                txt_search.addEventListener("keyup", () => {
-                    clearTimeout(typing_timer);
-                    if (txt_search.value) {
-                        typing_timer = setTimeout(applyFilter, done_typing_interval_ms);
-                    }
-                });
-
-                txt_search.addEventListener("extra-network-control--search-clear", applyFilter);
-
-                // Insert the controls into the page.
-                var controls = gradioApp().querySelector(`#${tabname_full}_controls`);
-                controlsDiv.insertBefore(controls, null);
-                if (elem.style.display != "none") {
-                    extraNetworksShowControlsForPage(tabname, tabname_full);
-                }
-            });
+    textarea.addEventListener("focus", function() {
+        activePromptTextarea[tabname] = textarea;
     });
+}
 
-    registerPrompt(tabname, `${tabname}_prompt`);
-    registerPrompt(tabname, `${tabname}_neg_prompt`);
+function extraNetworksSetupTabContent(tabname, pane, controls_div) {
+    let tabname_full = pane.id;
+    let txt_search;
+
+    Promise.all([
+        waitForElement(`#${tabname_full}_extra_search`).then((elem) => txt_search = elem),
+        waitForElement(`#${tabname_full}_dirs`),
+        waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`),
+        waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`),
+    ]).then(() => {
+        // Now that we have our elements in DOM, we create the clusterize lists.
+        clusterizers[tabname_full] = {
+            cards_list: new ExtraNetworksClusterizeCardsList({
+                    scroll_id: `${tabname_full}_cards_list_scroll_area`,
+                    content_id: `${tabname_full}_cards_list_content_area`,
+                    txt_search_elem: txt_search,
+            }),
+            tree_list: new ExtraNetworksClusterizeTreeList({
+                scroll_id: `${tabname_full}_tree_list_scroll_area`,
+                content_id: `${tabname_full}_tree_list_content_area`,
+                txt_search_elem: txt_search,
+            }),
+        };
+
+        clusterizers_initial_load[tabname_full] = false;
+
+        // Debounce search text input. This way we only search after user is done typing.
+        let typing_timer;
+        let done_typing_interval_ms = 250;
+        txt_search.addEventListener("keyup", () => {
+            clearTimeout(typing_timer);
+            if (txt_search.value) {
+                typing_timer = setTimeout(
+                    extraNetworksApplyFilter(tabname_full),
+                    done_typing_interval_ms,
+                );
+            }
+        });
+
+        // Update search filter whenever the search input's clear button is pressed.
+        txt_search.addEventListener("extra-network-control--search-clear", () => {extraNetworksApplyFilter(tabname_full);});
+
+        // Insert the controls into the page.
+        var controls = gradioApp().querySelector(`#${tabname_full}_controls`);
+        controls_div.insertBefore(controls, null);
+        if (pane.style.display != "none") {
+            extraNetworksShowControlsForPage(tabname, tabname_full);
+        }
+    })
+}
+
+function extraNetworksSetupTab(tabname) {
+    let this_tab;
+    let tab_nav;
+    let controls_div;
+    Promise.all([
+        waitForElement(`#${tabname}_extra_tabs`).then((elem) => this_tab = elem),
+        waitForElement(`#${tabname}_extra_tabs > div.tab-nav`).then((elem) => tab_nav = elem),
+    ]).then(() => {
+        controls_div = document.createElement("div");
+        controls_div.classList.add("extra-network-controls-div");
+        tab_nav.appendChild(controls_div);
+        tab_nav.insertBefore(controls_div, null);
+        this_tab.querySelectorAll(`:scope > .tabitem[id^="${tabname}_"]`).forEach((elem) => {
+            extraNetworksSetupTabContent(tabname, elem, controls_div);
+        });
+    }).then(() => {
+        extraNetworksRegisterPromptForTab(tabname, `${tabname}_prompt`);
+        extraNetworksRegisterPromptForTab(tabname, `${tabname}_neg_prompt`);
+    });
 }
 
 function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) {
@@ -262,59 +242,55 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp
 
 
 function extraNetworksShowControlsForPage(tabname, tabname_full) {
-    gradioApp().querySelectorAll(`#${tabname}_extra_tabs .extra-networks-controls-div > div`).forEach(function(elem) {
-        var targetId = `${tabname_full}_controls`;
-        elem.style.display = elem.id == targetId ? "" : "none";
+    gradioApp().querySelectorAll(`#${tabname}_extra_tabs .extra-network-controls-div > div`).forEach((elem) => {
+        elem.style.display = `${tabname_full}_controls` === elem.id ? "" : "none";
     });
 }
 
 
 function extraNetworksUnrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
     extraNetworksMovePromptToTab(tabname, '', false, false);
-
     extraNetworksShowControlsForPage(tabname, null);
 }
 
 function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, tabname_full) { // called from python when user selects an extra networks tab
     extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
-
     extraNetworksShowControlsForPage(tabname, tabname_full);
 
-    for (_tabname_full of Object.keys(clusterizers)) {
-        for (const k of Object.keys(clusterizers[_tabname_full])) {
-            if (_tabname_full === tabname_full) {
-                // Set the selected tab as active since it is now visible on page.
-                clusterizers[_tabname_full][k].enable();
-            } else {
-                // Deactivate all other tabs since they are no longer visible.
-                clusterizers[_tabname_full][k].disable();
-            }
-        }
+    Promise.all([
+        waitForKeyInObject({obj: clusterizers, k: tabname_full}),
+        waitForValueInObject({obj: clusterizers_initial_load, k: tabname_full, v: true}),
+    ]).then(() => {
+        extraNetworksClusterizersEnable(tabname_full);
+        extraNetworksForceUpdateData(tabname_full);
+        extraNetworksClusterizersRebuild(tabname_full, false);
+    });
+}
+
+function extraNetworksApplyFilter(tabname_full) {
+    if (!(tabname_full in clusterizers)) {
+        console.error(`${tabname_full} not in clusterizers.`);
+        return;
     }
 
-    for (const v of Object.values(clusterizers[tabname_full])) {
-        if (!document.body.contains(v.scroll_elem)) {
-            v.rebuild();
-        }
-    }
+    // We only want to filter/sort the cards list.
+    clusterizers[tabname_full].cards_list.applyFilter();
 }
 
-function applyExtraNetworkFilter(tabname_full) {
-    setTimeout(extraNetworksApplyFilter[tabname_full], 1);
-}
-
-function applyExtraNetworkSort(tabname_full) {
-    setTimeout(extraNetworksApplySort[tabname_full], 1);
-}
-
-function setupExtraNetworksData() {
-    // Manually force read the json data.
-    for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) {
+function extraNetworksForceUpdateData(tabname_full) {
+    for (const elem of gradioApp().querySelectorAll(`.extra-network-script-data[data-tabname-full="${tabname_full}"]`)) {
         extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
     }
 }
 
-function extraNetworksUpdateClusterizersRows(tabname_full) {
+function extraNetworksSetupData() {
+    // Manually force read the json data.
+    for (const elem of gradioApp().querySelectorAll(".extra-network-script-data")) {
+        extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
+    }
+}
+
+function extraNetworksClusterizersUpdateRows(tabname_full) {
     if (tabname_full !== undefined && tabname_full in clusterizers) {
         for (const v of Object.values(clusterizers[tabname_full])) {
             v.updateRows();
@@ -330,33 +306,30 @@ function extraNetworksUpdateClusterizersRows(tabname_full) {
     }
 }
 
-function extraNetworksEnableClusterizer(tabname_full) {
+function extraNetworksClusterizersEnable(tabname_full) {
     // iterate over tabnames
     for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) {
         // iterate over clusterizers in tab
         for (const v of Object.values(tab_clusterizers)) {
-            if (_tabname_full === tabname_full) {
-                // Set the selected tab as active since it is now visible on page.
-                v.enable();
-            } else {
-                // Deactivate all other tabs since they are no longer visible.
-                v.disable();
-            }
+            // Enable the active tab, disable all others.
+            v.enable(_tabname_full === tabname_full);
         }
     }
 }
 
-function extraNetworksRebuildClusterizers(tabname_full) {
-    // iterate over tabnames
+function extraNetworksClusterizersRebuild(tabname_full, force) {
+    // rebuild only the specified tab
+    if (tabname_full in clusterizers) {
+        for (const v of Object.values(clusterizers[tabname_full])) {
+            v.rebuild(force);
+        }
+        return;
+    }
+
+    // rebuild all
     for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) {
-        // iterate over clusterizers in tab
         for (const v of Object.values(tab_clusterizers)) {
-            // If `tabname_full` isn't passed in, then rebuild all.
-            // If passed `tabname_full` is this tab, then rebuild.
-            // All other cases, we do not rebuild the tab.
-            if (tabname_full === undefined || _tabname_full === tabname_full) {
-                v.rebuild();
-            }
+            v.rebuild(force);
         }
     }
 }
@@ -369,7 +342,7 @@ function extraNetworksSetupEventHandlers() {
         clearTimeout(resize_timer);
         resize_timer = setTimeout(function() {
             // Update rows for each list.
-            extraNetworksUpdateClusterizersRows();
+            extraNetworksClusterizersUpdateRows();
         }, 500); // ms
     });
 
@@ -377,7 +350,7 @@ function extraNetworksSetupEventHandlers() {
     window.addEventListener("resizeHandleResized", (e) => {
         const tabname_full = e.target.closest(".extra-network-pane").id.replace("_pane", "");
         // Force update rows after resizing.
-        extraNetworksUpdateClusterizersRows(tabname_full);
+        extraNetworksClusterizersUpdateRows(tabname_full);
     });
 
     window.addEventListener("resizeHandleDblClick", (e) => {
@@ -409,24 +382,24 @@ function extraNetworksSetupEventHandlers() {
 
         // Add the container's padding to the result.
         max_width += content_lpad + content_rpad;
-
         // Add the scrollbar's width to the result. Will add 0 if scrollbar isnt present.
         max_width += scroll_area.offsetWidth - scroll_area.clientWidth;
-
         // Add the resize handle's padding to the result and default to minLeftColWidth if necessary.
         max_width = Math.max(max_width + e.detail.pad, e.detail.minLeftColWidth);
 
         e.detail.setLeftColGridTemplate(e.target, max_width);
 
-        extraNetworksUpdateClusterizersRows(tabname_full);
+        extraNetworksClusterizersUpdateRows(tabname_full);
     });
 }
 
 function setupExtraNetworks() {
-    setupExtraNetworksForTab('txt2img');
-    setupExtraNetworksForTab('img2img');
-
-    extraNetworksSetupEventHandlers();
+    waitForInitialUiOptionsLoaded().then(() => {
+        extraNetworksSetupTab('txt2img');
+        extraNetworksSetupTab('img2img');
+    }).then(() => {
+        extraNetworksSetupEventHandlers();
+    });
 }
 
 function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
@@ -574,7 +547,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) {
         var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`);
         search_input_elem.value = _search_text;
         updateInput(search_input_elem);
-        applyExtraNetworkFilter(tabname_full);
+        extraNetworksApplyFilter(tabname_full);
     }
 
 
@@ -586,7 +559,6 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) {
         if ("selected" in btn.dataset) {
             // If folder is selected, deselect button.
             delete btn.dataset.selected;
-            _expandOrCollapse(btn);
             _updateSearch("");
         } else {
             // If folder is not selected, select it.
@@ -646,7 +618,7 @@ function extraNetworkDirsOnClick(event, tabname_full) {
     }
     
     updateInput(txt_search);
-    applyExtraNetworkFilter(tabname_full);
+    extraNetworksApplyFilter(tabname_full);
 }
 
 function extraNetworksControlSearchClearOnClick(event, tabname_full) {
@@ -681,7 +653,7 @@ function extraNetworksControlSortModeOnClick(event, tabname_full) {
 
     if (tabname_full in clusterizers) {
         clusterizers[tabname_full].cards_list.setSortMode(self);
-        applyExtraNetworkSort(tabname_full);
+        extraNetworksApplyFilter(tabname_full);
     }
 }
 
@@ -706,7 +678,7 @@ function extraNetworksControlSortDirOnClick(event, tabname_full) {
 
     if (tabname_full in clusterizers) {
         clusterizers[tabname_full].cards_list.setSortDir(event.currentTarget);
-        applyExtraNetworkSort(tabname_full);
+        extraNetworksApplyFilter(tabname_full);
     }
 }
 
@@ -724,13 +696,26 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
     button.classList.toggle("extra-network-control--enabled");
     var show = !button.classList.contains("extra-network-control--enabled");
 
-    if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) {
-        gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
-    } else {
-        gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", show);
-    }
+    gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
+    extraNetworksClusterizersUpdateRows(tabname_full);
+}
 
-    extraNetworksUpdateClusterizersRows(tabname_full);
+function extraNetworksControlDirsViewOnClick(event, tabname_full) {
+    /**
+     * Handles `onclick` events for the Dirs View button.
+     *
+     * Toggles the directory view in the extra networks pane.
+     *
+     * @param event         The generated event.
+     * @param tabname_full  The full active tabname.
+     *                      i.e. txt2img_lora, img2img_checkpoints, etc.
+     */
+    var button = event.currentTarget;
+    button.classList.toggle("extra-network-control--enabled");
+    var show = !button.classList.contains("extra-network-control--enabled");
+
+    gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", show);
+    extraNetworksClusterizersUpdateRows(tabname_full);
 }
 
 function extraNetworksControlRefreshOnClick(event, tabname_full) {
@@ -951,7 +936,5 @@ window.addEventListener("keydown", function(event) {
     }
 });
 
-var initialUiOptionsLoaded = false;
-
 onUiLoaded(setupExtraNetworks);
-onOptionsChanged(function() { initialUiOptionsLoaded = true; });
\ No newline at end of file
+onOptionsChanged(() => initialUiOptionsLoaded = true);
\ No newline at end of file
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index 8369337f3..573205b54 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -83,10 +83,12 @@ const calcRowsPerCol = function(container, parent) {
 }
 
 class ExtraNetworksClusterize {
+    /** Base class for a clusterize list. Cannot be used directly. */
     constructor(
         {
             scroll_id,
             content_id,
+            txt_search_elem,
             rows_in_block = 10,
             blocks_in_cluster = 4,
             show_no_data_row = true,
@@ -107,6 +109,7 @@ class ExtraNetworksClusterize {
 
         this.scroll_id = scroll_id;
         this.content_id = content_id;
+        this.txt_search_elem = txt_search_elem;
         this.rows_in_block = rows_in_block;
         this.blocks_in_cluster = blocks_in_cluster;
         this.show_no_data_row = show_no_data_row;
@@ -144,15 +147,18 @@ class ExtraNetworksClusterize {
         );
     }
 
-    enable() {
-        this.enabled = true;
-    }
-
-    disable() {
-        this.enabled = false;
+    enable(enabled) {
+        if (enabled === undefined || enabled === null) {
+            this.enabled = true;
+        } else if (typeof enabled !== "boolean") {
+            console.error("Invalid type. Expected boolean, got", typeof enabled);
+        } else {
+            this.enabled = enabled;
+        }
     }
 
     parseJson(encoded_str) {
+        // Skip parsing if the string hasnt actually updated.
         if (this.encoded_str === encoded_str) {
             return;
         }
@@ -164,6 +170,11 @@ class ExtraNetworksClusterize {
             .then(() => this.encoded_str = encoded_str);
     }
 
+    updateJson(json) {
+        /** Must be overridden by inherited class. */
+        return;
+    }
+
     sortByDivId() {
         // Sort data_obj keys (div_id) as numbers.
         this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => INT_COLLATOR.compare(a, b));
@@ -211,6 +222,7 @@ class ExtraNetworksClusterize {
     }
 
     updateRows() {
+        this.updateItemDims();
         this.clusterize.update(this.filterRows(this.data_obj));
         this.clusterize.refresh();
     }
@@ -228,6 +240,13 @@ class ExtraNetworksClusterize {
             // If there is no data then just skip.
             return;
         }
+
+        if (!this.content_elem.isConnected || this.content_elem.firstElementChild === undefined || this.content_elem.firstElementChild === null) {
+            // Elements do not exist on page yet or content is empty. Skip.
+            console.log('first elem undefined');
+            return;
+        }
+
         // Calculate the visible rows and colums for the clusterize-content area.
         let n_cols = calcColsPerRow(this.content_elem);
         let n_rows = calcRowsPerCol(this.content_elem.parentElement, this.content_elem);
@@ -243,30 +262,40 @@ class ExtraNetworksClusterize {
         }
     }
 
-    rebuild() {
-        this.clusterize.destroy();
+    rebuild(force) {
+        /** Rebuilds the clusterize object.
+         *  When force=true, the existing Clusterize instance is destroyed then
+         *  re-instantiated. When force=false or isnt passed, then we just
+         *  update the DOM's scroll element with this instance's scroll_elem.
+         */
+        if (force) {
+            this.clusterize.destroy();
 
-        // Get new references to elements since they may have changed.
-        this.scroll_elem = document.getElementById(this.scroll_id);
-        this.content_elem = document.getElementById(this.content_id);
-        this.clusterize = new Clusterize(
-            {
-                rows: this.filterRows(this.data_obj),
-                scrollId: this.scroll_id,
-                contentId: this.content_id,
-                rows_in_block: this.rows_in_block,
-                blocks_in_cluster: this.blocks_in_cluster,
-                show_no_data_row: this.show_no_data_row,
-                no_data_text: this.no_data_text,
-                no_data_class: this.no_data_class,
-                callbacks: this.callbacks,
+            // Get new references to elements since they may have changed.
+            this.scroll_elem = document.getElementById(this.scroll_id);
+            this.content_elem = document.getElementById(this.content_id);
+            this.clusterize = new Clusterize(
+                {
+                    rows: this.filterRows(this.data_obj),
+                    scrollId: this.scroll_id,
+                    contentId: this.content_id,
+                    rows_in_block: this.rows_in_block,
+                    blocks_in_cluster: this.blocks_in_cluster,
+                    show_no_data_row: this.show_no_data_row,
+                    no_data_text: this.no_data_text,
+                    no_data_class: this.no_data_class,
+                    callbacks: this.callbacks,
+                }
+            );
+        } else {
+            // If association for elements is broken, replace them with this version.
+            if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
+                document.getElementById(this.scroll_id).replaceWith(this.scroll_elem);
             }
-        );
+        }
 
-        // Apply existing sort mode.
+        // Apply existing sort/filter.
         this.applyFilter();
-
-        this.updateItemDims();
         this.updateRows();
     }
 }
@@ -461,8 +490,10 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     }
 
     applyFilter(filter_str) {
-        if (filter_str !== undefined) {
+        if (filter_str !== undefined && filter_str !== null) {
             this.filter_str = filter_str.toLowerCase();
+        } else {
+            this.filter_str = this.txt_search_elem.value.toLowerCase();
         }
 
         for (const [k, v] of Object.entries(this.data_obj)) {
@@ -481,4 +512,4 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
         this.applySort();
         this.updateRows();
     }
-}
\ No newline at end of file
+}
diff --git a/modules/shared_options.py b/modules/shared_options.py
index 8be7e8edc..c05abddb1 100644
--- a/modules/shared_options.py
+++ b/modules/shared_options.py
@@ -258,9 +258,9 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_card_description_is_html": OptionInfo(False, "Treat card description as HTML"),
     "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
     "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
-    "extra_networks_tree_view_style": OptionInfo("Dirs", "Extra Networks directory view style", gr.Radio, {"choices": ["Tree", "Dirs"]}).needs_reload_ui(),
+    "extra_networks_dirs_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default.").needs_reload_ui(),
+    "extra_networks_tree_view_default_enabled": OptionInfo(False, "Show the Extra Networks tree view by default").needs_reload_ui(),
     "extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").needs_reload_ui(),
-    "extra_networks_tree_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default").needs_reload_ui(),
     "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(),
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 00d3eb318..7be9431e9 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -35,200 +35,6 @@ class ExtraNetworksItem:
     """Wrapper for dictionaries representing ExtraNetworks items."""
     item: dict
 
-def build_row(
-    div_id: int,
-    tabname: str,
-    extra_networks_tabname: str,
-    label: str,
-    btn_type: str,
-    btn_copy_path_tpl: str,
-    btn_edit_item_tpl: str,
-    btn_metadata_tpl: str,
-    tree_row_tpl: str,
-    dir_is_empty: bool = False,
-    parent_id: Optional[int] = None,
-    data_depth: Optional[int] = None,
-    data_path: Optional[str] = None,
-    data_hash: Optional[str] = None,
-    data_prompt: Optional[str] = None,
-    data_neg_prompt: Optional[str] = None,
-    data_allow_neg: Optional[str] = None,
-    onclick_extra: Optional[str] = None,
-) -> str:
-    if btn_type not in ["file", "dir"]:
-        raise ValueError("Invalid button type:", btn_type)
-
-    action_list_item_action_leading = "<i class='tree-list-item-action-chevron'></i>"
-    action_list_item_visual_leading = "🗀"
-    action_list_item_visual_trailing = ""
-    action_list_item_action_trailing = ""
-
-    if dir_is_empty:
-        action_list_item_action_leading = "<i class='tree-list-item-action-chevron' style='visibility: hidden'></i>"
-
-    if btn_type == "file":
-        action_list_item_visual_leading = "🗎"
-        # Action buttons
-        action_list_item_action_trailing += '<div class="button-row">'
-        action_list_item_action_trailing += btn_copy_path_tpl.format(
-            **{"filename": data_path}
-        )
-        action_list_item_action_trailing += btn_edit_item_tpl.format(
-            **{
-                "tabname": tabname,
-                "extra_networks_tabname": extra_networks_tabname,
-                "name": label,
-            }
-        )
-        action_list_item_action_trailing += btn_metadata_tpl.format(
-            **{"extra_networks_tabname": extra_networks_tabname, "name": label}
-        )
-        action_list_item_action_trailing += "</div>"
-
-    data_attributes = ""
-    data_attributes += f"data-path={data_path} " if data_path is not None else ""
-    data_attributes += f"data-hash={data_hash} " if data_hash is not None else ""
-    data_attributes += f"data-prompt={data_prompt} " if data_prompt else ""
-    data_attributes += f"data-neg-prompt={data_neg_prompt} " if data_neg_prompt else ""
-    data_attributes += f"data-allow-neg={data_allow_neg} " if data_allow_neg else ""
-    data_attributes += (
-        f"data-tree-entry-type={btn_type} " if btn_type is not None else ""
-    )
-    data_attributes += f"data-div-id={div_id} " if div_id is not None else ""
-    data_attributes += f"data-parent-id={parent_id} " if parent_id is not None else ""
-    data_attributes += f"data-depth={data_depth} " if data_depth is not None else ""
-    data_attributes += (
-        "data-expanded " if parent_id is None else ""
-    )  # inverted to expand root
-
-    res = tree_row_tpl.format(
-        **{
-            "data_attributes": data_attributes,
-            "search_terms": "",
-            "btn_type": btn_type,
-            "tabname": tabname,
-            "onclick_extra": onclick_extra if onclick_extra else "",
-            "extra_networks_tabname": extra_networks_tabname,
-            "action_list_item_action_leading": action_list_item_action_leading,
-            "action_list_item_visual_leading": action_list_item_visual_leading,
-            "action_list_item_label": label,
-            "action_list_item_visual_trailing": action_list_item_visual_trailing,
-            "action_list_item_action_trailing": action_list_item_action_trailing,
-        }
-    )
-    res = res.strip()
-    res = re.sub(" +", " ", res.replace("\n", ""))
-    return res
-
-
-def build_tree(
-    tree: dict,
-    res: dict,
-    tabname: str,
-    extra_networks_tabname: str,
-    div_id: int,
-    depth: int,
-    btn_copy_path_tpl: str,
-    btn_edit_item_tpl: str,
-    btn_metadata_tpl: str,
-    tree_row_tpl: str,
-    allow_negative_prompt: Optional[bool] = None,
-    parent_id: Optional[int] = None,
-) -> int:
-    for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
-        if not isinstance(v, (ExtraNetworksItem,)):
-            # dir
-            if div_id in res:
-                raise KeyError("div_id already in res:", div_id)
-
-            dir_is_empty = True
-            for _v in v.values():
-                if shared.opts.extra_networks_tree_view_show_files:
-                    dir_is_empty = False
-                    break
-                elif not isinstance(_v, (ExtraNetworksItem,)):
-                    dir_is_empty = False
-                    break
-                else:
-                    dir_is_empty = True
-
-            res[div_id] = build_row(
-                div_id=div_id,
-                parent_id=parent_id,
-                tabname=tabname,
-                extra_networks_tabname=extra_networks_tabname,
-                label=k,
-                data_depth=depth,
-                data_path=k,
-                btn_type="dir",
-                dir_is_empty=dir_is_empty,
-                btn_copy_path_tpl=btn_copy_path_tpl,
-                btn_edit_item_tpl=btn_edit_item_tpl,
-                btn_metadata_tpl=btn_metadata_tpl,
-                tree_row_tpl=tree_row_tpl,
-            )
-            last_div_id = build_tree(
-                tree=v,
-                res=res,
-                depth=depth + 1,
-                div_id=div_id + 1,
-                parent_id=div_id,
-                tabname=tabname,
-                extra_networks_tabname=extra_networks_tabname,
-                allow_negative_prompt=allow_negative_prompt,
-                btn_copy_path_tpl=btn_copy_path_tpl,
-                btn_edit_item_tpl=btn_edit_item_tpl,
-                btn_metadata_tpl=btn_metadata_tpl,
-                tree_row_tpl=tree_row_tpl,
-            )
-            div_id = last_div_id
-        else:
-            # file
-            if not shared.opts.extra_networks_tree_view_show_files:
-                # Don't add file if showing files is disabled in options.
-                continue
-
-            if div_id in res:
-                raise KeyError("div_id already in res:", div_id)
-
-            onclick = v.item.get("onclick", None)
-            if onclick is None:
-                # Don't quote prompt/neg_prompt since they are stored as js strings already.
-                onclick_js_tpl = (
-                    "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});"
-                )
-                onclick = onclick_js_tpl.format(
-                    **{
-                        "tabname": tabname,
-                        "prompt": v.item["prompt"],
-                        "neg_prompt": v.item.get("negative_prompt", "''"),
-                        "allow_neg": str(allow_negative_prompt).lower(),
-                    }
-                )
-                onclick = html.escape(onclick)
-
-            res[div_id] = build_row(
-                div_id=div_id,
-                parent_id=parent_id,
-                tabname=tabname,
-                extra_networks_tabname=extra_networks_tabname,
-                label=v.item["name"],
-                data_depth=depth,
-                data_path=v.item["filename"],
-                data_hash=v.item["shorthash"],
-                data_prompt=html.escape(v.item.get("prompt", "''")),
-                data_neg_prompt=html.escape(v.item.get("negative_prompt", "''")),
-                data_allow_neg=str(allow_negative_prompt).lower(),
-                onclick_extra=onclick,
-                btn_type="file",
-                btn_copy_path_tpl=btn_copy_path_tpl,
-                btn_edit_item_tpl=btn_edit_item_tpl,
-                btn_metadata_tpl=btn_metadata_tpl,
-                tree_row_tpl=tree_row_tpl,
-            )
-        div_id += 1
-    return div_id
-
 def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) -> dict:
     """Recursively builds a directory tree.
 
@@ -395,6 +201,176 @@ class ExtraNetworksPage:
 
         return ""
 
+    def build_row(
+        self,
+        div_id: int,
+        tabname: str,
+        label: str,
+        btn_type: str,
+        dir_is_empty: bool = False,
+        parent_id: Optional[int] = None,
+        data_depth: Optional[int] = None,
+        data_path: Optional[str] = None,
+        data_hash: Optional[str] = None,
+        data_prompt: Optional[str] = None,
+        data_neg_prompt: Optional[str] = None,
+        data_allow_neg: Optional[str] = None,
+        onclick_extra: Optional[str] = None,
+    ) -> str:
+        if btn_type not in ["file", "dir"]:
+            raise ValueError("Invalid button type:", btn_type)
+
+        action_list_item_action_leading = "<i class='tree-list-item-action-chevron'></i>"
+        action_list_item_visual_leading = "🗀"
+        action_list_item_visual_trailing = ""
+        action_list_item_action_trailing = ""
+
+        if dir_is_empty:
+            action_list_item_action_leading = "<i class='tree-list-item-action-chevron' style='visibility: hidden'></i>"
+
+        if btn_type == "file":
+            action_list_item_visual_leading = "🗎"
+            # Action buttons
+            action_list_item_action_trailing += '<div class="button-row">'
+            action_list_item_action_trailing += self.btn_copy_path_tpl.format(
+                **{"filename": data_path}
+            )
+            action_list_item_action_trailing += self.btn_edit_item_tpl.format(
+                **{
+                    "tabname": tabname,
+                    "extra_networks_tabname": self.extra_networks_tabname,
+                    "name": label,
+                }
+            )
+            action_list_item_action_trailing += self.btn_metadata_tpl.format(
+                **{"extra_networks_tabname": self.extra_networks_tabname, "name": label}
+            )
+            action_list_item_action_trailing += "</div>"
+
+        data_attributes = ""
+        data_attributes += f"data-path={data_path} " if data_path is not None else ""
+        data_attributes += f"data-hash={data_hash} " if data_hash is not None else ""
+        data_attributes += f"data-prompt={data_prompt} " if data_prompt else ""
+        data_attributes += f"data-neg-prompt={data_neg_prompt} " if data_neg_prompt else ""
+        data_attributes += f"data-allow-neg={data_allow_neg} " if data_allow_neg else ""
+        data_attributes += (
+            f"data-tree-entry-type={btn_type} " if btn_type is not None else ""
+        )
+        data_attributes += f"data-div-id={div_id} " if div_id is not None else ""
+        data_attributes += f"data-parent-id={parent_id} " if parent_id is not None else ""
+        data_attributes += f"data-depth={data_depth} " if data_depth is not None else ""
+        data_attributes += (
+            "data-expanded " if parent_id is None else ""
+        )  # inverted to expand root
+
+        res = self.tree_row_tpl.format(
+            **{
+                "data_attributes": data_attributes,
+                "search_terms": "",
+                "btn_type": btn_type,
+                "tabname": tabname,
+                "onclick_extra": onclick_extra if onclick_extra else "",
+                "extra_networks_tabname": self.extra_networks_tabname,
+                "action_list_item_action_leading": action_list_item_action_leading,
+                "action_list_item_visual_leading": action_list_item_visual_leading,
+                "action_list_item_label": label,
+                "action_list_item_visual_trailing": action_list_item_visual_trailing,
+                "action_list_item_action_trailing": action_list_item_action_trailing,
+            }
+        )
+        res = res.strip()
+        res = re.sub(" +", " ", res.replace("\n", ""))
+        return res
+
+
+    def build_tree(
+        self,
+        tree: dict,
+        res: dict,
+        tabname: str,
+        div_id: int,
+        depth: int,
+        parent_id: Optional[int] = None,
+    ) -> int:
+        for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
+            if not isinstance(v, (ExtraNetworksItem,)):
+                # dir
+                if div_id in res:
+                    raise KeyError("div_id already in res:", div_id)
+
+                dir_is_empty = True
+                for _v in v.values():
+                    if shared.opts.extra_networks_tree_view_show_files:
+                        dir_is_empty = False
+                        break
+                    elif not isinstance(_v, (ExtraNetworksItem,)):
+                        dir_is_empty = False
+                        break
+                    else:
+                        dir_is_empty = True
+
+                res[div_id] = self.build_row(
+                    div_id=div_id,
+                    parent_id=parent_id,
+                    tabname=tabname,
+                    label=k,
+                    data_depth=depth,
+                    data_path=k,
+                    btn_type="dir",
+                    dir_is_empty=dir_is_empty,
+                )
+                last_div_id = self.build_tree(
+                    tree=v,
+                    res=res,
+                    depth=depth + 1,
+                    div_id=div_id + 1,
+                    parent_id=div_id,
+                    tabname=tabname,
+                )
+                div_id = last_div_id
+            else:
+                # file
+                if not shared.opts.extra_networks_tree_view_show_files:
+                    # Don't add file if showing files is disabled in options.
+                    continue
+
+                if div_id in res:
+                    raise KeyError("div_id already in res:", div_id)
+
+                onclick = v.item.get("onclick", None)
+                if onclick is None:
+                    # Don't quote prompt/neg_prompt since they are stored as js strings already.
+                    onclick_js_tpl = (
+                        "cardClicked('{tabname}_{extra_networks_tabname}', {prompt}, {neg_prompt}, {allow_neg});"
+                    )
+                    onclick = onclick_js_tpl.format(
+                        **{
+                            "tabname": tabname,
+                            "extra_networks_tabname": self.extra_networks_tabname,
+                            "prompt": v.item["prompt"],
+                            "neg_prompt": v.item.get("negative_prompt", "''"),
+                            "allow_neg": str(self.allow_negative_prompt).lower(),
+                        }
+                    )
+                    onclick = html.escape(onclick)
+
+                res[div_id] = self.build_row(
+                    div_id=div_id,
+                    parent_id=parent_id,
+                    tabname=tabname,
+                    label=v.item["name"],
+                    data_depth=depth,
+                    data_path=v.item["filename"],
+                    data_hash=v.item["shorthash"],
+                    data_prompt=html.escape(v.item.get("prompt", "''")),
+                    data_neg_prompt=html.escape(v.item.get("negative_prompt", "''")),
+                    data_allow_neg=str(self.allow_negative_prompt).lower(),
+                    onclick_extra=onclick,
+                    btn_type="file",
+                )
+            div_id += 1
+        return div_id
+
     def create_item_html(
         self,
         tabname: str,
@@ -424,10 +400,11 @@ class ExtraNetworksPage:
         onclick = item.get("onclick", None)
         if onclick is None:
             # Don't quote prompt/neg_prompt since they are stored as js strings already.
-            onclick_js_tpl = "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});"
+            onclick_js_tpl = "cardClicked('{tabname}_{extra_networks_tabname}', {prompt}, {neg_prompt}, {allow_neg});"
             onclick = onclick_js_tpl.format(
                 **{
                     "tabname": tabname,
+                    "extra_networks_tabname": self.extra_networks_tabname,
                     "prompt": item["prompt"],
                     "neg_prompt": item.get("negative_prompt", "''"),
                     "allow_neg": str(self.allow_negative_prompt).lower(),
@@ -539,19 +516,13 @@ class ExtraNetworksPage:
         if not tree:
             return res
 
-        build_tree(
+        self.build_tree(
             tree=tree,
             res=res,
             depth=0,
             div_id=0,
             parent_id=None,
             tabname=tabname,
-            extra_networks_tabname=self.extra_networks_tabname,
-            allow_negative_prompt=self.allow_negative_prompt,
-            btn_copy_path_tpl=self.btn_copy_path_tpl,
-            btn_edit_item_tpl=self.btn_edit_item_tpl,
-            btn_metadata_tpl=self.btn_metadata_tpl,
-            tree_row_tpl=self.tree_row_tpl,
         )
         res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8")
         return f'<div class="extra-network-script-data" data-tabname-full={tabname}_{self.extra_networks_tabname} data-proxy-name=tree_list data-json={res} hidden></div>'
@@ -648,7 +619,13 @@ class ExtraNetworksPage:
 
         show_tree = shared.opts.extra_networks_tree_view_default_enabled
 
-        page_params = {
+        cards_data_div = self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None)
+        tree_data_div = self.generate_tree_view_data_div(tabname)
+        dirs_html = self.create_dirs_view_html(tabname)
+
+        show_dirs = shared.opts.extra_networks_dirs_view_default_enabled
+        show_tree = shared.opts.extra_networks_tree_view_default_enabled
+        return self.pane_tpl.format(**{
             "tabname": tabname,
             "extra_networks_tabname": self.extra_networks_tabname,
             "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(),
@@ -657,19 +634,15 @@ class ExtraNetworksPage:
             "sort_name_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '',
             "sort_date_created_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '',
             "sort_date_modified_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '',
-            "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "",
-            "tree_list_scroll_area_div_extra_class": "",
-            "cards_data_div": self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None),
+            "btn_dirs_view_enabled_class": "extra-network-control--enabled" if show_dirs else "",
+            "btn_tree_view_enabled_class": "extra-network-control--enabled" if show_tree else "",
             "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
-            "tree_view_div_default_display_class": "" if show_tree else "hidden",
-        }
-
-        if shared.opts.extra_networks_tree_view_style == "Tree":
-            pane_content = self.pane_content_tree_tpl.format(**page_params, tree_data_div=self.generate_tree_view_data_div(tabname))
-        else:
-            pane_content = self.pane_content_dirs_tpl.format(**page_params, dirs_html=self.create_dirs_view_html(tabname))
-
-        return self.pane_tpl.format(**page_params, pane_content=pane_content)
+            "dirs_default_display_class": "" if show_dirs else "hidden",
+            "tree_default_display_class": "" if show_tree else "hidden",
+            "dirs_html": dirs_html,
+            "cards_data_div": cards_data_div,
+            "tree_data_div": tree_data_div,
+        })
 
     def create_item(self, name, index=None):
         raise NotImplementedError()
@@ -785,7 +758,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             with gr.Column(elem_id=f"{tabname}_{page.extra_networks_tabname}_prompts", elem_classes=["extra-page-prompts"]):
                 pass
 
-            elem_id = f"{tabname}_{page.extra_networks_tabname}_cards_html"
+            elem_id = f"{tabname}_{page.extra_networks_tabname}_pane_container"
             page_elem = gr.HTML(page.create_html(tabname, empty=True), elem_id=elem_id)
             ui.pages.append(page_elem)
             editor = page.create_user_metadata_editor(ui, tabname)
@@ -803,7 +776,6 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
         jscode = (
             "function(){"
             f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()}, '{tabname}_{page.extra_networks_tabname}');"
-            f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');"
             "}"
         )
         tab.select(fn=None, _js=jscode, inputs=[], outputs=[], show_progress=False)
@@ -844,7 +816,9 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
         _js="setupAllResizeHandles",
     ).then(
         fn=lambda: None,
-        _js="setupExtraNetworksData",
+        _js="extraNetworksSetupData",
+    ).then(
+        fn=lambda: print("DONE")
     )
 
     return ui
diff --git a/style.css b/style.css
index f4ae11339..25de25a5b 100644
--- a/style.css
+++ b/style.css
@@ -901,11 +901,6 @@ footer {
     min-height: 2.7rem;
 }
 
-.extra-networks-controls-div{
-    align-self: center;
-    margin-left: auto;
-}
-
 .extra-networks > div > [id *= '_extra_']{
     margin: 0.3em;
 }
@@ -1205,6 +1200,7 @@ body.resizing .resize-handle {
 
 .clusterize-no-data {
     text-align: center;
+    color: var(--input-placeholder-color) !important;
 }
 
 .clusterize-scroll::-webkit-scrollbar {
@@ -1244,14 +1240,22 @@ body.resizing .resize-handle {
     height: 100%;
 }
 
-.extra-network-content--tree {
-    flex-direction: row;
+.extra-network-content--container {
+    flex-direction: column;
 }
 
 .extra-network-content--dirs {
-    flex-direction: column;
+    flex: 0 1 0%;
+    flex-direction: row;
+    gap: var(--spacing-sm);
 }
 
+.extra-network-content--cards {
+    flex: 1;
+    flex-direction: row;
+}
+
+
 .resize-handle-row:has(> .extra-network-tree.hidden) {
     display: flex !important;
 }
@@ -1270,8 +1274,10 @@ body.resizing .resize-handle {
     border: 1px solid var(--block-border-color);
 }
 
-.extra-network-control {
+.extra-network-controls {
     display: flex;
+    align-self: center;
+    margin-left: auto;
     font-size: var(--body-text-size);
     text-align: left;
     user-select: none;
@@ -1279,13 +1285,59 @@ body.resizing .resize-handle {
     border: none;
     gap: var(--spacing-sm);
     align-items: start;
+    place-content: center center;
     padding: var(--spacing-sm);
 }
 
-.extra-network-control small{
+.extra-network-controls small{
     color: var(--input-placeholder-color);
-    line-height: 2.2rem;
-    margin: 0 0.5rem 0 0.75rem;
+    text-align: center;
+    margin: 0 var(--spacing-lg) 0 var(--spacing-lg);
+}
+
+.extra-network-control {
+    padding: var(--spacing-sm);
+    display: inline-flex;
+    cursor: pointer;
+    background: transparent;
+    border-radius: var(--input-radius);
+    align-items: center;
+    place-content: center;
+    box-sizing: border-box;
+    transition: background 1000ms ease-in-out;
+}
+
+.extra-network-control:hover {
+    background: var(--button-secondary-background-fill-hover);
+}
+
+.extra-network-control:hover .extra-network-control--icon {
+    background: var(--button-secondary-text-color-hover);
+}
+
+.extra-network-control:active {
+    background: var(--button-secondary-background-fill);
+}
+
+.extra-network-control:active .extra-network-control--icon {
+    background: var(--button-secondary-text-color-hover);
+}
+
+.extra-network-control--enabled {
+    background: var(--button-secondary-background-fill);
+}
+
+.extra-network-control--enabled .extra-network-control--icon{
+    background: var(--button-secondary-text-color);
+}
+
+.extra-network-control--icon {
+    height: var(--text-xxl);
+    width: var(--text-xxl);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background: var(--button-secondary-background-fill);
 }
 
 /* ==== SEARCH INPUT ACTIONS ==== */
@@ -1356,24 +1408,7 @@ body.resizing .resize-handle {
     background: var(--button-secondary-background-fill-hover);
 }
 
-/* ==== SORT ICON ACTIONS ==== */
-.extra-network-control--sort-mode {
-    padding: 0.25rem;
-    display: inline-flex;
-    cursor: pointer;
-    justify-self: center;
-    align-self: center;
-}
-
-.extra-network-control--icon {
-    height: var(--text-xxl);
-    width: var(--text-xxl);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background: var(--button-secondary-background-fill);
-}
-
+/* ==== ICONS ==== */
 .extra-network-control--sort-mode[data-sort-mode="path"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
 }
@@ -1390,15 +1425,6 @@ body.resizing .resize-handle {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-/* ==== SORT DIRECTION ICON ACTIONS ==== */
-.extra-network-control--sort-dir {
-    padding: 0.25rem;
-    display: inline-flex;
-    cursor: pointer;
-    justify-self: center;
-    align-self: center;
-}
-
 .extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
@@ -1407,73 +1433,30 @@ body.resizing .resize-handle {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-/* ==== TREE VIEW ICON ACTIONS ==== */
-.extra-network-control .extra-network-control--tree-view {
-    padding: 0.25rem;
-    display: inline-flex;
-    cursor: pointer;
-    justify-self: center;
-    align-self: center;
+.extra-network-control--dirs-view .extra-network-control--dirs-view-icon {
+    mask-image: url('data:image/svg+xml,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns%23" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns%23" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 30 30" version="1.1" id="svg822" inkscape:version="0.92.4 (f8dce91, 2019-08-02)" sodipodi:docname="grid-view.svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs id="defs816"><inkscape:path-effect only_selected="false" apply_with_weight="true" apply_no_weight="true" helper_size="0" steps="2" weight="33.333333" is_visible="true" id="path-effect1025" effect="bspline"></inkscape:path-effect><inkscape:path-effect only_selected="false" apply_with_weight="true" apply_no_weight="true" helper_size="0" steps="2" weight="33.333333" is_visible="true" id="path-effect1021" effect="bspline"></inkscape:path-effect></defs><sodipodi:namedview id="base" pagecolor="%23ffffff" bordercolor="%23666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="17.833333" inkscape:cx="19.485981" inkscape:cy="13.037383" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" units="px" inkscape:window-width="1366" inkscape:window-height="713" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="false" inkscape:guide-bbox="true"><sodipodi:guide position="21.126168,22.794393" orientation="1,0" id="guide1575" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="22.682243,23.285047" orientation="1,0" id="guide1635" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="22.682243,7.6455921" orientation="0,1" id="guide1639" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="18.859863,18.859863" orientation="1,0" id="guide1242" inkscape:locked="false"></sodipodi:guide><inkscape:grid type="xygrid" id="grid1103"></inkscape:grid></sodipodi:namedview><metadata id="metadata819"><rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf></metadata><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-289.0625)"><path style="opacity:1;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:3.99999976;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 5,4 C 4.446,4 4,4.446 4,5 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 V 5 C 14,4.446 13.554,4 13,4 Z m 12,0 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 V 5 C 26,4.446 25.554,4 25,4 Z M 5,16 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 v -8 c 0,-0.554 -0.446,-1 -1,-1 z m 12,0 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 v -8 c 0,-0.554 -0.446,-1 -1,-1 z" transform="translate(0,289.0625)" id="rect1395" inkscape:connector-curvature="0"></path></g></g></svg>');
 }
 
-.extra-network-control .extra-network-control--tree-view .extra-network-control--tree-view-icon {
-    height: 1.5rem;
-    width: 1.5rem;
+.extra-network-control--tree-view .extra-network-control--tree-view-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="black"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="black" d="M16 10v-4h-11v1h-2v-3h9v-4h-12v4h2v10h3v2h11v-4h-11v1h-2v-5h2v2z"></path></g></svg>');
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background: var(--input-placeholder-color);
 }
 
-.extra-network-control .extra-network-control--enabled {
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 0.25rem;
-}
-
-.dark .extra-network-control .extra-network-control--enabled {
-    background: rgba(255, 255, 255, 0.15);
-}
-
-.extra-network-control .extra-network-control--enabled .extra-network-control--icon{
-    background: var(--button-secondary-text-color);
-}
-
-/* ==== REFRESH ICON ACTIONS ==== */
-.extra-network-control .extra-network-control--refresh {
-    padding: 0.25rem;
-    display: inline-flex;
-    cursor: pointer;
-    justify-self: center;
-    align-self: center;
-}
-
-.extra-network-control .extra-network-control--refresh .extra-network-control--refresh-icon {
-    height: 1.5rem;
-    width: 1.5rem;
+.extra-network-control--refresh-icon {
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background: var(--input-placeholder-color);
 }
 
-.extra-network-control .extra-network-control--refresh-icon:active {
+.extra-network-control--refresh-icon:active {
     -ms-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
     transition: transform 0.2s;
 }
 
-/* ==== TREE GRID CONFIG ==== */
-
 .extra-network-tree-content {
-    flex: 1;
     padding: var(--spacing-md);
 }
 
 .extra-network-cards-content {
-    flex: 1;
     padding: var(--spacing-md);
 }
 
@@ -1610,12 +1593,6 @@ body.resizing .resize-handle {
     margin: 0;
 }
 
-.extra-network-dirs-view {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-sm);
-}
-
 .extra-network-dirs-view-button:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
@@ -1624,4 +1601,5 @@ body.resizing .resize-handle {
 
 .extra-network-dirs-view-button[data-selected] {
     background: var(--button-primary-background-fill);
+    border-color: var(--button-primary-border-color);
 }
\ No newline at end of file