From a76afc1bf8d0b4283cb74f15c3b3b6d2403d7786 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Tue, 28 Jan 2025 12:16:37 +0100
Subject: [PATCH] Add compact view to file picker

---
 .../filesystem/filemanager/FilePicker.svelte  | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/svelte/src/filesystem/filemanager/FilePicker.svelte b/svelte/src/filesystem/filemanager/FilePicker.svelte
index 1f84839..0fe9d34 100644
--- a/svelte/src/filesystem/filemanager/FilePicker.svelte
+++ b/svelte/src/filesystem/filemanager/FilePicker.svelte
@@ -2,6 +2,7 @@
 import { createEventDispatcher, onMount } from 'svelte'
 import ListView from './ListView.svelte'
 import GalleryView from './GalleryView.svelte'
+import CompactView from './CompactView.svelte'
 import Modal from '../../util/Modal.svelte';
 import LoadingIndicator from '../../util/LoadingIndicator.svelte';
 import Breadcrumbs from '../Breadcrumbs.svelte'
@@ -52,9 +53,12 @@ const node_select = e => {
 	mode = "selecting"
 	nav.children[index].fm_selected = !nav.children[index].fm_selected
 }
+
 const toggle_view = () => {
 	if (directory_view === "list") {
 		directory_view = "gallery"
+	} else if (directory_view === "gallery") {
+		directory_view = "compact"
 	} else {
 		directory_view = "list"
 	}
@@ -147,12 +151,10 @@ onMount(() => {
 			{/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 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 class="button button_highlight round" on:click={done}>
@@ -182,6 +184,15 @@ onMount(() => {
 			on:node_context={node_context}
 			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_select={node_select}
+		/>
 	{/if}
 
 	<LoadingIndicator loading={loading}/>
@@ -206,4 +217,7 @@ onMount(() => {
 	text-align: center;
 	font-size: 1.2em;
 }
+.icon.button_highlight {
+	border-radius: 4px;
+}
 </style>