From d62d4297accca14b258b60b379a8dabe1afad0ee Mon Sep 17 00:00:00 2001 From: Chris Amico Date: Tue, 14 Apr 2026 11:39:30 -0400 Subject: [PATCH 01/12] Migrate Flex.svelte. Add stories. Convert it to use classes instead of inline styles. Closes #854. --- src/lib/components/common/Flex.svelte | 135 +++++++++++++----- .../common/stories/Flex.stories.svelte | 74 ++++++++++ 2 files changed, 174 insertions(+), 35 deletions(-) create mode 100644 src/lib/components/common/stories/Flex.stories.svelte diff --git a/src/lib/components/common/Flex.svelte b/src/lib/components/common/Flex.svelte index 450a9dfda..e2c57dd96 100644 --- a/src/lib/components/common/Flex.svelte +++ b/src/lib/components/common/Flex.svelte @@ -1,4 +1,5 @@
- + {@render children()}
+ + diff --git a/src/lib/components/common/stories/Flex.stories.svelte b/src/lib/components/common/stories/Flex.stories.svelte new file mode 100644 index 000000000..eacbf4e64 --- /dev/null +++ b/src/lib/components/common/stories/Flex.stories.svelte @@ -0,0 +1,74 @@ + + + + +
One
+
Two
+
Three
+ + + + + +
One
+
Two
+
Three
+ + + + + +
One
+
Two
+
Three
+ + + + + +
Left
+
Right
+ + + + + +
Centered
+ + + + + +
Short
+
Tall
+
Short
+ + + + + +
One
+
Two
+
Three
+
Four
+
Five
+
Six
+ + + + + +
Wide
+
Gap
+
Items
+ + From 2748a0e066905596ff027d049cca6ee25e7ffa74 Mon Sep 17 00:00:00 2001 From: Chris Amico Date: Tue, 14 Apr 2026 13:12:54 -0400 Subject: [PATCH 02/12] Migrate NavItem.svelte and update everything that uses it --- src/lib/components/accounts/UserMenu.svelte | 32 ++++--- .../components/addons/AddOnsNavigation.svelte | 16 +++- src/lib/components/addons/History.svelte | 4 +- src/lib/components/addons/Scheduled.svelte | 4 +- .../components/addons/ScheduledEvent.svelte | 5 +- src/lib/components/common/NavItem.svelte | 66 ++++++++----- .../common/stories/Dropdown.stories.svelte | 94 ++++++++++++++----- .../common/stories/NavItem.stories.svelte | 37 +++++--- src/lib/components/documents/Data.svelte | 4 +- src/lib/components/documents/Projects.svelte | 8 +- .../components/documents/VisibleFields.svelte | 10 +- .../components/layouts/DocumentBrowser.svelte | 4 +- .../components/navigation/Breadcrumbs.svelte | 17 ++-- src/lib/components/navigation/HelpMenu.svelte | 78 +++++++++------ .../components/navigation/LanguageMenu.svelte | 33 ++++--- src/lib/components/navigation/OrgMenu.svelte | 88 +++++++++-------- .../stories/Breadcrumbs.stories.svelte | 54 ++++++----- src/lib/components/processing/AddOns.svelte | 4 +- .../components/processing/Documents.svelte | 8 +- .../components/projects/Collaborators.svelte | 82 ++++++++-------- src/lib/components/sidebar/AddOns.svelte | 20 +++- src/lib/components/sidebar/Documents.svelte | 60 +++++++----- src/lib/components/sidebar/Projects.svelte | 20 +++- .../stories/SidebarGroup.stories.svelte | 36 +++++-- .../toolbars/DocumentListToolbar.svelte | 8 +- .../toolbars/PaginationToolbar.svelte | 8 +- .../components/toolbars/ReadingToolbar.svelte | 8 +- .../components/viewer/sidebar/Notes.svelte | 26 +++-- 28 files changed, 546 insertions(+), 288 deletions(-) diff --git a/src/lib/components/accounts/UserMenu.svelte b/src/lib/components/accounts/UserMenu.svelte index 3190e2034..634d54ca5 100644 --- a/src/lib/components/accounts/UserMenu.svelte +++ b/src/lib/components/accounts/UserMenu.svelte @@ -36,28 +36,36 @@ {#snippet anchor()} - + {#snippet start()} + + {/snippet} {#if width && width > remToPx(48)} {getUserName(user)} {/if} -
- {#if position.includes("bottom")} - - {:else} - - {/if} -
+ {#snippet end()} +
+ {#if position.includes("bottom")} + + {:else} + + {/if} +
+ {/snippet} {/snippet} {#snippet inner(close)} - - + + {#snippet start()} + + {/snippet} {$_("authSection.user.acctSettings")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.user.signOut")} diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte index ac3502d3a..e4105553b 100644 --- a/src/lib/components/addons/AddOnsNavigation.svelte +++ b/src/lib/components/addons/AddOnsNavigation.svelte @@ -27,7 +27,9 @@ href="/add-ons/" --hover-background="var(--blue-2)" > - + {#snippet start()} + + {/snippet} All - + {#snippet start()} + + {/snippet} Pinned - + {#snippet start()} + + {/snippet} Featured - + {#snippet start()} + + {/snippet} Premium diff --git a/src/lib/components/addons/History.svelte b/src/lib/components/addons/History.svelte index 37c765d1b..6526003b6 100644 --- a/src/lib/components/addons/History.svelte +++ b/src/lib/components/addons/History.svelte @@ -77,7 +77,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("addonRuns.previous")} {/snippet} diff --git a/src/lib/components/addons/Scheduled.svelte b/src/lib/components/addons/Scheduled.svelte index ed40a4a21..aceee2d25 100644 --- a/src/lib/components/addons/Scheduled.svelte +++ b/src/lib/components/addons/Scheduled.svelte @@ -55,7 +55,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("addonRuns.scheduled")} {/snippet} diff --git a/src/lib/components/addons/ScheduledEvent.svelte b/src/lib/components/addons/ScheduledEvent.svelte index 8a8774e27..2e336f240 100644 --- a/src/lib/components/addons/ScheduledEvent.svelte +++ b/src/lib/components/addons/ScheduledEvent.svelte @@ -29,9 +29,10 @@ interface Props { event: Event; + onclick?: () => void; } - let { event }: Props = $props(); + let { event, onclick }: Props = $props(); let addon = $derived(isAddon(event.addon) ? event.addon : undefined); let disabled = $derived(event.event === 0); @@ -44,7 +45,7 @@ } - +

{addon?.name} diff --git a/src/lib/components/common/NavItem.svelte b/src/lib/components/common/NavItem.svelte index ef130a6ff..71cedf852 100644 --- a/src/lib/components/common/NavItem.svelte +++ b/src/lib/components/common/NavItem.svelte @@ -1,17 +1,41 @@ {#if href} @@ -26,12 +50,12 @@ class:disabled class:small class:inline - on:click - on:keydown + onclick={() => onclick?.()} + onkeydown={() => onclick?.()} > - - - + {@render start?.()} + {@render children?.()} + {@render end?.()} {:else} onclick?.()} + onkeydown={() => onclick?.()} role="button" tabindex={0} > - - - + {@render start?.()} + {@render children?.()} + {@render end?.()} {/if} diff --git a/src/lib/components/common/stories/Dropdown.stories.svelte b/src/lib/components/common/stories/Dropdown.stories.svelte index d479362e2..d0a29e447 100644 --- a/src/lib/components/common/stories/Dropdown.stories.svelte +++ b/src/lib/components/common/stories/Dropdown.stories.svelte @@ -1,4 +1,4 @@ - @@ -28,19 +27,25 @@ - Add a note… + {#snippet start()} + + {/snippet} Add a note… - - Go Home + + {#snippet start()} + + {/snippet} Go Home - Go Home + {#snippet start()} + + {/snippet} Go Home @@ -48,7 +53,9 @@ Static - Link + {#snippet start()} + + {/snippet} Link - Custom Active Colors + {#snippet start()} + + {/snippet} Custom Active Colors - Add a note… + {#snippet start()} + + {/snippet} Add a note… - Add a note… + {#snippet start()} + + {/snippet} Add a note…

- A very long sidebar item maybe a project + {#snippet start()} + + {/snippet} A very long sidebar item maybe a project
diff --git a/src/lib/components/documents/Data.svelte b/src/lib/components/documents/Data.svelte index c4295f86e..b13e737f6 100644 --- a/src/lib/components/documents/Data.svelte +++ b/src/lib/components/documents/Data.svelte @@ -36,7 +36,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("sidebar.data.title")} {/snippet} diff --git a/src/lib/components/documents/Projects.svelte b/src/lib/components/documents/Projects.svelte index f840b05b2..228f7b6b3 100644 --- a/src/lib/components/documents/Projects.svelte +++ b/src/lib/components/documents/Projects.svelte @@ -32,7 +32,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("projects.header")} {/snippet} @@ -62,9 +64,7 @@ {#if edit} - {#snippet title()} -

{$_("projects.header")}

- {/snippet} +

{$_("projects.header")}

 diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte index d862b337c..bf214de7d 100644 --- a/src/lib/components/documents/VisibleFields.svelte +++ b/src/lib/components/documents/VisibleFields.svelte @@ -100,9 +100,11 @@ visibleFields?.set(view.fields)} + onclick={() => visibleFields?.set(view.fields)} > - + {#snippet start()} + + {/snippet} {$_(view.label)}
@@ -112,7 +114,9 @@
- + {#snippet start()} + + {/snippet} {$_("documentBrowser.fields.customize")} diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte index e77ec61c7..f60c4834a 100644 --- a/src/lib/components/layouts/DocumentBrowser.svelte +++ b/src/lib/components/layouts/DocumentBrowser.svelte @@ -168,7 +168,9 @@ !search.editable} > {$_("bulk.title")} - + {#snippet end()} + + {/snippet} {/snippet} {#snippet inner({ close })} diff --git a/src/lib/components/navigation/Breadcrumbs.svelte b/src/lib/components/navigation/Breadcrumbs.svelte index 85026d2ec..1febf3264 100644 --- a/src/lib/components/navigation/Breadcrumbs.svelte +++ b/src/lib/components/navigation/Breadcrumbs.svelte @@ -1,4 +1,4 @@ -
- + {#if root}{@render root()}{:else} - + {/if} {#if SHOW_BREADCRUMBS} {#each trail as { href, title }} diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte index df4c00040..e7e3d1026 100644 --- a/src/lib/components/navigation/HelpMenu.svelte +++ b/src/lib/components/navigation/HelpMenu.svelte @@ -1,5 +1,5 @@ {#snippet anchor()} - -
- {#if position.includes("bottom")} - - {:else} - - {/if} -
+ {#snippet start()} + + {/snippet} + {#snippet end()} +
+ {#if position.includes("bottom")} + + {:else} + + {/if} +
+ {/snippet} {/snippet} {#snippet inner(close)} {#if showTour} - - + + {#snippet start()} + + {/snippet} Guided Tour {/if} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.faq")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.searchDocs")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.apiDocs")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.addOns")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.premium")} - - + + {#snippet start()} + + {/snippet} {$_("authSection.help.donate")} - + {#snippet start()} + + {/snippet} {$_("authSection.help.emailUs")} diff --git a/src/lib/components/navigation/LanguageMenu.svelte b/src/lib/components/navigation/LanguageMenu.svelte index b5b8d0646..efdaba745 100644 --- a/src/lib/components/navigation/LanguageMenu.svelte +++ b/src/lib/components/navigation/LanguageMenu.svelte @@ -11,10 +11,15 @@ import { LANGUAGES } from "@/config/config.js"; - export let position: Placement = "bottom-end"; + interface Props { + position?: Placement; + } + + let { position = "bottom-end" }: Props = $props(); - $: currentLang = - LANGUAGES.find(([_, code]) => code === $locale) ?? LANGUAGES[0]; + let currentLang = $derived( + LANGUAGES.find(([_, code]) => code === $locale) ?? LANGUAGES[0], + ); function updateLanguage(code: string) { $locale = code; @@ -29,22 +34,26 @@ {#snippet anchor()} - {currentLang?.[2]} + {#snippet start()} + {currentLang?.[2]} + {/snippet} -
- {#if position.includes("bottom")} - - {:else} - - {/if} -
+ {#snippet end()} +
+ {#if position.includes("bottom")} + + {:else} + + {/if} +
+ {/snippet} {/snippet} {#snippet inner(close)} {#each LANGUAGES as [name, code, flag]} { + onclick={() => { updateLanguage(code ?? ""); close(); }} diff --git a/src/lib/components/navigation/OrgMenu.svelte b/src/lib/components/navigation/OrgMenu.svelte index 6cd1dfee2..1ca4db564 100644 --- a/src/lib/components/navigation/OrgMenu.svelte +++ b/src/lib/components/navigation/OrgMenu.svelte @@ -82,38 +82,46 @@ {#snippet anchor()} {#if active_org.individual} - + {#snippet start()} + + {/snippet} {isPro ? $_("authSection.pro.title") : $_("authSection.premiumUpgrade.title")} -
- {#if position.includes("bottom")} - - {:else} - - {/if} -
+ {#snippet end()} +
+ {#if position.includes("bottom")} + + {:else} + + {/if} +
+ {/snippet} {:else} -
- {$_("authSection.org.avatar", -
+ {#snippet start()} +
+ {$_("authSection.org.avatar", +
+ {/snippet} {#if width && width > remToPx(48)}

{active_org.name}

{/if} -
- {#if position.includes("bottom")} - - {:else} - - {/if} -
+ {#snippet end()} +
+ {#if position.includes("bottom")} + + {:else} + + {/if} +
+ {/snippet} {/if} {/snippet} @@ -157,7 +165,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("authSection.org.userCount", { values: { n: users.length }, })} @@ -167,14 +177,14 @@ {#each users as user} {@const href = searchUrl(userDocs(user)).href}
  • - - + + {#snippet start()} {#if user.avatar_url} {:else} {/if} - + {/snippet} {getUserName(user)} {#if user.admin_organizations.includes(active_org.id)} @@ -194,16 +204,20 @@ {#snippet anchor()} -
    - {$_("authSection.org.avatar", -
    + {#snippet start()} +
    + {$_("authSection.org.avatar", +
    + {/snippet}

    {active_org.name}

    - + {#snippet end()} + + {/snippet}     {/snippet} {#snippet inner()} @@ -211,7 +225,7 @@ {#each otherOrgs as otherOrg} { + onclick={() => { switchOrg(otherOrg); close(); }} diff --git a/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte b/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte index 1a2480df4..ef90843a2 100644 --- a/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte +++ b/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte @@ -1,42 +1,44 @@ - - - - + - - - + - - - + ], + }} +/> - - - + ], + }} +/> - +
    - + -

    DocumentCloud

    + {#snippet root()} +

    DocumentCloud

    + {/snippet}     diff --git a/src/lib/components/processing/AddOns.svelte b/src/lib/components/processing/AddOns.svelte index 58fc2315f..ecc48348b 100644 --- a/src/lib/components/processing/AddOns.svelte +++ b/src/lib/components/processing/AddOns.svelte @@ -53,7 +53,9 @@ This component should update on a timer. {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("processing.addons")} {/snippet} diff --git a/src/lib/components/processing/Documents.svelte b/src/lib/components/processing/Documents.svelte index ede143bde..6f52b7c00 100644 --- a/src/lib/components/processing/Documents.svelte +++ b/src/lib/components/processing/Documents.svelte @@ -73,7 +73,9 @@ Invalidation of finished documents is handled by ProcessContext. {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("processing.documents")} {/snippet} @@ -112,7 +114,9 @@ Invalidation of finished documents is handled by ProcessContext. {#if reprocess} (reprocess = null)}> -

    {$_("dialogReprocessDialog.title")}

    + {#snippet title()} +

    {$_("dialogReprocessDialog.title")}

    + {/snippet} (reprocess = null)} />     diff --git a/src/lib/components/projects/Collaborators.svelte b/src/lib/components/projects/Collaborators.svelte index 6207bb850..040cace17 100644 --- a/src/lib/components/projects/Collaborators.svelte +++ b/src/lib/components/projects/Collaborators.svelte @@ -94,7 +94,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("projects.collaborators.title")} {/snippet} @@ -125,46 +127,52 @@ {#each members as user} {#if isProjectUser || project.edit_access} - + {#snippet start()} + + {/snippet} {getUserName(user.user)} - - {#if project.add_remove_access && !isMe(user, $me)} - - - - - - - {/if} - + {#snippet end()} + + {#if project.add_remove_access && !isMe(user, $me)} + + + + + + + {/if} + + {/snippet} {:else} - + {#snippet start()} + + {/snippet} {getUserName(user.user)} {/if} diff --git a/src/lib/components/sidebar/AddOns.svelte b/src/lib/components/sidebar/AddOns.svelte index 5dc7eefa4..8f6144204 100644 --- a/src/lib/components/sidebar/AddOns.svelte +++ b/src/lib/components/sidebar/AddOns.svelte @@ -50,7 +50,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("sidebar.addons.title")} {/snippet} @@ -68,11 +70,15 @@ {/snippet} - + {#snippet start()} + + {/snippet} Featured - + {#snippet start()} + + {/snippet} Premium @@ -84,12 +90,16 @@ {:else} {#each data?.results ?? [] as addon} - + {#snippet start()} + + {/snippet} {addon.name} {:else} - + {#snippet start()} + + {/snippet} {$_("sidebar.addons.pinned")} {/each} diff --git a/src/lib/components/sidebar/Documents.svelte b/src/lib/components/sidebar/Documents.svelte index 1051589c4..5b4f0f856 100644 --- a/src/lib/components/sidebar/Documents.svelte +++ b/src/lib/components/sidebar/Documents.svelte @@ -95,7 +95,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("documents.documents")} {/snippet} @@ -108,7 +110,9 @@ {/snippet} - + {#snippet start()} + + {/snippet} {$_("documents.yourDocuments")} - + {#snippet start()} + + {/snippet} {$_("documents.accessDocuments", { values: { access: "Private " }, })} @@ -128,7 +134,9 @@ href={searchUrl(minePublic).href} active={query === minePublic} > - + {#snippet start()} + + {/snippet} {$_("documents.accessDocuments", { values: { access: "Public " }, })} @@ -140,7 +148,9 @@ href={searchUrl(orgDocs).href} active={query === orgDocs} > - + {#snippet start()} + + {/snippet} {$_("documents.nameDocuments", { values: { name: $org.name, access: "" }, })} @@ -160,23 +170,27 @@ href={searchUrl(savedSearch.query).href} active={query === savedSearch.query} > - + {#snippet start()} + + {/snippet} {savedSearch.name} - - - + {#snippet end()} + + + + {/snippet} {:else}

    @@ -203,7 +217,9 @@ {#snippet signedOut()} - + {#snippet start()} + + {/snippet} {$_("documents.publicDocuments")} {/snippet} diff --git a/src/lib/components/sidebar/Projects.svelte b/src/lib/components/sidebar/Projects.svelte index 2147963e0..e556ae4f9 100644 --- a/src/lib/components/sidebar/Projects.svelte +++ b/src/lib/components/sidebar/Projects.svelte @@ -36,7 +36,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("sidebar.projects.title")} {/snippet} @@ -57,7 +59,9 @@ active={$page.url.searchParams?.get("list") === "owned"} href="/projects?list=owned" > - + {#snippet start()} + + {/snippet} {$_("projects.yours")} - + {#snippet start()} + + {/snippet} {$_("projects.shared")} {#await pinned} @@ -73,12 +79,16 @@ {:then projects} {#each sort(projects) as project} - + {#snippet start()} + + {/snippet} {project.title} {:else} - + {#snippet start()} + + {/snippet} {$_("sidebar.projects.pinned")} {/each} diff --git a/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte b/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte index 26a50f839..3e0fa0c8c 100644 --- a/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte +++ b/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte @@ -26,7 +26,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} Project {/snippet} @@ -35,15 +37,21 @@ {/snippet} - + {#snippet start()} + + {/snippet} Oldest Computer - + {#snippet start()} + + {/snippet} FBI Files - + {#snippet start()} + + {/snippet} 1033 Project @@ -55,7 +63,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} Sections {/snippet} @@ -74,7 +84,9 @@ {#snippet title()} - + {#snippet start()} + + {/snippet} Project {/snippet} @@ -83,15 +95,21 @@ {/snippet} - + {#snippet start()} + + {/snippet} Oldest Computer - + {#snippet start()} + + {/snippet} FBI Files - + {#snippet start()} + + {/snippet} 1033 Project diff --git a/src/lib/components/toolbars/DocumentListToolbar.svelte b/src/lib/components/toolbars/DocumentListToolbar.svelte index 33ecff122..a7b4bf2e8 100644 --- a/src/lib/components/toolbars/DocumentListToolbar.svelte +++ b/src/lib/components/toolbars/DocumentListToolbar.svelte @@ -56,9 +56,13 @@ {#snippet anchor()} - + {#snippet start()} + + {/snippet} {$_("documentBrowser.fieldsAnchor")} - + {#snippet end()} + + {/snippet} {/snippet} {#snippet inner()} diff --git a/src/lib/components/toolbars/PaginationToolbar.svelte b/src/lib/components/toolbars/PaginationToolbar.svelte index aba60c527..415b69c53 100644 --- a/src/lib/components/toolbars/PaginationToolbar.svelte +++ b/src/lib/components/toolbars/PaginationToolbar.svelte @@ -81,9 +81,13 @@ {#snippet anchor()}

    - + {#snippet start()} + + {/snippet} Sections - + {#snippet end()} + + {/snippet}
    {/snippet} diff --git a/src/lib/components/toolbars/ReadingToolbar.svelte b/src/lib/components/toolbars/ReadingToolbar.svelte index 847ba955e..c75cdd868 100644 --- a/src/lib/components/toolbars/ReadingToolbar.svelte +++ b/src/lib/components/toolbars/ReadingToolbar.svelte @@ -114,10 +114,14 @@ Assumes it's a child of a ViewerContext {@const CurrentModeIcon = icons[$mode]} {#if CurrentModeIcon} - + {#snippet start()} + + {/snippet} {/if} {current} - + {#snippet end()} + + {/snippet} {/snippet} {#snippet inner({ close })} diff --git a/src/lib/components/viewer/sidebar/Notes.svelte b/src/lib/components/viewer/sidebar/Notes.svelte index 3efd2174d..d39545528 100644 --- a/src/lib/components/viewer/sidebar/Notes.svelte +++ b/src/lib/components/viewer/sidebar/Notes.svelte @@ -12,16 +12,24 @@ import { canonicalUrl, pageUrl } from "$lib/api/documents"; import { noteUrl, isPageLevel } from "$lib/api/notes"; - export let document: Document; + interface Props { + document: Document; + } + + let { document }: Props = $props(); - $: notes = document.notes ?? []; - $: annotate = new URL("?mode=annotating", canonicalUrl(document)).href; + let notes = $derived(document.notes ?? []); + let annotate = $derived( + new URL("?mode=annotating", canonicalUrl(document)).href, + ); {#snippet title()} - + {#snippet start()} + + {/snippet} {$_("sidebar.toc.notes")} {/snippet} @@ -34,10 +42,12 @@
  • {note.title} - - {$_("sidebar.toc.pageAbbrev")} - {note.page_number + 1} - + {#snippet start()} + + {$_("sidebar.toc.pageAbbrev")} + {note.page_number + 1} + + {/snippet}
    • {:else} From aa8b242f097d7c37117d07a0acd801cc093c4ade Mon Sep 17 00:00:00 2001 From: Chris Amico Date: Tue, 14 Apr 2026 13:24:50 -0400 Subject: [PATCH 03/12] snap --- .../accounts/tests/__snapshots__/Mailkey.test.ts.snap | 6 ++++-- .../tests/__snapshots__/UserMenu.test.ts.snap | 3 --- .../tests/__snapshots__/AddOnsNavigation.test.ts.snap | 11 ++++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap index 25781c81e..2eb5167ed 100644 --- a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap +++ b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap @@ -75,7 +75,8 @@ exports[`Mailkey 1`] = `
    @@ -192,7 +193,8 @@ exports[`Mailkey 2`] = `
    diff --git a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap index 635533243..4f7742341 100644 --- a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap +++ b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap @@ -46,7 +46,6 @@ exports[`UserMenu 1`] = `
    Date: Tue, 14 Apr 2026 20:21:11 -0400 Subject: [PATCH 04/12] Update Premium, Pin and Tip and everything they touch --- src/lib/components/accounts/Unverified.svelte | 2 +- src/lib/components/addons/AddOnPin.svelte | 6 +- src/lib/components/common/Flex.svelte | 4 +- src/lib/components/common/Pin.svelte | 35 +-- src/lib/components/common/Premium.svelte | 26 ++- src/lib/components/common/Tip.svelte | 20 +- .../common/stories/Pin.stories.svelte | 2 +- .../common/stories/Tip.stories.svelte | 18 +- src/lib/components/documents/Pending.svelte | 2 +- src/lib/components/forms/AddOnDispatch.svelte | 2 +- src/lib/components/forms/ChangeOwner.svelte | 4 +- src/lib/components/forms/ConfirmDelete.svelte | 2 +- src/lib/components/forms/Edit.svelte | 2 +- src/lib/components/forms/EditAccess.svelte | 2 +- src/lib/components/forms/EditDataMany.svelte | 6 +- src/lib/components/forms/EditMany.svelte | 6 +- src/lib/components/forms/Projects.svelte | 4 +- src/lib/components/forms/Reprocess.svelte | 8 +- src/lib/components/forms/Share.svelte | 4 +- src/lib/components/forms/Upload.svelte | 20 +- .../components/layouts/AddOnBrowser.svelte | 215 +++++++++--------- src/lib/components/projects/ProjectPin.svelte | 9 +- .../components/projects/ProjectShare.svelte | 6 +- .../components/sidebar/SavedSearchForm.svelte | 2 +- .../components/sidebar/ViewerActions.svelte | 4 +- 25 files changed, 225 insertions(+), 186 deletions(-) diff --git a/src/lib/components/accounts/Unverified.svelte b/src/lib/components/accounts/Unverified.svelte index a8e8e3bc8..4e69789f3 100644 --- a/src/lib/components/accounts/Unverified.svelte +++ b/src/lib/components/accounts/Unverified.svelte @@ -51,7 +51,7 @@ a user who is logged in but has `verified_journalist = false`. - + {#snippet icon()}{/snippet}

    {$_("unverified.verify")}

    diff --git a/src/lib/components/common/Premium.svelte b/src/lib/components/common/Premium.svelte index 587c01da6..1b73810d5 100644 --- a/src/lib/components/common/Premium.svelte +++ b/src/lib/components/common/Premium.svelte @@ -4,22 +4,30 @@ The "basic" slot is available as a fallback. --> {#if isPremium} - + {@render children?.()} {:else} - + {@render basic?.()} {/if} diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte index 73432152a..6544a246c 100644 --- a/src/lib/components/common/Tip.svelte +++ b/src/lib/components/common/Tip.svelte @@ -1,14 +1,26 @@ diff --git a/src/lib/components/common/stories/Pin.stories.svelte b/src/lib/components/common/stories/Pin.stories.svelte index defc887af..b16980c75 100644 --- a/src/lib/components/common/stories/Pin.stories.svelte +++ b/src/lib/components/common/stories/Pin.stories.svelte @@ -21,7 +21,7 @@ {#snippet template(args)} - + {/snippet} diff --git a/src/lib/components/common/stories/Tip.stories.svelte b/src/lib/components/common/stories/Tip.stories.svelte index baae58429..701d58dee 100644 --- a/src/lib/components/common/stories/Tip.stories.svelte +++ b/src/lib/components/common/stories/Tip.stories.svelte @@ -1,4 +1,4 @@ - @@ -53,105 +57,110 @@ -
    -
    - - {#snippet header()} - - {#snippet center()} - - {/snippet} - - {/snippet} - - {#if showTip} -
    - {#if active === "active"} - - - {$_("addonBrowserDialog.pinnedTip")} - - {:else if active === "featured"} - - - {$_("addonBrowserDialog.featuredTip")} - - {:else if active === "premium"} - - - {$_("addonBrowserDialog.premiumTip")} - - {/if} -
    - {/if} - {#await addons} + +
    +
    + + {#snippet header()} + + {#snippet center()} + + {/snippet} + + {/snippet} + {#if showTip} +
    + {#if active === "active"} + + {#snippet icon()} + + {/snippet} + {$_("addonBrowserDialog.pinnedTip")} + + {:else if active === "featured"} + + {#snippet icon()} + + {/snippet} + {$_("addonBrowserDialog.featuredTip")} + + {:else if active === "premium"} + + {#snippet icon()} + + {/snippet} + {$_("addonBrowserDialog.premiumTip")} + + {/if} +
    + {/if} + {#await addons} + {$_("common.loading")} + {:then { data: page }} + {#each page?.results ?? [] as addon} + + {:else} + {$_("addonBrowserDialog.empty")} + {/each} + {:catch error} + {String(error)} + {/await} + {#snippet footer()} + + {#snippet center()} + {#await addons} + + {:then { data: page }} + { + if (page?.next) paginate(page.next); + }} + on:previous={() => { + if (page?.previous) paginate(page.previous); + }} + /> + {/await} + {/snippet} + + {/snippet} +     +
    +
    - -
    + {#await runs} + {$_("common.loading")} + {:then { data: runs }} + + {/await} + +
    +