Allow downloading directories from zip files

svelte/src/file_viewer/viewers/Zip.svelte

@@ -53,7 +53,7 @@ export const set_file = async f => {
 		if (zip.properties !== undefined) {
 			if (zip.properties.includes("read_individual_files")) {
 				// Set the download URL for each file in the zip
-				recursive_set_url(fs_path_url(nav.base.path)+"?zip_file=", zip)
+				recursive_set_url(f.info_href+"/zip", zip)
 			}
 			truncated = zip.properties.includes("truncated")
 		}

svelte/src/file_viewer/viewers/ZipItem.svelte

@@ -13,7 +13,15 @@ export let item = {
 	{#if child.children}
 		<details bind:open={child.details_open}>
 			<summary>
-				{name} ({formatDataVolume(child.size, 3)})
+				<div class="filename">
+					{name}
+					(
+						{formatDataVolume(child.size, 3)}
+						{#if child.download_url}
+							<a href={child.download_url}>download</a>
+						{/if}
+					)
+				</div>
 			</summary>
 
 			<!-- Performance optimization, only render children if details is expanded -->
@@ -29,12 +37,15 @@ export let item = {
 	{#each Object.entries(item.children) as [name, child]}
 		{#if !child.children}
 			<li>
-				{#if child.download_url}
+				<div class="filename">
-					<a href={child.download_url}>{name}</a>
-				{:else}
 					{name}
-				{/if}
+					(
-				({formatDataVolume(child.size, 3)})<br/>
+						{formatDataVolume(child.size, 3)}
+						{#if child.download_url}
+							<a href={child.download_url}>download</a>
+						{/if}
+					)
+				</div>
 			</li>
 		{/if}
 	{/each}
@@ -42,13 +53,34 @@ export let item = {
 
 <style>
 details {
-	padding-left: 12px;
+	padding-left: 0.5em;
 	border: none;
 	border-left: 2px solid var(--separator);
 }
+details > summary {
+	list-style-type: none;
+	display: flex;
+}
+details > summary::before {
+	font-family: 'Material Icons';
+	content: 'folder';
+}
+details[open] > summary::before {
+	font-family: 'Material Icons';
+	content: 'folder_open';
+}
+li::before {
+	font-family: 'Material Icons';
+	content: 'description';
+}
 ul {
+	list-style-type: none;
+	padding-left: 0.5em;
 	margin: 0;
-	padding-left: 30px;
 	border-left: 2px solid var(--separator);
 }
+.filename {
+	display: inline;
+	margin-left: 0.5em;
+}
 </style>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -408,6 +408,7 @@ onMount(() => {
 	padding: 0;
 	background: var(--shaded_background);
 	backdrop-filter: blur(4px);
+	z-index: 1;
 }
 .toolbar {
 	display: flex;