Add tree-view display for extra networks.

html/extra-networks-card-minimal.html

+<div class="card-minimal" onclick={card_clicked} data-name="{name}">
+    {name}<span class="button-column">{copy_path_button}{metadata_button}{edit_button}</span>
+</div>

html/extra-networks-card.html

 <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>

javascript/extraNetworks.js

@@ -337,6 +337,11 @@ function requestGet(url, data, handler, errorHandler) {
     xhr.send(js);
 }
 
+function extraNetworksCopyCardPath(event, path) {
+    navigator.clipboard.writeText(path);
+    event.stopPropagation();
+}
+
 function extraNetworksRequestMetadata(event, extraPage, cardName) {
     var showError = function() {
         extraNetworksShowMetadata("there was an error getting metadata");

modules/shared_options.py

@@ -238,6 +238,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_dir_button_function": OptionInfo(False, "Add a '/' to the beginning of directory buttons").info("Buttons will display the contents of the selected directory without acting as a search filter."),
     "extra_networks_hidden_models": OptionInfo("When searched", "Show cards for models in hidden directories", gr.Radio, {"choices": ["Always", "When searched", "Never"]}).info('"When searched" option will only show the item when the search string has 4 characters or more'),
     "extra_networks_default_multiplier": OptionInfo(1.0, "Default multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}),
+    "extra_networks_tree_view": OptionInfo(False, "Show extra networks using a directory tree view.").needs_reload_ui(),
     "extra_networks_card_width": OptionInfo(0, "Card width for Extra Networks").info("in pixels"),
     "extra_networks_card_height": OptionInfo(0, "Card height for Extra Networks").info("in pixels"),
     "extra_networks_card_text_scale": OptionInfo(1.0, "Card text scale", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}).info("1 = original size"),

style.css

@@ -1157,3 +1157,95 @@ body.resizing .resize-handle {
     left: 7.5px;
     border-left: 1px dashed var(--border-color-primary);
 }
+
+.extra-network-cards .card .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-cards .card-minimal .button-column {
+    display: inline-flex;
+    visibility: hidden;
+    color: white;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    align-items: center;
+}
+
+.extra-network-cards .card-minimal:hover .button-column {
+    visibility: visible;
+}
+
+.extra-network-cards .card-minimal .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-cards .card-minimal .metadata-button:before{
+    content: "🛈";
+}
+
+.extra-network-cards .card-minimal .edit-button:before{
+    content: "🛠";
+}
+
+.extra-network-cards .card-minimal .card-button {
+    color: white;
+    text-shadow: 2px 2px 3px black;
+    font-size: 1rem;
+    width: 1.5rem;
+}
+
+.extra-network-cards .card-minimal .card-button:hover {
+    color: red;
+}
+
+.extra-network-cards .card-minimal {
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    line-break: anywhere;
+}
+
+.file-item {
+    list-style-type: '📄';
+}
+
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+details[disabled] summary {
+    pointer-events: none;
+    user-select: none;
+}
+
+details.folder-item > summary {
+    list-style-type: '📁';
+}
+
+details.folder-item[open] > summary {
+    list-style-type: '📂';
+}
+
+.file-item,
+.folder-item,
+.folder-item-summary {
+    display: block;
+    font-size: 1rem;
+    padding: 0.05rem;
+    cursor: pointer;
+    user-select: none;
+}
+
+.folder-item-summary:hover,
+.file-item:hover {
+    -webkit-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+    background-color: var(--neutral-200);
+}
+
+.dark .folder-item-summary:hover,
+.dark .file-item:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background-color: var(--neutral-800);
+}