From 4c7ba04cbb2c64ae5c47d03374bd4c3e0629d7fa Mon Sep 17 00:00:00 2001
From: schreifuchs <kontakt@schreifuchs.ch>
Date: Tue, 21 Oct 2025 11:51:56 +0200
Subject: [PATCH] feat: dependencies

---
 src/lib/components/Artefact.svelte                | 15 ++++++++++++++-
 src/routes/+layout.svelte                         |  5 +++++
 .../artefact/[artefact_uuid]/+page.svelte         | 14 ++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/project/[project]/artefact/[artefact_uuid]/+page.svelte

diff --git a/src/lib/components/Artefact.svelte b/src/lib/components/Artefact.svelte
index 2828771..6583c51 100644
--- a/src/lib/components/Artefact.svelte
+++ b/src/lib/components/Artefact.svelte
@@ -2,7 +2,7 @@
 	import { statusValues, type Artefact, Status } from '$lib/artefact';
 	import { Button, Card, Label, Modal, Select } from 'flowbite-svelte';
 	import MarkdownEditor from './MarkdownEditor.svelte';
-	import { updateArtefact } from '$lib/artefact.remote';
+	import { getArtefact, updateArtefact } from '$lib/artefact.remote';
 	let { artefact, tagClick = (_) => {} }: { artefact: Artefact; tagClick?: (tag: string) => void } =
 		$props();
 
@@ -14,6 +14,7 @@
 		title: '',
 		description: '',
 		content: '',
+		dependencies: [],
 		status: Status.Fehlt
 	});
 
@@ -63,6 +64,18 @@
 			</button>
 		{/each}
 	</div>
+	<div class="col-span-2 flex flex-wrap items-start justify-start">
+		{#each artefact.dependencies as dep}
+			{#await getArtefact(dep) then artefact}
+				<a
+					href={`/project/1f30e10f-8ce1-4432-8974-25323e18b929/artefact/${artefact?.uuid}`}
+					class="m-1 flex h-8 items-center overflow-hidden rounded-2xl border-2 border-green-600 bg-green-200 text-sm transition hover:bg-green-300"
+				>
+					<span class="px-3 py-1 text-green-900">{artefact?.title ?? ''}</span>
+				</a>
+			{/await}
+		{/each}
+	</div>
 	<p class="col-span-2 my-5">{artefact.description}</p>
 
 	<p
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c3708eb..2dcad6f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
 	import '../app.css';
 	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select } from 'flowbite-svelte';
 	let { children } = $props();
+
+	$inspect(state.view);
 </script>
 
 <!-- <svelte:head>Repo Mod</svelte:head> -->
@@ -18,6 +20,9 @@
 	<NavUl>
 		<Select
 			value={state.view}
+			onchange={(e) => {
+				state.view = (e.target as HTMLSelectElement).value;
+			}}
 			items={views.map((value) => ({
 				value,
 				name: value
diff --git a/src/routes/project/[project]/artefact/[artefact_uuid]/+page.svelte b/src/routes/project/[project]/artefact/[artefact_uuid]/+page.svelte
new file mode 100644
index 0000000..e46eeaa
--- /dev/null
+++ b/src/routes/project/[project]/artefact/[artefact_uuid]/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { getArtefact } from '$lib/artefact.remote';
+	import Artefact from '$lib/components/Artefact.svelte';
+	let artefact: Artefact | undefined = $state(undefined);
+
+	$effect(() => {
+		getArtefact($page.params.artefact_uuid ?? '').then((a) => (artefact = a));
+	});
+</script>
+
+{#if artefact}
+	<Artefact {artefact} />
+{/if}