Split types in files

frontend/src/api/cards.ts

@@ -1,6 +1,7 @@
-import type { Card, TagValue } from '../stores/interfaces';
+import type TagValue from '$lib/types/TagValue';
-import api, { processError } from '../utils/api';
+import type Card from '$lib/types/Card';
-import status from '../utils/status';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
 
 export async function newCardApi(projectId: number, tags: TagValue[]): Promise<Card> {
 	const response = await api.post(`/v1/cards`, {

frontend/src/api/projects.ts

@@ -1,6 +1,8 @@
-import { parseCards, type Card, type Project } from '../stores/interfaces';
+import type Card from '$lib/types/Card';
-import api, { processError } from '../utils/api';
+import type Project from '$lib/types/Project';
-import status from '../utils/status';
+import api, { processError } from '$lib/utils/api';
+import { parseCards } from '$lib/utils/parser';
+import status from '$lib/utils/status';
 
 export async function getProjectAPI(projectId: number): Promise<Project> {
 	const response = await api.get(`/v1/projects/${projectId}`);

frontend/src/api/tags.ts

@@ -1,6 +1,6 @@
-import type { MeTag, TagOption } from '../stores/interfaces';
+import type TagOption from '$lib/types/TagOption';
-import api, { processError } from '../utils/api';
+import api, { processError } from '$lib/utils/api';
-import status from '../utils/status';
+import status from '$lib/utils/status';
 
 export async function updateTagAPI(option: TagOption): Promise<boolean> {
 	const response =

frontend/src/lib/api/cards.ts

@@ -1,4 +1,5 @@
-import type { Card, TagValue } from '../stores/interfaces';
+import type { TagValue } from "$lib/types/TagValue";
+import type { Card } from "$lib/types/Card";
 import api, { processError } from '../utils/api';
 import status from '../utils/status';
 

frontend/src/lib/api/projects.ts

@@ -1,5 +1,7 @@
-import { parseCards, type Card, type Project } from '$lib/stores/interfaces';
+import type Card from '$lib/types/Card';
+import type Project from '$lib/types/Project';
 import api, { processError } from '$lib/utils/api';
+import { parseCards } from '$lib/utils/parser';
 import status from '$lib/utils/status';
 
 export async function getProjectAPI(projectId: number): Promise<Project> {

frontend/src/lib/api/tags.ts

@@ -1,4 +1,5 @@
-import type { MeTag, TagOption } from '$lib/stores/interfaces';
+import type { TagOption } from "$lib/types/TagOption";
+import type { MeTag } from "$lib/types/MeTag";
 import api, { processError } from '$lib/utils/api';
 import status from '$lib/utils/status';
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Card } from '$lib/stores/interfaces';
 	import project_tags from '$lib/stores/project_tags';
 	import { currentDraggedCard, currentModalCard } from '$lib/stores/smallStore';
+	import type Card from '$lib/types/Card';
 	import ModalCard from './modal_card.svelte';
 
 	export let card: Card;
@@ -26,8 +26,8 @@
 			{#each card.tags as tag}
 				{#if tag.option_id}
 					{#if $project_tags[tag.tag_id]}
-						<span class="tag" style="border: 1px solid #333"
+						<span class="tag" style="border: 1px solid #333">
-							>{$project_tags[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}

frontend/src/lib/components/project/card/header/menus/group_menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Menu from '../../../../utils/menu.svelte';
+	import Menu from '$lib/components/utils/menu.svelte';
 
 	export let isOpen = false;
 	export let choices: { id: number; value: string }[] = [];

frontend/src/lib/components/project/card/header/menus/sort_menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Menu from '../../../../utils/menu.svelte';
+	import Menu from '$lib/components/utils/menu.svelte';
 
 	export let isOpen = false;
 	export let choices: { id: number; value: string }[] = [];

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { Card } from '../../../stores/interfaces';
+	import type Card from '$lib/types/Card';
-	import { currentModalCard, cards } from '../../../stores/smallStore';
+	import { cards, currentModalCard } from '../../../stores/smallStore';
 	import CloseIcon from '../../icons/closeIcon.svelte';
 	import TrashIcon from '../../icons/trashIcon.svelte';
 	import ModalTags from './modal_tags.svelte';

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

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import type { Card, MeTag, TagValue } from '../../../stores/interfaces';
+	import type Card from '$lib/types/Card';
+	import type MeTag from '$lib/types/MeTag';
+	import type TagValue from '$lib/types/TagValue';
 	import ModalTagTitle from './modal_tag/modal_tag_title.svelte';
 	import ModalTagValue from './modal_tag/modal_tag_value.svelte';
 

frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	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';
+	import type MeTag from '$lib/types/MeTag';
 
 	export let projectTag: MeTag;
 

frontend/src/lib/components/project/card/modal_tag/modal_tag_value.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import type { MeTag, TagValue, Card } from '$lib/stores/interfaces';
+	import type Card from '$lib/types/Card';
+	import type MeTag from '$lib/types/MeTag';
+	import type TagValue from '$lib/types/TagValue';
 	import { getTagTypeFromId } from '$lib/utils/tagTypes';
 	import SelectTags from './select_tags.svelte';
 

frontend/src/lib/components/project/card/modal_tag/select_tags.svelte

@@ -2,9 +2,11 @@
 	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 type Card from '$lib/types/Card';
+	import type MeTag from '$lib/types/MeTag';
+	import type TagValue from '$lib/types/TagValue';
 	import api, { processError } from '$lib/utils/api';
 	import status from '$lib/utils/status';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Card } from '$lib/stores/interfaces';
+	import ProjectTags from '$lib/stores/project_tags';
+	import type Card from '$lib/types/Card';
 	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>

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

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import CardC from './card/card.svelte';
+	import type Card from '$lib/types/Card';
-	import AddIcon from '../icons/addIcon.svelte';
+	import type TagValue from '$lib/types/TagValue';
-	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 { updateTagAPI as updateTagOptionAPI } from '../../api/tags';
 	import projectTags from '../../stores/project_tags';
 	import { cards, currentDraggedCard } from '../../stores/smallStore';
+	import AddIcon from '../icons/addIcon.svelte';
+	import CardC from './card/card.svelte';
 
 	export let projectId: number;
 	export let optionId: number | null = null;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import type { Project, TagValue, View } from '../../stores/interfaces';
+	import type Project from '$lib/types/Project';
-	import { cards, currentView, views } from '../../stores/smallStore';
+	import type View from '$lib/types/View';
 	import projectTags from '../../stores/project_tags';
+	import { cards, currentView, views } from '../../stores/smallStore';
 	import GroupMenu from './card/header/menus/group_menu.svelte';
 	import SortMenu from './card/header/menus/sort_menu.svelte';
 

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

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import Column from './column.svelte';
-	import type { Project, View } from '$lib/stores/interfaces';
 	import projectTags from '$lib/stores/project_tags';
 	import { cards, currentView } from '$lib/stores/smallStore';
+	import type Project from '$lib/types/Project';
+	import type View from '$lib/types/View';
+	import { onMount } from 'svelte';
+	import Column from './column.svelte';
 	import Header from './header.svelte';
 
 	export let project: Project;

frontend/src/lib/components/projects/selectProject.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import type Project from '$lib/types/Project';
 	import api, { processError } from '$lib/utils/api';
 	import status from '$lib/utils/status';
-	import type { Project } from '../../stores/interfaces';
 
 	export let project: Project;
 	export let deleteProject: (project: Project) => void;

frontend/src/lib/components/sidebar.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+	import type Project from '$lib/types/Project';
+	import type View from '$lib/types/View';
 	import { onMount } from 'svelte';
-	import type { Project, View } from '../stores/interfaces';
-	import { currentView, views } from '../stores/smallStore';
-	import ViewIcon from './icons/viewIcon.svelte';
-	import EditIcon from './icons/editIcon.svelte';
 	import { get } from 'svelte/store';
-	import MenuOpener from './icons/menu_opener.svelte';
 	import projectTags from '../stores/project_tags';
-
+	import { currentView, views } from '../stores/smallStore';
+	import EditIcon from './icons/editIcon.svelte';
+	import MenuOpener from './icons/menu_opener.svelte';
+	import ViewIcon from './icons/viewIcon.svelte';
 	export let project: Project;
 
 	let viewEditId: number;

frontend/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

frontend/src/lib/stores/interfaces.ts

@@ -1,68 +0,0 @@
-export interface Project {
-	id: number;
-	title: string;
-}
-
-export interface Card {
-	id: number;
-	project_id: number;
-	title: string;
-	content: string;
-	tags: TagValue[];
-}
-
-export interface TagValue {
-	card_id: number;
-	tag_id: number;
-	option_id: number | null;
-	value: string | null;
-}
-
-export interface MeTag {
-	id: number;
-	project_id: number;
-	title: string;
-	type: number;
-	options: TagOption[];
-}
-
-export interface TagOption {
-	id: number;
-	tag_id: number;
-	value: string;
-}
-
-export interface View {
-	id: number;
-	project_id: number;
-	primary_tag_id: number | null;
-	secondary_tag_id: number | null;
-	title: string;
-	sort_tag_id: number | null;
-	sort_direction: number | null;
-}
-
-export function parseCard(c: any) {
-	let card: Card = c;
-	if (card.tags == null) card.tags = [];
-	return card;
-}
-
-export function parseCards(cards: any) {
-	if (cards == null) return [];
-	return cards.map((c: any) => parseCard(c));
-}
-
-export function parseMeTag(t: any) {
-	let tag: MeTag = t;
-	if (tag.options == null) tag.options = [];
-	return tag;
-}
-
-export function parseMeTags(tags: any) {
-	if (tags == null) return {};
-	return tags.map(parseMeTag).reduce((acc: any, tag: MeTag) => {
-		acc[tag.id] = tag;
-		return acc;
-	});
-}

frontend/src/lib/stores/project_tags.ts

@@ -1,7 +1,8 @@
-import { get, writable } from 'svelte/store';
+import type MeTag from '$lib/types/MeTag';
-import type { MeTag, TagOption } from './interfaces';
+import type TagOption from '$lib/types/TagOption';
 import api, { processError } from '$lib/utils/api';
 import status from '$lib/utils/status';
+import { get, writable } from 'svelte/store';
 import { cards } from './smallStore';
 
 const { subscribe, set, update } = writable({} as { [key: number]: MeTag });

frontend/src/lib/stores/smallStore.ts

@@ -1,9 +1,12 @@
-import { writable } from 'svelte/store';
+import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
-import { parseCards, type Card, type View, type TagValue } from './interfaces';
+import { getProjectCardsAPI } from '$lib/api/projects';
+import type Card from '$lib/types/Card';
+import type TagValue from '$lib/types/TagValue';
+import type View from '$lib/types/View';
 import api, { processError } from '$lib/utils/api';
 import status from '$lib/utils/status';
-import { getProjectCardsAPI } from '$lib/api/projects';
+import { writable } from 'svelte/store';
-import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
+import { parseCards } from '../utils/parser';
 
 export const currentView = (() => {
 	const { subscribe, set, update } = writable(null as View | null);

frontend/src/lib/types/Card.ts

@@ -0,0 +1,9 @@
+import type { TagValue } from './TagValue';
+
+export default interface Card {
+	id: number;
+	project_id: number;
+	title: string;
+	content: string;
+	tags: TagValue[];
+}

frontend/src/lib/types/MeTag.ts

@@ -0,0 +1,9 @@
+import type { TagOption } from './TagOption';
+
+export default interface MeTag {
+	id: number;
+	project_id: number;
+	title: string;
+	type: number;
+	options: TagOption[];
+}

frontend/src/lib/types/Project.ts

@@ -0,0 +1,4 @@
+export default interface Project {
+	id: number;
+	title: string;
+}

frontend/src/lib/types/TagOption.ts

@@ -0,0 +1,5 @@
+export default interface TagOption {
+	id: number;
+	tag_id: number;
+	value: string;
+}

frontend/src/lib/types/TagValue.ts

@@ -0,0 +1,6 @@
+export default interface TagValue {
+	card_id: number;
+	tag_id: number;
+	option_id: number | null;
+	value: string | null;
+}

frontend/src/lib/types/View.ts

@@ -0,0 +1,9 @@
+export default interface View {
+	id: number;
+	project_id: number;
+	primary_tag_id: number | null;
+	secondary_tag_id: number | null;
+	title: string;
+	sort_tag_id: number | null;
+	sort_direction: number | null;
+}

frontend/src/lib/utils/api.ts

@@ -1,7 +1,7 @@
 import axios, { Axios, type AxiosResponse } from 'axios';
 import { toastAlert } from './toasts';
 import { setupCache } from 'axios-cache-interceptor';
-import { backend } from '$lib/stores/config';
+import { backend } from '$lib/config';
 
 export default setupCache(
 	new Axios({

frontend/src/lib/utils/parser.ts

@@ -0,0 +1,27 @@
+import type Card from '../types/Card';
+import type MeTag from '../types/MeTag';
+
+export function parseCard(c: any) {
+	let card: Card = c;
+	if (card.tags == null) card.tags = [];
+	return card;
+}
+
+export function parseCards(cards: any) {
+	if (cards == null) return [];
+	return cards.map((c: any) => parseCard(c));
+}
+
+export function parseMeTag(t: any) {
+	let tag: MeTag = t;
+	if (tag.options == null) tag.options = [];
+	return tag;
+}
+
+export function parseMeTags(tags: any) {
+	if (tags == null) return {};
+	return tags.map(parseMeTag).reduce((acc: any, tag: MeTag) => {
+		acc[tag.id] = tag;
+		return acc;
+	});
+}

frontend/src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import type Project from '$lib/types/Project';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import type { Project } from '../lib/stores/interfaces';
 	import { onMount } from 'svelte';
-	import api, { processError } from '../lib/utils/api';
 	import SelectProject from '../lib/components/projects/selectProject.svelte';
+	import api, { processError } from '../lib/utils/api';
 	import { toastAlert } from '../lib/utils/toasts';
 
 	let projects: Project[];

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

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { getProjectAPI } from '$lib/api/projects';
+	import ProjectComponent from '$lib/components/project/project.svelte';
+	import Sidebar from '$lib/components/sidebar.svelte';
+	import type Project from '$lib/types/Project';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from '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;
 
-	let project: P;
+	let project: Project;
 
 	onMount(() => {
 		getProjectAPI(projectId).then((p) => {
@@ -21,7 +21,7 @@
 {#if project}
 	<div>
 		<Sidebar {project} />
-		<Project {project} />
+		<ProjectComponent {project} />
 	</div>
 	<SvelteToast />
 {/if}