From b13d88375bd523f4d7f01bb6a6e540ba95e4ce76 Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Fri, 5 Jan 2024 01:14:54 +0100
Subject: [PATCH] Move to $lib

---
 .../components/project/card/modal_tags.svelte |  21 ----
 frontend/src/lib/api/cards.ts                 | 103 ++++++++++++++++++
 frontend/src/lib/api/projects.ts              |  25 +++++
 frontend/src/lib/api/tags.ts                  |  17 +++
 .../{ => lib}/components/icons/addIcon.svelte |   0
 .../icons/chevron-right-svgrepo-com.svg       |   0
 .../components/icons/closeIcon.svelte         |   0
 .../components/icons/editIcon.svelte          |   0
 .../components/icons/menu_opener.svelte       |   0
 .../components/icons/trashIcon.svelte         |   0
 .../components/icons/viewIcon.svelte          |   0
 .../components/project/card/card.svelte       |  14 +--
 .../card/header/menus/group_menu.svelte       |   0
 .../card/header/menus/sort_menu.svelte        |   0
 .../components/project/card/modal_card.svelte |   2 +-
 .../components/project/card/modal_tag.svelte  |   2 +-
 .../card/modal_tag/modal_new_tag.svelte       |  10 +-
 .../card/modal_tag/modal_tag_title.svelte     |  14 +--
 .../card/modal_tag/modal_tag_types.svelte     |   4 +-
 .../card/modal_tag/modal_tag_value.svelte     |   6 +-
 .../project/card/modal_tag/select_tags.svelte |  20 ++--
 .../components/project/card/modal_tags.svelte |  17 +++
 .../components/project/column.svelte          |   6 +-
 .../components/project/header.svelte          |   2 +-
 .../components/project/project.svelte         |   6 +-
 .../components/projects/selectProject.svelte  |   4 +-
 .../src/{ => lib}/components/sidebar.svelte   |   5 +-
 .../{ => lib}/components/utils/menu.svelte    |   0
 frontend/src/{ => lib}/stores/config.ts       |   0
 frontend/src/{ => lib}/stores/interfaces.ts   |   0
 .../stores/project_tags.ts}                   |   4 +-
 frontend/src/{ => lib}/stores/smallStore.ts   |  14 ++-
 frontend/src/{ => lib}/utils/api.ts           |   2 +-
 frontend/src/{ => lib}/utils/status.ts        |   0
 frontend/src/{ => lib}/utils/tagTypes.ts      |   0
 frontend/src/{ => lib}/utils/toasts.ts        |   0
 frontend/src/routes/+page.svelte              |   8 +-
 frontend/src/routes/[project]/+page.svelte    |   8 +-
 38 files changed, 229 insertions(+), 85 deletions(-)
 delete mode 100644 frontend/src/components/project/card/modal_tags.svelte
 create mode 100644 frontend/src/lib/api/cards.ts
 create mode 100644 frontend/src/lib/api/projects.ts
 create mode 100644 frontend/src/lib/api/tags.ts
 rename frontend/src/{ => lib}/components/icons/addIcon.svelte (100%)
 rename frontend/src/{ => lib}/components/icons/chevron-right-svgrepo-com.svg (100%)
 rename frontend/src/{ => lib}/components/icons/closeIcon.svelte (100%)
 rename frontend/src/{ => lib}/components/icons/editIcon.svelte (100%)
 rename frontend/src/{ => lib}/components/icons/menu_opener.svelte (100%)
 rename frontend/src/{ => lib}/components/icons/trashIcon.svelte (100%)
 rename frontend/src/{ => lib}/components/icons/viewIcon.svelte (100%)
 rename frontend/src/{ => lib}/components/project/card/card.svelte (73%)
 rename frontend/src/{ => lib}/components/project/card/header/menus/group_menu.svelte (100%)
 rename frontend/src/{ => lib}/components/project/card/header/menus/sort_menu.svelte (100%)
 rename frontend/src/{ => lib}/components/project/card/modal_card.svelte (99%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag.svelte (88%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag/modal_new_tag.svelte (85%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag/modal_tag_title.svelte (88%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag/modal_tag_types.svelte (91%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag/modal_tag_value.svelte (62%)
 rename frontend/src/{ => lib}/components/project/card/modal_tag/select_tags.svelte (87%)
 create mode 100644 frontend/src/lib/components/project/card/modal_tags.svelte
 rename frontend/src/{ => lib}/components/project/column.svelte (98%)
 rename frontend/src/{ => lib}/components/project/header.svelte (98%)
 rename frontend/src/{ => lib}/components/project/project.svelte (92%)
 rename frontend/src/{ => lib}/components/projects/selectProject.svelte (96%)
 rename frontend/src/{ => lib}/components/sidebar.svelte (97%)
 rename frontend/src/{ => lib}/components/utils/menu.svelte (100%)
 rename frontend/src/{ => lib}/stores/config.ts (100%)
 rename frontend/src/{ => lib}/stores/interfaces.ts (100%)
 rename frontend/src/{stores/projectTags.ts => lib/stores/project_tags.ts} (96%)
 rename frontend/src/{ => lib}/stores/smallStore.ts (90%)
 rename frontend/src/{ => lib}/utils/api.ts (94%)
 rename frontend/src/{ => lib}/utils/status.ts (100%)
 rename frontend/src/{ => lib}/utils/tagTypes.ts (100%)
 rename frontend/src/{ => lib}/utils/toasts.ts (100%)

diff --git a/frontend/src/components/project/card/modal_tags.svelte b/frontend/src/components/project/card/modal_tags.svelte
deleted file mode 100644
index 01ba14d..0000000
--- a/frontend/src/components/project/card/modal_tags.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { Card } from '../../../stores/interfaces';
-	import projectTags from '../../../stores/projectTags';
-	import ModalTag from './modal_tag.svelte';
-	import ModalNewTag from './modal_tag/modal_new_tag.svelte';
-
-	export let card: Card;
-</script>
-
-<table>
-	{#if card.tags}
-		{#each Object.values($projectTags) as projectTag}
-			<ModalTag
-				tagValue={card.tags.find((t) => t.tag_id === projectTag.id)}
-				bind:projectTag
-				{card}
-			/>
-		{/each}
-	{/if}
-	<ModalNewTag projectId={card.project_id} />
-</table>
diff --git a/frontend/src/lib/api/cards.ts b/frontend/src/lib/api/cards.ts
new file mode 100644
index 0000000..aeb8387
--- /dev/null
+++ b/frontend/src/lib/api/cards.ts
@@ -0,0 +1,103 @@
+import type { Card, TagValue } from '../stores/interfaces';
+import api, { processError } from '../utils/api';
+import status from '../utils/status';
+
+export async function newCardApi(projectId: number, tags: TagValue[]): Promise<Card> {
+	const response = await api.post(`/v1/cards`, {
+		project_id: projectId,
+		title: 'Untitled',
+		content: ''
+	});
+
+	if (response.status !== status.Created) {
+		processError(response, 'Failed to create card');
+		return Promise.reject();
+	}
+
+	const id: number = response.data.id;
+
+	const consistant_tags = [];
+
+	for (const tag of tags) {
+		if ((tag.option_id === -1 && tag.value == '') || tag.tag_id === -1) continue;
+		await createCardTagApi(id, tag.tag_id, tag.option_id, tag.value);
+		consistant_tags.push({ ...tag, card_id: id });
+	}
+
+	return {
+		id: id,
+		project_id: projectId,
+		title: 'Untitled',
+		content: '',
+		tags: consistant_tags
+	};
+}
+
+export async function updateCardApi(card: Card): Promise<boolean> {
+	const response = await api.put(`/v1/cards/${card.id}`, {
+		project_id: card.project_id,
+		title: card.title,
+		content: card.content
+	});
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update card');
+		return false;
+	}
+
+	return true;
+}
+
+export async function deleteCardApi(cardID: number): Promise<void> {
+	const response = await api.delete(`/v1/cards/${cardID}`);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to delete card');
+		return Promise.reject();
+	}
+}
+
+export async function createCardTagApi(
+	cardId: number,
+	tagId: number,
+	optionId: number | null,
+	value: string | null
+): Promise<boolean> {
+	const response = await api.post(`/v1/cards/${cardId}/tags/${tagId}`, {
+		option_id: optionId,
+		value: value
+	});
+
+	if (response.status !== status.Created) {
+		processError(response, 'Failed to create card tag');
+		return false;
+	}
+
+	return true;
+}
+
+export async function deleteCardTagApi(cardID: number, tagID: number): Promise<void> {
+	const response = await api.delete(`/v1/cards/${cardID}/tags/${tagID}`);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to delete tag');
+		return Promise.reject();
+	}
+}
+
+export async function updateCardTagApi(
+	cardID: number,
+	tagID: number,
+	option_id: number | null,
+	value: string | null
+): Promise<void> {
+	const response = await api.put(`/v1/cards/${cardID}/tags/${tagID}`, {
+		option_id: option_id == -1 ? null : option_id,
+		value: value == '' ? null : value
+	});
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update card tag');
+		return Promise.reject();
+	}
+}
diff --git a/frontend/src/lib/api/projects.ts b/frontend/src/lib/api/projects.ts
new file mode 100644
index 0000000..44160cf
--- /dev/null
+++ b/frontend/src/lib/api/projects.ts
@@ -0,0 +1,25 @@
+import { parseCards, type Card, type Project } from '$lib/stores/interfaces';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
+
+export async function getProjectAPI(projectId: number): Promise<Project> {
+	const response = await api.get(`/v1/projects/${projectId}`);
+
+	if (response.status !== status.OK) {
+		processError(response, 'Failed to fetch project');
+		return Promise.reject();
+	}
+
+	return response.data;
+}
+
+export async function getProjectCardsAPI(projectId: number): Promise<Card[]> {
+	const response = await api.get(`/v1/projects/${projectId}/cards`);
+
+	if (response.status !== status.OK) {
+		processError(response, 'Failed to fetch cards');
+		return Promise.reject();
+	}
+
+	return parseCards(response.data);
+}
diff --git a/frontend/src/lib/api/tags.ts b/frontend/src/lib/api/tags.ts
new file mode 100644
index 0000000..07cbd8f
--- /dev/null
+++ b/frontend/src/lib/api/tags.ts
@@ -0,0 +1,17 @@
+import type { MeTag, TagOption } from '$lib/stores/interfaces';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
+
+export async function updateTagAPI(option: TagOption): Promise<boolean> {
+	const response =
+		option.value === ''
+			? await api.delete(`/v1/tags/${option.tag_id}/options/${option.id}`)
+			: await api.put(`/v1/tags/${option.tag_id}/options/${option.id}`, option);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update tag option');
+		return false;
+	}
+
+	return true;
+}
diff --git a/frontend/src/components/icons/addIcon.svelte b/frontend/src/lib/components/icons/addIcon.svelte
similarity index 100%
rename from frontend/src/components/icons/addIcon.svelte
rename to frontend/src/lib/components/icons/addIcon.svelte
diff --git a/frontend/src/components/icons/chevron-right-svgrepo-com.svg b/frontend/src/lib/components/icons/chevron-right-svgrepo-com.svg
similarity index 100%
rename from frontend/src/components/icons/chevron-right-svgrepo-com.svg
rename to frontend/src/lib/components/icons/chevron-right-svgrepo-com.svg
diff --git a/frontend/src/components/icons/closeIcon.svelte b/frontend/src/lib/components/icons/closeIcon.svelte
similarity index 100%
rename from frontend/src/components/icons/closeIcon.svelte
rename to frontend/src/lib/components/icons/closeIcon.svelte
diff --git a/frontend/src/components/icons/editIcon.svelte b/frontend/src/lib/components/icons/editIcon.svelte
similarity index 100%
rename from frontend/src/components/icons/editIcon.svelte
rename to frontend/src/lib/components/icons/editIcon.svelte
diff --git a/frontend/src/components/icons/menu_opener.svelte b/frontend/src/lib/components/icons/menu_opener.svelte
similarity index 100%
rename from frontend/src/components/icons/menu_opener.svelte
rename to frontend/src/lib/components/icons/menu_opener.svelte
diff --git a/frontend/src/components/icons/trashIcon.svelte b/frontend/src/lib/components/icons/trashIcon.svelte
similarity index 100%
rename from frontend/src/components/icons/trashIcon.svelte
rename to frontend/src/lib/components/icons/trashIcon.svelte
diff --git a/frontend/src/components/icons/viewIcon.svelte b/frontend/src/lib/components/icons/viewIcon.svelte
similarity index 100%
rename from frontend/src/components/icons/viewIcon.svelte
rename to frontend/src/lib/components/icons/viewIcon.svelte
diff --git a/frontend/src/components/project/card/card.svelte b/frontend/src/lib/components/project/card/card.svelte
similarity index 73%
rename from frontend/src/components/project/card/card.svelte
rename to frontend/src/lib/components/project/card/card.svelte
index 18fe130..8dab445 100644
--- a/frontend/src/components/project/card/card.svelte
+++ b/frontend/src/lib/components/project/card/card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Card } from '../../../stores/interfaces';
-	import projectTags from '../../../stores/projectTags';
-	import { currentModalCard, currentDraggedCard } from '../../../stores/smallStore';
+	import type { Card } from '$lib/stores/interfaces';
+	import project_tags from '$lib/stores/project_tags';
+	import { currentDraggedCard, currentModalCard } from '$lib/stores/smallStore';
 	import ModalCard from './modal_card.svelte';
 
 	export let card: Card;
@@ -12,11 +12,11 @@
 	tabindex="0"
 	draggable={true}
 	on:dragstart={() => currentDraggedCard.set(card)}
-	on:click={() => ($currentModalCard = card.id)}
+	on:click={() => currentModalCard.set(card.id)}
 	role="button"
 	on:keydown={(e) => {
 		if (e.key === 'Enter') {
-			$currentModalCard = card.id;
+			currentModalCard.set(card.id);
 		}
 	}}
 >
@@ -25,9 +25,9 @@
 		<div class="tags">
 			{#each card.tags as tag}
 				{#if tag.option_id}
-					{#if $projectTags[tag.tag_id]}
+					{#if $project_tags[tag.tag_id]}
 						<span class="tag" style="border: 1px solid #333"
-							>{$projectTags[tag.tag_id]?.options.find((o) => o.id == tag.option_id)?.value}</span
+							>{$project_tags[tag.tag_id]?.options.find((o) => o.id == tag.option_id)?.value}</span
 						>
 					{/if}
 				{:else if tag.value}
diff --git a/frontend/src/components/project/card/header/menus/group_menu.svelte b/frontend/src/lib/components/project/card/header/menus/group_menu.svelte
similarity index 100%
rename from frontend/src/components/project/card/header/menus/group_menu.svelte
rename to frontend/src/lib/components/project/card/header/menus/group_menu.svelte
diff --git a/frontend/src/components/project/card/header/menus/sort_menu.svelte b/frontend/src/lib/components/project/card/header/menus/sort_menu.svelte
similarity index 100%
rename from frontend/src/components/project/card/header/menus/sort_menu.svelte
rename to frontend/src/lib/components/project/card/header/menus/sort_menu.svelte
diff --git a/frontend/src/components/project/card/modal_card.svelte b/frontend/src/lib/components/project/card/modal_card.svelte
similarity index 99%
rename from frontend/src/components/project/card/modal_card.svelte
rename to frontend/src/lib/components/project/card/modal_card.svelte
index cd96771..a918b74 100644
--- a/frontend/src/components/project/card/modal_card.svelte
+++ b/frontend/src/lib/components/project/card/modal_card.svelte
@@ -45,7 +45,7 @@
 				</div>
 			</div>
 			<div class="tags">
-				<ModalTags bind:card />
+				<ModalTags {card} />
 			</div>
 			<div class="body">
 				<textarea
diff --git a/frontend/src/components/project/card/modal_tag.svelte b/frontend/src/lib/components/project/card/modal_tag.svelte
similarity index 88%
rename from frontend/src/components/project/card/modal_tag.svelte
rename to frontend/src/lib/components/project/card/modal_tag.svelte
index 5f06132..ec870c8 100644
--- a/frontend/src/components/project/card/modal_tag.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag.svelte
@@ -11,6 +11,6 @@
 {#if projectTag}
 	<tr>
 		<ModalTagTitle {projectTag} />
-		<ModalTagValue {projectTag} bind:tagValue {card} />
+		<ModalTagValue {projectTag} {tagValue} {card} />
 	</tr>
 {/if}
diff --git a/frontend/src/components/project/card/modal_tag/modal_new_tag.svelte b/frontend/src/lib/components/project/card/modal_tag/modal_new_tag.svelte
similarity index 85%
rename from frontend/src/components/project/card/modal_tag/modal_new_tag.svelte
rename to frontend/src/lib/components/project/card/modal_tag/modal_new_tag.svelte
index 256587c..021daf8 100644
--- a/frontend/src/components/project/card/modal_tag/modal_new_tag.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag/modal_new_tag.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import AddIcon from '../../../icons/addIcon.svelte';
-	import Menu from '../../../utils/menu.svelte';
 	import ModalTagTypes from './modal_tag_types.svelte';
-	import projectTags from '../../../../stores/projectTags';
-	import { toastAlert } from '../../../../utils/toasts';
+	import { toastAlert } from '$lib/utils/toasts';
+	import project_tags from '$lib/stores/project_tags';
+	import AddIcon from '$lib/components/icons/addIcon.svelte';
+	import Menu from '$lib/components/utils/menu.svelte';
 
 	export let projectId: number;
 
@@ -27,7 +27,7 @@
 			toastAlert('Failed to create tag', `ProjectId is ${projectId}`);
 			return;
 		}
-		await projectTags.add(projectId, title, typeId);
+		await project_tags.add(projectId, title, typeId);
 		isOpen = false;
 	}
 </script>
diff --git a/frontend/src/components/project/card/modal_tag/modal_tag_title.svelte b/frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte
similarity index 88%
rename from frontend/src/components/project/card/modal_tag/modal_tag_title.svelte
rename to frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte
index 41d6da5..2fa0bc2 100644
--- a/frontend/src/components/project/card/modal_tag/modal_tag_title.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import type { MeTag } from '../../../../stores/interfaces';
-	import Menu from '../../../utils/menu.svelte';
-	import projectTags from '../../../../stores/projectTags';
-	import { toastAlert } from '../../../../utils/toasts';
 	import ModalTagTypes from './modal_tag_types.svelte';
+	import type { MeTag } from '$lib/stores/interfaces';
+	import { toastAlert } from '$lib/utils/toasts';
+	import project_tags from '$lib/stores/project_tags';
+	import Menu from '$lib/components/utils/menu.svelte';
 
 	export let projectTag: MeTag;
 
@@ -28,7 +28,7 @@
 			return;
 		}
 
-		await projectTags.update(projectTag);
+		await project_tags.update(projectTag);
 
 		lastTitle = projectTag.title;
 	}
@@ -71,7 +71,7 @@
 				onChoice={async (id) => {
 					projectTag.type = id;
 
-					await projectTags.update(projectTag);
+					await project_tags.update(projectTag);
 				}}
 			/>
 			{#if askConfirm}
@@ -80,7 +80,7 @@
 					<div>
 						<button
 							on:click={() => {
-								projectTags.delete(projectTag.id);
+								project_tags.delete(projectTag.id);
 								isMenuOpen = false;
 							}}>✓</button
 						>
diff --git a/frontend/src/components/project/card/modal_tag/modal_tag_types.svelte b/frontend/src/lib/components/project/card/modal_tag/modal_tag_types.svelte
similarity index 91%
rename from frontend/src/components/project/card/modal_tag/modal_tag_types.svelte
rename to frontend/src/lib/components/project/card/modal_tag/modal_tag_types.svelte
index e0cd2d2..01c29d3 100644
--- a/frontend/src/components/project/card/modal_tag/modal_tag_types.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag/modal_tag_types.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getTagTypeFromId, tagTypes } from '../../../../utils/tagTypes';
-	import Menu from '../../../utils/menu.svelte';
+	import Menu from '$lib/components/utils/menu.svelte';
+	import { getTagTypeFromId, tagTypes } from '$lib/utils/tagTypes';
 
 	export let type: number;
 	export let isTagMenuOpen: boolean = false;
diff --git a/frontend/src/components/project/card/modal_tag/modal_tag_value.svelte b/frontend/src/lib/components/project/card/modal_tag/modal_tag_value.svelte
similarity index 62%
rename from frontend/src/components/project/card/modal_tag/modal_tag_value.svelte
rename to frontend/src/lib/components/project/card/modal_tag/modal_tag_value.svelte
index d3ee6c2..948f39b 100644
--- a/frontend/src/components/project/card/modal_tag/modal_tag_value.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag/modal_tag_value.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { Card, MeTag, TagValue } from '../../../../stores/interfaces';
-	import { getTagTypeFromId } from '../../../../utils/tagTypes';
+	import type { MeTag, TagValue, Card } from '$lib/stores/interfaces';
+	import { getTagTypeFromId } from '$lib/utils/tagTypes';
 	import SelectTags from './select_tags.svelte';
 
 	export let projectTag: MeTag;
@@ -13,7 +13,7 @@
 {#if tagType}
 	<td>
 		{#if tagType?.hasOptions}
-			<SelectTags multiple={false} {projectTag} {card} bind:tagValue />
+			<SelectTags multiple={false} {projectTag} {card} {tagValue} />
 		{:else if !tagType?.hasOptions}
 			<input />
 		{/if}
diff --git a/frontend/src/components/project/card/modal_tag/select_tags.svelte b/frontend/src/lib/components/project/card/modal_tag/select_tags.svelte
similarity index 87%
rename from frontend/src/components/project/card/modal_tag/select_tags.svelte
rename to frontend/src/lib/components/project/card/modal_tag/select_tags.svelte
index 574827a..f35bac3 100644
--- a/frontend/src/components/project/card/modal_tag/select_tags.svelte
+++ b/frontend/src/lib/components/project/card/modal_tag/select_tags.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { updateCardTagApi } from '../../../../api/cards';
-	import type { Card, MeTag, TagOption, TagValue } from '../../../../stores/interfaces';
-	import projectTags from '../../../../stores/projectTags';
-	import { cards } from '../../../../stores/smallStore';
-	import api, { processError } from '../../../../utils/api';
-	import status from '../../../../utils/status';
-	import TrashIcon from '../../../icons/trashIcon.svelte';
-	import Menu from '../../../utils/menu.svelte';
+	import { updateCardTagApi } from '$lib/api/cards';
+	import TrashIcon from '$lib/components/icons/trashIcon.svelte';
+	import Menu from '$lib/components/utils/menu.svelte';
+	import type { Card, MeTag, TagValue } from '$lib/stores/interfaces';
+	import project_tags from '$lib/stores/project_tags';
+	import { cards } from '$lib/stores/smallStore';
+	import api, { processError } from '$lib/utils/api';
+	import status from '$lib/utils/status';
 
 	export const multiple: boolean = false;
 	export let card: Card;
@@ -81,7 +81,7 @@
 
 	function createOption() {
 		if (!newOption) return;
-		projectTags.addOption(projectTag.id, newOption);
+		project_tags.addOption(projectTag.id, newOption);
 		newOption = '';
 	}
 </script>
@@ -127,7 +127,7 @@
 			<span class="value">{option.value}</span>
 			<button
 				on:click|stopPropagation={() => {
-					projectTags.deleteOption(projectTag.id, option.id);
+					project_tags.deleteOption(projectTag.id, option.id);
 				}}><TrashIcon size={16} /></button
 			>
 		</div>
diff --git a/frontend/src/lib/components/project/card/modal_tags.svelte b/frontend/src/lib/components/project/card/modal_tags.svelte
new file mode 100644
index 0000000..7d4c9e6
--- /dev/null
+++ b/frontend/src/lib/components/project/card/modal_tags.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Card } from '$lib/stores/interfaces';
+	import ModalTag from './modal_tag.svelte';
+	import ModalNewTag from './modal_tag/modal_new_tag.svelte';
+	import ProjectTags from '$lib/stores/project_tags';
+
+	export let card: Card;
+</script>
+
+<table>
+	{#if card.tags}
+		{#each Object.values($ProjectTags) as projectTag}
+			<ModalTag tagValue={card.tags.find((t) => t.tag_id === projectTag.id)} {projectTag} {card} />
+		{/each}
+	{/if}
+	<ModalNewTag projectId={card.project_id} />
+</table>
diff --git a/frontend/src/components/project/column.svelte b/frontend/src/lib/components/project/column.svelte
similarity index 98%
rename from frontend/src/components/project/column.svelte
rename to frontend/src/lib/components/project/column.svelte
index ff94904..2f4b172 100644
--- a/frontend/src/components/project/column.svelte
+++ b/frontend/src/lib/components/project/column.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { Card, TagValue } from '../../stores/interfaces';
-	import { cards, currentDraggedCard } from '../../stores/smallStore';
 	import CardC from './card/card.svelte';
 	import AddIcon from '../icons/addIcon.svelte';
-	import projectTags from '../../stores/projectTags';
 	import { updateTagAPI as updateTagOptionAPI } from '../../api/tags';
 	import { get } from 'svelte/store';
 	import { createCardTagApi, deleteCardTagApi, updateCardTagApi } from '../../api/cards';
+	import type { Card, TagValue } from '../../stores/interfaces';
+	import projectTags from '../../stores/project_tags';
+	import { cards, currentDraggedCard } from '../../stores/smallStore';
 
 	export let projectId: number;
 	export let optionId: number | null = null;
diff --git a/frontend/src/components/project/header.svelte b/frontend/src/lib/components/project/header.svelte
similarity index 98%
rename from frontend/src/components/project/header.svelte
rename to frontend/src/lib/components/project/header.svelte
index aeeb457..aed600c 100644
--- a/frontend/src/components/project/header.svelte
+++ b/frontend/src/lib/components/project/header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Project, TagValue, View } from '../../stores/interfaces';
 	import { cards, currentView, views } from '../../stores/smallStore';
-	import projectTags from '../../stores/projectTags';
+	import projectTags from '../../stores/project_tags';
 	import GroupMenu from './card/header/menus/group_menu.svelte';
 	import SortMenu from './card/header/menus/sort_menu.svelte';
 
diff --git a/frontend/src/components/project/project.svelte b/frontend/src/lib/components/project/project.svelte
similarity index 92%
rename from frontend/src/components/project/project.svelte
rename to frontend/src/lib/components/project/project.svelte
index 9c2d2d7..8d38ff5 100644
--- a/frontend/src/components/project/project.svelte
+++ b/frontend/src/lib/components/project/project.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import Column from './column.svelte';
-	import type { Project, View } from '../../stores/interfaces';
-	import projectTags from '../../stores/projectTags';
-	import { cards, currentView, views } from '../../stores/smallStore';
+	import type { Project, View } from '$lib/stores/interfaces';
+	import projectTags from '$lib/stores/project_tags';
+	import { cards, currentView } from '$lib/stores/smallStore';
 	import Header from './header.svelte';
 
 	export let project: Project;
diff --git a/frontend/src/components/projects/selectProject.svelte b/frontend/src/lib/components/projects/selectProject.svelte
similarity index 96%
rename from frontend/src/components/projects/selectProject.svelte
rename to frontend/src/lib/components/projects/selectProject.svelte
index eff758e..301cb94 100644
--- a/frontend/src/components/projects/selectProject.svelte
+++ b/frontend/src/lib/components/projects/selectProject.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import api, { processError } from '$lib/utils/api';
+	import status from '$lib/utils/status';
 	import type { Project } from '../../stores/interfaces';
-	import api, { processError } from '../../utils/api';
-	import status from '../../utils/status';
 
 	export let project: Project;
 	export let deleteProject: (project: Project) => void;
diff --git a/frontend/src/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
similarity index 97%
rename from frontend/src/components/sidebar.svelte
rename to frontend/src/lib/components/sidebar.svelte
index 8d6d72a..99ebb5c 100644
--- a/frontend/src/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
-	import api, { processError } from '../utils/api';
+	import { onMount } from 'svelte';
 	import type { Project, View } from '../stores/interfaces';
 	import { currentView, views } from '../stores/smallStore';
 	import ViewIcon from './icons/viewIcon.svelte';
-	import projectTags from '../stores/projectTags';
 	import EditIcon from './icons/editIcon.svelte';
 	import { get } from 'svelte/store';
 	import MenuOpener from './icons/menu_opener.svelte';
+	import projectTags from '../stores/project_tags';
 
 	export let project: Project;
 
diff --git a/frontend/src/components/utils/menu.svelte b/frontend/src/lib/components/utils/menu.svelte
similarity index 100%
rename from frontend/src/components/utils/menu.svelte
rename to frontend/src/lib/components/utils/menu.svelte
diff --git a/frontend/src/stores/config.ts b/frontend/src/lib/stores/config.ts
similarity index 100%
rename from frontend/src/stores/config.ts
rename to frontend/src/lib/stores/config.ts
diff --git a/frontend/src/stores/interfaces.ts b/frontend/src/lib/stores/interfaces.ts
similarity index 100%
rename from frontend/src/stores/interfaces.ts
rename to frontend/src/lib/stores/interfaces.ts
diff --git a/frontend/src/stores/projectTags.ts b/frontend/src/lib/stores/project_tags.ts
similarity index 96%
rename from frontend/src/stores/projectTags.ts
rename to frontend/src/lib/stores/project_tags.ts
index 033cf00..81895b0 100644
--- a/frontend/src/stores/projectTags.ts
+++ b/frontend/src/lib/stores/project_tags.ts
@@ -1,7 +1,7 @@
 import { get, writable } from 'svelte/store';
 import type { MeTag, TagOption } from './interfaces';
-import api, { processError } from '../utils/api';
-import status from '../utils/status';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
 import { cards } from './smallStore';
 
 const { subscribe, set, update } = writable({} as { [key: number]: MeTag });
diff --git a/frontend/src/stores/smallStore.ts b/frontend/src/lib/stores/smallStore.ts
similarity index 90%
rename from frontend/src/stores/smallStore.ts
rename to frontend/src/lib/stores/smallStore.ts
index 06b2ec7..68624dc 100644
--- a/frontend/src/stores/smallStore.ts
+++ b/frontend/src/lib/stores/smallStore.ts
@@ -1,9 +1,9 @@
 import { writable } from 'svelte/store';
 import { parseCards, type Card, type View, type TagValue } from './interfaces';
-import { deleteCardApi, newCardApi, updateCardApi } from '../api/cards';
-import { getProjectCardsAPI } from '../api/projects';
-import api, { processError } from '../utils/api';
-import status from '../utils/status';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
+import { getProjectCardsAPI } from '$lib/api/projects';
+import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
 
 export const currentView = (() => {
 	const { subscribe, set, update } = writable(null as View | null);
@@ -82,7 +82,11 @@ export const views = (() => {
 
 		return true;
 	};
-	const add = async (projectId: number, title: string, primaryTagId: number | null): Promise<View> => {
+	const add = async (
+		projectId: number,
+		title: string,
+		primaryTagId: number | null
+	): Promise<View> => {
 		const response = await api.post(`/v1/views`, {
 			title,
 			project_id: projectId,
diff --git a/frontend/src/utils/api.ts b/frontend/src/lib/utils/api.ts
similarity index 94%
rename from frontend/src/utils/api.ts
rename to frontend/src/lib/utils/api.ts
index bb87744..2e659ed 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/lib/utils/api.ts
@@ -1,7 +1,7 @@
 import axios, { Axios, type AxiosResponse } from 'axios';
-import { backend } from '../stores/config';
 import { toastAlert } from './toasts';
 import { setupCache } from 'axios-cache-interceptor';
+import { backend } from '$lib/stores/config';
 
 export default setupCache(
 	new Axios({
diff --git a/frontend/src/utils/status.ts b/frontend/src/lib/utils/status.ts
similarity index 100%
rename from frontend/src/utils/status.ts
rename to frontend/src/lib/utils/status.ts
diff --git a/frontend/src/utils/tagTypes.ts b/frontend/src/lib/utils/tagTypes.ts
similarity index 100%
rename from frontend/src/utils/tagTypes.ts
rename to frontend/src/lib/utils/tagTypes.ts
diff --git a/frontend/src/utils/toasts.ts b/frontend/src/lib/utils/toasts.ts
similarity index 100%
rename from frontend/src/utils/toasts.ts
rename to frontend/src/lib/utils/toasts.ts
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 570a70c..01636a1 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import type { Project } from '../stores/interfaces';
+	import type { Project } from '../lib/stores/interfaces';
 	import { onMount } from 'svelte';
-	import api, { processError } from '../utils/api';
-	import SelectProject from '../components/projects/selectProject.svelte';
-	import { toastAlert } from '../utils/toasts';
+	import api, { processError } from '../lib/utils/api';
+	import SelectProject from '../lib/components/projects/selectProject.svelte';
+	import { toastAlert } from '../lib/utils/toasts';
 
 	let projects: Project[];
 
diff --git a/frontend/src/routes/[project]/+page.svelte b/frontend/src/routes/[project]/+page.svelte
index 87c7474..c535d95 100644
--- a/frontend/src/routes/[project]/+page.svelte
+++ b/frontend/src/routes/[project]/+page.svelte
@@ -2,10 +2,10 @@
 	import { page } from '$app/stores';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
-	import { getProjectAPI } from '../../api/projects';
-	import { type Project as P } from '../../stores/interfaces';
-	import Sidebar from '../../components/sidebar.svelte';
-	import Project from '../../components/project/project.svelte';
+	import { getProjectAPI } from '$lib/api/projects';
+	import { type Project as P } from '$lib/stores/interfaces';
+	import Sidebar from '$lib/components/sidebar.svelte';
+	import Project from '$lib/components/project/project.svelte';
 
 	let projectId: number = +$page.params.project;