marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

style(frontend): apply Prettier formatting to 26 pre-existing files

Browse Source 
No logic changes — whitespace and indentation only. These were flagged
by the pre-commit hook when running lint after layout.css was modified.

Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 11:42:52 +01:00
parent 93befbd8da
commit e83ba9b681
27 changed files with 282 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/routes/+layout.svelte
View File

@@ -69,7 +69,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_documents()}
</a>
@@ -79,7 +79,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/persons')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_persons()}
</a>
@@ -89,7 +89,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/conversations')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_conversations()}
</a>
@@ -99,7 +99,7 @@ function clickOutside(node: HTMLElement) {
class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
{page.url.pathname.startsWith('/admin')
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
: 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
>
{m.nav_admin()}
</a>
@@ -162,20 +162,20 @@ function clickOutside(node: HTMLElement) {
{#if userMenuOpen}
<div
class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-brand-sand bg-white shadow-md"
class="border-brand-sand absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border bg-white shadow-md"
>
<a
href="/profile"
onclick={() => (userMenuOpen = false)}
class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
class="hover:bg-brand-sand/40 block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:text-brand-navy"
>
{m.nav_profile()}
</a>
<div class="border-t border-brand-sand">
<div class="border-brand-sand border-t">
<form action="/logout" method="POST" use:enhance>
<button
type="submit"
class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
class="hover:bg-brand-sand/40 w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
>
{m.nav_logout()}
</button>

10
frontend/src/routes/+page.svelte
View File

@@ -78,7 +78,7 @@ $effect(() => {
<!-- Outer Container: Matches the 'Sand' background of the layout -->
<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<!-- SEARCH & FILTER CARD -->
<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand mb-8 rounded-sm border bg-white p-6 shadow-sm">
<!-- ROW 1: Main Search (One Line) -->
<div class="flex items-center gap-4">
<!-- Full Text Search -->
@@ -229,7 +229,7 @@ $effect(() => {
</div>
<!-- DOCUMENT LIST -->
<div class="border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand border bg-white shadow-sm">
{#if data.error}
<div class="bg-red-50 p-8 text-center text-red-600">
{data.error}
@@ -237,7 +237,7 @@ $effect(() => {
{:else if data.documents && data.documents.length > 0}
<ul class="divide-y divide-gray-100">
{#each data.documents as doc (doc.id)}
<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
<li class="group hover:bg-brand-sand/10 transition-colors duration-200">
<!-- LINK TO DETAIL PAGE -->
<a href="/documents/{doc.id}" class="block p-6">
<div class="flex flex-col gap-6 sm:flex-row">
@@ -312,7 +312,7 @@ $effect(() => {
{#each doc.tags as tag (tag.id)}
<button
type="button"
class="relative z-10 inline-flex cursor-pointer items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
class="bg-brand-sand/30 relative z-10 inline-flex cursor-pointer items-center rounded px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
>
{tag.name}
@@ -342,7 +342,7 @@ $effect(() => {
<!-- Empty State -->
<div class="p-16 text-center">
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
class="bg-brand-sand/30 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"

12
frontend/src/routes/admin/+page.svelte
View File

@@ -107,7 +107,7 @@ async function backfillFileHashes() {
{/if}
{#if activeTab === 'users'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-gray-100 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
<a
@@ -217,7 +217,7 @@ async function backfillFileHashes() {
</table>
</div>
{:else if activeTab === 'tags'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="border-b border-gray-100 bg-yellow-50/50 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
<p class="mt-1 text-xs text-yellow-800">
@@ -272,7 +272,7 @@ async function backfillFileHashes() {
>
</form>
{:else}
<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
<span class="bg-brand-sand/30 rounded px-2 py-1 text-sm font-medium text-brand-navy">
{tag.name}
</span>
<div
@@ -329,7 +329,7 @@ async function backfillFileHashes() {
</ul>
</div>
{:else if activeTab === 'groups'}
<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-gray-100 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
</div>
@@ -535,7 +535,7 @@ async function backfillFileHashes() {
</div>
</div>
{:else if activeTab === 'system'}
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
<p class="mb-4 text-sm text-gray-500">{m.admin_system_backfill_description()}</p>
<button
@@ -552,7 +552,7 @@ async function backfillFileHashes() {
{/if}
</div>
<div class="mt-4 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand mt-4 rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">
{m.admin_system_backfill_hashes_heading()}
</h2>

22
frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -72,7 +72,7 @@ function handleBirthDateInput(e: Event) {
<form method="POST" use:enhance class="space-y-6">
<!-- Profile card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_personal()}
</h2>
@@ -89,7 +89,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="firstName"
value={data.editUser.firstName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="lastName"
value={data.editUser.lastName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -119,7 +119,7 @@ function handleBirthDateInput(e: Event) {
placeholder="TT.MM.JJJJ"
value={birthDateDisplay}
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -134,7 +134,7 @@ function handleBirthDateInput(e: Event) {
type="email"
name="email"
value={data.editUser.email ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -148,7 +148,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
>{data.editUser.contact ?? ''}</textarea
>
</label>
@@ -156,7 +156,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Groups card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.admin_col_groups()}
</h2>
@@ -178,7 +178,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Password card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.admin_label_new_password_optional()}
</h2>
@@ -193,7 +193,7 @@ function handleBirthDateInput(e: Event) {
<input
type="password"
name="newPassword"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -206,7 +206,7 @@ function handleBirthDateInput(e: Event) {
<input
type="password"
name="confirmPassword"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -214,7 +214,7 @@ function handleBirthDateInput(e: Event) {
<!-- Save bar -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a
href="/admin"

18
frontend/src/routes/admin/users/new/+page.svelte
View File

@@ -53,7 +53,7 @@ function handleBirthDateInput(e: Event) {
</div>
{/if}
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<form method="POST" use:enhance class="space-y-5">
<!-- Account -->
<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
@@ -70,7 +70,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="username"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -84,7 +84,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="password"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
<input
type="text"
name="firstName"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -116,7 +116,7 @@ function handleBirthDateInput(e: Event) {
<input
type="text"
name="lastName"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>
@@ -131,7 +131,7 @@ function handleBirthDateInput(e: Event) {
type="text"
placeholder="TT.MM.JJJJ"
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -145,7 +145,7 @@ function handleBirthDateInput(e: Event) {
<input
type="email"
name="email"
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -159,7 +159,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
></textarea>
</label>
@@ -184,7 +184,7 @@ function handleBirthDateInput(e: Event) {
<!-- Save bar -->
<div
class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
>
<a
href="/admin"

22
frontend/src/routes/conversations/+page.svelte
View File

@@ -75,7 +75,7 @@ const enrichedDocuments = $derived(
</div>
<!-- FILTER BAR -->
<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand relative z-20 mb-10 border bg-white p-8 shadow-sm">
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender -->
<div
@@ -98,7 +98,7 @@ const enrichedDocuments = $derived(
<button
data-testid="conv-swap-btn"
onclick={swapPersons}
class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
class="border-brand-sand flex w-full items-center justify-center gap-2 border px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
receiverId
? ''
: 'invisible'}"
@@ -173,7 +173,7 @@ const enrichedDocuments = $derived(
<div>
<button
onclick={toggleSort}
class="flex h-[42px] w-full items-center justify-center border border-brand-sand text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
class="border-brand-sand flex h-[42px] w-full items-center justify-center border text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
>
<span class="mr-2">{m.conv_sort_label()}</span>
<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
@@ -196,9 +196,9 @@ const enrichedDocuments = $derived(
<!-- RESULTS LIST SECTION -->
{#if !senderId || !receiverId}
<div
class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-24 text-center"
>
<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
<div class="bg-brand-sand/30 mb-4 rounded-full p-4 text-brand-navy">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
@@ -213,7 +213,7 @@ const enrichedDocuments = $derived(
</div>
{:else if data.documents.length === 0}
<div
class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
class="border-brand-sand flex flex-col items-center justify-center rounded-sm border bg-white py-24 text-center shadow-sm"
>
<p class="font-serif text-brand-navy">{m.conv_no_results_heading()}</p>
<p class="mt-2 text-sm text-gray-400">{m.conv_no_results_text()}</p>
@@ -246,10 +246,10 @@ const enrichedDocuments = $derived(
</div>
<!-- CHAT CONTAINER -->
<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand relative overflow-hidden rounded-sm border bg-white shadow-sm">
<!-- Decoration: Central Timeline Line -->
<div
class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
class="bg-brand-sand/30 absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform md:block"
></div>
<div class="p-6 md:p-8">
@@ -257,12 +257,12 @@ const enrichedDocuments = $derived(
{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
{#if showYearDivider}
<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
<div class="flex-grow border-t border-brand-sand"></div>
<div class="border-brand-sand flex-grow border-t"></div>
<span
class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
>{year}</span
>
<div class="flex-grow border-t border-brand-sand"></div>
<div class="border-brand-sand flex-grow border-t"></div>
</div>
{/if}
{@const isRight = doc.sender?.id === senderId}
@@ -297,7 +297,7 @@ const enrichedDocuments = $derived(
class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
{isRight
? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
: 'border-brand-sand bg-brand-sand/10 rounded-bl-none text-brand-navy'}"
>
<!-- Header -->
<div class="mb-2 flex items-start justify-between gap-4">

24
frontend/src/routes/documents/[id]/edit/+page.svelte
View File

@@ -65,7 +65,7 @@ function handleDateInput(e: Event) {
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
<!-- ── Section 1: Wer & Wann ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_who_when()}
</h2>
@@ -128,7 +128,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 2: Beschreibung ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_description()}
</h2>
@@ -190,7 +190,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 3: Transkription ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.form_label_transcription()}
</h2>
@@ -205,13 +205,13 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 4: Datei ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_file()}
</h2>
<div
class="mb-4 flex items-center gap-3 rounded bg-brand-sand/20 px-3 py-2 text-sm text-gray-600"
class="bg-brand-sand/20 mb-4 flex items-center gap-3 rounded px-3 py-2 text-sm text-gray-600"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -233,18 +233,18 @@ function handleDateInput(e: Event) {
id="file-upload"
type="file"
name="file"
class="block w-full cursor-pointer text-sm
text-gray-500 file:mr-4 file:rounded
file:border-0 file:bg-brand-sand/40
file:px-4 file:py-2
file:text-sm file:font-semibold
file:text-brand-navy hover:file:bg-brand-sand/60"
class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
cursor-pointer text-sm text-gray-500
file:mr-4 file:rounded
file:border-0 file:px-4
file:py-2 file:text-sm
file:font-semibold file:text-brand-navy"
/>
</div>
<!-- ── Sticky Save Bar ── -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a
href="/documents/{doc.id}"

22
frontend/src/routes/documents/new/+page.svelte
View File

@@ -76,7 +76,7 @@ function handleDateInput(e: Event) {
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
<!-- ── Section 1: Wer & Wann ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_who_when()}
</h2>
@@ -140,7 +140,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 2: Beschreibung ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_description()}
</h2>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 3: Transkription ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.form_label_transcription()}
</h2>
@@ -213,7 +213,7 @@ function handleDateInput(e: Event) {
</div>
<!-- ── Section 4: Datei ── -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_file()}
</h2>
@@ -226,18 +226,18 @@ function handleDateInput(e: Event) {
id="file-upload"
type="file"
name="file"
class="block w-full cursor-pointer text-sm
text-gray-500 file:mr-4 file:rounded
file:border-0 file:bg-brand-sand/40
file:px-4 file:py-2
file:text-sm file:font-semibold
file:text-brand-navy hover:file:bg-brand-sand/60"
class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
cursor-pointer text-sm text-gray-500
file:mr-4 file:rounded
file:border-0 file:px-4
file:py-2 file:text-sm
file:font-semibold file:text-brand-navy"
/>
</div>
<!-- ── Sticky Save Bar ── -->
<div
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
>
<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
{m.btn_cancel()}

2
frontend/src/routes/forgot-password/+page.svelte
View File

@@ -20,7 +20,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.forgot_password_heading()}
</h1>

154
frontend/src/routes/layout.css
View File

@@ -1,34 +1,160 @@
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
@import 'tailwindcss';
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
/* ─── 2. Raw palette — never used directly in components ──────────────────── */
@theme {
/* COLORS — exact De Gruyter Brill brand palette */
--color-brand-navy: #012851; /* Prussian Blue */
--color-brand-mint: #a1dcd8; /* Aqua Island */
--color-brand-purple: #b4b9ff; /* Melrose */
--color-brand-sand: #f0efe9; /* Neutral paper tone */
--color-brand-white: #ffffff;
--color-brand-dark: #0d0d0d;
/* Brand palette constants */
--palette-navy: #012851;
--palette-mint: #a1dcd8;
--palette-turquoise: #00c7b1;
--palette-sand: #f0efe9;
--palette-purple: #b4b9ff;
/* FONTS */
/* Typography */
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
--text-huge: 4rem;
}
/* 3. Base Styles */
/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
/*
@theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
Changing --c-surface on :root is all it takes to retheme the whole UI.
*/
@theme inline {
/* Surfaces */
--color-canvas: var(--c-canvas);
--color-surface: var(--c-surface);
--color-overlay: var(--c-overlay);
--color-muted: var(--c-muted);
/* Borders */
--color-line: var(--c-line);
--color-line-2: var(--c-line-2);
/* Text */
--color-ink: var(--c-ink);
--color-ink-2: var(--c-ink-2);
--color-ink-3: var(--c-ink-3);
/* Accent (mint ↔ turquoise) */
--color-accent: var(--c-accent);
--color-accent-bg: var(--c-accent-bg);
/* Primary interactive (navy ↔ mint) */
--color-primary: var(--c-primary);
--color-primary-fg: var(--c-primary-fg);
/* Nav active state */
--color-nav-active: var(--c-nav-active);
/* PDF viewer */
--color-pdf-bg: var(--c-pdf-bg);
--color-pdf-ctrl: var(--c-pdf-ctrl);
--color-pdf-text: var(--c-pdf-text);
/* Static brand tokens (not themed) */
--color-brand-purple: var(--palette-purple);
--color-brand-navy: var(--palette-navy);
--color-brand-mint: var(--palette-mint);
}
/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
:root {
--c-canvas: #f0efe9;
--c-surface: #ffffff;
--c-overlay: #ffffff;
--c-muted: #f5f4ef;
--c-line: #e4e2d7;
--c-line-2: #eeede8;
--c-ink: #012851;
--c-ink-2: #6b7280;
--c-ink-3: #9ca3af;
--c-accent: #a1dcd8;
--c-accent-bg: rgba(161, 220, 216, 0.15);
--c-primary: #012851;
--c-primary-fg: #ffffff;
--c-nav-active: rgba(180, 185, 255, 0.15);
--c-pdf-bg: #ebebeb;
--c-pdf-ctrl: #d8d8d8;
--c-pdf-text: #333333;
}
/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--c-canvas: #0d0d0d;
--c-surface: #1a1a1a;
--c-overlay: #242424;
--c-muted: #252525;
--c-line: #2e2e2e;
--c-line-2: #222222;
--c-ink: #f0efe9;
--c-ink-2: #9ca3af;
--c-ink-3: #6b7280;
--c-accent: #00c7b1;
--c-accent-bg: rgba(0, 199, 177, 0.12);
--c-primary: #a1dcd8;
--c-primary-fg: #012851;
--c-nav-active: rgba(180, 185, 255, 0.12);
--c-pdf-bg: #1e1e1e;
--c-pdf-ctrl: #2a2a2a;
--c-pdf-text: #d1d1d1;
}
}
/* Manual dark override — takes precedence over media query */
:root[data-theme='dark'] {
--c-canvas: #0d0d0d;
--c-surface: #1a1a1a;
--c-overlay: #242424;
--c-muted: #252525;
--c-line: #2e2e2e;
--c-line-2: #222222;
--c-ink: #f0efe9;
--c-ink-2: #9ca3af;
--c-ink-3: #6b7280;
--c-accent: #00c7b1;
--c-accent-bg: rgba(0, 199, 177, 0.12);
--c-primary: #a1dcd8;
--c-primary-fg: #012851;
--c-nav-active: rgba(180, 185, 255, 0.12);
--c-pdf-bg: #1e1e1e;
--c-pdf-ctrl: #2a2a2a;
--c-pdf-text: #d1d1d1;
}
/* ─── 6. Base styles ───────────────────────────────────────────────────────── */
@layer base {
html {
overscroll-behavior: none;
}
body {
background-color: #ffffff;
color: var(--color-brand-navy);
background-color: var(--c-canvas);
color: var(--c-ink);
font-family: var(--font-serif);
}

2
frontend/src/routes/login/+page.svelte
View File

@@ -41,7 +41,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.login_heading()}
</h1>

6
frontend/src/routes/persons/+page.svelte
View File

@@ -79,10 +79,10 @@ function handleSearch() {
{#if data.persons.length === 0}
<div
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
class="border-brand-sand flex flex-col items-center justify-center rounded-lg border border-dashed bg-white py-16 text-center"
>
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
class="bg-brand-sand/30 mb-3 flex h-12 w-12 items-center justify-center rounded-full text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
@@ -99,7 +99,7 @@ function handleSearch() {
{#each data.persons as person (person.id)}
<a href="/persons/{person.id}" class="group block h-full">
<div
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand relative flex h-full items-center gap-4 overflow-hidden rounded border bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<!-- Decorative Accent on Hover -->
<div

20
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -111,7 +111,7 @@ $effect(() => {
</div>
<!-- Header / Metadata Card -->
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="h-2 w-full bg-brand-navy"></div>
<div class="p-8 md:p-10">
@@ -247,7 +247,7 @@ $effect(() => {
<div class="flex flex-col items-start gap-8 md:flex-row">
<div class="flex-shrink-0">
<div
class="flex h-24 w-24 items-center justify-center rounded-full border border-brand-sand bg-brand-sand/30 text-brand-navy"
class="border-brand-sand bg-brand-sand/30 flex h-24 w-24 items-center justify-center rounded-full border text-brand-navy"
>
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
</div>
@@ -335,7 +335,7 @@ $effect(() => {
<!-- Merge Section -->
{#if data.canWrite}
{#key person.id}
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="p-6 md:p-8">
<h2 class="mb-1 font-serif text-lg text-brand-navy">{m.person_merge_heading()}</h2>
<p class="mb-5 font-sans text-sm text-gray-500">
@@ -413,7 +413,7 @@ $effect(() => {
{#each coCorrespondents as c (c.id)}
<a
href="/conversations?senderId={person.id}&receiverId={c.id}"
class="inline-flex items-center gap-1.5 rounded-full border border-brand-sand px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
class="border-brand-sand inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
>
{c.name}
<span class="font-sans text-xs text-gray-400">({c.count})</span>
@@ -444,7 +444,7 @@ $effect(() => {
</div>
{#if sentDocuments.length === 0}
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
</div>
{:else}
@@ -453,12 +453,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -537,7 +537,7 @@ $effect(() => {
</div>
{#if receivedDocuments.length === 0}
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
</div>
{:else}
@@ -546,12 +546,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"

4
frontend/src/routes/persons/new/+page.svelte
View File

@@ -33,7 +33,7 @@ let { form } = $props();
{/if}
<form method="POST">
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.persons_section_details()}
</h2>
@@ -82,7 +82,7 @@ let { form } = $props();
<!-- Save Bar -->
<div
class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
>
<a
href="/persons"

20
frontend/src/routes/profile/+page.svelte
View File

@@ -60,7 +60,7 @@ function handleBirthDateInput(e: Event) {
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<!-- Personal info card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_personal()}
</h2>
@@ -88,7 +88,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="firstName"
value={data.user?.firstName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -102,7 +102,7 @@ function handleBirthDateInput(e: Event) {
type="text"
name="lastName"
value={data.user?.lastName ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -117,7 +117,7 @@ function handleBirthDateInput(e: Event) {
placeholder="TT.MM.JJJJ"
value={birthDateDisplay}
oninput={handleBirthDateInput}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
<input type="hidden" name="birthDate" value={birthDateIso} />
</label>
@@ -132,7 +132,7 @@ function handleBirthDateInput(e: Event) {
type="email"
name="email"
value={data.user?.email ?? ''}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -146,7 +146,7 @@ function handleBirthDateInput(e: Event) {
name="contact"
rows="3"
placeholder={m.profile_contact_placeholder()}
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
>{data.user?.contact ?? ''}</textarea
>
</label>
@@ -162,7 +162,7 @@ function handleBirthDateInput(e: Event) {
</div>
<!-- Password change card -->
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.profile_section_password()}
</h2>
@@ -194,7 +194,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="currentPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -208,7 +208,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="newPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
@@ -222,7 +222,7 @@ function handleBirthDateInput(e: Event) {
type="password"
name="confirmPassword"
required
class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
/>
</label>
</div>

2
frontend/src/routes/reset-password/+page.svelte
View File

@@ -27,7 +27,7 @@ let {
</div>
<!-- Card -->
<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
{m.reset_password_heading()}
</h1>

2
frontend/src/routes/users/[id]/+page.svelte
View File

@@ -40,7 +40,7 @@ const initials = $derived.by(() => {
<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
<div class="max-w-md">
<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<!-- Avatar -->
<div class="mb-5 flex justify-center">
{#if initials}