From 838031c75c0f72460c42c6a5bca449976135bfcc Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Tue, 9 Jan 2024 02:44:43 +0100
Subject: [PATCH] Fix modalCard removal and update

---
 frontend/src/lib/components/card/Card.svelte  | 15 ++---
 .../src/lib/components/card/ModalCard.svelte  | 59 ++++++++++---------
 .../src/lib/components/project/Sidebar.svelte |  6 +-
 frontend/src/lib/stores/currentModalCard.ts   |  8 ---
 4 files changed, 43 insertions(+), 45 deletions(-)
 delete mode 100644 frontend/src/lib/stores/currentModalCard.ts

diff --git a/frontend/src/lib/components/card/Card.svelte b/frontend/src/lib/components/card/Card.svelte
index fc572ad..1aa623f 100644
--- a/frontend/src/lib/components/card/Card.svelte
+++ b/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') {
-			currentModalCard.set(card.id);
-		}
+		if (e.key === 'Enter') showModal = true;
 	}}
 >
-	<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 {
diff --git a/frontend/src/lib/components/card/ModalCard.svelte b/frontend/src/lib/components/card/ModalCard.svelte
index a0ca77d..1a450dd 100644
--- a/frontend/src/lib/components/card/ModalCard.svelte
+++ b/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,41 +15,44 @@
 		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)}>
-		<div class="content" on:click|stopPropagation>
-			<div class="header">
-				<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
-				<div class="buttons">
-					<button on:click={() => card.delete()}>
-						<TrashIcon />
-					</button>
-					<button on:click={() => currentModalCard.set(null)}>
-						<CloseIcon />
-					</button>
-				</div>
-			</div>
-			<div class="tags">
-				<ModalTags {card} />
-			</div>
-			<div class="body">
-				<textarea
-					bind:value={newContent}
-					placeholder="Add a description"
-					on:blur={() => save(false)}
-				/>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="modal" on:click={() => save(true)}>
+	<div class="content" on:click|stopPropagation>
+		<div class="header">
+			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
+			<div class="buttons">
+				<button
+					on:click={async () => {
+						await card.delete();
+						showModal = false;
+					}}
+				>
+					<TrashIcon />
+				</button>
+				<button on:click={() => (showModal = false)}>
+					<CloseIcon />
+				</button>
 			</div>
 		</div>
+		<div class="tags">
+			<ModalTags {card} />
+		</div>
+		<div class="body">
+			<textarea
+				bind:value={newContent}
+				placeholder="Add a description"
+				on:blur={() => save(false)}
+			/>
+		</div>
 	</div>
-{/if}
+</div>
 
 <style lang="less">
 	.modal {
diff --git a/frontend/src/lib/components/project/Sidebar.svelte b/frontend/src/lib/components/project/Sidebar.svelte
index 2af1e89..cbe6253 100644
--- a/frontend/src/lib/components/project/Sidebar.svelte
+++ b/frontend/src/lib/components/project/Sidebar.svelte
@@ -45,8 +45,10 @@
 <nav class:hidden={!isVisible}>
 	<div>
 		<div id="branding">
-			<span id="title">Focus.</span>
-			<span id="version">v0.0.1</span>
+			<a href="/">
+				<span id="title">Focus.</span>
+				<span id="version">v0.0.1</span>
+			</a>
 		</div>
 		<div id="views">
 			<h2>{project.title}</h2>
diff --git a/frontend/src/lib/stores/currentModalCard.ts b/frontend/src/lib/stores/currentModalCard.ts
deleted file mode 100644
index da78365..0000000
--- a/frontend/src/lib/stores/currentModalCard.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { writable } from 'svelte/store';
-
-const { subscribe, set, update } = writable(null as number | null);
-
-export default {
-	subscribe,
-	set
-};