61 lines
1.9 KiB
Svelte
61 lines
1.9 KiB
Svelte
<script lang="ts">
|
||
import { resolve } from '$app/paths';
|
||
import type { PageProps } from './$types';
|
||
let { data, form }: PageProps = $props();
|
||
</script>
|
||
|
||
<svelte:head><title>Eingang | Sendewerk</title></svelte:head>
|
||
|
||
<div class="page-wrap narrow-page">
|
||
<header class="page-heading">
|
||
<h1>Eingang</h1>
|
||
<p class="page-intro">Gedanken und Fundstücke schnell festhalten und später ausarbeiten.</p>
|
||
</header>
|
||
<section class="quiet-panel capture-panel">
|
||
<div>
|
||
<p class="eyebrow">Schnellaufnahme</p>
|
||
<h2>Was soll nicht verloren gehen?</h2>
|
||
</div>
|
||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||
<form method="POST" action="?/capture" class="capture-form">
|
||
<label
|
||
>Titel oder Gedanke<input
|
||
name="title"
|
||
required
|
||
maxlength="200"
|
||
value={form?.title ?? ''}
|
||
placeholder="Kurze Idee festhalten"
|
||
/></label
|
||
>
|
||
<label
|
||
>Link <span>optional</span><input
|
||
name="url"
|
||
type="url"
|
||
maxlength="2000"
|
||
value={form?.url ?? ''}
|
||
placeholder="https://…"
|
||
/></label
|
||
>
|
||
<button class="primary-button" type="submit">Aufnehmen und öffnen</button>
|
||
</form>
|
||
</section>
|
||
{#if data.pieces.length}
|
||
<section class="inbox-list">
|
||
<h2>{data.pieces.length} {data.pieces.length === 1 ? 'offener Inhalt' : 'offene Inhalte'}</h2>
|
||
{#each data.pieces as piece (piece.id)}<a
|
||
class="inbox-item"
|
||
href={resolve('/fundus/[id]', { id: piece.id })}
|
||
><span
|
||
><strong>{piece.title}</strong><small
|
||
>{piece.sourceCount ? `${piece.sourceCount} Quelle` : 'Gedanke ohne Link'}</small
|
||
></span
|
||
><span>Ausarbeiten →</span></a
|
||
>{/each}
|
||
</section>
|
||
{:else}<section class="quiet-panel planned-panel">
|
||
<div class="planned-icon" aria-hidden="true">＋</div>
|
||
<h2>Eingang ist leer</h2>
|
||
<p>Neue Gedanken und Links können oben direkt aufgenommen werden.</p>
|
||
</section>{/if}
|
||
</div>
|