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

fix(frontend): enforce lint locally and in CI, fix all pre-existing violations
Some checks failed
CI / Unit & Component Tests (push) Successful in 1m59s
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details

Browse Source 
## Pre-commit hook
- Add .husky/pre-commit at repo root: runs `cd frontend && npm run lint`
- Update prepare script in package.json to auto-configure git hooks path
  on npm install (git -C .. config core.hooksPath .husky)
- Add lint step to CI unit-tests job so it catches issues before tests run
- Add generated dirs to .prettierignore (paraglide_bak*, test-results, .auth)
- Add src/lib/paraglide_bak* to .gitignore so ESLint can ignore them

## ESLint fixes (all pre-existing)
- Disable svelte/no-navigation-without-resolve: false positive in SvelteKit
  (rule targets Svelte 5 standalone routing, not SvelteKit <a href>)
- Fix svelte/require-each-key: add (item.id)/(item) keys to all {#each} blocks
  across 10 files — improves Svelte reconciliation performance
- Fix svelte/prefer-writable-derived in PersonTypeahead: $state+$effect → $derived
- Fix svelte/prefer-svelte-reactivity: URLSearchParams → SvelteURLSearchParams,
  Map → SvelteMap (enables Svelte reactive tracking)
- Fix @typescript-eslint/no-unused-vars: remove dead imports/variables

## Prettier
- Run npm run format to bring all source files in line with .prettierrc

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-20 15:55:42 +01:00
parent 28dea45cc3
commit db2fc33e99
53 changed files with 2522 additions and 2061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitea/workflows/ci.yml
View File

@@ -28,6 +28,10 @@ jobs:
run: npm ci
working-directory: frontend
- name: Lint
run: npm run lint
working-directory: frontend
- name: Run unit and component tests
run: npm test
working-directory: frontend

1
.husky/pre-commit Executable file
View File

@@ -0,0 +1 @@
cd frontend && npm run lint

1
frontend/.gitignore vendored
View File

@@ -28,3 +28,4 @@ src/lib/paraglide
# Generated OpenAPI types — regenerate with: npm run generate:api
# (committed as a stub; overwritten by the real spec after generation)
# src/lib/generated/api.ts
src/lib/paraglide_bak*

1
frontend/.husky/pre-commit Normal file
View File

@@ -0,0 +1 @@
npm test

9
frontend/.prettierignore
View File

@@ -7,3 +7,12 @@ bun.lockb
# Miscellaneous
/static/
# Generated files
/src/lib/generated/
/src/lib/paraglide/
/src/lib/paraglide_bak*/
# Test artifacts
/test-results/
/e2e/.auth/

4
frontend/.prettierrc
View File

@@ -3,9 +3,7 @@
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": [
"prettier-plugin-tailwindcss"
],
"plugins": ["prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",

25
frontend/e2e/.auth/user.json Normal file
View File

@@ -0,0 +1,25 @@
{
"cookies": [
{
"name": "PARAGLIDE_LOCALE",
"value": "de",
"domain": "localhost",
"path": "/",
"expires": 1808565334.192108,
"httpOnly": false,
"secure": false,
"sameSite": "Lax"
},
{
"name": "auth_token",
"value": "Basic%20YWRtaW46YWRtaW4xMjM%3D",
"domain": "localhost",
"path": "/",
"expires": 1774091734.449243,
"httpOnly": true,
"secure": false,
"sameSite": "Strict"
}
],
"origins": []
}

28
frontend/e2e/lang.spec.ts
View File

@@ -3,16 +3,24 @@ import { test, expect } from '@playwright/test';
test.describe('Language selector', () => {
test('shows DE, EN, ES buttons in the header', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('banner').getByRole('button', { name: 'DE', exact: true })).toBeVisible();
await expect(page.getByRole('banner').getByRole('button', { name: 'EN', exact: true })).toBeVisible();
await expect(page.getByRole('banner').getByRole('button', { name: 'ES', exact: true })).toBeVisible();
await expect(
page.getByRole('banner').getByRole('button', { name: 'DE', exact: true })
).toBeVisible();
await expect(
page.getByRole('banner').getByRole('button', { name: 'EN', exact: true })
).toBeVisible();
await expect(
page.getByRole('banner').getByRole('button', { name: 'ES', exact: true })
).toBeVisible();
});
test('switching to EN translates the navigation', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
await expect(page.getByRole('navigation').getByRole('link', { name: 'Documents' })).toBeVisible();
await expect(
page.getByRole('navigation').getByRole('link', { name: 'Documents' })
).toBeVisible();
await expect(page.getByRole('navigation').getByRole('link', { name: 'Persons' })).toBeVisible();
});
@@ -21,21 +29,27 @@ test.describe('Language selector', () => {
await page.waitForSelector('[data-hydrated]');
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
await page.goto('/persons');
await expect(page.getByRole('navigation').getByRole('link', { name: 'Documents' })).toBeVisible();
await expect(
page.getByRole('navigation').getByRole('link', { name: 'Documents' })
).toBeVisible();
});
test('switching back to DE restores German', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
await expect(page.getByRole('navigation').getByRole('link', { name: 'Documents' })).toBeVisible();
await expect(
page.getByRole('navigation').getByRole('link', { name: 'Documents' })
).toBeVisible();
await page.getByRole('banner').getByRole('button', { name: 'DE', exact: true }).click();
// In headless Chromium, cookie deletion via document.cookie can be unreliable.
// Delete the PARAGLIDE_LOCALE cookie directly so the next navigation defaults to DE.
await page.context().clearCookies({ name: 'PARAGLIDE_LOCALE' });
await page.goto('/');
await page.waitForSelector('[data-hydrated]');
await expect(page.getByRole('navigation').getByRole('link', { name: 'Dokumente' })).toBeVisible();
await expect(
page.getByRole('navigation').getByRole('link', { name: 'Dokumente' })
).toBeVisible();
});
test('active language button is visually highlighted', async ({ page }) => {

10
frontend/e2e/persons.spec.ts
View File

@@ -156,7 +156,9 @@ test.describe('Person detail — sent and received documents', () => {
const sentHeading = page.getByRole('heading', { name: /Gesendete Dokumente/i }).locator('..');
const hasYearRange = await sentHeading.locator('span').filter({ hasText: /\d{4}/ }).count();
if (hasYearRange > 0) {
await expect(sentHeading.locator('span').filter({ hasText: /\d{4}/ }).first()).toBeVisible();
await expect(
sentHeading.locator('span').filter({ hasText: /\d{4}/ }).first()
).toBeVisible();
await page.screenshot({ path: 'test-results/e2e/person-year-range.png' });
return;
}
@@ -166,7 +168,9 @@ test.describe('Person detail — sent and received documents', () => {
});
test.describe('Person detail — conversations link', () => {
test('co-correspondent chips link to conversations pre-filled with both persons', async ({ page }) => {
test('co-correspondent chips link to conversations pre-filled with both persons', async ({
page
}) => {
await page.goto('/persons');
const firstLink = page.locator('a[href^="/persons/"]:not([href="/persons/new"])').first();
const href = await firstLink.getAttribute('href');
@@ -176,7 +180,7 @@ test.describe('Person detail — conversations link', () => {
// Co-correspondent chips link to /conversations?senderId=X&receiverId=Y
const chip = page.locator(`a[href^="/conversations?senderId=${personId}&receiverId="]`).first();
if (await chip.count() > 0) {
if ((await chip.count()) > 0) {
const chipHref = await chip.getAttribute('href');
expect(chipHref).toMatch(/\/conversations\?senderId=.+&receiverId=.+/);
}

15
frontend/eslint.config.js
View File

@@ -21,16 +21,17 @@ export default defineConfig(
languageOptions: {
globals: { ...globals.browser, ...globals.node }
},
rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
rules: {
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
"no-undef": 'off' }
'no-undef': 'off',
// This rule is designed for Svelte 5's own routing system using resolve().
// In SvelteKit, <a href> and goto() from $app/navigation are the correct patterns — resolve() is not needed.
'svelte/no-navigation-without-resolve': 'off'
}
},
{
files: [
'**/*.svelte',
'**/*.svelte.ts',
'**/*.svelte.js'
],
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: {
parserOptions: {
projectService: true,

2
frontend/package.json
View File

@@ -7,7 +7,7 @@
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"prepare": "svelte-kit sync || true && git -C .. config core.hooksPath .husky 2>/dev/null || true",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",

6
frontend/project.inlang/settings.json
View File

@@ -8,9 +8,5 @@
"pathPattern": "./messages/{locale}.json"
},
"baseLocale": "de",
"locales": [
"de",
"en",
"es"
]
"locales": ["de", "en", "es"]
}

15
frontend/src/hooks.server.ts
View File

@@ -11,7 +11,12 @@ const handleLocaleDetection: Handle = ({ event, resolve }) => {
if (!event.cookies.get(cookieName)) {
const locale = detectLocale(event.request.headers.get('accept-language') ?? '');
if (locale) {
event.cookies.set(cookieName, locale, { path: '/', sameSite: 'lax', maxAge: cookieMaxAge, httpOnly: false });
event.cookies.set(cookieName, locale, {
path: '/',
sameSite: 'lax',
maxAge: cookieMaxAge,
httpOnly: false
});
}
}
return resolve(event);
@@ -25,7 +30,8 @@ const handleAuth: Handle = async ({ event, resolve }) => {
return resolve(event);
};
const handleParaglide: Handle = ({ event, resolve }) => paraglideMiddleware(event.request, ({ request, locale }) => {
const handleParaglide: Handle = ({ event, resolve }) =>
paraglideMiddleware(event.request, ({ request, locale }) => {
event.request = request;
return resolve(event, {
@@ -33,7 +39,6 @@ const handleParaglide: Handle = ({ event, resolve }) => paraglideMiddleware(even
});
});
const userGroup: Handle = async ({ event, resolve }) => {
const auth = event.cookies.get('auth_token');
@@ -42,7 +47,6 @@ const userGroup: Handle = async ({ event, resolve }) => {
const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
const response = await fetch(`${apiUrl}/api/users/me`, {
headers: { Authorization: auth }
});
if (response.ok) {
const user = await response.json();
@@ -56,7 +60,6 @@ const userGroup: Handle = async ({ event, resolve }) => {
return resolve(event);
};
export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
const isApi = request.url.startsWith(apiUrl) || request.url.includes('/api/');
@@ -76,7 +79,7 @@ export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
const modifiedRequest = new Request(clonedRequest, {
headers: {
...Object.fromEntries(clonedRequest.headers),
'Authorization': token
Authorization: token
}
});

58
frontend/src/lib/components/PersonMultiSelect.svelte
View File

@@ -27,16 +27,22 @@
showDropdown = true;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(async () => {
if (searchTerm.length < 1) { results = []; return; }
if (searchTerm.length < 1) {
results = [];
return;
}
loading = true;
try {
const res = await fetch(`/api/persons?q=${encodeURIComponent(searchTerm)}`);
if (res.ok) {
const all: Person[] = await res.json();
results = all.filter(p => !selectedPersons.some(s => s.id === p.id));
results = all.filter((p) => !selectedPersons.some((s) => s.id === p.id));
}
} catch {
results = [];
} finally {
loading = false;
}
} catch { results = []; }
finally { loading = false; }
}, 300);
}
@@ -48,7 +54,7 @@
}
function removePerson(id: string | undefined) {
selectedPersons = selectedPersons.filter(p => p.id !== id);
selectedPersons = selectedPersons.filter((p) => p.id !== id);
}
function clickOutside(node: HTMLElement) {
@@ -58,29 +64,43 @@
}
};
document.addEventListener('click', handleClick, true);
return { destroy() { document.removeEventListener('click', handleClick, true); } };
return {
destroy() {
document.removeEventListener('click', handleClick, true);
}
};
}
</script>
<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
{#each selectedPersons as person}
{#each selectedPersons as person (person.id)}
<input type="hidden" name="receiverIds" value={person.id} />
{/each}
<div class="relative" use:clickOutside>
<div class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded bg-white min-h-[42px] focus-within:ring-1 focus-within:ring-brand-navy focus-within:border-brand-navy">
{#each selectedPersons as person}
<span class="inline-flex items-center gap-1 bg-brand-sand/40 text-brand-navy text-sm font-medium px-2 py-1 rounded">
{person.firstName} {person.lastName}
<div
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
>
{#each selectedPersons as person (person.id)}
<span
class="inline-flex items-center gap-1 rounded bg-brand-sand/40 px-2 py-1 text-sm font-medium text-brand-navy"
>
{person.firstName}
{person.lastName}
<button
type="button"
onclick={() => removePerson(person.id)}
class="text-brand-navy/50 hover:text-red-500 focus:outline-none ml-0.5"
class="ml-0.5 text-brand-navy/50 hover:text-red-500 focus:outline-none"
aria-label={m.comp_multiselect_remove()}
>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</span>
@@ -94,21 +114,21 @@
oninput={handleInput}
onfocus={() => { updateDropdownPosition(); showDropdown = true; }}
placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
class="flex-1 min-w-[120px] border-none p-1 focus:ring-0 text-sm bg-transparent outline-none"
class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
/>
</div>
{#if showDropdown && (results.length > 0 || loading)}
<div
style={dropdownStyle}
class="z-50 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm"
class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
>
{#if loading}
<div class="p-2 text-gray-500 text-sm">{m.comp_multiselect_loading()}</div>
<div class="p-2 text-sm text-gray-500">{m.comp_multiselect_loading()}</div>
{:else}
{#each results as person}
{#each results as person (person.id)}
<div
class="cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-brand-sand/30 text-gray-900"
class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-brand-sand/30"
onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button"

25
frontend/src/lib/components/PersonTypeahead.svelte
View File

@@ -13,12 +13,7 @@
let { name, label, value = $bindable(''), initialName = '', onchange }: Props = $props();
let searchTerm = $state('');
// Sync with external changes (e.g. reset button) — also sets the initial value
$effect(() => {
searchTerm = initialName;
});
let searchTerm = $derived(initialName);
let results: Person[] = $state([]);
let showDropdown = $state(false);
@@ -76,7 +71,9 @@
};
document.addEventListener('click', handleClick, true);
return {
destroy() { document.removeEventListener('click', handleClick, true); }
destroy() {
document.removeEventListener('click', handleClick, true);
}
};
}
</script>
@@ -86,7 +83,7 @@
<div class="relative" use:clickOutside>
<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
<input type="hidden" {name} bind:value={value} />
<input type="hidden" name={name} bind:value={value} />
<input
bind:this={inputEl}
@@ -97,27 +94,27 @@
oninput={handleInput}
onfocus={() => { updateDropdownPosition(); showDropdown = true; }}
placeholder={m.comp_typeahead_placeholder()}
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm border p-2 focus:ring-blue-500 focus:border-blue-500"
class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
/>
{#if showDropdown && (results.length > 0 || loading)}
<div
style={dropdownStyle}
class="z-50 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black focus:outline-none sm:text-sm"
>
{#if loading}
<div class="p-2 text-gray-500 text-sm">{m.comp_typeahead_loading()}</div>
<div class="p-2 text-sm text-gray-500">{m.comp_typeahead_loading()}</div>
{:else}
{#each results as person}
{#each results as person (person.id)}
<div
class="cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-blue-100 text-gray-900"
class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100"
onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button"
tabindex="0"
>
<div class="flex items-center">
<span class="font-medium block truncate">
<span class="block truncate font-medium">
{person.lastName}, {person.firstName}
</span>
</div>

2
frontend/src/lib/components/PersonTypeahead.svelte.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe, expect, it, vi, afterEach } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import { page } from 'vitest/browser';
import PersonTypeahead from './PersonTypeahead.svelte';
const waitForDebounce = () => new Promise((r) => setTimeout(r, 350));

28
frontend/src/lib/components/TagInput.svelte
View File

@@ -72,19 +72,23 @@
}
};
document.addEventListener('click', handleClick, true);
return { destroy() { document.removeEventListener('click', handleClick, true); } };
return {
destroy() {
document.removeEventListener('click', handleClick, true);
}
};
}
</script>
<div class="w-full" use:clickOutside>
<!-- Tag Container -->
<div
class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded focus-within:ring-1 focus-within:ring-brand-navy focus-within:border-brand-navy bg-white min-h-[42px]"
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
>
<!-- Render Selected Tags -->
{#each tags as tag, i}
{#each tags as tag, i (i)}
<span
class="bg-brand-sand/30 text-brand-navy text-sm font-medium px-2 py-1 rounded flex items-center gap-1"
class="flex items-center gap-1 rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy"
>
{tag}
<button
@@ -93,7 +97,7 @@
aria-label={m.comp_taginput_remove()}
class="text-brand-navy/50 hover:text-red-500 focus:outline-none"
>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -106,7 +110,7 @@
{/each}
<!-- Input Field -->
<div class="relative flex-1 min-w-[120px]">
<div class="relative min-w-[120px] flex-1">
<input
type="text"
bind:value={inputVal}
@@ -118,21 +122,21 @@
? m.comp_taginput_placeholder_create()
: m.comp_taginput_placeholder_filter()
: ''}
class="w-full h-full border-none p-1 focus:ring-0 text-sm bg-transparent outline-none"
class="h-full w-full border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
/>
<!-- Typeahead Dropdown -->
{#if showSuggestions && suggestions.length > 0}
<ul
class="absolute left-0 top-full mt-1 w-full bg-white border border-gray-200 rounded shadow-lg z-50 max-h-48 overflow-y-auto"
class="absolute top-full left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border border-gray-200 bg-white shadow-lg"
>
{#each suggestions as suggestion, i}
{#each suggestions as suggestion, i (i)}
<li
role="option"
aria-selected={i === activeIndex}
tabindex="0"
class="px-3 py-2 text-sm cursor-pointer hover:bg-brand-sand/20 {i === activeIndex
? 'bg-brand-sand/20 text-brand-navy font-bold'
class="cursor-pointer px-3 py-2 text-sm hover:bg-brand-sand/20 {i === activeIndex
? 'bg-brand-sand/20 font-bold text-brand-navy'
: 'text-gray-700'}"
onclick={() => addTag(suggestion)}
onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
@@ -145,6 +149,6 @@
</div>
</div>
{#if allowCreation}
<p class="text-xs text-gray-400 mt-1">{m.comp_taginput_create_hint()}</p>
<p class="mt-1 text-xs text-gray-400">{m.comp_taginput_create_hint()}</p>
{/if}
</div>

8
frontend/src/lib/components/TagInput.svelte.spec.ts
View File

@@ -32,17 +32,13 @@ afterEach(() => {
describe('TagInput – rendering', () => {
it('shows creation placeholder when allowCreation=true and no tags', async () => {
render(TagInput, { tags: [], allowCreation: true });
await expect
.element(page.getByPlaceholder('Schlagworte hinzufügen...'))
.toBeInTheDocument();
await expect.element(page.getByPlaceholder('Schlagworte hinzufügen...')).toBeInTheDocument();
await page.screenshot({ path: 'test-results/screenshots/tag-input-empty.png' });
});
it('shows filter placeholder when allowCreation=false', async () => {
render(TagInput, { tags: [], allowCreation: false });
await expect
.element(page.getByPlaceholder('Nach Schlagworten filtern...'))
.toBeInTheDocument();
await expect.element(page.getByPlaceholder('Nach Schlagworten filtern...')).toBeInTheDocument();
});
it('renders existing tags as chips', async () => {

30
frontend/src/lib/errors.ts
View File

@@ -40,15 +40,25 @@ export async function parseBackendError(res: Response): Promise<BackendError | n
/** Returns a localised message for the given error code via Paraglide. Falls back to INTERNAL_ERROR. */
export function getErrorMessage(code: ErrorCode | string | undefined): string {
switch (code) {
case 'DOCUMENT_NOT_FOUND': return m.error_document_not_found();
case 'DOCUMENT_NO_FILE': return m.error_document_no_file();
case 'FILE_NOT_FOUND': return m.error_file_not_found();
case 'FILE_UPLOAD_FAILED': return m.error_file_upload_failed();
case 'USER_NOT_FOUND': return m.error_user_not_found();
case 'IMPORT_ALREADY_RUNNING':return m.error_import_already_running();
case 'UNAUTHORIZED': return m.error_unauthorized();
case 'FORBIDDEN': return m.error_forbidden();
case 'VALIDATION_ERROR': return m.error_validation_error();
default: return m.error_internal_error();
case 'DOCUMENT_NOT_FOUND':
return m.error_document_not_found();
case 'DOCUMENT_NO_FILE':
return m.error_document_no_file();
case 'FILE_NOT_FOUND':
return m.error_file_not_found();
case 'FILE_UPLOAD_FAILED':
return m.error_file_upload_failed();
case 'USER_NOT_FOUND':
return m.error_user_not_found();
case 'IMPORT_ALREADY_RUNNING':
return m.error_import_already_running();
case 'UNAUTHORIZED':
return m.error_unauthorized();
case 'FORBIDDEN':
return m.error_forbidden();
case 'VALIDATION_ERROR':
return m.error_validation_error();
default:
return m.error_internal_error();
}
}

2
frontend/src/lib/utils/sort.spec.ts
View File

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
import { sortDocumentsByDate } from './sort';
const doc = (id: string, documentDate: string | null) =>
({ id, documentDate } as { id: string; documentDate: string | null });
({ id, documentDate }) as { id: string; documentDate: string | null };
describe('sortDocumentsByDate', () => {
it('sorts DESC by default — newest first', () => {

5
frontend/src/routes/+layout.server.ts
View File

@@ -3,6 +3,9 @@ import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
return {
user: locals.user,
canWrite: locals.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('WRITE_ALL')) ?? false
canWrite:
locals.user?.groups?.some((g: { permissions: string[] }) =>
g.permissions.includes('WRITE_ALL')
) ?? false
};
};

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

@@ -12,69 +12,73 @@
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
const isAdmin = $derived(page.data.user?.groups.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN')));
const isAdmin = $derived(
page.data.user?.groups.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN'))
);
// Set after client-side hydration completes. Used by E2E tests to know the
// page is interactive (event handlers registered) before they interact with it.
let hydrated = $state(false);
onMount(() => { hydrated = true; });
onMount(() => {
hydrated = true;
});
</script>
<div class="min-h-screen bg-white" data-hydrated={hydrated || undefined}>
{#if !page.url.pathname.startsWith('/login')}
<header class="bg-white border-b border-gray-100 sticky top-0 z-50">
<header class="sticky top-0 z-50 border-b border-gray-100 bg-white">
<!-- De Gruyter Brill purple accent strip -->
<div class="h-1 bg-brand-purple"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<!-- Logo & Nav -->
<div class="flex">
<div class="flex-shrink-0 flex items-center mr-10">
<div class="mr-10 flex flex-shrink-0 items-center">
<a href="/" class="flex items-center" aria-label="Familienarchiv">
<span class="font-sans font-bold text-xl tracking-widest text-brand-navy uppercase">Familienarchiv</span>
<span class="font-sans text-xl font-bold tracking-widest text-brand-navy uppercase"
>Familienarchiv</span
>
</a>
</div>
<nav class="hidden sm:flex sm:space-x-1 items-center">
<nav class="hidden items-center sm:flex sm:space-x-1">
<a
href="/"
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
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')
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
>
{m.nav_documents()}
</a>
<a
href="/persons"
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
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')
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
>
{m.nav_persons()}
</a>
<a
href="/conversations"
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
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')
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
>
{m.nav_conversations()}
</a>
{#if isAdmin}
<a
href="/admin"
class="inline-flex items-center px-3 py-1.5 text-xs font-bold uppercase tracking-widest font-sans transition-colors
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')
? 'text-brand-navy bg-brand-purple/15 rounded'
: 'text-gray-500 hover:text-brand-navy hover:bg-brand-sand/60 rounded'}"
? 'rounded bg-brand-purple/15 text-brand-navy'
: 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
>
{m.nav_admin()}
</a>
@@ -86,11 +90,11 @@
<div class="flex items-center gap-3">
<!-- Language selector -->
<div class="flex items-center gap-1 border-r border-gray-200 pr-3">
{#each locales as locale}
{#each locales as locale (locale)}
<button
type="button"
onclick={() => setLocale(localeMap[locale])}
class="text-xs font-sans tracking-widest px-1.5 py-1 transition-colors
class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
{activeLocale === locale
? 'font-bold text-brand-navy'
: 'font-normal text-gray-400 hover:text-brand-navy'}"
@@ -102,15 +106,19 @@
<form action="/logout" method="POST" use:enhance>
<button
type="submit"
class="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-brand-navy font-bold uppercase font-sans tracking-widest px-3 py-2 transition-colors"
class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
>
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg" alt="" aria-hidden="true" class="w-4 h-4 opacity-50" />
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 opacity-50"
/>
{m.nav_logout()}
</button>
</form>
</div>
</div>
</div>
</header>
{/if}

7
frontend/src/routes/+page.server.ts
View File

@@ -33,10 +33,11 @@ export async function load({ url, fetch }) {
}
const documents = docsResult.data ?? [];
const allPersons: { id: string; firstName: string; lastName: string }[] = personsResult.data ?? [];
const allPersons: { id: string; firstName: string; lastName: string }[] =
personsResult.data ?? [];
const senderObj = allPersons.find(p => p.id === senderId);
const receiverObj = allPersons.find(p => p.id === receiverId);
const senderObj = allPersons.find((p) => p.id === senderId);
const receiverObj = allPersons.find((p) => p.id === receiverId);
return {
documents,

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

@@ -4,6 +4,7 @@ import { goto } from '$app/navigation';
import TagInput from '$lib/components/TagInput.svelte';
import { slide } from 'svelte/transition';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
@@ -28,7 +29,7 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
function triggerSearch() {
const params = new URLSearchParams();
const params = new SvelteURLSearchParams();
if (q) params.set('q', q);
if (from) params.set('from', from);
@@ -88,7 +89,12 @@ $effect(() => {
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-4 w-4 opacity-40" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 opacity-40"
/>
</div>
</div>
@@ -97,7 +103,12 @@ $effect(() => {
onclick={() => (showAdvanced = !showAdvanced)}
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
>
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg" alt="" aria-hidden="true" class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}" />
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
/>
{m.docs_btn_filter()}
</button>
@@ -107,7 +118,12 @@ $effect(() => {
class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
title={m.docs_btn_reset_title()}
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 opacity-40" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 opacity-40"
/>
</a>
</div>
@@ -197,7 +213,12 @@ $effect(() => {
href="/documents/new"
class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4"
/>
{m.docs_btn_new()}
</a>
{/if}
@@ -211,7 +232,7 @@ $effect(() => {
</div>
{:else if data.documents && data.documents.length > 0}
<ul class="divide-y divide-gray-100">
{#each data.documents as doc}
{#each data.documents as doc (doc.id)}
<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
<!-- LINK TO DETAIL PAGE -->
<a href="/documents/{doc.id}" class="block p-6">
@@ -240,12 +261,22 @@ $effect(() => {
<!-- Metadata Row -->
<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
<div class="flex items-center">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
alt=""
aria-hidden="true"
class="mr-1.5 h-4 w-4"
/>
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
</div>
{#if doc.location}
<div class="flex items-center">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
alt=""
aria-hidden="true"
class="mr-1.5 h-4 w-4"
/>
{doc.location}
</div>
{/if}
@@ -284,7 +315,7 @@ $effect(() => {
<!-- Tags Display -->
{#if doc.tags && doc.tags.length > 0}
<div class="mt-4 flex flex-wrap gap-2 pt-3">
{#each doc.tags as tag}
{#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"
@@ -301,7 +332,12 @@ $effect(() => {
<div
class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="h-6 w-6"
/>
</div>
</div>
</a>
@@ -314,7 +350,12 @@ $effect(() => {
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
alt=""
aria-hidden="true"
class="h-6 w-6"
/>
</div>
<h3 class="font-serif text-lg font-medium text-brand-navy">{m.docs_empty_heading()}</h3>
<p class="mt-1 font-sans text-sm text-gray-500">

4
frontend/src/routes/admin/+page.server.ts
View File

@@ -14,7 +14,9 @@ function toActionResult(result: ApiResult) {
export async function load({ fetch, locals }) {
const user = locals.user;
const hasAdmin = user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN'));
const hasAdmin = user?.groups?.some((g: { permissions: string[] }) =>
g.permissions.includes('ADMIN')
);
if (!hasAdmin) throw error(403, getErrorMessage('FORBIDDEN'));
const api = createApiClient(fetch);

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

@@ -40,28 +40,28 @@
}
</script>
<div class="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8 font-sans">
<div class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-serif text-brand-navy">{m.admin_heading()}</h1>
<div class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
<div class="mb-8 flex items-center justify-between">
<h1 class="font-serif text-3xl text-brand-navy">{m.admin_heading()}</h1>
<!-- Tabs -->
<div class="flex bg-white rounded-lg p-1 shadow-sm border border-gray-200">
<div class="flex rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
<button
class="px-4 py-2 text-sm font-bold uppercase tracking-wide rounded-md transition {activeTab ===
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
'users'
? 'bg-brand-navy text-white'
: 'text-gray-500 hover:text-brand-navy'}"
onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
>
<button
class="px-4 py-2 text-sm font-bold uppercase tracking-wide rounded-md transition {activeTab ===
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
'groups'
? 'bg-brand-navy text-white'
: 'text-gray-500 hover:text-brand-navy'}"
onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
>
<button
class="px-4 py-2 text-sm font-bold uppercase tracking-wide rounded-md transition {activeTab ===
class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
'tags'
? 'bg-brand-navy text-white'
: 'text-gray-500 hover:text-brand-navy'}"
@@ -71,40 +71,40 @@
</div>
{#if form?.message}
<div class="bg-brand-mint/20 text-brand-navy p-4 rounded mb-6 border border-brand-mint/50">
<div class="mb-6 rounded border border-brand-mint/50 bg-brand-mint/20 p-4 text-brand-navy">
{form.message}
</div>
{/if}
{#if activeTab === 'users'}
<div class="bg-white shadow-sm border border-brand-sand rounded-lg overflow-hidden" in:slide>
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
<div class="overflow-hidden rounded-lg border border-brand-sand 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>
</div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_login()}</th
>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_groups()}</th
>
{#if editingUserId}
<th
class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_password()}</th
>
{/if}
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{#each data.users as user}
<tbody class="divide-y divide-gray-200 bg-white">
{#each data.users as user (user.id)}
<tr class="group/row hover:bg-gray-50">
{#if editingUserId === user.id}
<!-- === EDIT MODE === -->
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
{user.username}
<input
type="hidden"
@@ -119,9 +119,9 @@
name="groupIds"
multiple
form="edit-form-{user.id}"
class="block w-full rounded border-brand-mint text-xs p-1 min-h-[80px]"
class="block min-h-[80px] w-full rounded border-brand-mint p-1 text-xs"
>
{#each data.groups as group}
{#each data.groups as group (group.id)}
<option
value={group.id}
selected={user.groups.some((g: { id: string }) => g.id === group.id)}
@@ -130,10 +130,10 @@
</option>
{/each}
</select>
<p class="text-[10px] text-gray-400 mt-1">{m.admin_multiselect_hint()}</p>
<p class="mt-1 text-[10px] text-gray-400">{m.admin_multiselect_hint()}</p>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right align-top">
<td class="px-6 py-4 text-right align-top whitespace-nowrap">
<form
id="edit-form-{user.id}"
method="POST"
@@ -149,20 +149,20 @@
type="password"
name="password"
placeholder={m.admin_password_placeholder()}
class="w-32 py-1 px-2 text-xs border border-brand-mint rounded"
class="w-32 rounded border border-brand-mint px-2 py-1 text-xs"
/>
<div class="flex gap-2 mt-1">
<div class="mt-1 flex gap-2">
<button
type="submit"
class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold uppercase hover:bg-green-700"
class="rounded bg-green-600 px-2 py-1 text-xs font-bold text-white uppercase hover:bg-green-700"
>
{m.btn_save()}
</button>
<button
type="button"
onclick={cancelEditUser}
class="bg-gray-200 text-gray-600 px-2 py-1 rounded text-xs font-bold uppercase hover:bg-gray-300"
class="rounded bg-gray-200 px-2 py-1 text-xs font-bold text-gray-600 uppercase hover:bg-gray-300"
>
{m.btn_cancel()}
</button>
@@ -171,15 +171,15 @@
</td>
{:else}
<!-- === VIEW MODE === -->
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
{user.username}
</td>
<td class="px-6 py-4 text-sm text-gray-500">
<div class="flex flex-wrap gap-1">
{#if user.groups && user.groups.length > 0}
{#each user.groups as group}
{#each user.groups as group (group.id)}
<span
class="px-2 py-0.5 text-[10px] font-bold uppercase rounded-full bg-blue-50 text-blue-700 border border-blue-100"
class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
>
{group.name}
</span>
@@ -189,11 +189,11 @@
{/if}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<td class="px-6 py-4 text-right whitespace-nowrap">
<div class="flex items-center justify-end gap-4">
<button
onclick={() => startEditUser(user.id)}
class="text-brand-mint hover:text-brand-navy text-sm font-bold uppercase tracking-wide"
class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
>
{m.btn_edit()}
</button>
@@ -213,10 +213,10 @@
>
<input type="hidden" name="id" value={user.id} />
<button
class="text-gray-300 hover:text-red-600 transition-colors p-1"
class="p-1 text-gray-300 transition-colors hover:text-red-600"
title={m.admin_btn_delete_user_title()}
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
@@ -235,66 +235,66 @@
</table>
<!-- Create User Form -->
<div class="p-6 bg-gray-50 border-t border-gray-200">
<h3 class="text-xs font-bold uppercase text-gray-500 mb-4 tracking-wide">
<div class="border-t border-gray-200 bg-gray-50 p-6">
<h3 class="mb-4 text-xs font-bold tracking-wide text-gray-500 uppercase">
{m.admin_section_new_user()}
</h3>
<form
method="POST"
action="?/createUser"
use:enhance
class="grid grid-cols-1 md:grid-cols-6 gap-4 items-start"
class="grid grid-cols-1 items-start gap-4 md:grid-cols-6"
>
<input
type="text"
name="username"
placeholder="Login"
required
class="rounded border-gray-300 text-sm w-full"
class="w-full rounded border-gray-300 text-sm"
/>
<input
type="password"
name="password"
placeholder={m.admin_col_password()}
required
class="rounded border-gray-300 text-sm w-full"
class="w-full rounded border-gray-300 text-sm"
/>
<div class="md:col-span-3">
<select
name="groupIds"
multiple
class="rounded border-gray-300 text-sm w-full h-[42px] py-1"
class="h-[42px] w-full rounded border-gray-300 py-1 text-sm"
required
title={m.admin_multiselect_hint_multi()}
>
{#each data.groups as group}
{#each data.groups as group (group.id)}
<option value={group.id}>{group.name}</option>
{/each}
</select>
<p class="text-[10px] text-gray-400 mt-1">{m.admin_multiselect_hint_full()}</p>
<p class="mt-1 text-[10px] text-gray-400">{m.admin_multiselect_hint_full()}</p>
</div>
<button
type="submit"
class="bg-brand-navy text-white h-[42px] rounded text-sm font-bold uppercase hover:bg-brand-mint hover:text-brand-navy w-full"
class="h-[42px] w-full rounded bg-brand-navy text-sm font-bold text-white uppercase hover:bg-brand-mint hover:text-brand-navy"
>{m.btn_create()}</button
>
</form>
</div>
</div>
{:else if activeTab === 'tags'}
<div class="bg-white shadow-sm border border-brand-sand rounded-lg overflow-hidden" in:slide>
<div class="p-6 border-b border-gray-100 bg-yellow-50/50">
<div class="overflow-hidden rounded-lg border border-brand-sand 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="text-xs text-yellow-800 mt-1">
<p class="mt-1 text-xs text-yellow-800">
{m.admin_tags_warning()}
</p>
</div>
<ul class="divide-y divide-gray-100 max-h-[600px] overflow-y-auto">
{#each data.tags as tag}
<li class="px-6 py-3 flex items-center justify-between hover:bg-gray-50 group">
<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto">
{#each data.tags as tag (tag.id)}
<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50">
{#if editingTagId === tag.id}
<form
method="POST"
@@ -304,17 +304,17 @@
await update();
cancelEditTag();
}}
class="flex-1 flex gap-2 items-center"
class="flex flex-1 items-center gap-2"
>
<input type="hidden" name="id" value={tag.id} />
<input
type="text"
name="name"
bind:value={editingTagName}
class="flex-1 border-brand-mint ring-1 ring-brand-mint rounded px-2 py-1 text-sm"
class="flex-1 rounded border-brand-mint px-2 py-1 text-sm ring-1 ring-brand-mint"
/>
<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -328,7 +328,7 @@
onclick={cancelEditTag}
aria-label={m.btn_cancel()}
class="text-gray-400 hover:text-gray-600"
><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -339,18 +339,18 @@
>
</form>
{:else}
<span class="text-sm font-medium text-brand-navy bg-brand-sand/30 px-2 py-1 rounded">
<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
{tag.name}
</span>
<div
class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity"
class="flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100"
>
<button
onclick={() => startEditTag(tag)}
aria-label={m.admin_btn_edit_tag_label()}
class="p-1 text-gray-400 hover:text-brand-navy"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -375,8 +375,11 @@
class="inline"
>
<input type="hidden" name="id" value={tag.id} />
<button aria-label={m.admin_btn_delete_tag_label()} class="p-1 text-gray-400 hover:text-red-600">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<button
aria-label={m.admin_btn_delete_tag_label()}
class="p-1 text-gray-400 hover:text-red-600"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -393,28 +396,28 @@
</ul>
</div>
{:else if activeTab === 'groups'}
<div class="bg-white shadow-sm border border-brand-sand rounded-lg overflow-hidden" in:slide>
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
<div class="overflow-hidden rounded-lg border border-brand-sand 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>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_name()}</th
>
<th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider"
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_permissions()}</th
>
<th
class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
>{m.admin_col_actions()}</th
>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
{#each data.groups as group}
<tbody class="divide-y divide-gray-200 bg-white">
{#each data.groups as group (group.id)}
<tr class="group/row hover:bg-gray-50">
{#if editingGroupId === group.id}
<!-- EDIT MODE -->
@@ -427,7 +430,7 @@
await update();
cancelEditGroup();
}}
class="flex flex-col sm:flex-row items-start gap-4 w-full"
class="flex w-full flex-col items-start gap-4 sm:flex-row"
>
<input type="hidden" name="id" value={group.id} />
@@ -436,13 +439,13 @@
type="text"
name="name"
value={group.name}
class="w-full text-sm border-brand-mint rounded"
class="w-full rounded border-brand-mint text-sm"
required
/>
</div>
<div class="flex-1 flex flex-wrap gap-4 items-center h-full pt-2">
{#each availablePermissions as perm}
<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
{#each availablePermissions as perm (perm)}
<label
class="inline-flex items-center text-xs font-bold text-gray-600 uppercase"
>
@@ -451,7 +454,7 @@
name="permissions"
value={perm}
checked={group.permissions.includes(perm)}
class="mr-2 text-brand-navy focus:ring-brand-mint rounded border-gray-300"
class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
/>
{perm.replace('_', ' ')}
</label>
@@ -459,8 +462,12 @@
</div>
<div class="flex gap-2 self-start sm:self-center">
<button type="submit" aria-label={m.btn_save()} class="text-green-600 hover:text-green-800 p-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<button
type="submit"
aria-label={m.btn_save()}
class="p-1 text-green-600 hover:text-green-800"
>
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -473,9 +480,9 @@
type="button"
onclick={cancelEditGroup}
aria-label={m.btn_cancel()}
class="text-gray-400 hover:text-red-500 p-1"
class="p-1 text-gray-400 hover:text-red-500"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -489,28 +496,28 @@
</td>
{:else}
<!-- VIEW MODE -->
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-brand-navy">
<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-brand-navy">
{group.name}
</td>
<td class="px-6 py-4 text-sm text-gray-500">
<div class="flex flex-wrap gap-1">
{#each group.permissions as perm}
{#each group.permissions as perm (perm)}
<span
class="px-2 py-0.5 text-[10px] font-bold uppercase rounded-full
class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
{perm === 'ADMIN'
? 'bg-red-50 text-red-700 border-red-100'
: 'bg-gray-100 text-gray-600 border-gray-200'}"
? 'border-red-100 bg-red-50 text-red-700'
: 'border-gray-200 bg-gray-100 text-gray-600'}"
>
{perm}
</span>
{/each}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<td class="px-6 py-4 text-right whitespace-nowrap">
<div class="flex items-center justify-end gap-3">
<button
onclick={() => startEditGroup(group.id)}
class="text-brand-mint hover:text-brand-navy text-sm font-bold uppercase tracking-wide"
class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
>
{m.btn_edit()}
</button>
@@ -529,10 +536,10 @@
>
<input type="hidden" name="id" value={group.id} />
<button
class="text-gray-300 hover:text-red-600 p-1 transition-colors"
class="p-1 text-gray-300 transition-colors hover:text-red-600"
title={m.btn_delete()}
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
@@ -551,34 +558,34 @@
</table>
<!-- CREATE GROUP FORM -->
<div class="p-6 bg-gray-50 border-t border-gray-200">
<h3 class="text-xs font-bold uppercase text-gray-500 mb-4 tracking-wide">
<div class="border-t border-gray-200 bg-gray-50 p-6">
<h3 class="mb-4 text-xs font-bold tracking-wide text-gray-500 uppercase">
{m.admin_section_new_group()}
</h3>
<form
method="POST"
action="?/createGroup"
use:enhance
class="flex flex-col md:flex-row gap-4 items-start md:items-center"
class="flex flex-col items-start gap-4 md:flex-row md:items-center"
>
<div class="flex-1 w-full">
<div class="w-full flex-1">
<input
type="text"
name="name"
placeholder={m.admin_group_name_placeholder()}
required
class="rounded border-gray-300 text-sm w-full"
class="w-full rounded border-gray-300 text-sm"
/>
</div>
<div class="flex gap-4 items-center">
{#each availablePermissions as perm}
<div class="flex items-center gap-4">
{#each availablePermissions as perm (perm)}
<label class="inline-flex items-center text-xs font-bold text-gray-600 uppercase">
<input
type="checkbox"
name="permissions"
value={perm}
class="mr-2 text-brand-navy focus:ring-brand-mint rounded border-gray-300"
class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
/>
{perm.replace('_', ' ')}
</label>
@@ -587,7 +594,7 @@
<button
type="submit"
class="bg-brand-navy text-white px-6 py-2 rounded text-sm font-bold uppercase hover:bg-brand-mint hover:text-brand-navy w-full md:w-auto"
class="w-full rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase hover:bg-brand-mint hover:text-brand-navy md:w-auto"
>
{m.btn_create()}
</button>

3
frontend/src/routes/api/persons/+server.ts
View File

@@ -27,9 +27,8 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
// 4. Daten zurück an den Browser schicken
return json(data);
} catch (error) {
console.error("Proxy Error:", error);
console.error('Proxy Error:', error);
return json([], { status: 500 });
}
};

5
frontend/src/routes/api/tags/+server.ts
View File

@@ -24,13 +24,12 @@ export const GET: RequestHandler = async ({ url, fetch }) => {
}
const data = await response.json();
console.log("Tags Data", data)
console.log('Tags Data', data);
// 4. Daten zurück an den Browser schicken
return json(data);
} catch (error) {
console.error("Proxy Error:", error);
console.error('Proxy Error:', error);
return json([], { status: 500 });
}
};

14
frontend/src/routes/conversations/+page.server.ts
View File

@@ -18,7 +18,8 @@ export async function load({ url, fetch }) {
if (senderId && receiverId) {
requests.push(
api.GET('/api/documents/conversation', {
api
.GET('/api/documents/conversation', {
params: {
query: {
senderId,
@@ -28,14 +29,16 @@ export async function load({ url, fetch }) {
to: to || undefined
}
}
}).then(({ data }) => { documents = data ?? []; })
})
.then(({ data }) => {
documents = data ?? [];
})
);
}
if (senderId) {
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: senderId } } })
.then(({ data }) => {
api.GET('/api/persons/{id}', { params: { path: { id: senderId } } }).then(({ data }) => {
const p = data as { firstName: string; lastName: string } | undefined;
if (p) senderName = `${p.firstName} ${p.lastName}`;
})
@@ -44,8 +47,7 @@ export async function load({ url, fetch }) {
if (receiverId) {
requests.push(
api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } })
.then(({ data }) => {
api.GET('/api/persons/{id}', { params: { path: { id: receiverId } } }).then(({ data }) => {
const p = data as { firstName: string; lastName: string } | undefined;
if (p) receiverName = `${p.firstName} ${p.lastName}`;
})

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

@@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import { untrack } from 'svelte';
import { SvelteURLSearchParams } from 'svelte/reactivity';
import { m } from '$lib/paraglide/messages.js';
import { formatDate } from '$lib/utils/date';
@@ -23,7 +24,7 @@
});
function applyFilters() {
const params = new URLSearchParams();
const params = new SvelteURLSearchParams();
if (senderId) params.set('senderId', senderId);
if (receiverId) params.set('receiverId', receiverId);
if (fromDate) params.set('from', fromDate);
@@ -38,21 +39,21 @@
}
</script>
<div class="max-w-5xl mx-auto py-10 px-4">
<div class="mx-auto max-w-5xl px-4 py-10">
<!-- Page Header -->
<div class="mb-8 border-b border-brand-navy/10 pb-4">
<h1 class="text-3xl font-serif font-medium text-brand-navy">{m.conv_heading()}</h1>
<p class="text-brand-navy/60 font-sans text-sm mt-2">
<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.conv_heading()}</h1>
<p class="mt-2 font-sans text-sm text-brand-navy/60">
{m.conv_subtitle()}
</p>
</div>
<!-- FILTER BAR -->
<div class="bg-white p-8 shadow-sm border border-brand-sand mb-10 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
<div class="mb-6 grid grid-cols-1 gap-8 md:grid-cols-2">
<!-- Sender -->
<div
class="relative z-30 [&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy"
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -65,7 +66,7 @@
<!-- Receiver -->
<div
class="relative z-30 [&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy"
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"
@@ -77,12 +78,12 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-end relative z-10">
<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
<!-- Date From -->
<div>
<label
for="dateFrom"
class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
>{m.conv_label_from()}</label
>
<input
@@ -90,7 +91,7 @@
type="date"
bind:value={fromDate}
onchange={() => applyFilters()}
class="block w-full border-gray-300 shadow-sm focus:border-brand-navy focus:ring-brand-navy text-sm py-2.5"
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
</div>
@@ -98,7 +99,7 @@
<div>
<label
for="dateTo"
class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
>{m.conv_label_to()}</label
>
<input
@@ -106,7 +107,7 @@
type="date"
bind:value={toDate}
onchange={() => applyFilters()}
class="block w-full border-gray-300 shadow-sm focus:border-brand-navy focus:ring-brand-navy text-sm py-2.5"
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
</div>
@@ -114,12 +115,12 @@
<div>
<button
onclick={toggleSort}
class="w-full flex items-center justify-center h-[42px] border border-brand-sand text-xs font-bold uppercase tracking-wide text-brand-navy hover:bg-brand-navy hover:text-white transition-colors"
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"
>
<span class="mr-2">{m.conv_sort_label()}</span>
<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
<svg
class="w-4 h-4 ml-2 transform {sortDir === 'ASC'
class="ml-2 h-4 w-4 transform {sortDir === 'ASC'
? 'rotate-180'
: ''} transition-transform"
fill="none"
@@ -137,10 +138,10 @@
<!-- RESULTS LIST SECTION -->
{#if !senderId || !receiverId}
<div
class="flex flex-col items-center justify-center py-24 bg-white border border-brand-sand border-dashed rounded-sm text-center"
class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
>
<div class="bg-brand-sand/30 p-4 rounded-full mb-4 text-brand-navy">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
@@ -149,44 +150,44 @@
/></svg
>
</div>
<p class="text-brand-navy font-serif text-lg">{m.conv_empty_heading()}</p>
<p class="text-gray-500 font-sans text-sm mt-1">{m.conv_empty_text()}</p>
<p class="font-serif text-lg text-brand-navy">{m.conv_empty_heading()}</p>
<p class="mt-1 font-sans text-sm text-gray-500">{m.conv_empty_text()}</p>
</div>
{:else if data.documents.length === 0}
<div
class="flex flex-col items-center justify-center py-24 bg-white border border-brand-sand rounded-sm text-center shadow-sm"
class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
>
<p class="text-brand-navy font-serif">{m.conv_no_results_heading()}</p>
<p class="text-gray-400 text-sm mt-2">{m.conv_no_results_text()}</p>
<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>
</div>
{:else}
<!-- CHAT CONTAINER -->
<div class="bg-white border border-brand-sand shadow-sm rounded-sm relative overflow-hidden">
<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<!-- Decoration: Central Timeline Line -->
<div
class="absolute left-1/2 top-0 bottom-0 w-px bg-brand-sand/30 transform -translate-x-1/2 hidden md:block"
class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
></div>
<div class="p-6 md:p-8">
<div class="flex flex-col gap-4 relative z-10">
{#each data.documents as doc}
<div class="relative z-10 flex flex-col gap-4">
{#each data.documents as doc (doc.id)}
{@const isRight = doc.sender?.id === senderId}
<!-- Message Row -->
<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
<!-- Bubble Group -->
<div
class="flex max-w-[90%] md:max-w-[70%] gap-3 {isRight
class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
? 'flex-row-reverse'
: 'flex-row'}"
>
<!-- AVATAR -->
<div class="flex-shrink-0 mt-auto mb-1 hidden sm:block">
<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
<div
class="w-8 h-8 rounded-full flex items-center justify-center font-serif text-xs border shadow-sm
class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
{isRight
? 'bg-brand-navy text-white border-brand-navy'
: 'bg-white text-brand-navy border-brand-sand'}"
? 'border-brand-navy bg-brand-navy text-white'
: 'border-brand-sand bg-white text-brand-navy'}"
>
{#if doc.sender}
{doc.sender.firstName[0]}{doc.sender.lastName[0]}
@@ -199,15 +200,15 @@
<!-- BUBBLE CARD -->
<a
href="/documents/{doc.id}"
class="group block p-4 rounded shadow-sm transition-all duration-200 transform hover:-translate-y-0.5 hover:shadow-md border
class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
{isRight
? 'bg-brand-navy text-white border-brand-navy rounded-br-none'
: 'bg-brand-sand/10 text-brand-navy border-brand-sand rounded-bl-none'}"
? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
>
<!-- Header -->
<div class="flex justify-between items-start gap-4 mb-2">
<div class="mb-2 flex items-start justify-between gap-4">
<h3
class="font-serif font-medium text-sm leading-snug {isRight
class="font-serif text-sm leading-snug font-medium {isRight
? 'text-white'
: 'text-brand-navy'}"
>
@@ -216,7 +217,7 @@
<!-- Status Dot -->
<span
class="flex-shrink-0 w-1.5 h-1.5 rounded-full mt-1.5
class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
{doc.status === 'UPLOADED'
? 'bg-brand-mint'
: 'bg-yellow-400'}"
@@ -227,7 +228,7 @@
<!-- Metadata -->
<div
class="flex flex-wrap gap-3 text-[10px] font-sans uppercase tracking-wider opacity-80 {isRight
class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
? 'text-blue-100'
: 'text-gray-500'}"
>

12
frontend/src/routes/demo/paraglide/+page.svelte
View File

@@ -1,17 +1,17 @@
<script lang="ts">
import { setLocale } from '$lib/paraglide/runtime';
import { page } from '$app/state';
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
</script>
<h1>{m.nav_documents()}</h1>
<div>
<button onclick={() => setLocale('en')}>en</button>
<button onclick={() => setLocale('es')}>es</button>
<button onclick={() => setLocale('de')}>de</button>
</div><p>
If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a> for a better i18n experience.
</div>
<p>
If you use VSCode, install the <a
href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
target="_blank">Sherlock i18n extension</a
> for a better i18n experience.
</p>

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

@@ -31,7 +31,6 @@
const blob = await response.blob();
fileUrl = URL.createObjectURL(blob);
} catch (e) {
console.error(e);
error = m.doc_file_error_preview();
@@ -41,46 +40,56 @@
}
</script>
<div class="h-screen flex flex-col bg-white">
<div class="flex h-screen flex-col bg-white">
<!-- Top Bar -->
<div
class="bg-white border-b border-brand-sand px-6 py-4 flex items-center justify-between z-10 shadow-sm"
class="z-10 flex items-center justify-between border-b border-brand-sand bg-white px-6 py-4 shadow-sm"
>
<div class="flex items-center gap-6 overflow-hidden">
<a
href="/"
class="group flex-shrink-0 flex items-center gap-2 text-sm font-sans font-medium text-gray-500 hover:text-brand-navy transition-colors"
class="group flex flex-shrink-0 items-center gap-2 font-sans text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
>
<div
class="w-8 h-8 rounded-full bg-brand-sand group-hover:bg-brand-mint flex items-center justify-center transition-colors"
class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-sand transition-colors group-hover:bg-brand-mint"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4"
/>
</div>
<span>{m.btn_back()}</span>
</a>
<div class="flex items-center gap-4 overflow-hidden border-l border-gray-200 pl-6">
<h1 class="text-xl font-serif text-brand-navy truncate" title={doc.title}>
<h1 class="truncate font-serif text-xl text-brand-navy" title={doc.title}>
{doc.title || doc.originalFilename}
</h1>
<span
class="flex-shrink-0 px-3 py-1 rounded-full text-xs font-sans font-bold tracking-wide uppercase
class="flex-shrink-0 rounded-full px-3 py-1 font-sans text-xs font-bold tracking-wide uppercase
{doc.status === 'UPLOADED'
? 'bg-brand-mint/30 text-brand-navy border border-brand-mint'
: 'bg-yellow-100 text-yellow-800 border border-yellow-200'}"
? 'border border-brand-mint bg-brand-mint/30 text-brand-navy'
: 'border border-yellow-200 bg-yellow-100 text-yellow-800'}"
>
{doc.status}
</span>
</div>
</div>
<div class="flex items-center gap-3 flex-shrink-0 ml-4 font-sans">
<div class="ml-4 flex flex-shrink-0 items-center gap-3 font-sans">
{#if data.canWrite}
<a
href="/documents/{doc.id}/edit"
class="text-brand-navy bg-transparent border border-brand-navy hover:bg-brand-navy hover:text-white px-4 py-2 rounded text-sm font-medium transition flex items-center gap-2"
class="flex items-center gap-2 rounded border border-brand-navy bg-transparent px-4 py-2 text-sm font-medium text-brand-navy transition hover:bg-brand-navy hover:text-white"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg" alt="" aria-hidden="true" class="w-4 h-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4"
/>
{m.btn_edit()}
</a>
{/if}
@@ -89,90 +98,119 @@
<a
href={fileUrl}
download={doc.originalFilename}
class="text-brand-navy bg-brand-sand/50 hover:bg-brand-mint border border-transparent p-2 rounded transition"
class="rounded border border-transparent bg-brand-sand/50 p-2 text-brand-navy transition hover:bg-brand-mint"
title={m.doc_download_title()}
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</a>
{/if}
</div>
</div>
<!-- Content Area -->
<div class="flex-1 flex overflow-hidden">
<div class="flex flex-1 overflow-hidden">
<!-- LEFT SIDEBAR: METADATA -->
<aside
class="w-96 bg-white border-r border-brand-sand overflow-y-auto p-8 flex-shrink-0 custom-scrollbar"
class="custom-scrollbar w-96 flex-shrink-0 overflow-y-auto border-r border-brand-sand bg-white p-8"
>
<div class="space-y-10">
<!-- 1. DETAILS GROUP -->
<div>
<h3
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
>
{m.doc_section_details()}
</h3>
<div class="space-y-5">
<!-- Date -->
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<div class="group flex items-start">
<span class="mt-0.5 w-8 text-brand-mint">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
</span>
<span class="text-xs font-sans text-gray-500">{m.doc_label_document_date()}</span>
<span class="font-sans text-xs text-gray-500">{m.doc_label_document_date()}</span>
</div>
</div>
<!-- Creation Location -->
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<div class="group flex items-start">
<span class="mt-0.5 w-8 text-brand-mint">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
{doc.location ? doc.location : '—'}
</span>
<span class="text-xs font-sans text-gray-500">{m.doc_label_creation_location()}</span>
<span class="font-sans text-xs text-gray-500"
>{m.doc_label_creation_location()}</span
>
</div>
</div>
<!-- Physical Archive Location -->
{#if doc.documentLocation}
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Folder-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<div class="group flex items-start">
<span class="mt-0.5 w-8 text-brand-mint">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Folder-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</span>
<div>
<span class="block font-serif text-lg text-brand-navy">
{doc.documentLocation}
</span>
<span class="text-xs font-sans text-gray-500">{m.doc_label_archive_location_original()}</span>
<span class="font-sans text-xs text-gray-500"
>{m.doc_label_archive_location_original()}</span
>
</div>
</div>
{/if}
<!-- TAGS / SCHLAGWORTE -->
{#if doc.tags && doc.tags.length > 0}
<div class="flex items-start group">
<span class="text-brand-mint w-8 mt-0.5">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Bookmark/Bookmark-Outline-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<div class="group flex items-start">
<span class="mt-0.5 w-8 text-brand-mint">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Bookmark/Bookmark-Outline-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</span>
<div class="flex-1">
<div class="flex flex-wrap gap-2 mb-1">
{#each doc.tags as tag}
<div class="mb-1 flex flex-wrap gap-2">
{#each doc.tags as tag (tag.id)}
<a
href="/?tag={encodeURIComponent(tag.name)}"
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide bg-brand-sand/50 text-brand-navy hover:bg-brand-navy hover:text-white transition-colors"
class="inline-flex items-center rounded bg-brand-sand/50 px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
title={m.doc_tag_filter_title({ name: tag.name })}
>
{tag.name}
</a>
{/each}
</div>
<span class="text-xs font-sans text-gray-500">{m.form_label_tags()}</span>
<span class="font-sans text-xs text-gray-500">{m.form_label_tags()}</span>
</div>
</div>
{/if}
@@ -182,58 +220,64 @@
<!-- 2. PERSONEN GROUP -->
<div>
<h3
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
>
{m.doc_section_persons()}
</h3>
<div class="mb-6">
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">{m.form_label_sender()}</span>
<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
>{m.form_label_sender()}</span
>
{#if doc.sender}
<a
href="/persons/{doc.sender.id}"
class="block p-3 rounded border border-brand-sand bg-brand-sand/20 hover:border-brand-mint hover:bg-brand-mint/10 transition group"
class="group block rounded border border-brand-sand bg-brand-sand/20 p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
>
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-full bg-brand-navy text-white flex items-center justify-center font-serif text-sm"
class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-navy font-serif text-sm text-white"
>
{doc.sender.firstName[0]}{doc.sender.lastName[0]}
</div>
<div>
<p
class="font-serif text-brand-navy group-hover:underline decoration-brand-mint underline-offset-2"
class="font-serif text-brand-navy decoration-brand-mint underline-offset-2 group-hover:underline"
>
{doc.sender.firstName}
{doc.sender.lastName}
</p>
{#if doc.sender.alias}
<p class="text-xs font-sans text-gray-500">{doc.sender.alias}</p>
<p class="font-sans text-xs text-gray-500">{doc.sender.alias}</p>
{/if}
</div>
</div>
</a>
{:else}
<span class="text-sm font-serif text-gray-400 italic">{m.doc_sender_not_specified()}</span>
<span class="font-serif text-sm text-gray-400 italic"
>{m.doc_sender_not_specified()}</span
>
{/if}
</div>
<div>
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">{m.form_label_receivers()}</span>
<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
>{m.form_label_receivers()}</span
>
{#if doc.receivers && doc.receivers.length > 0}
<div class="space-y-2">
{#each doc.receivers as receiver}
{#each doc.receivers as receiver (receiver.id)}
<div
class="flex items-center justify-between p-3 rounded border border-brand-sand bg-white hover:border-brand-navy transition group"
class="group flex items-center justify-between rounded border border-brand-sand bg-white p-3 transition hover:border-brand-navy"
>
<a href="/persons/{receiver.id}" class="flex items-center gap-3 flex-1 min-w-0">
<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
<div
class="w-6 h-6 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center text-xs font-serif"
class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 font-serif text-xs text-gray-500"
>
{receiver.firstName[0]}{receiver.lastName[0]}
</div>
<span
class="font-serif text-sm text-brand-navy group-hover:text-brand-navy truncate"
class="truncate font-serif text-sm text-brand-navy group-hover:text-brand-navy"
>
{receiver.firstName}
{receiver.lastName}
@@ -243,17 +287,22 @@
{#if doc.sender}
<a
href="/conversations?senderId={doc.sender.id}&receiverId={receiver.id}"
class="text-gray-300 hover:text-brand-mint transition"
class="text-gray-300 transition hover:text-brand-mint"
title={m.doc_conversation_title()}
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Chat-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Chat-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</a>
{/if}
</div>
{/each}
</div>
{:else}
<span class="text-sm font-serif text-gray-400 italic">{m.doc_no_receivers()}</span>
<span class="font-serif text-sm text-gray-400 italic">{m.doc_no_receivers()}</span>
{/if}
</div>
</div>
@@ -262,7 +311,7 @@
{#if doc.summary || doc.transcription}
<div>
<h3
class="text-xs font-sans font-bold text-brand-navy uppercase tracking-widest mb-4 border-b border-brand-sand pb-2"
class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
>
{m.doc_section_content()}
</h3>
@@ -270,9 +319,11 @@
<div class="space-y-6">
{#if doc.summary}
<div>
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">{m.doc_label_summary()}</span>
<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
>{m.doc_label_summary()}</span
>
<div
class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
>
{doc.summary}
</div>
@@ -281,9 +332,11 @@
{#if doc.transcription}
<div>
<span class="text-xs font-sans text-gray-400 block mb-2 uppercase">{m.form_label_transcription()}</span>
<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
>{m.form_label_transcription()}</span
>
<div
class="bg-brand-sand/30 p-5 rounded border border-brand-sand text-sm font-serif text-brand-navy leading-relaxed whitespace-pre-wrap"
class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
>
{doc.transcription}
</div>
@@ -294,19 +347,19 @@
{/if}
<!-- Footer -->
<div class="pt-4 border-t border-brand-sand text-[10px] font-sans text-gray-400">
<div class="border-t border-brand-sand pt-4 font-sans text-[10px] text-gray-400">
<p class="truncate">ID: {doc.id}</p>
<p class="truncate mt-1">{doc.originalFilename}</p>
<p class="mt-1 truncate">{doc.originalFilename}</p>
</div>
</div>
</aside>
<!-- RIGHT: PREVIEW AREA -->
<main class="flex-1 bg-[#2A2A2A] relative flex flex-col items-center justify-center">
<main class="relative flex flex-1 flex-col items-center justify-center bg-[#2A2A2A]">
{#if isLoading}
<div class="text-brand-mint flex flex-col items-center">
<div class="flex flex-col items-center text-brand-mint">
<svg
class="animate-spin h-8 w-8 mb-4"
class="mb-4 h-8 w-8 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@@ -322,13 +375,13 @@
<span class="font-sans text-sm tracking-wide">{m.doc_loading()}</span>
</div>
{:else if error}
<div class="text-gray-400 text-center px-4">
<p class="font-serif mb-2">{error}</p>
<div class="px-4 text-center text-gray-400">
<p class="mb-2 font-serif">{error}</p>
{#if doc.filePath}
<a
href={`/api/documents/${doc.id}/file`}
target="_blank"
class="underline hover:text-white text-sm"
class="text-sm underline hover:text-white"
>
{m.doc_download_link()}
</a>
@@ -336,8 +389,13 @@
</div>
{:else if !doc.filePath}
<div class="flex flex-col items-center text-gray-400">
<div class="bg-white/5 p-8 rounded-full mb-6">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-12 h-12 opacity-50 invert" />
<div class="mb-6 rounded-full bg-white/5 p-8">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
alt=""
aria-hidden="true"
class="h-12 w-12 opacity-50 invert"
/>
</div>
<p class="font-sans text-sm tracking-wide uppercase">{m.doc_no_scan()}</p>
</div>
@@ -345,14 +403,14 @@
<iframe
src={fileUrl}
title={m.doc_preview_iframe_title()}
class="w-full h-full border-none bg-white"
class="h-full w-full border-none bg-white"
></iframe>
{:else if fileUrl}
<div class="w-full h-full flex items-center justify-center overflow-auto p-8">
<div class="flex h-full w-full items-center justify-center overflow-auto p-8">
<img
src={fileUrl}
alt={m.doc_image_alt()}
class="max-w-full max-h-full object-contain shadow-2xl"
class="max-h-full max-w-full object-contain shadow-2xl"
/>
</div>
{/if}

15
frontend/src/routes/documents/[id]/edit/+page.server.ts
View File

@@ -3,8 +3,19 @@ import { env } from '$env/dynamic/private';
import { createApiClient } from '$lib/api.server';
import { parseBackendError, getErrorMessage } from '$lib/errors';
export async function load({ params, fetch, locals }: { params: { id: string }; fetch: typeof globalThis.fetch; locals: App.Locals }) {
const canWrite = locals.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('WRITE_ALL')) ?? false;
export async function load({
params,
fetch,
locals
}: {
params: { id: string };
fetch: typeof globalThis.fetch;
locals: App.Locals;
}) {
const canWrite =
locals.user?.groups?.some((g: { permissions: string[] }) =>
g.permissions.includes('WRITE_ALL')
) ?? false;
if (!canWrite) throw error(403, 'Forbidden');
const { id } = params;

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

@@ -38,34 +38,44 @@
}
</script>
<div class="max-w-4xl mx-auto py-8 px-4">
<div class="mx-auto max-w-4xl px-4 py-8">
<!-- Heading -->
<div class="mb-6">
<a href="/documents/{doc.id}" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group mb-4">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
<a
href="/documents/{doc.id}"
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
/>
{m.btn_back_to_document()}
</a>
<h1 class="text-3xl font-serif text-brand-navy">
{m.doc_edit_heading()} — <span class="text-brand-navy/70">{doc.title || doc.originalFilename}</span>
<h1 class="font-serif text-3xl text-brand-navy">
{m.doc_edit_heading()} —
<span class="text-brand-navy/70">{doc.title || doc.originalFilename}</span>
</h1>
</div>
{#if form?.error}
<div class="bg-red-50 text-red-700 border border-red-200 p-4 rounded mb-6">{form.error}</div>
<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
{/if}
<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
<!-- ── Section 1: Wer & Wann ── -->
<div class="bg-white shadow-sm border border-brand-sand rounded-sm p-6">
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">{m.doc_section_who_when()}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="rounded-sm border border-brand-sand 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>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum -->
<div>
<label for="documentDate" class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_date()}</label>
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_date()}</label
>
<input
id="documentDate"
type="text"
@@ -74,7 +84,7 @@
oninput={handleDateInput}
placeholder={m.form_placeholder_date()}
maxlength="10"
class="block w-full rounded border-gray-300 shadow-sm p-2 border text-sm
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
aria-describedby={dateInvalid ? 'date-error' : undefined}
/>
@@ -86,14 +96,16 @@
<!-- Ort -->
<div>
<label for="location" class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_location()}</label>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_location()}</label
>
<input
id="location"
type="text"
name="location"
value={doc.location || ''}
placeholder={m.form_placeholder_location()}
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
</div>
@@ -109,120 +121,143 @@
<!-- Empfänger -->
<div>
<p class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_receivers()}</p>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div>
</div>
</div>
<!-- ── Section 2: Beschreibung ── -->
<div class="bg-white shadow-sm border border-brand-sand rounded-sm p-6">
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">{m.doc_section_description()}</h2>
<div class="rounded-sm border border-brand-sand 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>
<div class="space-y-5">
<!-- Titel -->
<div>
<label for="title" class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_title()} *</label>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_title()} *</label
>
<input
id="title"
type="text"
name="title"
value={doc.title || ''}
required
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
</div>
<!-- Aufbewahrungsort -->
<div>
<label for="documentLocation" class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_archive_location()}</label>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_archive_location()}</label
>
<input
id="documentLocation"
type="text"
name="documentLocation"
value={doc.documentLocation || ''}
placeholder={m.form_placeholder_archive_location()}
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
/>
<p class="mt-1 text-xs text-gray-400">{m.form_helper_archive_location()}</p>
</div>
<!-- Schlagworte -->
<div>
<p class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_tags()}</p>
<TagInput bind:tags />
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.join(',')} />
</div>
<!-- Inhalt -->
<div>
<label for="summary" class="block text-sm font-medium text-gray-700 mb-1">{m.form_label_content()}</label>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_content()}</label
>
<textarea
id="summary"
name="summary"
rows="5"
placeholder={m.form_placeholder_content()}
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm font-serif"
>{doc.summary || ''}</textarea>
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
>{doc.summary || ''}</textarea
>
</div>
</div>
</div>
<!-- ── Section 3: Transkription ── -->
<div class="bg-white shadow-sm border border-brand-sand rounded-sm p-6">
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">{m.form_label_transcription()}</h2>
<div class="rounded-sm border border-brand-sand 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>
<textarea
id="transcription"
name="transcription"
rows="12"
placeholder={m.form_placeholder_transcription()}
class="block w-full rounded border-gray-300 shadow-sm p-2 border focus:border-brand-navy focus:ring-brand-navy text-sm font-serif"
>{doc.transcription || ''}</textarea>
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
>{doc.transcription || ''}</textarea
>
</div>
<!-- ── Section 4: Datei ── -->
<div class="bg-white shadow-sm border border-brand-sand rounded-sm p-6">
<h2 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">{m.doc_section_file()}</h2>
<div class="rounded-sm border border-brand-sand 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="flex items-center gap-3 mb-4 text-sm text-gray-600 bg-brand-sand/20 rounded px-3 py-2">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 flex-shrink-0" />
<span>{m.doc_current_file_label()} <strong class="text-brand-navy font-medium">{doc.originalFilename}</strong></span>
<div
class="mb-4 flex items-center gap-3 rounded bg-brand-sand/20 px-3 py-2 text-sm text-gray-600"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 flex-shrink-0"
/>
<span
>{m.doc_current_file_label()}
<strong class="font-medium text-brand-navy">{doc.originalFilename}</strong></span
>
</div>
<label for="file-upload" class="block text-sm font-medium text-gray-700 mb-1">
{m.doc_file_replace_label()} <span class="font-normal text-gray-400">({m.doc_file_replace_note()})</span>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
{m.doc_file_replace_label()}
<span class="font-normal text-gray-400">({m.doc_file_replace_note()})</span>
</label>
<input
id="file-upload"
type="file"
name="file"
class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded file:border-0
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:bg-brand-sand/40 file:text-brand-navy
hover:file:bg-brand-sand/60 cursor-pointer"
file:text-brand-navy hover:file:bg-brand-sand/60"
/>
</div>
<!-- ── Sticky Save Bar ── -->
<div class="sticky bottom-0 z-10 bg-white border-t border-brand-sand shadow-[0_-2px_8px_rgba(0,0,0,0.06)] -mx-4 px-6 py-4 flex items-center justify-between">
<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)]"
>
<a
href="/documents/{doc.id}"
class="text-sm text-gray-500 hover:text-brand-navy transition-colors font-medium"
class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
>
{m.btn_cancel()}
</a>
<button
type="submit"
class="px-6 py-2 bg-brand-navy text-white text-sm font-bold uppercase tracking-widest rounded hover:bg-brand-navy/80 transition-colors"
class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
>
{m.btn_save()}
</button>
</div>
</form>
</div>

13
frontend/src/routes/documents/new/+page.server.ts
View File

@@ -3,8 +3,17 @@ import { env } from '$env/dynamic/private';
import { createApiClient } from '$lib/api.server';
import { parseBackendError, getErrorMessage } from '$lib/errors';
export async function load({ fetch, locals }: { fetch: typeof globalThis.fetch; locals: App.Locals }) {
const canWrite = locals.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('WRITE_ALL')) ?? false;
export async function load({
fetch,
locals
}: {
fetch: typeof globalThis.fetch;
locals: App.Locals;
}) {
const canWrite =
locals.user?.groups?.some((g: { permissions: string[] }) =>
g.permissions.includes('WRITE_ALL')
) ?? false;
if (!canWrite) throw error(403, 'Forbidden');
const api = createApiClient(fetch);

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

@@ -74,7 +74,9 @@ 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">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">{m.doc_section_who_when()}</h2>
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_who_when()}
</h2>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum -->
@@ -104,7 +106,9 @@ function handleDateInput(e: Event) {
<!-- Ort -->
<div>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_location()}</label>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_location()}</label
>
<input
id="location"
type="text"
@@ -129,12 +133,16 @@ function handleDateInput(e: Event) {
<!-- ── Section 2: Beschreibung ── -->
<div class="rounded-sm border border-brand-sand 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>
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_description()}
</h2>
<div class="space-y-5">
<!-- Titel -->
<div>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_title()} *</label>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_title()} *</label
>
<input
id="title"
type="text"
@@ -168,7 +176,9 @@ function handleDateInput(e: Event) {
<!-- Inhalt -->
<div>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_content()}</label>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
>{m.form_label_content()}</label
>
<textarea
id="summary"
name="summary"
@@ -182,7 +192,9 @@ function handleDateInput(e: Event) {
<!-- ── Section 3: Transkription ── -->
<div class="rounded-sm border border-brand-sand 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>
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.form_label_transcription()}
</h2>
<textarea
id="transcription"
name="transcription"
@@ -194,10 +206,13 @@ function handleDateInput(e: Event) {
<!-- ── Section 4: Datei ── -->
<div class="rounded-sm border border-brand-sand 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>
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.doc_section_file()}
</h2>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
{m.doc_file_upload_label()} <span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
{m.doc_file_upload_label()}
<span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
</label>
<input
id="file-upload"

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

@@ -1,21 +1,21 @@
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
/* Fonts: Montserrat = Gotham substitute | Tinos = Times 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";
@import 'tailwindcss';
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
@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-mint: #a1dcd8; /* Aqua Island */
--color-brand-purple: #b4b9ff; /* Melrose */
--color-brand-sand: #f0efe9; /* Neutral paper tone */
--color-brand-white: #ffffff;
--color-brand-dark: #0D0D0D;
--color-brand-dark: #0d0d0d;
/* FONTS */
--font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Tinos", "Times New Roman", Georgia, serif;
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
--text-huge: 4rem;
}
@@ -32,7 +32,12 @@
font-family: var(--font-serif);
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
font-weight: 600;
}

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

@@ -9,7 +9,7 @@
const activeLocale = $derived(getLocale().toUpperCase());
</script>
<div class="relative min-h-screen bg-white flex flex-col">
<div class="relative flex min-h-screen flex-col bg-white">
<!-- DGB purple accent strip -->
<div class="h-1 bg-brand-purple"></div>
@@ -19,7 +19,7 @@
<button
type="button"
onclick={() => setLocale(localeMap[locale])}
class="text-xs font-sans tracking-widest px-1.5 py-1 transition-colors
class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
{activeLocale === locale
? 'font-bold text-brand-navy'
: 'font-normal text-gray-400 hover:text-brand-navy'}"
@@ -29,38 +29,64 @@
{/each}
</div>
<div class="flex-1 flex items-center justify-center px-4">
<div class="flex flex-1 items-center justify-center px-4">
<div class="w-full max-w-sm">
<!-- Logo -->
<div class="mb-10 text-center">
<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
<span class="font-sans font-bold text-2xl tracking-widest text-brand-navy uppercase">Familienarchiv</span>
<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
>Familienarchiv</span
>
</a>
</div>
<!-- Card -->
<div class="bg-white border border-brand-sand rounded-sm shadow-sm p-8">
<h1 class="font-sans text-sm font-bold uppercase tracking-widest text-brand-navy mb-6">{m.login_heading()}</h1>
<div class="rounded-sm border border-brand-sand 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>
<form method="POST" action="?/login" class="space-y-5">
<div>
<label for="username" class="block text-xs font-bold font-sans uppercase tracking-widest text-gray-500 mb-1.5">{m.login_label_username()}</label>
<input type="text" name="username" id="username" required autocomplete="username"
class="block w-full border border-gray-300 py-2.5 px-3 text-sm font-serif text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none" />
<label
for="username"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
>{m.login_label_username()}</label
>
<input
type="text"
name="username"
id="username"
required
autocomplete="username"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
/>
</div>
<div>
<label for="password" class="block text-xs font-bold font-sans uppercase tracking-widest text-gray-500 mb-1.5">{m.login_label_password()}</label>
<input type="password" name="password" id="password" required autocomplete="current-password"
class="block w-full border border-gray-300 py-2.5 px-3 text-sm font-serif text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none" />
<label
for="password"
class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
>{m.login_label_password()}</label
>
<input
type="password"
name="password"
id="password"
required
autocomplete="current-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
/>
</div>
{#if form?.error}
<div class="text-red-600 text-xs font-sans font-medium text-center">{form.error}</div>
<div class="text-center font-sans text-xs font-medium text-red-600">{form.error}</div>
{/if}
<button type="submit"
class="w-full bg-brand-navy text-white py-2.5 text-xs font-bold uppercase tracking-widest font-sans hover:bg-brand-navy/90 transition-colors mt-2">
<button
type="submit"
class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
>
{m.login_btn_submit()}
</button>
</form>
@@ -70,6 +96,6 @@
<!-- Footer -->
<div class="py-4 text-center">
<p class="text-xs font-sans text-gray-300 uppercase tracking-widest">Familienarchiv</p>
<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
</div>
</div>

8
frontend/src/routes/page.svelte.spec.ts
View File

@@ -70,7 +70,9 @@ describe('Home page – search bar', () => {
it('pre-fills the search input from filters.q', async () => {
render(Page, { data: { ...emptyData, filters: { ...emptyData.filters, q: 'Urlaub' } } });
await expect.element(page.getByPlaceholder('Suche in Titel, Inhalt, Ort...')).toHaveValue('Urlaub');
await expect
.element(page.getByPlaceholder('Suche in Titel, Inhalt, Ort...'))
.toHaveValue('Urlaub');
});
});
@@ -168,9 +170,7 @@ describe('Home page – error state', () => {
it('shows the error message when data.error is set', async () => {
const data = { ...emptyData, error: 'Daten konnten nicht geladen werden.' };
render(Page, { data });
await expect
.element(page.getByText('Daten konnten nicht geladen werden.'))
.toBeInTheDocument();
await expect.element(page.getByText('Daten konnten nicht geladen werden.')).toBeInTheDocument();
await page.screenshot({ path: 'test-results/screenshots/home-error.png' });
});
});

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

@@ -30,7 +30,12 @@ function handleSearch(e: Event) {
href="/persons/new"
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4"
/>
{m.persons_btn_new()}
</a>
{/if}
@@ -51,7 +56,12 @@ function handleSearch(e: Event) {
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-4 w-4 opacity-40" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
alt=""
aria-hidden="true"
class="h-4 w-4 opacity-40"
/>
</div>
</div>
</div>
@@ -64,14 +74,19 @@ function handleSearch(e: Event) {
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
alt=""
aria-hidden="true"
class="h-6 w-6"
/>
</div>
<p class="font-serif text-lg text-brand-navy">{m.persons_empty_heading()}</p>
<p class="mt-1 font-sans text-sm text-gray-500">{m.persons_empty_text()}</p>
</div>
{:else}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{#each data.persons as person}
{#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"

3
frontend/src/routes/persons/[id]/+page.server.ts
View File

@@ -42,7 +42,8 @@ export const actions = {
const { error: apiError } = await api.PUT('/api/persons/{id}', {
params: { path: { id: params.id } },
body: {
firstName, lastName,
firstName,
lastName,
...(alias ? { alias } : {}),
...(notes ? { notes } : {}),
...(birthYear ? { birthYear } : {}),

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

@@ -4,6 +4,7 @@
import { m } from '$lib/paraglide/messages.js';
import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
import { formatDate } from '$lib/utils/date';
import { SvelteMap } from 'svelte/reactivity';
let { data, form } = $props();
@@ -21,15 +22,17 @@
const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDirSent));
const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDirReceived));
const visibleSentDocuments = $derived(showAllSent ? sortedSentDocuments : sortedSentDocuments.slice(0, DOCS_PREVIEW_LIMIT));
const visibleReceivedDocuments = $derived(showAllReceived ? sortedReceivedDocuments : sortedReceivedDocuments.slice(0, DOCS_PREVIEW_LIMIT));
const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
const visibleSentDocuments = $derived(
showAllSent ? sortedSentDocuments : sortedSentDocuments.slice(0, DOCS_PREVIEW_LIMIT)
);
const visibleReceivedDocuments = $derived(
showAllReceived ? sortedReceivedDocuments : sortedReceivedDocuments.slice(0, DOCS_PREVIEW_LIMIT)
);
function yearRange(docs: typeof sentDocuments) {
const years = docs
.filter(d => d.documentDate)
.map(d => parseInt(d.documentDate!.substring(0, 4)));
.filter((d) => d.documentDate)
.map((d) => parseInt(d.documentDate!.substring(0, 4)));
if (!years.length) return null;
const min = Math.min(...years);
const max = Math.max(...years);
@@ -40,14 +43,19 @@
const receivedYearRange = $derived(yearRange(receivedDocuments));
const coCorrespondents = $derived.by(() => {
const freq = new Map<string, { id: string; name: string; count: number }>();
const freq = new SvelteMap<string, { id: string; name: string; count: number }>();
for (const doc of sentDocuments) {
for (const receiver of doc.receivers ?? []) {
const key = receiver.id;
const existing = freq.get(key);
if (existing) existing.count++;
else freq.set(key, { id: receiver.id, name: `${receiver.firstName} ${receiver.lastName}`, count: 1 });
else
freq.set(key, {
id: receiver.id,
name: `${receiver.firstName} ${receiver.lastName}`,
count: 1
});
}
}
@@ -56,7 +64,12 @@
const key = doc.sender.id;
const existing = freq.get(key);
if (existing) existing.count++;
else freq.set(key, { id: doc.sender.id, name: `${doc.sender.firstName} ${doc.sender.lastName}`, count: 1 });
else
freq.set(key, {
id: doc.sender.id,
name: `${doc.sender.firstName} ${doc.sender.lastName}`,
count: 1
});
}
}
@@ -73,72 +86,100 @@
$effect(() => {
// Reset merge state whenever person changes
person.id;
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
person.id; // reactive dependency
mergeTargetId = '';
showMergeConfirm = false;
});
</script>
<div class="max-w-4xl mx-auto py-10 px-4">
<div class="mx-auto max-w-4xl px-4 py-10">
<!-- Back Link -->
<div class="mb-6">
<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
<a
href="/persons"
class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
/>
{m.btn_back_to_overview()}
</a>
</div>
<!-- Header / Metadata Card -->
<div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
<div class="h-2 bg-brand-navy w-full"></div>
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="h-2 w-full bg-brand-navy"></div>
<div class="p-8 md:p-10">
{#if editMode && data.canWrite}
<!-- Edit Form -->
<form method="POST" action="?/update" use:enhance>
<div class="flex flex-col gap-6">
<h2 class="text-xl font-serif text-brand-navy border-b border-gray-100 pb-3">{m.person_edit_heading()}</h2>
<h2 class="border-b border-gray-100 pb-3 font-serif text-xl text-brand-navy">
{m.person_edit_heading()}
</h2>
{#if form?.updateError}
<p class="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{form.updateError}</p>
<p class="rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
{form.updateError}
</p>
{/if}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<label for="firstName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_first_name()} *</label>
<label
for="firstName"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.form_label_first_name()} *</label
>
<input
id="firstName"
name="firstName"
type="text"
required
value={person.firstName}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
/>
</div>
<div>
<label for="lastName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_last_name()} *</label>
<label
for="lastName"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.form_label_last_name()} *</label
>
<input
id="lastName"
name="lastName"
type="text"
required
value={person.lastName}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
/>
</div>
<div class="md:col-span-2">
<label for="alias" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_alias()}</label>
<label
for="alias"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.form_label_alias()}</label
>
<input
id="alias"
name="alias"
type="text"
value={person.alias ?? ''}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
/>
</div>
<div>
<label for="birthYear" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.person_label_birth_year()}</label>
<label
for="birthYear"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.person_label_birth_year()}</label
>
<input
id="birthYear"
name="birthYear"
@@ -147,11 +188,15 @@
max="2100"
placeholder={m.person_placeholder_year()}
value={person.birthYear ?? ''}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
/>
</div>
<div>
<label for="deathYear" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.person_label_death_year()}</label>
<label
for="deathYear"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.person_label_death_year()}</label
>
<input
id="deathYear"
name="deathYear"
@@ -160,26 +205,38 @@
max="2100"
placeholder={m.person_placeholder_year()}
value={person.deathYear ?? ''}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
/>
</div>
<div class="md:col-span-2">
<label for="notes" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.person_label_notes()}</label>
<label
for="notes"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.person_label_notes()}</label
>
<textarea
id="notes"
name="notes"
rows="4"
placeholder={m.person_placeholder_notes()}
class="block w-full border border-gray-300 rounded px-3 py-2 font-serif text-brand-navy focus:outline-none focus:border-brand-navy resize-y"
>{person.notes ?? ''}</textarea>
class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
>{person.notes ?? ''}</textarea
>
</div>
</div>
<div class="flex gap-3">
<button type="submit" class="px-5 py-2 bg-brand-navy text-white text-sm font-bold uppercase tracking-widest rounded hover:bg-brand-navy/80 transition-colors">
<button
type="submit"
class="rounded bg-brand-navy px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
>
{m.btn_save()}
</button>
<button type="button" onclick={() => (editMode = false)} class="px-5 py-2 border border-gray-300 text-gray-600 text-sm font-bold uppercase tracking-widest rounded hover:bg-gray-50 transition-colors">
<button
type="button"
onclick={() => (editMode = false)}
class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
>
{m.btn_cancel()}
</button>
</div>
@@ -187,56 +244,85 @@
</form>
{:else}
<!-- View Mode -->
<div class="flex flex-col md:flex-row gap-8 items-start">
<div class="flex flex-col items-start gap-8 md:flex-row">
<div class="flex-shrink-0">
<div class="w-24 h-24 rounded-full bg-brand-sand/30 flex items-center justify-center text-brand-navy border border-brand-sand">
<div
class="flex h-24 w-24 items-center justify-center rounded-full border border-brand-sand bg-brand-sand/30 text-brand-navy"
>
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
</div>
</div>
<div class="flex-1 w-full">
<div class="flex items-start justify-between mb-8 border-b border-gray-100 pb-4">
<h1 class="text-4xl font-serif text-brand-navy">
{person.firstName} {person.lastName}
<div class="w-full flex-1">
<div class="mb-8 flex items-start justify-between border-b border-gray-100 pb-4">
<h1 class="font-serif text-4xl text-brand-navy">
{person.firstName}
{person.lastName}
</h1>
<div class="ml-4 flex-shrink-0 flex items-center gap-2">
<div class="ml-4 flex flex-shrink-0 items-center gap-2">
{#if data.canWrite}
<button onclick={() => (editMode = true)} class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:border-brand-navy hover:text-brand-navy transition-colors">
<img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg" alt="" aria-hidden="true" class="w-3.5 h-3.5" />
<button
onclick={() => (editMode = true)}
class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:border-brand-navy hover:text-brand-navy"
>
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
alt=""
aria-hidden="true"
class="h-3.5 w-3.5"
/>
{m.btn_edit()}
</button>
{/if}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div>
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.person_label_full_name()}</span>
<span class="block text-lg font-serif text-brand-navy">{person.firstName} {person.lastName}</span>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.person_label_full_name()}</span
>
<span class="block font-serif text-lg text-brand-navy"
>{person.firstName} {person.lastName}</span
>
</div>
{#if person.alias}
<div>
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.form_label_alias()}</span>
<span class="block text-lg font-serif text-brand-navy italic">"{person.alias}"</span>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.form_label_alias()}</span
>
<span class="block font-serif text-lg text-brand-navy italic"
>"{person.alias}"</span
>
</div>
{/if}
{#if person.birthYear || person.deathYear}
<div>
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>
{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
</span>
<span class="block text-lg font-serif text-brand-navy">
{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear} &nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
<span class="block font-serif text-lg text-brand-navy">
{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
&nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
</span>
</div>
{/if}
{#if person.notes}
<div class="md:col-span-2">
<span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.person_label_notes()}</span>
<p class="text-base font-serif text-brand-navy whitespace-pre-wrap">{person.notes}</p>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>{m.person_label_notes()}</span
>
<p class="font-serif text-base whitespace-pre-wrap text-brand-navy">
{person.notes}
</p>
</div>
{/if}
</div>
@@ -249,21 +335,23 @@
<!-- Merge Section -->
{#if data.canWrite}
{#key person.id}
<div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
<div class="p-6 md:p-8">
<h2 class="text-lg font-serif text-brand-navy mb-1">{m.person_merge_heading()}</h2>
<p class="text-sm text-gray-500 font-sans mb-5">
<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">
{m.person_merge_description()}
</p>
{#if form?.mergeError}
<p class="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2 mb-4">{form.mergeError}</p>
<p class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
{form.mergeError}
</p>
{/if}
<form method="POST" action="?/merge" use:enhance>
<input type="hidden" name="targetPersonId" bind:value={mergeTargetId} />
<div class="flex flex-col sm:flex-row gap-3 items-end">
<div class="flex flex-col items-end gap-3 sm:flex-row">
<div class="flex-1">
<PersonTypeahead
name="_targetPersonDisplay"
@@ -278,7 +366,7 @@
type="button"
disabled={!mergeTargetId}
onclick={() => (showMergeConfirm = true)}
class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-red-300 text-red-600 rounded hover:bg-red-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
class="rounded border border-red-300 px-4 py-2 text-sm font-bold tracking-widest text-red-600 uppercase transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-40"
>
{m.person_btn_merge()}
</button>
@@ -286,14 +374,14 @@
<div class="flex gap-2">
<button
type="submit"
class="px-4 py-2 text-sm font-bold uppercase tracking-widest bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
class="rounded bg-red-600 px-4 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-red-700"
>
{m.person_btn_merge_confirm()}
</button>
<button
type="button"
onclick={() => (showMergeConfirm = false)}
class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:bg-gray-50 transition-colors"
class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-gray-500 uppercase transition-colors hover:bg-gray-50"
>
{m.btn_cancel()}
</button>
@@ -302,8 +390,11 @@
</div>
{#if showMergeConfirm}
<p class="mt-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-3 py-2">
{m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong> {m.person_merge_will_be_deleted()}
<p
class="mt-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
>
{m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong>
{m.person_merge_will_be_deleted()}
</p>
{/if}
</form>
@@ -315,13 +406,17 @@
<!-- Co-Correspondents Section -->
{#if coCorrespondents.length > 0}
<div class="mb-6">
<h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
<h3 class="mb-3 text-xs font-bold tracking-widest text-gray-400 uppercase">
{m.person_co_correspondents_heading()}
</h3>
<div class="flex flex-wrap gap-2">
{#each coCorrespondents as c}
<a href="/conversations?senderId={person.id}&receiverId={c.id}"
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
{#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"
>
{c.name}
<span class="text-xs text-gray-400 font-sans">({c.count})</span>
<span class="font-sans text-xs text-gray-400">({c.count})</span>
</a>
{/each}
</div>
@@ -330,18 +425,18 @@
<!-- Sent Documents Section -->
<div class="mb-10">
<div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
<h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
<h2 class="font-serif text-xl text-brand-navy">{m.person_docs_heading()}</h2>
<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
{sentDocuments.length}
</span>
{#if sentYearRange}
<span class="text-xs font-sans text-gray-400">{sentYearRange}</span>
<span class="font-sans text-xs text-gray-400">{sentYearRange}</span>
{/if}
{#if sentDocuments.length > 1}
<button
onclick={() => (sortDirSent = sortDirSent === 'DESC' ? 'ASC' : 'DESC')}
class="ml-auto text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
>
{sortDirSent === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
@@ -349,25 +444,39 @@
</div>
{#if sentDocuments.length === 0}
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
<p class="text-gray-500 font-sans">{m.person_no_docs()}</p>
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
{#each visibleSentDocuments as doc}
{#each visibleSentDocuments as doc (doc.id)}
<li class="group">
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
<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"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<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"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</div>
<div class="min-w-0">
<div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
<div
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
>
{doc.title || doc.originalFilename}
</div>
<div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
<span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
<span
>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span>{doc.location}</span>
@@ -375,14 +484,21 @@
</div>
</div>
</div>
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
<div class="flex flex-shrink-0 items-center gap-2 pl-4">
<span
class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
{doc.status === 'UPLOADED'
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
>
{doc.status}
</span>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="ml-2 h-5 w-5 opacity-40 transition-opacity group-hover:opacity-100"
/>
</div>
</div>
</a>
@@ -392,7 +508,7 @@
{#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
<button
onclick={() => (showAllSent = true)}
class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
>
{m.person_show_more({ count: sentDocuments.length - DOCS_PREVIEW_LIMIT })}
</button>
@@ -402,18 +518,18 @@
<!-- Received Documents Section -->
<div>
<div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
<h2 class="text-xl font-serif text-brand-navy">{m.person_received_docs_heading()}</h2>
<span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
<h2 class="font-serif text-xl text-brand-navy">{m.person_received_docs_heading()}</h2>
<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
{receivedDocuments.length}
</span>
{#if receivedYearRange}
<span class="text-xs font-sans text-gray-400">{receivedYearRange}</span>
<span class="font-sans text-xs text-gray-400">{receivedYearRange}</span>
{/if}
{#if receivedDocuments.length > 1}
<button
onclick={() => (sortDirReceived = sortDirReceived === 'DESC' ? 'ASC' : 'DESC')}
class="ml-auto text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
>
{sortDirReceived === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
@@ -421,25 +537,39 @@
</div>
{#if receivedDocuments.length === 0}
<div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
<p class="text-gray-500 font-sans">{m.person_no_received_docs()}</p>
<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
{#each visibleReceivedDocuments as doc}
{#each visibleReceivedDocuments as doc (doc.id)}
<li class="group">
<a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
<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"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
<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"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</div>
<div class="min-w-0">
<div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
<div
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
>
{doc.title || doc.originalFilename}
</div>
<div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
<span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
<span
>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span>{doc.location}</span>
@@ -447,14 +577,21 @@
</div>
</div>
</div>
<div class="flex items-center flex-shrink-0 pl-4 gap-2">
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
<div class="flex flex-shrink-0 items-center gap-2 pl-4">
<span
class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
{doc.status === 'UPLOADED'
? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
: 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
>
{doc.status}
</span>
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="ml-2 h-5 w-5 opacity-40 transition-opacity group-hover:opacity-100"
/>
</div>
</div>
</a>
@@ -464,12 +601,11 @@
{#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
<button
onclick={() => (showAllReceived = true)}
class="mt-3 text-xs font-bold uppercase tracking-widest text-brand-navy/50 hover:text-brand-navy transition-colors"
class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
>
{m.person_show_more({ count: receivedDocuments.length - DOCS_PREVIEW_LIMIT })}
</button>
{/if}
{/if}
</div>
</div>

5
frontend/src/routes/persons/new/+page.server.ts
View File

@@ -2,7 +2,10 @@ import { error, fail, redirect } from '@sveltejs/kit';
import { createApiClient } from '$lib/api.server';
export async function load({ locals }: { locals: App.Locals }) {
const canWrite = locals.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('WRITE_ALL')) ?? false;
const canWrite =
locals.user?.groups?.some((g: { permissions: string[] }) =>
g.permissions.includes('WRITE_ALL')
) ?? false;
if (!canWrite) throw error(403, 'Forbidden');
}

6
frontend/tailwind.config.js
View File

@@ -8,16 +8,16 @@ export default {
navy: '#002850', // Header & Hero background
mint: '#A6DAD8', // The Comma accent color
sand: '#E4E2D7', // Content background
white: '#ffffff',
white: '#ffffff'
}
},
fontFamily: {
// Montserrat for UI/Headers, Merriweather for Body text (as established previously)
sans: ['Montserrat', 'sans-serif'],
serif: ['Merriweather', 'serif'],
serif: ['Merriweather', 'serif']
},
fontSize: {
'huge': '4rem', // For the large stats numbers (e.g., "29", "5000+")
huge: '4rem' // For the large stats numbers (e.g., "29", "5000+")
}
}
},