fnx_web/svelte/src/filesystem/Toolbar.svelte

<script lang="ts">
import { createEventDispatcher } from "svelte";
import { copy_text } from "util/Util";
import FileStats from "./FileStats.svelte";
import type { FSNavigator } from "./FSNavigator";
import EditWindow from "./edit_window/EditWindow.svelte";
import { fs_share_url, path_is_shared } from "lib/FilesystemAPI";
import ShareDialog from "./ShareDialog.svelte";
import { bookmark_add, bookmark_del, bookmarks_store, is_bookmark } from "lib/Bookmarks";

let dispatch = createEventDispatcher()

let {
	nav = $bindable(),
	details_visible = $bindable(false),
	edit_window,
	edit_visible = $bindable(false)
}: {
	nav: FSNavigator;
	details_visible?: boolean;
	edit_window: EditWindow;
	edit_visible?: boolean;
} = $props();

let share_dialog: ShareDialog = $state()
let link_copied = $state(false)
export const copy_link = () => {
	const share_url = fs_share_url($nav.path)
	if (share_url === "") {
		edit_window.edit(nav.base, true, "share")
		return
	}

	copy_text(share_url)
	link_copied = true
	setTimeout(() => {link_copied = false}, 60000)
}
</script>

<div class="toolbar">
	<div class="grid">
		<FileStats nav={nav}/>

		<div class="button_row">
			<button onclick={() => {nav.open_sibling(-1)}}>
				<i class="icon">skip_previous</i>
			</button>
			<button onclick={() => {nav.shuffle = !nav.shuffle}} class:button_highlight={nav.shuffle}>
				<i class="icon">shuffle</i>
			</button>
			<button onclick={() => {nav.open_sibling(1)}}>
				<i class="icon">skip_next</i>
			</button>
		</div>

		<button onclick={() => dispatch("download")}>
			<i class="icon">save</i>
			<span>Download</span>
		</button>

		{#if is_bookmark($bookmarks_store, $nav.base.id)}
			<button onclick={() => bookmark_del($nav.base.id)}>
				<i class="icon">bookmark_remove</i>
				<span>Bookmark</span>
			</button>
		{:else}
			<button onclick={() => bookmark_add($nav.base)}>
				<i class="icon">bookmark_add</i>
				<span>Bookmark</span>
			</button>
		{/if}

		{#if path_is_shared($nav.path)}
			<button onclick={copy_link} class:button_highlight={link_copied}>
				<i class="icon">content_copy</i>
				<span><u>C</u>opy link</span>
			</button>
		{/if}

		<!-- Share button is enabled when: The browser has a sharing API, or the user can edit the file (to enable sharing)-->
		{#if navigator.share !== undefined || $nav.permissions.write === true}
			<button onclick={(e) => share_dialog.open(e, nav.path)}>
				<i class="icon">share</i>
				<span>Share</span>
			</button>
		{/if}

		<button onclick={() => details_visible = !details_visible} class:button_highlight={details_visible}>
			<i class="icon">help</i>
			<span>Deta<u>i</u>ls</span>
		</button>

		{#if $nav.base.id !== "me" && $nav.permissions.write === true}
			<button onclick={() => edit_window.edit(nav.base, true, "file")} class:button_highlight={edit_visible}>
				<i class="icon">edit</i>
				<span><u>E</u>dit</span>
			</button>
		{/if}
	</div>
</div>

<ShareDialog nav={nav} bind:this={share_dialog}/>

<style>
.toolbar {
	flex: 0 0 auto;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: max-height 0.3s;
	border-top: 1px solid var(--separator);

	background: var(--shaded_background);
	backdrop-filter: blur(4px);
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
}
.button_row {
	display: flex;
	flex-direction: row;
}
.button_row > * {
	flex: 1 1 auto;
	justify-content: center;
}
</style>