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

refactor(topbar): extract annotate/download actions as Svelte snippets, render in desktop + kebab
Some checks failed
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-01 10:15:31 +02:00
parent 51348ad26a
commit 1e9ef63191
1 changed files with 72 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -43,6 +43,72 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
let mobileMenuOpen = $state(false); let mobileMenuOpen = $state(false);
</script> </script>
{#snippet annotateBtn(mobile: boolean)}
<button
onclick={() => {
annotateMode = true;
if (mobile) mobileMenuOpen = false;
}}
aria-label={m.doc_panel_annotate()}
aria-pressed={false}
class={mobile
? 'flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
: 'hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex'}
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{m.doc_panel_annotate()}
</button>
{/snippet}
{#snippet annotateStopBtn(mobile: boolean)}
<button
onclick={() => {
annotateMode = false;
if (mobile) mobileMenuOpen = false;
}}
aria-label={m.doc_panel_annotate_stop()}
aria-pressed={true}
class={mobile
? 'flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'
: 'hidden items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary md:flex'}
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0 invert"
/>
{m.doc_panel_annotate_stop()}
</button>
{/snippet}
{#snippet downloadLink(mobile: boolean)}
<a
href={fileUrl}
download={doc.originalFilename}
onclick={() => {
if (mobile) mobileMenuOpen = false;
}}
class={mobile
? 'flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
: 'hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block'}
title={m.doc_download_title()}
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{#if mobile}{m.doc_download_title()}{/if}
</a>
{/snippet}
<div data-topbar class="border-b border-line bg-surface shadow-sm"> <div data-topbar class="border-b border-line bg-surface shadow-sm">
<!-- Main row --> <!-- Main row -->
<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]"> <div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
@@ -102,37 +168,11 @@ let mobileMenuOpen = $state(false);
<!-- Action buttons --> <!-- Action buttons -->
<div class="ml-2 flex shrink-0 items-center gap-1.5 pr-3 font-sans"> <div class="ml-2 flex shrink-0 items-center gap-1.5 pr-3 font-sans">
{#if canAnnotate && isPdf && !annotateMode} {#if canAnnotate && isPdf && !annotateMode}
<button {@render annotateBtn(false)}
onclick={() => (annotateMode = true)}
aria-label={m.doc_panel_annotate()}
aria-pressed={false}
class="hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
<span>{m.doc_panel_annotate()}</span>
</button>
{/if} {/if}
{#if canAnnotate && isPdf && annotateMode} {#if canAnnotate && isPdf && annotateMode}
<button {@render annotateStopBtn(false)}
onclick={() => (annotateMode = false)}
aria-label={m.doc_panel_annotate_stop()}
aria-pressed={true}
class="hidden items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary md:flex"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 invert"
/>
<span>{m.doc_panel_annotate_stop()}</span>
</button>
{/if} {/if}
{#if canWrite && !annotateMode} {#if canWrite && !annotateMode}
@@ -152,19 +192,7 @@ let mobileMenuOpen = $state(false);
{/if} {/if}
{#if doc.filePath && !annotateMode} {#if doc.filePath && !annotateMode}
<a {@render downloadLink(false)}
href={fileUrl}
download={doc.originalFilename}
class="hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block"
title={m.doc_download_title()}
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5"
/>
</a>
{/if} {/if}
<!-- Kebab menu — mobile only, contains actions hidden below md --> <!-- Kebab menu — mobile only, contains actions hidden below md -->
@@ -197,59 +225,15 @@ let mobileMenuOpen = $state(false);
class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg" class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
> >
{#if canAnnotate && isPdf && !annotateMode} {#if canAnnotate && isPdf && !annotateMode}
<button {@render annotateBtn(true)}
role="menuitem"
onclick={() => {
annotateMode = true;
mobileMenuOpen = false;
}}
class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{m.doc_panel_annotate()}
</button>
{/if} {/if}
{#if canAnnotate && isPdf && annotateMode} {#if canAnnotate && isPdf && annotateMode}
<button {@render annotateStopBtn(true)}
role="menuitem"
onclick={() => {
annotateMode = false;
mobileMenuOpen = false;
}}
class="flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0 invert"
/>
{m.doc_panel_annotate_stop()}
</button>
{/if} {/if}
{#if doc.filePath} {#if doc.filePath}
<a {@render downloadLink(true)}
role="menuitem"
href={fileUrl}
download={doc.originalFilename}
onclick={() => (mobileMenuOpen = false)}
class="flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
alt=""
aria-hidden="true"
class="h-5 w-5 shrink-0"
/>
{m.doc_download_title()}
</a>
{/if} {/if}
</div> </div>
{/if} {/if}