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 editing = $state(false)

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

<div class="title">
	<div class="hide_small">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_small">{bookmark.label}</span>
		</a>
		{#if editing}
			<button onclick={() => bookmark_del(bookmark.id)}>
				<i class="icon">delete</i>
			</button>
		{/if}
	</div>
{/each}

<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;
}
@media(max-width: 1000px) {
	.hide_small {
		display: none;
	}
}
</style>