From 705ce5d1d7d271707912e564a7f694ad65bf2114 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 17 Dec 2023 16:53:33 +0100
Subject: [PATCH] improve clickable zone for home tree view

---
 .../src/lib/components/home/ItemsList.svelte   |  2 +-
 .../src/lib/components/home/TreeView.svelte    | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 4a56dac26d..d9cdc811af 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -398,7 +398,6 @@
 		{#if !loading}
 			<div class="flex w-full flex-row-reverse gap-2">
 				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
-				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
 					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
 				{:else if $userStore?.is_admin}
@@ -408,6 +407,7 @@
 						options={{ right: `Only f/* and u/${$userStore.username}` }}
 					/>
 				{/if}
+				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
 						wrapperClasses="mb-0.5"
diff --git a/frontend/src/lib/components/home/TreeView.svelte b/frontend/src/lib/components/home/TreeView.svelte
index ec2543c846..433b138d75 100644
--- a/frontend/src/lib/components/home/TreeView.svelte
+++ b/frontend/src/lib/components/home/TreeView.svelte
@@ -29,10 +29,11 @@
 
 {#if isFolder(item)}
 	<div>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
-			class={twMerge(
-				'px-4 py-2 border-b border-t w-full flex flex-row items-center justify-between'
-			)}
+			on:click={() => (opened = !opened)}
+			class="px-4 py-2 border-b w-full flex flex-row items-center justify-between cursor-pointer"
 		>
 			<div
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
@@ -97,7 +98,12 @@
 	</div>
 {:else if isUser(item)}
 	<div>
-		<div class={twMerge('px-4 py-2 border-b w-full flex flex-row items-center justify-between')}>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			on:click={() => (opened = !opened)}
+			class="px-4 py-2 border-b w-full flex flex-row items-center justify-between cursor-pointer"
+		>
 			<div
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
 				style={depth > 0 ? `padding-left: ${depth * 16}px;` : ''}
@@ -115,13 +121,13 @@
 					>
 				</div>
 			</div>
-			<button class="w-full flex flex-row-reverse" on:click={() => (opened = !opened)}>
+			<div class="w-full flex flex-row-reverse" on:click={() => (opened = !opened)}>
 				{#if opened}
 					<ChevronUp size={20} />
 				{:else}
 					<ChevronDown size={20} />
 				{/if}
-			</button>
+			</div>
 		</div>
 		{#if opened}
 			<div>