clean up presentation of dirs view. need to resolve issue with initial load of tree view.

html/extra-networks-dirs-view-button.html

@@ -1,5 +1,5 @@
 <button
-    class='lg secondary gradio-button custom-button {extra_class}'
+    class='lg secondary gradio-button custom-button extra-network-dirs-view-button {extra_class}'
     onclick='extraNetworkDirsOnClick(event, "{tabname_full}")'>
     {path}
 </button>

html/extra-networks-pane-dirs.html

@@ -1,5 +1,5 @@
-<div class="extra-network-pane-content-dirs">
-    <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
+<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'>

html/extra-networks-pane-tree.html

@@ -1,4 +1,4 @@
-<div class="extra-network-pane-content-tree resize-handle-row">
+<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}'

javascript/extraNetworks.js

@@ -617,16 +617,51 @@ function extraNetworksTreeOnClick(event, tabname_full) {
 }
 
 function extraNetworkDirsOnClick(event, tabname_full) {
-    // Update search input with select button's path.
-    var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`);
-    search_input_elem.value = event.target.textContent.trim();
-    updateInput(search_input_elem);
+    var txt_search = gradioApp().querySelector(`#${tabname_full}_extra_search`);
+
+    function _deselect_all() {
+        // deselect all buttons
+        gradioApp().querySelectorAll(".extra-network-dirs-view-button").forEach((elem) => {
+            delete elem.dataset.selected;
+        });
+    }
+
+    function _select_button(elem) {
+        _deselect_all();
+        // Update search input with select button's path.
+        elem.dataset.selected = "";
+        txt_search.value = elem.textContent.trim();
+    }
+
+    function _deselect_button(elem) {
+        delete elem.dataset.selected;
+        txt_search.value = "";
+    }
+
+
+    if ("selected" in event.target.dataset) {
+        _deselect_button(event.target);
+    } else {
+        _select_button(event.target);
+    }
+    
+    updateInput(txt_search);
     applyExtraNetworkFilter(tabname_full);
 }
 
 function extraNetworksControlSearchClearOnClick(event, tabname_full) {
     /** Clears the search <input> text. */
     let clear_btn = event.target.closest(".extra-network-control--search-clear");
+
+    // Deselect all buttons from both dirs view and tree view
+    gradioApp().querySelectorAll(".extra-network-dirs-view-button").forEach((elem) => {
+        delete elem.dataset.selected;
+    });
+
+    gradioApp().querySelectorAll(".tree-list-item").forEach((elem) => {
+        delete elem.dataset.selected;
+    });
+
     let txt_search = clear_btn.previousElementSibling;
     txt_search.value = "";
     txt_search.dispatchEvent(new CustomEvent("extra-network-control--search-clear", {}));

modules/ui_extra_networks.py

@@ -588,7 +588,7 @@ class ExtraNetworksPage:
                     subdirs[subdir] = 1
 
         if subdirs:
-            subdirs = {"": 1, **subdirs}
+            subdirs = {**subdirs}
 
         subdirs_html = "".join([
             self.btn_dirs_view_tpl.format(**{

style.css

@@ -1208,17 +1208,17 @@ body.resizing .resize-handle {
 }
 
 .clusterize-scroll::-webkit-scrollbar {
-    background-color: transparent;
+    background: transparent;
     width: var(--text-lg);
 }
 
 .clusterize-scroll::-webkit-scrollbar-track {
-    background-color: transparent;
+    background: transparent;
     background-clip: content-box;
 }
 
 .clusterize-scroll::-webkit-scrollbar-thumb {
-    background-color: var(--border-color-primary);
+    background: var(--border-color-primary);
     border-radius: var(--radius-xl);
     border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
 }
@@ -1237,20 +1237,19 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-pane .extra-network-pane-content-dirs {
+.extra-network-content {
     display: flex;
-    flex-direction: column;
     flex-wrap: nowrap;
     width: 100%;
     height: 100%;
 }
 
-.extra-network-pane .extra-network-pane-content-tree {
-    display: flex;
+.extra-network-content--tree {
     flex-direction: row;
-    flex-wrap: nowrap;
-    width: 100%;
-    height: 100%;
+}
+
+.extra-network-content--dirs {
+    flex-direction: column;
 }
 
 .resize-handle-row:has(> .extra-network-tree.hidden) {
@@ -1276,7 +1275,7 @@ body.resizing .resize-handle {
     font-size: var(--body-text-size);
     text-align: left;
     user-select: none;
-    background-color: transparent;
+    background: transparent;
     border: none;
     gap: var(--spacing-sm);
     align-items: start;
@@ -1424,20 +1423,20 @@ body.resizing .resize-handle {
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100%;
-    background-color: var(--input-placeholder-color);
+    background: var(--input-placeholder-color);
 }
 
 .extra-network-control .extra-network-control--enabled {
-    background-color: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.1);
     border-radius: 0.25rem;
 }
 
 .dark .extra-network-control .extra-network-control--enabled {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.15);
 }
 
 .extra-network-control .extra-network-control--enabled .extra-network-control--icon{
-    background-color: var(--button-secondary-text-color);
+    background: var(--button-secondary-text-color);
 }
 
 /* ==== REFRESH ICON ACTIONS ==== */
@@ -1508,7 +1507,7 @@ body.resizing .resize-handle {
 }
 
 .tree-list-item[data-selected] {
-    background-color: var(--button-secondary-background-fill);
+    background: var(--button-secondary-background-fill);
 }
 
 .tree-list-item > span {
@@ -1610,3 +1609,19 @@ body.resizing .resize-handle {
     padding: 0;
     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;
+    background: var(--button-secondary-background-fill-hover);
+}
+
+.extra-network-dirs-view-button[data-selected] {
+    background: var(--button-primary-background-fill);
+}