Make filesystem list view columns sortable

svelte/src/filesystem/filemanager/CompactView.svelte

@@ -8,6 +8,7 @@ let dispatch = createEventDispatcher()
 export let nav: FSNavigator
 export let show_hidden = false
 export let large_icons = false
+export let hide_edit = false
 </script>
 
 <div class="directory">
@@ -28,11 +29,17 @@ export let large_icons = false
 				<a
 					href="/d/{child.id}"
 					on:click|preventDefault|stopPropagation={e => {dispatch("node_share_click", {index: index, original: e})}}
-					class="button action_button"
+					class="button flat action_button"
 				>
 					<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 				</a>
 			{/if}
+
+			{#if $nav.permissions.write && !hide_edit}
+				<button class="action_button flat" on:click|preventDefault|stopPropagation={e => dispatch("node_settings", {index: index, original: e})}>
+					<i class="icon">edit</i>
+				</button>
+			{/if}
 		</a>
 	{/each}
 </div>
@@ -42,7 +49,7 @@ export let large_icons = false
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
 	gap: 8px;
-	margin: 8px;
+	padding: 8px;
 	max-width: 100%;
 	overflow: hidden;
 }
@@ -55,6 +62,7 @@ export let large_icons = false
 	align-items: center;
 	background: var(--input_background);
 	border-radius: 4px;
+	box-shadow: 1px 1px 8px 0px var(--shadow_color);
 	gap: 6px;
 }
 .node:hover:not(.node_selected) {
@@ -83,6 +91,12 @@ export let large_icons = false
 .hidden {
 	display: none;
 }
+.flat {
+	background: none;
+	color: var(--body_text_color);
+	box-shadow: none;
+	margin: 0;
+}
 
 /* Large icon mode only supported on wide screens */
 @media (min-width: 500px) {

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -66,7 +66,7 @@ let node_context = (e: CustomEvent<FMNodeEvent>) => {
 }
 const node_share_click = (e: CustomEvent<FMNodeEvent>) => {
 	creating_dir = false
-	nav.navigate(nav.children[e.detail.index].id, true)
+	edit_window.edit(nav.children[e.detail.index], false, "share")
 }
 const node_select = (e: CustomEvent<FMNodeEvent>) => {
 	const index = e.detail.index

svelte/src/filesystem/filemanager/FilePicker.svelte

@@ -189,6 +189,7 @@ onMount(() => {
 			nav={nav}
 			show_hidden={show_hidden}
 			large_icons={large_icons}
+			hide_edit
 			on:node_click={node_click}
 			on:node_context={node_context}
 			on:node_select={node_select}

svelte/src/filesystem/filemanager/ListView.svelte

@@ -3,6 +3,8 @@ import { createEventDispatcher } from "svelte";
 import { formatDataVolume } from "util/Formatting";
 import { fs_encode_path, fs_node_icon } from "filesystem/FilesystemAPI"
 import type { FSNavigator } from "filesystem/FSNavigator";
+import SortButton from "layout/SortButton.svelte";
+import { flip } from "svelte/animate";
 
 let dispatch = createEventDispatcher()
 
@@ -16,8 +18,8 @@ export let hide_branding = false
 <div class="directory">
 	<tr>
 		<td></td>
-		<td>Name</td>
-		<td class="hide_small">Size</td>
+		<td><SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name">Name</SortButton></td>
+		<td><SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size">Size</SortButton></td>
 		<td></td>
 	</tr>
 	{#each $nav.children as child, index (child.path)}
@@ -25,6 +27,7 @@ export let hide_branding = false
 			href={"/d"+fs_encode_path(child.path)}
 			on:click|preventDefault={e => dispatch("node_click", {index: index, original: e})}
 			on:contextmenu={e => dispatch("node_context", {index: index, original: e})}
+			animate:flip={{duration: 500}}
 			class="node"
 			class:node_selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -53,7 +56,7 @@ export let hide_branding = false
 							<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 !== undefined && !hide_branding}
+					{#if child.properties !== undefined && child.properties.branding_enabled === "true" && !hide_branding}
 						<button class="action_button" on:click|preventDefault|stopPropagation={e => dispatch("node_branding", {index: index, original: e})}>
 							<i class="icon">palette</i>
 						</button>
@@ -78,7 +81,7 @@ export let hide_branding = false
 	border-radius: 8px;
 
 	max-width: 99%;
-	width: 1000px;
+	width: 1200px;
 }
 .directory > * {
 	display: table-row;
@@ -120,7 +123,7 @@ td {
 	word-break: break-all;
 }
 .node_size {
-	min-width: 50px;
+	min-width: 5em;
 	white-space: nowrap;
 }
 .icons_wrap {