From 6eef8970fa2abe9c0abc6f79bc701f9e1defcc01 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Tue, 28 Jan 2025 12:00:04 +0100
Subject: [PATCH] Add compact view to filesystem

---
 .../filesystem/filemanager/CompactView.svelte |  83 ++++++++++
 .../filesystem/filemanager/FileManager.svelte | 142 +++++++++++-------
 .../upload_widget/FSUploadWidget.svelte       |   4 +-
 3 files changed, 175 insertions(+), 54 deletions(-)
 create mode 100644 svelte/src/filesystem/filemanager/CompactView.svelte

diff --git a/svelte/src/filesystem/filemanager/CompactView.svelte b/svelte/src/filesystem/filemanager/CompactView.svelte
new file mode 100644
index 0000000..0f2dc01
--- /dev/null
+++ b/svelte/src/filesystem/filemanager/CompactView.svelte
@@ -0,0 +1,83 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import { formatDataVolume } from "./../../util/Formatting.svelte";
+import { fs_encode_path, fs_node_icon } from "../FilesystemAPI.mjs"
+
+let dispatch = createEventDispatcher()
+
+export let nav
+export let show_hidden = false
+export let large_icons = false
+</script>
+
+<div class="directory">
+	{#each $nav.children as child, index (child.path)}
+		<a
+			href={"/d"+fs_encode_path(child.path)}
+			on:click|preventDefault={() => dispatch("node_click", index)}
+			on:contextmenu={e => dispatch("node_context", {event: e, index: index})}
+			class="node"
+			class:node_selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".") && !show_hidden}
+		>
+			<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
+			<div class="node_name">
+				{child.name}
+			</div>
+		</a>
+	{/each}
+</div>
+
+<style>
+.directory {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+	gap: 8px;
+	margin: 8px;
+	max-width: 100%;
+	overflow: hidden;
+}
+.node {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	color: var(--body_text-color);
+	padding: 2px;
+	align-items: center;
+	background: var(--input_background);
+	border-radius: 4px;
+	gap: 6px;
+}
+.node:hover:not(.node_selected) {
+	background: var(--input_hover_background);
+	color: var(--input_text);
+	text-decoration: none;
+}
+.node.node_selected {
+	background-color: var(--highlight_color) !important;
+	color: var(--highlight_text_color);
+}
+.node_icon {
+	flex: 0 0 content;
+	height: 2em;
+	width: 2em;
+	vertical-align: middle;
+	border-radius: 4px;
+}
+.node_name {
+	flex: 1 1 content;
+	word-break: break-all;
+	line-height: 1em;
+}
+.hidden {
+	display: none;
+}
+
+/* Large icon mode only supported on wide screens */
+@media (min-width: 500px) {
+	.node_icon.large_icons {
+		height: 4em;
+		width: 4em;
+	}
+}
+</style>
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index fab7da9..7ff2a4b 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -4,6 +4,7 @@ import { onMount } from 'svelte'
 import CreateDirectory from './CreateDirectory.svelte'
 import ListView from './ListView.svelte'
 import GalleryView from './GalleryView.svelte'
+import CompactView from './CompactView.svelte'
 import Button from '../../layout/Button.svelte';
 import FileImporter from './FileImporter.svelte';
 import { formatDate } from '../../util/Formatting.svelte';
@@ -136,6 +137,8 @@ const viewing_mode = () => {
 const toggle_view = () => {
 	if (directory_view === "list") {
 		directory_view = "gallery"
+	} else if (directory_view === "gallery") {
+		directory_view = "compact"
 	} else {
 		directory_view = "list"
 	}
@@ -154,9 +157,21 @@ let moving_items = []
 // We need to detect if shift is pressed so we can select multiple items
 let shift_pressed = false
 let last_selected_node = -1
-const detect_shift = (e) => {
+const keypress = e => {
 	if (e.key === "Shift") {
 		shift_pressed = e.type === "keydown"
+	} else if (e.type === "keydown" && e.key === "a" && e.ctrlKey) {
+		// CTRL + A selects all files
+		selecting_mode()
+		for (let i = 0; i < nav.children.length; i++) {
+			nav.children[i].fm_selected = true
+		}
+		e.preventDefault()
+	} else if (e.type === "keydown" && e.key === "Escape" && mode !== "viewing") {
+		// When escape is pressed we return to viewing mode
+		viewing_mode()
+		e.preventDefault()
+		e.stopPropagation()
 	}
 }
 
@@ -249,7 +264,7 @@ onMount(() => {
 })
 </script>
 
-<svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
+<svelte:window on:keydown={keypress} on:keyup={keypress} />
 
 <div
 	class="container"
@@ -263,65 +278,68 @@ onMount(() => {
 			<SearchBar nav={nav}/>
 
 			<div class="toolbar">
-				<button on:click={navigate_back} title="Back">
-					<i class="icon">arrow_back</i>
-				</button>
-				<button on:click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
-					<i class="icon">north</i>
-				</button>
-				<button on:click={() => nav.reload()} title="Refresh directory listing">
-					<i class="icon">refresh</i>
-				</button>
+				<div class="toolbar_left">
+					<button on:click={navigate_back} title="Back">
+						<i class="icon">arrow_back</i>
+					</button>
+					<button on:click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
+						<i class="icon">north</i>
+					</button>
+					<button on:click={() => nav.reload()} title="Refresh directory listing">
+						<i class="icon">refresh</i>
+					</button>
+				</div>
 
-				<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
-					{#if show_hidden}
-						<i class="icon">visibility_off</i>
-					{:else}
-						<i class="icon">visibility</i>
-					{/if}
-				</button>
-
-				<button on:click={() => toggle_view()} title="Switch between gallery view and list view">
-					{#if directory_view === "list"}
-						<i class="icon">collections</i>
-					{:else if directory_view === "gallery"}
-						<i class="icon">list</i>
-					{/if}
-				</button>
-
-				<button class="button_large_icons" on:click={() => toggle_large_icons()} title="Switch between large and small icons">
-					{#if large_icons}
-						<i class="icon">zoom_out</i>
-					{:else}
-						<i class="icon">zoom_in</i>
-					{/if}
-				</button>
-
-				<div class="toolbar_spacer"></div>
-				{#if $nav.permissions.write}
-					<button on:click={() => upload_widget.pick_files()} title="Upload files to this directory">
-						<i class="icon">cloud_upload</i>
+				<div class="toolbar_middle">
+					<button on:click={() => toggle_view()} title="Switch between gallery, list and compact view">
+						<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
+						<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
+						<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
 					</button>
 
-					<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
-
-					<button on:click={() => file_importer.open()} title="Import files from list">
-						<i class="icon">move_to_inbox</i>
+					<button class="button_large_icons" on:click={() => toggle_large_icons()} title="Switch between large and small icons">
+						{#if large_icons}
+							<i class="icon">zoom_out</i>
+						{:else}
+							<i class="icon">zoom_in</i>
+						{/if}
 					</button>
 
-					<button
-						on:click={selecting_mode}
-						class:button_highlight={mode === "selecting"}
-						title="Select and delete files"
-					>
-						<i class="icon">edit</i>
+					<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
+						{#if show_hidden}
+							<i class="icon">visibility_off</i>
+						{:else}
+							<i class="icon">visibility</i>
+						{/if}
 					</button>
-				{/if}
+				</div>
+
+				<div class="toolbar_right">
+					{#if $nav.permissions.write}
+						<button on:click={() => upload_widget.pick_files()} title="Upload files to this directory">
+							<i class="icon">cloud_upload</i>
+						</button>
+
+						<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
+
+						<button on:click={() => file_importer.open()} title="Import files from list">
+							<i class="icon">move_to_inbox</i>
+						</button>
+
+						<button
+							on:click={selecting_mode}
+							class:button_highlight={mode === "selecting"}
+							title="Select and delete files"
+						>
+							<i class="icon">select_all</i>
+						</button>
+					{/if}
+				</div>
 			</div>
 		{:else if mode === "selecting"}
 			<div class="toolbar toolbar_edit">
 				<Button click={viewing_mode} icon="close"/>
-				<div class="toolbar_spacer"></div>
+				<div class="toolbar_spacer">Selecting files</div>
 				<Button click={move_start} icon="drive_file_move" label="Move"/>
 				<button on:click={delete_selected} class="button_red">
 					<i class="icon">delete</i>
@@ -386,6 +404,16 @@ onMount(() => {
 			on:node_settings={node_settings}
 			on:node_select={node_select}
 		/>
+	{:else if directory_view === "compact"}
+		<CompactView
+			nav={nav}
+			show_hidden={show_hidden}
+			large_icons={large_icons}
+			on:node_click={node_click}
+			on:node_context={node_context}
+			on:node_settings={node_settings}
+			on:node_select={node_select}
+		/>
 	{/if}
 </div>
 
@@ -412,15 +440,20 @@ onMount(() => {
 .toolbar {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	width: 100%;
 	max-width: 1000px;
 	margin: auto;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 }
-.toolbar > * { flex: 0 0 auto; }
+.toolbar > * {
+	flex: 0 0 content;
+	display: flex;
+	flex-direction: row;
+}
 .toolbar_spacer {
 	flex: 1 1 auto;
 	text-align: center;
@@ -428,6 +461,9 @@ onMount(() => {
 .toolbar_edit {
 	background-color: rgba(0, 255, 0, 0.05);
 }
+.icon.button_highlight {
+	border-radius: 4px;
+}
 
 /* Large icon mode only supported on wide screens. Hide the button on small screen */
 @media (max-width: 500px) {
diff --git a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
index 33cb742..00b9f6e 100644
--- a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
@@ -5,6 +5,8 @@ import UploadProgress from "./UploadProgress.svelte";
 
 export let nav
 
+const max_concurrent_uploads = 5
+
 let file_input_field
 let file_input_change = (e) => {
 	// Start uploading the files async
@@ -86,7 +88,7 @@ const start_upload = async () => {
 		return acc
 	}, 0)
 
-	for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
+	for (let i = 0; i < upload_queue.length && active_uploads < max_concurrent_uploads; i++) {
 		if (upload_queue[i]) {
 			if (upload_queue[i].status === "queued") {
 				active_uploads++