Fix modalCard removal and update

frontend/src/lib/components/card/Card.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import currentDraggedCard from '$lib/stores/currentDraggedCard';
-	import currentModalCard from '$lib/stores/currentModalCard';
 	import type Card from '$lib/types/Card';
 	import ModalCard from './ModalCard.svelte';
 
 	export let card: Card;
+
+	let showModal = false;
 </script>
 
 <div
@@ -12,15 +13,13 @@
 	tabindex="0"
 	draggable={true}
 	on:dragstart={() => currentDraggedCard.set(card)}
-	on:click={() => currentModalCard.set(card.id)}
+	on:click={() => (showModal = true)}
 	role="button"
 	on:keydown={(e) => {
-		if (e.key === 'Enter') {
+		if (e.key === 'Enter') showModal = true;
-			currentModalCard.set(card.id);
-		}
 	}}
 >
-	<div class="title">{card.title}</div>
+	<div class="title">{card.id} - {card.title}</div>
 	<div class="tags">
 		{#each card.cardTags as tag}
 			{#if tag.option}
@@ -32,7 +31,9 @@
 	</div>
 </div>
 
-<ModalCard {card} />
+{#if showModal}
+	<ModalCard {card} bind:showModal />
+{/if}
 
 <style lang="less">
 	.card {

frontend/src/lib/components/card/ModalCard.svelte

@@ -2,11 +2,11 @@
 	import CloseIcon from '$lib/components/icons/CloseIcon.svelte';
 	import TrashIcon from '$lib/components/icons/TrashIcon.svelte';
 	import ModalTags from '$lib/components/tags/ModalTags.svelte';
-	import currentModalCard from '$lib/stores/currentModalCard';
 	import type Card from '$lib/types/Card';
 	import { cards } from '$lib/types/Card';
 
 	export let card: Card;
+	export let showModal: boolean;
 
 	let newTitle = card.title;
 	let newContent = card.content;
@@ -15,13 +15,12 @@
 		if (card.title !== newTitle || card.content !== newContent) {
 			if (!(await card.update(newTitle, newContent))) return;
 		}
-		if (closeModal) currentModalCard.set(null);
+		if (closeModal) showModal = false;
 
 		cards.reload();
 	}
 </script>
 
-{#if $currentModalCard == card.id}
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="modal" on:click={() => save(true)}>
@@ -29,10 +28,15 @@
 		<div class="header">
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">
-					<button on:click={() => card.delete()}>
+				<button
+					on:click={async () => {
+						await card.delete();
+						showModal = false;
+					}}
+				>
 					<TrashIcon />
 				</button>
-					<button on:click={() => currentModalCard.set(null)}>
+				<button on:click={() => (showModal = false)}>
 					<CloseIcon />
 				</button>
 			</div>
@@ -49,7 +53,6 @@
 		</div>
 	</div>
 </div>
-{/if}
 
 <style lang="less">
 	.modal {

frontend/src/lib/components/project/Sidebar.svelte

@@ -45,8 +45,10 @@
 <nav class:hidden={!isVisible}>
 	<div>
 		<div id="branding">
+			<a href="/">
 				<span id="title">Focus.</span>
 				<span id="version">v0.0.1</span>
+			</a>
 		</div>
 		<div id="views">
 			<h2>{project.title}</h2>

frontend/src/lib/stores/currentModalCard.ts

@@ -1,8 +0,0 @@
-import { writable } from 'svelte/store';
-
-const { subscribe, set, update } = writable(null as number | null);
-
-export default {
-	subscribe,
-	set
-};