Fix minor issues

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

@@ -4,8 +4,7 @@
 	import ModalCard from './ModalCard.svelte';
 
 	export let card: Card;
-
-	let showModal = false;
+	export let showModal = false;
 </script>
 
 <div

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

@@ -29,8 +29,8 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="modal" on:click|self|preventDefault={() => save(true)}>
-	<div class="content" on:click|stopPropagation>
+<div class="modal" on:click|self={() => save(true)}>
+	<div class="content">
 		<div class="header">
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">

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

@@ -40,13 +40,13 @@
 		cards.reload();
 	}
 
+	let openModalCard: Card | null = null;
+
 	async function addCard() {
 		const card = await Card.create(project);
 
 		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) {

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

@@ -86,7 +86,7 @@
 			{#if $cards}
 				<div class="grid">
 					{#if $currentView.primaryTag}
-						{#each $currentView.primaryTag.options as option}
+						{#each $currentView.primaryTag.options as option (option.id)}
 							<Column
 								{option}
 								primaryTag={$currentView.primaryTag}
@@ -111,7 +111,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		transition: all 0.3s ease-in-out;
 		width: 100vw;
 
 		@media (min-width: 800px) {

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

@@ -3,7 +3,6 @@
 	import Project from '$lib/types/Project';
 	import View, { views } from '$lib/types/View';
 	import { onMount } from 'svelte';
-	import { get } from 'svelte/store';
 	import EditIcon from '../icons/EditIcon.svelte';
 	import MenuOpener from '../icons/MenuOpener.svelte';
 	import ViewIcon from '../icons/ViewIcon.svelte';
@@ -232,10 +231,10 @@
 			&:focus {
 				outline: 0;
 			}
+		}
 
-			&.inEdit {
-				background-color: #fff5;
-			}
+		input.inEdit {
+			background-color: #fff5;
 		}
 
 		button {

frontend/src/lib/types/Project.ts

@@ -31,7 +31,7 @@ export default class Project {
 	}
 
 	static async create(): Promise<Project | null> {
-		const id = await projectsApi.create('untitled');
+		const id = await projectsApi.create('New project');
 
 		if (!id) return null;
 

frontend/src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import projectsApi from '$lib/api/projectsApi';
+	import Project, { projects } from '$lib/types/Project';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
 	import SelectProject from '../lib/components/projects/SelectProject.svelte';
-	import Project, { projects } from '$lib/types/Project';
-	import projectsApi from '$lib/api/projectsApi';
 
 	onMount(async () => {
 		await projectsApi.getAll();
@@ -14,7 +14,7 @@
 	<h2>Projects</h2>
 	<ul>
 		{#if $projects}
-			{#each $projects as project}
+			{#each $projects as project (project.id)}
 				<SelectProject {project} />
 			{/each}
 		{/if}