fnx_web/svelte/src/wrap/Bookmarks.svelte

<script lang="ts">
import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";

let { menu_collapsed }: { menu_collapsed: boolean } = $props();

let editing = $state(false)

const toggle_edit = () => {
	editing = !editing
}
</script>

{#if $bookmarks_store.length !== 0}
	<div class="title">
		<div class:hide={menu_collapsed}>Bookmarks</div>
		<button onclick={() => toggle_edit()} class:button_highlight={editing}>
			<i class="icon">edit</i>
		</button>
	</div>

	{#each $bookmarks_store as bookmark}
		<div class="row">
			<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
				<i class="icon">{bookmark.icon}</i>
				<span class:hide={menu_collapsed}>{bookmark.label}</span>
			</a>
			{#if editing}
				<button onclick={() => bookmark_del(bookmark.id)}>
					<i class="icon">delete</i>
				</button>
			{/if}
		</div>
	{/each}

	<div class="title"></div>
{/if}

<style>
.title {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid var(--separator);
}
.title > div {
	flex: 1 1 auto;
	text-align: center;
}
.title > button {
	flex: 0 0 auto;
}
.row {
	display: flex;
	flex-direction: row;
}
.row>a {
	flex: 1 1 auto;
}
.row>button {
	flex: 0 0 auto;
}
.button {
	background: none;
	box-shadow: none;
}
.hide {
	display: none;
}
</style>