Replace event dispatcher with a callback in filemanager

svelte/src/filesystem/filemanager/ListView.svelte

@@ -1,25 +1,24 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte";
 import { formatDataVolume } from "util/Formatting";
-import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI"
+import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
 import type { FSNavigator } from "filesystem/FSNavigator";
 import SortButton from "layout/SortButton.svelte";
-import { FileAction } from "./FileManagerLib";
-
-let dispatch = createEventDispatcher()
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let {
 	nav,
+	file_event,
 	show_hidden = false,
 	large_icons = false,
 	hide_edit = false,
 	hide_branding = false
 }: {
-	nav: FSNavigator;
-	show_hidden?: boolean;
-	large_icons?: boolean;
-	hide_edit?: boolean;
-	hide_branding?: boolean;
+	nav: FSNavigator
+	file_event: FileActionHandler
+	show_hidden?: boolean
+	large_icons?: boolean
+	hide_edit?: boolean
+	hide_branding?: boolean
 } = $props();
 </script>
 
@@ -35,8 +34,8 @@ let {
 	<tbody>
 		{#each $nav.children as child, index (child.path)}
 			<tr
-				onclick={e => dispatch("file", {index: index, action: FileAction.Click, original: e})}
-				oncontextmenu={e => dispatch("file", {index: index, action: FileAction.Context, original: e})}
+				onclick={e => file_event(FileAction.Click, index, e)}
+				oncontextmenu={e => file_event(FileAction.Context, index, e)}
 				class="node"
 				class:node_selected={child.fm_selected}
 				class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -45,7 +44,7 @@ let {
 					<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
 				</td>
 				<td class="node_name">
-					<a href={"/d"+fs_encode_path(child.path)}>
+					<a class="title_link" href={"/d"+fs_encode_path(child.path)}>
 						{child.name}
 					</a>
 				</td>
@@ -58,22 +57,22 @@ let {
 					<div class="icons_wrap">
 						{#if child.abuse_type !== undefined}
 							<i class="icon" title="This file / directory has received an abuse report. It cannot be shared">block</i>
-						{:else if node_is_shared(child)}
+						{:else if child.is_shared()}
 							<a
 								href="/d/{child.id}"
-								onclick={e => dispatch("file", {index: index, action: FileAction.Share, original: e})}
+								onclick={e => file_event(FileAction.Share, index, e)}
 								class="button action_button"
 							>
 								<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 							</a>
 						{/if}
 						{#if child.properties !== undefined && child.properties.branding_enabled === "true" && !hide_branding}
-							<button class="action_button" onclick={e => dispatch("file", {index: index, action: FileAction.Branding, original: e})}>
+							<button class="action_button" onclick={e => file_event(FileAction.Branding, index, e)}>
 								<i class="icon">palette</i>
 							</button>
 						{/if}
 						{#if !hide_edit}
-							<button class="action_button" onclick={e => dispatch("file", {index: index, action: FileAction.Menu, original: e})}>
+							<button class="action_button" onclick={e => file_event(FileAction.Menu, index, e)}>
 								<i class="icon">menu</i>
 							</button>
 						{/if}
@@ -87,9 +86,9 @@ let {
 <style>
 .directory {
 	display: table;
-	background: var(--shaded_background);
+	background: var(--body_background);
 	border-collapse: collapse;
-	backdrop-filter: blur(4px);
+	/* backdrop-filter: blur(4px); */
 	max-width: 1200px;
 	margin: auto; /* center */
 }
@@ -99,11 +98,14 @@ let {
 .directory > * > * {
 	display: table-cell;
 }
+td {
+	padding: 0;
+}
 .node {
 	display: table-row;
 	text-decoration: none;
 	color: var(--body_text-color);
-	padding: 6px;
+	cursor: pointer;
 }
 .node:not(:last-child) {
 	border-bottom: 1px solid var(--separator);
@@ -118,6 +120,7 @@ let {
 	color: var(--highlight_text_color);
 }
 td {
+	padding: 2px;
 	vertical-align: middle;
 }
 .node_icon {
@@ -132,6 +135,10 @@ td {
 	line-height: 1.2em;
 	word-break: break-all;
 }
+.title_link {
+	text-decoration: none;
+	color: var(--body_text_color);
+}
 .node_size {
 	min-width: 5em;
 	white-space: nowrap;