Fork pd_web, remove everything we don't need

svelte/src/filesystem/viewers/ZipItem.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { ZipEntry } from "filesystem/viewers/Zip.svelte";
+import { formatDataVolume } from "util/Formatting";
+
+export let item: ZipEntry = {} as ZipEntry
+</script>
+
+<!-- First get directories and render them as details collapsibles -->
+{#each Object.entries(item.children) as [name, child]}
+	{#if child.children}
+		<details bind:open={child.details_open}>
+			<summary>
+				<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 -->
+			{#if child.details_open}
+				<svelte:self item={child}></svelte:self>
+			{/if}
+		</details>
+	{/if}
+{/each}
+
+<!-- Then get files and render them as list items -->
+<ul>
+	{#each Object.entries(item.children) as [name, child]}
+		{#if !child.children}
+			<li>
+				<div class="filename">
+					{name}
+					(
+						{formatDataVolume(child.size, 3)}
+						{#if child.download_url}
+							<a href={child.download_url}>download</a>
+						{/if}
+					)
+				</div>
+			</li>
+		{/if}
+	{/each}
+</ul>
+
+<style>
+details {
+	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;
+	border-left: 2px solid var(--separator);
+}
+.filename {
+	display: inline;
+	margin-left: 0.5em;
+}
+</style>