Add toggle button for tree view. Use default settings for sortmode and direction.

html/extra-networks-pane.html

 <div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
+    <div class="extra-network-control">
+        <div class="extra-network-control--search">
+            <input
+                id="{tabname}_{extra_networks_tabname}_extra_search"
+                class="extra-network-control--search-text"
+                type="search"
+                placeholder="Filter files"
+            >
+        </div>
+        <div 
+            id="{tabname}_{extra_networks_tabname}_extra_sort"
+            class="extra-network-control--sort"
+            data-sortmode="{data_sortmode}"
+            data-sortkey="{data_sortkey}"
+            title="Sort by path"
+            onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--sort-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
+            class="extra-network-control--sort-dir"
+            data-sortdir="{data_sortdir}"
+            title="Sort ascending"
+            onclick="extraNetworksControlSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--sort-dir-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_tree_view"
+            class="extra-network-control--tree-view extra-network-control--enabled"
+            title="Enable Tree View"
+            onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--tree-view-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_refresh"
+            class="extra-network-control--refresh"
+            title="Refresh page"
+            onclick="extraNetworksControlRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--refresh-icon"></i>
+        </div>
+    </div>
+    <div class="extra-network-pane-content">
         <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree'>
             {tree_html}
         </div>
         <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
             {items_html}
         </div>
+    </div>
 </div>
\ No newline at end of file

html/extra-networks-tree.html

 <div class="tree-list">
-    <div class="tree-list-controls">
-        <div class="tree-list-search">
-            <input
-                id="{tabname}_{extra_networks_tabname}_extra_search"
-                class="tree-list-search-text"
-                type="search"
-                placeholder="Filter files"
-            >
-        </div>
-        <div 
-            id="{tabname}_{extra_networks_tabname}_extra_sort"
-            class="tree-list-sort"
-            data-sortmode="path"
-            data-sortkey="sortPath-Ascending-640"
-            title="Sort by path"
-            onclick="extraNetworksTreeSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-sort-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
-            class="tree-list-sort-dir"
-            data-sortdir="Ascending"
-            title="Sort ascending"
-            onclick="extraNetworksTreeSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-sort-dir-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_refresh"
-            class="tree-list-refresh"
-            title="Refresh page"
-            onclick="extraNetworksTreeRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-refresh-icon"></i>
-        </div>
-    </div>
     <div class="tree-list-container">
         {tree}
     </div>

javascript/extraNetworks.js

@@ -348,7 +348,7 @@ function extraNetworksTreeOnClick(event, tabname, extra_networks_tabname) {
     }
 }
 
-function extraNetworksTreeSortOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) {
     /**
      * Handles `onclick` events for the Sort Mode button.
      *
@@ -382,7 +382,7 @@ function extraNetworksTreeSortOnClick(event, tabname, extra_networks_tabname) {
     applyExtraNetworkSort(tabname + "_" + extra_networks_tabname);
 }
 
-function extraNetworksTreeSortDirOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabname) {
     /**
      * Handles `onclick` events for the Sort Direction button.
      *
@@ -403,7 +403,21 @@ function extraNetworksTreeSortDirOnClick(event, tabname, extra_networks_tabname)
     applyExtraNetworkSort(tabname + "_" + extra_networks_tabname);
 }
 
-function extraNetworksTreeRefreshOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabname) {
+    /**
+     * Handles `onclick` events for the Tree View button.
+     *
+     * Toggles the tree view in the extra networks pane.
+     *
+     * @param event                     The generated event.
+     * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
+     * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
+     */
+    gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree").classList.toggle("hidden");
+    event.currentTarget.classList.toggle("extra-network-control--enabled");
+}
+
+function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) {
     /**
      * Handles `onclick` events for the Refresh Page button.
      *

modules/ui_extra_networks.py

@@ -526,10 +526,17 @@ class ExtraNetworksPage:
             if "user_metadata" not in item:
                 self.read_user_metadata(item)
 
+        data_sortdir = shared.opts.extra_networks_card_order
+        data_sortmode = shared.opts.extra_networks_card_order_field.lower().replace("sort", "").replace(" ", "_").rstrip("_").strip()
+        data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
+
         return self.pane_tpl.format(
             **{
                 "tabname": tabname,
                 "extra_networks_tabname": self.extra_networks_tabname,
+                "data_sortmode": data_sortmode,
+                "data_sortkey": data_sortkey,
+                "data_sortdir": data_sortdir,
                 "tree_html": self.create_tree_view_html(tabname),
                 "items_html": self.create_card_view_html(tabname),
             }