Gradio 4 + WebUI 1.10

html/extra-networks-copy-path-button.html

@@ -1,5 +1,5 @@
 <div class="copy-path-button card-button"
     title="Copy path to clipboard"
-    onclick="extraNetworksCopyCardPath(event, '{filename}')"
+    onclick="extraNetworksCopyCardPath(event)"
     data-clipboard-text="{filename}">
 </div>

html/extra-networks-edit-item-button.html

@@ -1,4 +1,4 @@
 <div class="edit-button card-button"
     title="Edit metadata"
-    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}', '{name}')">
+    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}')">
 </div>

html/extra-networks-metadata-button.html

@@ -1,4 +1,4 @@
 <div class="metadata-button card-button"
     title="Show internal metadata"
-    onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}', '{name}')">
+    onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}')">
 </div>

html/extra-networks-pane-dirs.html

@@ -0,0 +1,8 @@
+    <div class="extra-network-pane-content-dirs">
+        <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
+            {dirs_html}
+        </div>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
+            {items_html}
+        </div>
+    </div>

html/extra-networks-pane-tree.html

@@ -0,0 +1,8 @@
+    <div class="extra-network-pane-content-tree resize-handle-row">
+        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree' style='flex-basis: {extra_networks_tree_view_default_width}px'>
+            {tree_html}
+        </div>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
+            {items_html}
+        </div>
+    </div>

html/extra-networks-pane.html

@@ -1,23 +1,53 @@
-<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
+<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane {tree_view_div_default_display_class}'>
     <div class="extra-network-control" id="{tabname}_{extra_networks_tabname}_controls" style="display:none" >
         <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"
+                placeholder="Search"
             >
         </div>
+
+        <small>Sort: </small>
         <div 
-            id="{tabname}_{extra_networks_tabname}_extra_sort"
-            class="extra-network-control--sort"
-            data-sortmode="{data_sortmode}"
-            data-sortkey="{data_sortkey}"
+            id="{tabname}_{extra_networks_tabname}_extra_sort_path"
+            class="extra-network-control--sort{sort_path_active}"
+            data-sortkey="default"
             title="Sort by path"
             onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--sort-icon"></i>
+            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
         </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_sort_name"
+            class="extra-network-control--sort{sort_name_active}"
+            data-sortkey="name"
+            title="Sort by name"
+            onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_sort_date_created"
+            class="extra-network-control--sort{sort_date_created_active}"
+            data-sortkey="date_created"
+            title="Sort by date created"
+            onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_sort_date_modified"
+            class="extra-network-control--sort{sort_date_modified_active}"
+            data-sortkey="date_modified"
+            title="Sort by date modified"
+            onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+        </div>
+
+        <small> </small>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
             class="extra-network-control--sort-dir"
@@ -25,15 +55,18 @@
             title="Sort ascending"
             onclick="extraNetworksControlSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--sort-dir-icon"></i>
+            <i class="extra-network-control--icon extra-network-control--sort-dir-icon"></i>
         </div>
+
+
+        <small> </small>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_tree_view"
             class="extra-network-control--tree-view {tree_view_btn_extra_class}"
             title="Enable Tree View"
             onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--tree-view-icon"></i>
+            <i class="extra-network-control--icon extra-network-control--tree-view-icon"></i>
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_refresh"
@@ -41,15 +74,8 @@
             title="Refresh page"
             onclick="extraNetworksControlRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--refresh-icon"></i>
+            <i class="extra-network-control--icon 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_view_div_extra_class}'>
-            {tree_html}
-        </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
-            {items_html}
-        </div>
-    </div>
-</div>
+    {pane_content}
+</div>

html/footer.html

@@ -1,7 +1,7 @@
 <div>
         <a href="{api_docs}">API</a>
          • 
-        <a href="https://github.com/AUTOMATIC1111/stable-diffusion-webui">Github</a>
+        <a href="https://github.com/lllyasviel/stable-diffusion-webui-forge">Github</a>
          • 
         <a href="https://gradio.app">Gradio</a>
          •