Add configurable columns to directory view

svelte/src/layout/CopyButton.svelte

@@ -6,20 +6,22 @@ let {
 	style = "",
 	large_icon = false,
 	small_icon = false,
-	children
+	children,
+	onclick,
 }: {
 	text?: string;
 	style?: string;
 	large_icon?: boolean;
 	small_icon?: boolean;
 	children?: import('svelte').Snippet;
+	onclick?: (e: MouseEvent) => void;
 } = $props();
 
 let failed = $state(false)
 let success = $state(false)
 
 // Exported so it can be called manually
-export const copy = () => {
+export const copy = (e: MouseEvent) => {
 	try {
 		copy_text(text)
 		success = true
@@ -32,6 +34,10 @@ export const copy = () => {
 		success = false
 		failed = false
 	}, 10000)
+
+	if (onclick !== undefined) {
+		onclick(e)
+	}
 }
 </script>
 

svelte/src/layout/Dialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-let { children }: {
+let { children, onclose }: {
 	children?: import('svelte').Snippet;
+	onclose?: () => void
 } = $props();
 let dialog: HTMLDialogElement = $state()
 
@@ -8,12 +9,12 @@ export const open = (origin: DOMRect|MouseEvent) => {
 	// Show the window so we can get the location
 	dialog.showModal()
 
-	const edge_offset = 2
+	const edge_offset = 10
 
 	// Get the egdes of the screen, so the window does not spawn off-screen
 	const dialog_rect = dialog.getBoundingClientRect()
-	const max_left = window.innerWidth - dialog_rect.width - edge_offset
-	const max_top = window.innerHeight - dialog_rect.height - edge_offset
+	const max_left = document.documentElement.clientWidth - dialog_rect.width - edge_offset
+	const max_top = document.documentElement.clientHeight - dialog_rect.height - edge_offset
 
 	let min_left: number, min_top: number
 	if (origin instanceof DOMRect) {
@@ -35,6 +36,9 @@ export const open = (origin: DOMRect|MouseEvent) => {
 
 export const close = () => {
 	dialog.close()
+	if (onclose !== undefined) {
+		onclose()
+	}
 }
 
 // Attach a click handler so that the dialog is closed when the user clicks
@@ -44,7 +48,7 @@ export const close = () => {
 const click = (e: MouseEvent) => {
 	if (e.target === dialog) {
 		e.preventDefault()
-		dialog.close()
+		close()
 	}
 }
 </script>

svelte/src/layout/SortButton.svelte

@@ -4,7 +4,7 @@ let {
 	active_field = "",
 	asc = true,
 	sort_func,
-	children
+	children,
 }: {
 	field?: string;
 	active_field?: string;
@@ -14,7 +14,7 @@ let {
 } = $props();
 </script>
 
-<button onclick={() => sort_func(field)}>
+<button onclick={() => sort_func(field)} class="button flat">
 	{#if active_field === field}
 		{#if asc}↓{:else}↑{/if}
 	{/if}
@@ -25,8 +25,6 @@ let {
 button {
 	display: block;
 	margin: 0;
-	line-height: 1em;
 	width: 100%;
-	text-align: initial;
 }
 </style>