Fix modalcard key issue

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

@@ -8,8 +8,8 @@
 	export let card: Card;
 	export let showModal: boolean;
 
-	let newTitle = card.title;
+	let newTitle: string = card.title;
-	let newContent = card.content;
+	let newContent: string = card.content;
 
 	async function save(closeModal: boolean = true) {
 		if (card.title !== newTitle || card.content !== newContent) {
@@ -21,22 +21,28 @@
 	}
 </script>
 
+<svelte:window
+	on:keydown|once={(e) => {
+		if (e.key === 'Escape') return save(true);
+	}}
+/>
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="modal" on:click={() => save(true)}>
+<div class="modal" on:click|self|preventDefault={() => 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 () => {
+					on:click|once={async () => {
 						await card.delete();
 						showModal = false;
 					}}
 				>
 					<TrashIcon />
 				</button>
-				<button on:click={() => (showModal = false)}>
+				<button on:click|once={() => (showModal = false)}>
 					<CloseIcon />
 				</button>
 			</div>

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import Card, { cards } from '$lib/types/Card';
-	import CardComponent from '../card/Card.svelte';
-	import AddIcon from '../icons/AddIcon.svelte';
-	import type TagOption from '$lib/types/TagOption';
-	import ProjectTag, { projectTags } from '$lib/types/ProjectTag';
-	import type Project from '$lib/types/Project';
 	import currentDraggedCard from '$lib/stores/currentDraggedCard';
 	import currentView from '$lib/stores/currentView';
+	import Card, { cards } from '$lib/types/Card';
+	import type Project from '$lib/types/Project';
+	import ProjectTag, { projectTags } from '$lib/types/ProjectTag';
+	import type TagOption from '$lib/types/TagOption';
+	import CardComponent from '../card/Card.svelte';
+	import AddIcon from '../icons/AddIcon.svelte';
 
 	export let project: Project;
 	export let option: TagOption | null = null;
@@ -45,6 +45,8 @@
 
 		if (!card) return;
 
+		await card.updateTitle(`untitled ${card.id}`);
+
 		if ($currentView?.filters && $currentView.filters.length > 0) {
 			for (const projectTag of $projectTags) {
 				for (const filter of $currentView.filters) {
@@ -105,7 +107,7 @@
 		</span>
 	</header>
 	<ul>
-		{#each columnCards as card}
+		{#each columnCards as card (card.id)}
 			<CardComponent {card} />
 		{/each}
 	</ul>

frontend/src/lib/components/tags/ModalTagValue.svelte

@@ -15,7 +15,8 @@
 {#if tagType}
 	<td>
 		{#if tagType?.hasOptions}
-			<SelectTags multiple={false} {projectTag} {card} {cardTag} />
+			<!-- multiple={false} -->
+			<SelectTags {projectTag} {card} {cardTag} />
 		{:else if !tagType?.hasOptions}
 			<input />
 		{/if}

frontend/src/routes/project/+page.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import projectsApi from '$lib/api/projectsApi';
+	import ProjectComponent from '$lib/components/project/Project.svelte';
 	import Sidebar from '$lib/components/project/Sidebar.svelte';
+	import currentView from '$lib/stores/currentView';
 	import type Project from '$lib/types/Project';
+	import { views } from '$lib/types/View';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
-	import ProjectComponent from '$lib/components/project/Project.svelte';
+	import { get } from 'svelte/store';
-	import { page } from '$app/stores';
 
 	let project: Project;
 
@@ -20,6 +23,10 @@
 		await projectsApi.getTags(project);
 		await projectsApi.getViews(project);
 		await projectsApi.getCards(project);
+
+		if (get(views).length > 0) {
+			currentView.set(get(views)[0]);
+		}
 	});
 </script>