Fix first-start issues

frontend/src/components/project/card/card.svelte

@@ -7,7 +7,6 @@
 	export let card: Card;
 </script>
 
-<!-- on:dragend={() => currentDraggedCard.set(null)} -->
 <div
 	class="card"
 	tabindex="0"

frontend/src/components/project/groupMenu.svelte

@@ -4,7 +4,7 @@
 	export let isOpen = false;
 	export let choices: { id: number; value: string }[] = [];
 	export let onChoice = (id: number) => {};
-	export let currentChoice: number = -1;
+	export let currentChoice: number;
 </script>
 
 <Menu {isOpen}>

frontend/src/components/project/header.svelte

@@ -6,7 +6,7 @@
 	import GroupMenu from './groupMenu.svelte';
 
 	export let project: Project;
-	export let currentTagId: number;
+	export let view: View;
 	let groupMenuOpen = false;
 
 	function getEmptyTags(): TagValue[] {
@@ -44,7 +44,7 @@
 		<div>
 			<button
 				on:click={() => (groupMenuOpen = !groupMenuOpen)}
-				class:defined={$currentView?.primary_tag_id}>Group</button
+				class:defined={$currentView?.primary_tag_id !== -1}>Group</button
 			>
 			<GroupMenu
 				isOpen={groupMenuOpen}
@@ -53,7 +53,7 @@
 					if (!(await setGroup(id))) return;
 					groupMenuOpen = false;
 				}}
-				currentChoice={currentTagId}
+				currentChoice={view?.primary_tag_id}
 			/>
 		</div>
 		<div>

frontend/src/components/project/project.svelte

@@ -25,29 +25,40 @@
 
 {#if project}
 	<section>
-		{#if view && $projectTags[view.primary_tag_id] && $cards}
+		{#if view}
-			<Header {project} currentTagId={view.primary_tag_id} />
+			<Header {project} {view} />
-			<div class="grid">
+			{#if cards}
-				{#each $projectTags[view.primary_tag_id].options as option}
+				<div class="grid">
+					{#if view.primary_tag_id !== -1}
+						{#each $projectTags[view.primary_tag_id].options as option}
+							<Column
+								{option}
+								columnCards={$cards.filter((c) =>
+									c.tags.map((t) => t.option_id).includes(option.id)
+								)}
+								projectId={project.id}
+							/>
+						{/each}
+					{/if}
 					<Column
-						{option}
+						option={{
-						columnCards={$cards.filter((c) => c.tags.map((t) => t.option_id).includes(option.id))}
+							id: -1,
+							tag_id: view.primary_tag_id,
+							value:
+								view.primary_tag_id !== -1
+									? `No ${$projectTags[view.primary_tag_id].title}`
+									: 'No groups'
+						}}
+						columnCards={view.primary_tag_id !== -1
+							? $cards.filter(
+									(c) => !c.tags.map((t) => t.tag_id).includes(view?.primary_tag_id || -2)
+								)
+							: $cards}
 						projectId={project.id}
+						editable={false}
 					/>
-				{/each}
+				</div>
-				<Column
+			{/if}
-					option={{
-						id: -1,
-						tag_id: view.primary_tag_id,
-						value: `No ${$projectTags[view.primary_tag_id].title}`
-					}}
-					columnCards={$cards.filter(
-						(c) => !c.tags.map((t) => t.tag_id).includes(view?.primary_tag_id || -2)
-					)}
-					projectId={project.id}
-					editable={false}
-				/>
-			</div>
 		{/if}
 	</section>
 {/if}

frontend/src/components/sidebar.svelte

@@ -6,6 +6,7 @@
 	import ViewIcon from './icons/viewIcon.svelte';
 	import projectTags from '../stores/projectTags';
 	import EditIcon from './icons/editIcon.svelte';
+	import { get } from 'svelte/store';
 
 	export let project: Project;
 
@@ -15,10 +16,10 @@
 	onMount(async () => {
 		await views.init(project.id);
 
-		if ($views.length > 0) currentView.set($views[0]);
+		if ($views && $views.length > 0) currentView.set($views[0]);
 	});
 
-	async function newView() {
+	async function createView() {
 		if (!$views) return;
 
 		const primaryTagId =
@@ -35,7 +36,6 @@
 	}
 
 	async function saveView(view: View) {
-		await tick();
 		if (!view || !$views.includes(view)) return;
 		if (viewEditId === view.id && viewEditValue !== view.title) {
 			if (!(await views.edit(view))) return;
@@ -53,10 +53,10 @@
 			<span id="version">v0.0.1</span>
 		</div>
 		<div id="views">
+			<h2>{project.title}</h2>
 			{#if views}
-				<h2>{project.title}</h2>
 				<ul>
-					{#each $views as view}
+					{#each get(views) as view}
 						<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 						<li
 							on:click={() => currentView.set(view)}
@@ -79,7 +79,7 @@
 								id="viewTitle-{view.id}"
 								on:keydown={(e) => {
 									if (e.key === 'Enter') {
-										saveView(view);
+										e.currentTarget.blur();
 									}
 								}}
 							/>
@@ -106,12 +106,12 @@
 		<div class="separator"></div>
 		<div
 			id="newView"
-			on:click={newView}
+			on:click={createView}
 			role="button"
 			tabindex="0"
 			on:keydown={(e) => {
 				if (e.key === 'Enter') {
-					newView();
+					createView();
 				}
 			}}
 		>

frontend/src/stores/projectTags.ts

@@ -20,10 +20,12 @@ export default {
 
 		const tags: { [key: number]: MeTag } = {};
 
-		metags.forEach((tag: MeTag) => {
+		if (metags) {
-			if (tag.options === null) tag.options = [];
+			metags.forEach((tag: MeTag) => {
-			tags[tag.id] = tag;
+				if (tag.options === null) tag.options = [];
-		});
+				tags[tag.id] = tag;
+			});
+		}
 
 		set(tags);
 

frontend/src/stores/smallStore.ts

@@ -69,7 +69,9 @@ export const views = (() => {
 			return false;
 		}
 
-		set(response.data);
+		if (response.data) {
+			set(response.data);
+		}
 
 		return true;
 	};