melosh/taskarr-mgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

work

Browse Source
This commit is contained in:
Milas Holsting
2026-05-19 12:00:00 +02:00
parent 6bd3b76782
commit ed4bf9a0ee
28 changed files with 2762 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/routes/+page.svelte
View File

@@ -1,2 +1,104 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<script lang="ts">
import { onMount } from 'svelte';
import type { PageServerData } from './$types';
let { data }: { data: PageServerData } = $props();
onMount(() => {
const events = new EventSource('/api/events');
events.onmessage = () => {
window.location.reload();
};
return () => events.close();
});
</script>
<svelte:head>
<title>Taskarr</title>
</svelte:head>
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-8 px-6 py-10">
<header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
<div class="flex flex-col gap-2">
<p class="text-sm uppercase tracking-[0.3em] text-slate-500">Taskarr</p>
<h1 class="text-4xl font-bold text-slate-900">Projects, tasks, and synced issues in one place</h1>
<p class="max-w-2xl text-slate-600">A compact SvelteKit workspace for tracking progress, handling tasks, and keeping GitHub or Gitea issues close to the work.</p>
</div>
<div class="flex gap-3">
<a class="rounded-md border border-slate-300 px-4 py-2 text-slate-900" href="/projects">Projects</a>
<a class="rounded-md bg-blue-600 px-4 py-2 text-white" href="/integrations">Install GitHub App</a>
</div>
</header>
<section class="grid gap-4 md:grid-cols-3">
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">Projects</p>
<p class="mt-2 text-3xl font-semibold">{data.projects.length}</p>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">Recent tasks</p>
<p class="mt-2 text-3xl font-semibold">{data.recentTasks.length}</p>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">Recent issues</p>
<p class="mt-2 text-3xl font-semibold">{data.recentIssues.length}</p>
</div>
</section>
<section class="grid gap-6 lg:grid-cols-2">
<div class="rounded-2xl border border-blue-200 bg-blue-50 p-5 shadow-sm">
<h2 class="text-lg font-semibold text-slate-900">Connect GitHub</h2>
<p class="mt-2 text-sm text-slate-600">Install the GitHub App to link repositories and sync issues into your projects.</p>
<a class="mt-4 inline-flex rounded-md bg-slate-900 px-4 py-2 text-white" href="/integrations">Go to integrations</a>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<h2 class="text-lg font-semibold">Projects</h2>
<div class="mt-4 space-y-3">
{#each data.projects as project}
<div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
<div class="flex items-center justify-between gap-4">
<div>
<p class="font-medium text-slate-900">{project.name}</p>
<p class="text-sm text-slate-500">{project.description}</p>
</div>
<span class="text-sm text-slate-500">{project.progress}%</span>
</div>
<div class="mt-3 h-2 rounded-full bg-slate-200">
<div class="h-2 rounded-full bg-blue-600" style={`width: ${project.progress}%`}></div>
</div>
<p class="mt-2 text-xs text-slate-500">{project.taskCount} tasks · {project.issueCount} issues · {project.status}</p>
</div>
{/each}
</div>
</div>
<div class="grid gap-6">
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<h2 class="text-lg font-semibold">Recent tasks</h2>
<div class="mt-4 space-y-3">
{#each data.recentTasks as task}
<div class="flex items-center justify-between rounded-xl bg-slate-50 p-4">
<div>
<p class="font-medium text-slate-900">{task.title}</p>
<p class="text-sm text-slate-500">Priority {task.priority} · {task.status}</p>
</div>
</div>
{/each}
</div>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<h2 class="text-lg font-semibold">Recent issues</h2>
<div class="mt-4 space-y-3">
{#each data.recentIssues 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>
</div>
</div>
</section>
</main>