From 6ae9f06d64815fb6a2ccb3e4d1945c1c6e1d9c8c Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Wed, 19 Apr 2023 18:26:50 +0200
Subject: [PATCH] Add toggle for showing hidden files

---
 .../src/filesystem/filemanager/FileManager.svelte   | 13 +++++++++++--
 .../src/filesystem/filemanager/GalleryView.svelte   |  6 +++++-
 svelte/src/filesystem/filemanager/ListView.svelte   |  9 +++++++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index ef10ccc..e1c2f0e 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -12,6 +12,7 @@ export let directory_view = "list"
 let uploader
 let mode = "viewing"
 let creating_dir = false
+let show_hidden = false
 
 export const upload = files => {
 	return uploader.upload(files)
@@ -112,6 +113,14 @@ const toggle_select = () => {
 				</button>
 			{/if}
 
+			<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>
+
 			<div class="toolbar_spacer"></div>
 			{#if state.permissions.update}
 				<button on:click={uploader.picker} title="Upload files to this directory">
@@ -166,9 +175,9 @@ const toggle_select = () => {
 	</div>
 
 	{#if directory_view === "list"}
-		<ListView state={state} on:node_click={node_click}></ListView>
+		<ListView state={state} show_hidden={show_hidden} on:node_click={node_click}></ListView>
 	{:else if directory_view === "gallery"}
-		<GalleryView state={state} on:node_click={node_click}></GalleryView>
+		<GalleryView state={state} show_hidden={show_hidden} on:node_click={node_click}></GalleryView>
 	{/if}
 </div>
 
diff --git a/svelte/src/filesystem/filemanager/GalleryView.svelte b/svelte/src/filesystem/filemanager/GalleryView.svelte
index ff2d360..b2442e0 100644
--- a/svelte/src/filesystem/filemanager/GalleryView.svelte
+++ b/svelte/src/filesystem/filemanager/GalleryView.svelte
@@ -3,7 +3,7 @@ import { createEventDispatcher } from "svelte"
 let dispatch = createEventDispatcher()
 
 export let state
-
+export let show_hidden = false
 
 const node_icon = node => {
 	if (node.type === "dir") {
@@ -51,6 +51,7 @@ const node_icon = node => {
 			href={state.path_root+child.path}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
 			class:selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".") && !show_hidden}
 			title={child.name}
 		>
 			<div
@@ -105,4 +106,7 @@ const node_icon = node => {
 	font-size: 22px;
 	text-align: left;
 }
+.hidden {
+	display: none;
+}
 </style>
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 2211361..0c999df 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -5,6 +5,7 @@ import { formatDataVolume } from "../../util/Formatting.svelte";
 let dispatch = createEventDispatcher()
 
 export let state
+export let show_hidden = false
 
 const node_icon = node => {
 	if (node.type === "dir") {
@@ -45,7 +46,6 @@ const node_icon = node => {
 
 </script>
 
-
 <div class="directory">
 	<tr>
 		<td></td>
@@ -57,7 +57,9 @@ const node_icon = node => {
 			href={state.path_root+child.path}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
 			class="node"
-			class:node_selected={child.fm_selected}>
+			class:node_selected={child.fm_selected}
+			class:hidden={child.name.startsWith(".") && !show_hidden}
+		>
 			<td>
 				<img src={node_icon(child)} class="node_icon" alt="icon"/>
 			</td>
@@ -131,4 +133,7 @@ td {
 	min-width: 50px;
 	white-space: nowrap;
 }
+.hidden {
+	display: none;
+}
 </style>