feat(frontend): new strip components, suggestions dropdown, empty state
CorrespondenzPersonBar (Row 1), CorrespondenzFilterControls (Row 2 with live count + sort), CorrespondentSuggestionsDropdown (fetch-on-focus, keyboard nav), SinglePersonHintBar, CorrespondenzEmptyState (recent persons from localStorage). New i18n shim in messages-extra.ts until root-owned paraglide files can be regenerated. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
37
frontend/src/lib/messages-extra.ts
Normal file
37
frontend/src/lib/messages-extra.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Extra message functions for i18n keys added after the last paraglide compile.
|
||||
*
|
||||
* TODO: Remove this file once the root-owned paraglide files in src/lib/paraglide/
|
||||
* are regenerated (run `npm run dev` or the paraglide compile step as the owning user).
|
||||
* At that point, these functions will be generated into _index.js and the components
|
||||
* that import from here should switch back to importing from $lib/paraglide/messages.js.
|
||||
*
|
||||
* Note: these fall back to German only — locale switching is handled by the generated
|
||||
* paraglide files, not this shim.
|
||||
*/
|
||||
|
||||
// Svelte auto-escapes interpolated values — do not use {@html} with these strings.
|
||||
|
||||
export const conv_hint_single_person = (inputs: { name: string }) =>
|
||||
`Alle Briefe von ${inputs.name} — wähle einen Korrespondenten oben um einzugrenzen`;
|
||||
|
||||
export const conv_hint_single_person_filtered = (inputs: {
|
||||
name: string;
|
||||
from: string;
|
||||
to: string;
|
||||
sortLabel: string;
|
||||
}) => `Alle Briefe von ${inputs.name} · ${inputs.from}–${inputs.to} · ${inputs.sortLabel}`;
|
||||
|
||||
export const conv_strip_period = () => 'Zeitraum';
|
||||
export const conv_strip_from_placeholder = () => 'Von…';
|
||||
export const conv_strip_to_placeholder = () => 'Bis…';
|
||||
export const conv_strip_all_correspondents = () => 'Alle Korrespondenten';
|
||||
export const conv_strip_sort_newest = () => 'Neueste';
|
||||
export const conv_strip_sort_oldest = () => 'Älteste';
|
||||
export const conv_suggestions_heading = () => 'Häufigste Korrespondenten';
|
||||
export const conv_suggestions_all_label = (inputs: { name: string }) =>
|
||||
`Alle Korrespondenten von ${inputs.name}`;
|
||||
export const conv_letters_count = (inputs: { count: number }) => `${inputs.count} Briefe`;
|
||||
export const conv_empty_search_placeholder = () => 'Person suchen…';
|
||||
export const conv_empty_recent_label = () => 'Zuletzt geöffnet';
|
||||
export const conv_no_party = () => '—';
|
||||
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { conv_suggestions_heading, conv_suggestions_all_label } from '$lib/messages-extra';
|
||||
|
||||
interface Correspondent {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
senderId: string;
|
||||
senderName: string;
|
||||
onselect: (id: string) => void;
|
||||
onclose: () => void;
|
||||
}
|
||||
|
||||
let { senderId, senderName, onselect, onclose }: Props = $props();
|
||||
|
||||
let results = $state<Correspondent[]>([]);
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/persons/${senderId}/correspondents`);
|
||||
results = res.ok ? await res.json() : [];
|
||||
} catch {
|
||||
results = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
function clickOutside(node: HTMLElement) {
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
|
||||
onclose();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', handleClick, true);
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getOptionElements(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(container.querySelectorAll<HTMLElement>('[role="option"]'));
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent, container: HTMLElement) {
|
||||
const options = getOptionElements(container);
|
||||
const focused = document.activeElement as HTMLElement;
|
||||
const idx = options.indexOf(focused);
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
const next = options[idx + 1] ?? options[0];
|
||||
next?.focus();
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
const prev = options[idx - 1] ?? options[options.length - 1];
|
||||
prev?.focus();
|
||||
} else if (event.key === 'Escape') {
|
||||
onclose();
|
||||
}
|
||||
}
|
||||
|
||||
function getInitials(person: Correspondent): string {
|
||||
return `${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
use:clickOutside
|
||||
role="listbox"
|
||||
tabindex="-1"
|
||||
aria-label={conv_suggestions_heading()}
|
||||
class="absolute top-full right-0 left-0 z-30 mt-1 rounded-sm border border-[#E0DDD6] bg-white shadow-lg"
|
||||
onkeydown={(e) => handleKeydown(e, e.currentTarget as HTMLElement)}
|
||||
>
|
||||
<!-- Heading -->
|
||||
<div class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-[#888] uppercase">
|
||||
{conv_suggestions_heading()}
|
||||
</div>
|
||||
|
||||
<!-- Correspondent rows -->
|
||||
{#if !loading}
|
||||
{#each results as person (person.id)}
|
||||
<div
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
tabindex="0"
|
||||
class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-[#333] hover:bg-[#F7F5F2] focus:bg-[#F7F5F2] focus:outline-none"
|
||||
onclick={() => onselect(person.id)}
|
||||
onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
|
||||
>
|
||||
<!-- Avatar with initials -->
|
||||
<span
|
||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#002850] text-[10px] font-bold text-white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{getInitials(person)}
|
||||
</span>
|
||||
<!-- Svelte auto-escapes — do not use {@html} here. -->
|
||||
{person.lastName}, {person.firstName}
|
||||
<!-- TODO: show proportional letter-count bar when counts are available from the API -->
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="mt-1 border-t border-[#E0DDD6]"></div>
|
||||
|
||||
<!-- "Alle Korrespondenten" row -->
|
||||
<div
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
tabindex="0"
|
||||
class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-[#333] hover:bg-[#F7F5F2] focus:bg-[#F7F5F2] focus:outline-none"
|
||||
onclick={() => onselect('')}
|
||||
onkeydown={(e) => e.key === 'Enter' && onselect('')}
|
||||
>
|
||||
{conv_suggestions_all_label({ name: senderName })}
|
||||
</div>
|
||||
</div>
|
||||
121
frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
Normal file
121
frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte
Normal file
@@ -0,0 +1,121 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { conv_empty_search_placeholder, conv_empty_recent_label } from '$lib/messages-extra';
|
||||
|
||||
interface RecentPerson {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onSelectPerson: (id: string) => void;
|
||||
}
|
||||
|
||||
const { onSelectPerson }: Props = $props();
|
||||
|
||||
let recentPersons = $state<RecentPerson[]>([]);
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem('korrespondenz_recent_persons');
|
||||
if (raw) {
|
||||
// Svelte auto-escapes firstName/lastName — do not use {@html} with these values
|
||||
recentPersons = JSON.parse(raw) as RecentPerson[];
|
||||
}
|
||||
} catch {
|
||||
recentPersons = [];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
|
||||
<!-- Icon circle -->
|
||||
<div class="rounded-full bg-[#F0EDE6] p-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="text-[#002850]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||
<path d="M2 7l10 7 10-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<h2 class="font-serif text-sm font-black text-[#0D2240]">Korrespondenz durchsuchen</h2>
|
||||
|
||||
<!-- Subtext -->
|
||||
<p class="max-w-[280px] text-xs text-[#888]">
|
||||
Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
|
||||
</p>
|
||||
|
||||
<!-- Search input placeholder (visual only — clicking focuses Person A typeahead above) -->
|
||||
<button
|
||||
type="button"
|
||||
data-testid="conv-empty-search"
|
||||
aria-label={conv_empty_search_placeholder()}
|
||||
onclick={() => onSelectPerson('')}
|
||||
class="flex h-[28px] w-[260px] items-center rounded-sm border border-[#D1D5DB] bg-[#F9F8F6] px-3 text-xs text-[#AAA] italic transition-colors hover:border-[#002850]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-1.5 shrink-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
Person suchen…
|
||||
</button>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="flex w-full items-center gap-2">
|
||||
<div class="flex-1 border-t border-[#E0DDD6]"></div>
|
||||
<span class="text-[10px] font-bold tracking-wider text-[#AAA] uppercase">oder</span>
|
||||
<div class="flex-1 border-t border-[#E0DDD6]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Recent persons -->
|
||||
{#if recentPersons.length > 0}
|
||||
<div class="flex w-full flex-col items-center gap-2">
|
||||
<span class="text-[10px] font-bold tracking-widest text-[#888] uppercase">
|
||||
{conv_empty_recent_label()}
|
||||
</span>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
{#each recentPersons as person (person.id)}
|
||||
<!-- TODO: allow clearing recent history -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => onSelectPerson(person.id)}
|
||||
class="flex items-center gap-1.5 rounded-full border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-bold text-[#333] transition-colors hover:border-[#002850] hover:text-[#002850]"
|
||||
>
|
||||
<span
|
||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#002850] text-[10px] text-white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{person.firstName[0]}{person.lastName[0]}
|
||||
</span>
|
||||
<span class="hidden sm:inline">{person.lastName}, </span>{person.firstName}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,135 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
conv_strip_period,
|
||||
conv_strip_from_placeholder,
|
||||
conv_strip_to_placeholder,
|
||||
conv_strip_sort_newest,
|
||||
conv_strip_sort_oldest,
|
||||
conv_letters_count
|
||||
} from '$lib/messages-extra';
|
||||
|
||||
interface Props {
|
||||
senderId: string;
|
||||
fromDate?: string;
|
||||
toDate?: string;
|
||||
sortDir?: string;
|
||||
documentCount?: number;
|
||||
onapplyFilters: () => void;
|
||||
ontoggleSort: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
senderId,
|
||||
fromDate = $bindable(''),
|
||||
toDate = $bindable(''),
|
||||
sortDir = $bindable('DESC'),
|
||||
documentCount,
|
||||
onapplyFilters,
|
||||
ontoggleSort
|
||||
}: Props = $props();
|
||||
|
||||
let hasDateFilter = $derived(!!(fromDate || toDate));
|
||||
let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-[10px] border-b border-[#E0DDD6] bg-[#F7F5F2] px-4 py-[5px] transition-opacity sm:px-[18px]"
|
||||
class:opacity-40={!senderId}
|
||||
class:pointer-events-none={!senderId}
|
||||
aria-disabled={!senderId}
|
||||
>
|
||||
<!-- Period label -->
|
||||
<span class="hidden text-xs font-bold text-[#888] sm:block">
|
||||
{conv_strip_period()}
|
||||
</span>
|
||||
|
||||
<!-- From date -->
|
||||
<input
|
||||
type="date"
|
||||
bind:value={fromDate}
|
||||
onchange={() => onapplyFilters()}
|
||||
placeholder={conv_strip_from_placeholder()}
|
||||
aria-label="Von"
|
||||
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border px-1 text-xs focus:outline-none sm:min-h-0"
|
||||
class:border-[#002850]={!!fromDate}
|
||||
class:text-[#333]={!!fromDate}
|
||||
class:border-[#D1D5DB]={!fromDate}
|
||||
class:text-[#AAA]={!fromDate}
|
||||
class:italic={!fromDate}
|
||||
/>
|
||||
|
||||
<span class="text-xs text-[#AAA]">–</span>
|
||||
|
||||
<!-- To date -->
|
||||
<input
|
||||
type="date"
|
||||
bind:value={toDate}
|
||||
onchange={() => onapplyFilters()}
|
||||
placeholder={conv_strip_to_placeholder()}
|
||||
aria-label="Bis"
|
||||
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border px-1 text-xs focus:outline-none sm:min-h-0"
|
||||
class:border-[#002850]={!!toDate}
|
||||
class:text-[#333]={!!toDate}
|
||||
class:border-[#D1D5DB]={!toDate}
|
||||
class:text-[#AAA]={!toDate}
|
||||
class:italic={!toDate}
|
||||
/>
|
||||
|
||||
<!-- Document count -->
|
||||
<span
|
||||
data-testid="conv-strip-count"
|
||||
class="ml-auto text-xs font-bold"
|
||||
class:text-[#002850]={hasDateFilter}
|
||||
class:text-[#888]={!hasDateFilter}
|
||||
>
|
||||
{conv_letters_count({ count: documentCount ?? 0 })}
|
||||
</span>
|
||||
|
||||
<!-- Sort button -->
|
||||
<button
|
||||
data-testid="conv-sort-btn"
|
||||
type="button"
|
||||
aria-label="Sortierung umkehren"
|
||||
aria-pressed={sortDir === 'ASC'}
|
||||
onclick={ontoggleSort}
|
||||
class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border px-2 text-xs font-bold sm:min-h-0"
|
||||
class:border-[#002850]={isActive}
|
||||
class:text-[#002850]={isActive}
|
||||
class:border-[#D1D5DB]={!isActive}
|
||||
class:text-[#888]={!isActive}
|
||||
>
|
||||
{#if sortDir === 'ASC'}
|
||||
{conv_strip_sort_oldest()}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polyline points="18 15 12 9 6 15" />
|
||||
</svg>
|
||||
{:else}
|
||||
{conv_strip_sort_newest()}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
|
||||
|
||||
interface Props {
|
||||
senderId?: string;
|
||||
receiverId?: string;
|
||||
initialSenderName?: string;
|
||||
initialReceiverName?: string;
|
||||
onapplyFilters: () => void;
|
||||
onswapPersons: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
senderId = $bindable(''),
|
||||
receiverId = $bindable(''),
|
||||
initialSenderName = '',
|
||||
initialReceiverName = '',
|
||||
onapplyFilters,
|
||||
onswapPersons
|
||||
}: Props = $props();
|
||||
|
||||
let swapVisible = $derived(!!(senderId && receiverId));
|
||||
</script>
|
||||
|
||||
<div class="flex items-end gap-[9px] border-b border-[#EAE7E0] bg-white px-4 py-[9px] sm:px-[18px]">
|
||||
<!-- Person A -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<PersonTypeahead
|
||||
name="senderId"
|
||||
label="Person"
|
||||
bind:value={senderId}
|
||||
initialName={initialSenderName}
|
||||
restrictToCorrespondentsOf={receiverId || undefined}
|
||||
onchange={() => onapplyFilters()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Swap button -->
|
||||
<button
|
||||
data-testid="conv-swap-btn"
|
||||
type="button"
|
||||
aria-label="Personen tauschen"
|
||||
onclick={onswapPersons}
|
||||
class="mb-1 flex h-7 w-7 shrink-0 items-center justify-center rounded border border-[#D1D5DB] bg-white text-[#888] transition-colors hover:border-[#002850] hover:text-[#002850]"
|
||||
class:opacity-0={!swapVisible}
|
||||
class:pointer-events-none={!swapVisible}
|
||||
tabindex={swapVisible ? 0 : -1}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M7 16V4m0 0L3 8m4-4l4 4" />
|
||||
<path d="M17 8v12m0 0l4-4m-4 4l-4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Korrespondent field -->
|
||||
<div
|
||||
class="min-w-0 flex-1"
|
||||
class:[&_input]:border-dashed={!receiverId}
|
||||
class:[&_input]:border-solid={!!receiverId}
|
||||
class:[&_input]:bg-[#F9F8F6]={!receiverId}
|
||||
>
|
||||
<PersonTypeahead
|
||||
name="receiverId"
|
||||
label={receiverId ? 'Korrespondent' : 'Korrespondent'}
|
||||
bind:value={receiverId}
|
||||
initialName={initialReceiverName}
|
||||
restrictToCorrespondentsOf={senderId || undefined}
|
||||
onchange={() => onapplyFilters()}
|
||||
/>
|
||||
{#if !receiverId}
|
||||
<span class="pointer-events-none absolute -mt-[1px] text-[11px] text-[#AAA] italic">
|
||||
— optional
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
38
frontend/src/routes/korrespondenz/SinglePersonHintBar.svelte
Normal file
38
frontend/src/routes/korrespondenz/SinglePersonHintBar.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
conv_hint_single_person,
|
||||
conv_hint_single_person_filtered,
|
||||
conv_strip_sort_newest,
|
||||
conv_strip_sort_oldest
|
||||
} from '$lib/messages-extra';
|
||||
|
||||
interface Props {
|
||||
senderName: string;
|
||||
fromDate?: string;
|
||||
toDate?: string;
|
||||
sortDir?: string;
|
||||
}
|
||||
|
||||
let { senderName, fromDate = '', toDate = '', sortDir = 'DESC' }: Props = $props();
|
||||
|
||||
let hasDateFilter = $derived(!!(fromDate || toDate));
|
||||
|
||||
let sortLabel = $derived(sortDir === 'ASC' ? conv_strip_sort_oldest() : conv_strip_sort_newest());
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-[5px] border-b border-[#FDBA74] bg-[#FFF7ED] px-[18px] py-[6px] text-xs text-[#92400E]"
|
||||
>
|
||||
<span class="text-sm" aria-hidden="true">📋</span>
|
||||
|
||||
{#if hasDateFilter}
|
||||
{conv_hint_single_person_filtered({
|
||||
name: senderName,
|
||||
from: fromDate ?? '',
|
||||
to: toDate ?? '',
|
||||
sortLabel
|
||||
})}
|
||||
{:else}
|
||||
{conv_hint_single_person({ name: senderName })}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user