6 files changed, 61 insertions, 8 deletions
diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index d163fe37..ca683dc4 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,10 +1,6 @@
-<div class='card' style={style} onclick={card_clicked} data-name="{name}" {sort_keys}>
+<div class="card" style={style} onclick="{card_clicked}" data-name="{name}" {sort_keys}>
 	{background_image}
-	<div class="button-row">
-		{copy_path_button}
-		{metadata_button}
-		{edit_button}
-	</div>
+	<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
 	<div class='actions'>
 		<div class='additional'>{search_terms}</div>
 		<span class='name'>{name}</span>
diff --git a/html/extra-networks-copy-path-button.html b/html/extra-networks-copy-path-button.html
new file mode 100644
index 00000000..8083bb03
--- /dev/null
+++ b/html/extra-networks-copy-path-button.html
@@ -0,0 +1,5 @@
+<div class="copy-path-button card-button"
+    title="Copy path to clipboard"
+    onclick="extraNetworksCopyCardPath(event, '{filename}')"
+    data-clipboard-text="{filename}">
+</div>
+\ No newline at end of file
diff --git a/html/extra-networks-edit-item-button.html b/html/extra-networks-edit-item-button.html
new file mode 100644
index 00000000..7d2677d9
--- /dev/null
+++ b/html/extra-networks-edit-item-button.html
@@ -0,0 +1,4 @@
+<div class="edit-button card-button"
+    title="Edit metadata"
+    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{page_id}', '{name}')">
+</div>
+\ No newline at end of file
diff --git a/html/extra-networks-metadata-button.html b/html/extra-networks-metadata-button.html
new file mode 100644
index 00000000..ad6d6f41
--- /dev/null
+++ b/html/extra-networks-metadata-button.html
@@ -0,0 +1,4 @@
+<div class="metadata-button card-button"
+    title="Show internal metadata"
+    onclick="extraNetworksRequestMetadata(event, '{page_id}', '{name}')">
+</div>
+\ No newline at end of file
diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html
index 9fb0ec79..20a9b0b8 100644
--- a/html/extra-networks-tree-button.html
+++ b/html/extra-networks-tree-button.html
@@ -1,8 +1,10 @@
 <span data-filterable-item-text hidden>{search_terms}</span>
-<button class="tree-list-content {subclass}"
+<div class="tree-list-content {subclass}"
     expanded="false"
     type="button"
     onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');{onclick_extra}"
+    data-path="{data_path}"
+    data-hash="{data_hash}"
 >
     <span class='tree-list-item-action tree-list-item-action--leading'>
         {action_list_item_action_leading}
@@ -19,4 +21,4 @@
     <span class="tree-list-item-action tree-list-item-action--trailing">
         {action_list_item_action_trailing}
     </span>
-</button>
-\ No newline at end of file
+</div>
+\ No newline at end of file
diff --git a/html/extra-networks-tree.html b/html/extra-networks-tree.html
new file mode 100644
index 00000000..4d29b1be
--- /dev/null
+++ b/html/extra-networks-tree.html
@@ -0,0 +1,42 @@
+<div class="tree-list">
+    <div class="tree-list-controls">
+        <div class="tree-list-search">
+            <input
+                id="{tabname}_{tab_id}_extra_search"
+                class="tree-list-search-text"
+                type="search"
+                placeholder="Filter files"
+            >
+        </div>
+        <div 
+            id="{tabname}_{tab_id}_extra_sort"
+            class="tree-list-sort"
+            data-sortmode="path"
+            data-sortkey="sortPath-Ascending-640"
+            title="Sort by path"
+            onclick="extraNetworksTreeSortOnClick(event, '{tabname}', '{tab_id}');"
+        >
+            <i class="tree-list-sort-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{tab_id}_extra_sort_dir"
+            class="tree-list-sort-dir"
+            data-sortdir="Ascending"
+            title="Sort ascending"
+            onclick="extraNetworksTreeSortDirOnClick(event, '{tabname}', '{tab_id}');"
+        >
+            <i class="tree-list-sort-dir-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{tab_id}_extra_refresh"
+            class="tree-list-refresh"
+            title="Refresh page"
+            onclick="extraNetworksTreeRefreshOnClick(event, '{tabname}', '{tab_id}');"
+        >
+            <i class="tree-list-refresh-icon"></i>
+        </div>
+    </div>
+    <div class="tree-list-container">
+        {tree}
+    </div>
+</div>
+\ No newline at end of file