work

src/routes/projects/[id]/+page.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ActionData, PageServerData } from './$types';
+
+	let { data, form }: { data: PageServerData; form: ActionData } = $props();
+
+	onMount(() => {
+		const events = new EventSource('/api/events');
+		events.onmessage = () => {
+			window.location.reload();
+		};
+		return () => events.close();
+	});
+</script>
+
+<svelte:head>
+	<title>{data.project.name} · Taskarr</title>
+</svelte:head>
+
+<main class="mx-auto min-h-screen max-w-5xl px-6 py-10">
+	<div class="flex items-center justify-between gap-4">
+		<div>
+			<h1 class="text-3xl font-bold text-slate-900">{data.project.name}</h1>
+			<p class="text-slate-600">{data.project.description}</p>
+		</div>
+		<div class="flex gap-2">
+			<a class="rounded-md border border-slate-300 px-4 py-2" href={`/projects/${data.project.id}/link-repository`}>Link repo</a>
+			<a class="rounded-md bg-slate-900 px-4 py-2 text-white" href="/projects">Back</a>
+		</div>
+	</div>
+
+	<div class="mt-8 grid gap-6 lg:grid-cols-2">
+		<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+			<h2 class="text-lg font-semibold">Tasks</h2>
+			<form method="post" action="?/createTask" class="mt-4 grid gap-3">
+				<input name="title" placeholder="Task title" class="rounded-md border border-slate-300 px-3 py-2" />
+				<textarea name="description" placeholder="Task description" class="rounded-md border border-slate-300 px-3 py-2"></textarea>
+				{#if form?.error}
+					<p class="text-sm text-red-600">{form.error}</p>
+				{/if}
+				<button class="w-fit rounded-md bg-blue-600 px-4 py-2 text-white">Add task</button>
+			</form>
+
+			<div class="mt-6 space-y-3">
+				{#each data.tasks as item}
+					<div class="rounded-xl bg-slate-50 p-4">
+						<p class="font-medium text-slate-900">{item.title}</p>
+						<p class="text-sm text-slate-500">{item.status} · priority {item.priority}</p>
+						<form method="post" action="?/updateTaskStatus" class="mt-3 flex gap-2">
+							<input type="hidden" name="taskId" value={item.id} />
+							<select name="status" class="rounded-md border border-slate-300 px-2 py-1 text-sm">
+								<option value="todo">Todo</option>
+								<option value="doing">Doing</option>
+								<option value="blocked">Blocked</option>
+								<option value="done">Done</option>
+							</select>
+							<button class="rounded-md bg-slate-900 px-3 py-1 text-sm text-white">Update</button>
+						</form>
+					</div>
+				{/each}
+			</div>
+		</section>
+
+		<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+			<div class="flex items-center justify-between">
+				<h2 class="text-lg font-semibold">Issues</h2>
+				<form method="post" action="?/syncIssues">
+					<button class="rounded-md bg-slate-900 px-4 py-2 text-white">Sync GitHub issues</button>
+				</form>
+			</div>
+
+			<div class="mt-6 space-y-3">
+				{#each data.issues as item}
+					<div class="rounded-xl bg-slate-50 p-4">
+						<p class="font-medium text-slate-900">{item.title}</p>
+						<p class="text-sm text-slate-500">{item.provider} · {item.state}</p>
+					</div>
+				{/each}
+			</div>
+		</section>
+	</div>
+
+	<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+		<h2 class="text-lg font-semibold">Linked repositories</h2>
+		<div class="mt-4 space-y-3">
+			{#each data.repositoryLinks as repo}
+				<div class="rounded-xl bg-slate-50 p-4">
+					<p class="font-medium text-slate-900">{repo.fullName}</p>
+					<p class="text-sm text-slate-500">{repo.owner}/{repo.repo}</p>
+				</div>
+			{/each}
+		</div>
+	</section>
+</main>