From f11bb1dcf54b8722c2ce33499d31eb17715d8368 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Sat, 3 Jan 2026 22:49:17 +0100 Subject: [PATCH] feat: add lock icons to restricted links on homepage Add small lock icons in the top right corner of links that require authentication (streaming, family photos, cloud, shopping, family tree, transmission, documents, and audiobooks). The icons use SVG symbol references for efficient reuse and adapt to dark mode automatically. --- src/lib/components/LinksGrid.svelte | 13 +++++++++++++ src/routes/(main)/+page.svelte | 19 +++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/src/lib/components/LinksGrid.svelte b/src/lib/components/LinksGrid.svelte index 27584fb5..72f871bc 100644 --- a/src/lib/components/LinksGrid.svelte +++ b/src/lib/components/LinksGrid.svelte @@ -46,6 +46,7 @@ transition: 200ms; width: 100%; padding: 1rem; + position: relative; } :global(.links_grid a:hover){ scale: 1.02; @@ -57,11 +58,23 @@ :global(.links_grid h3){ font-size: 1.5rem; } +:global(.links_grid a .lock-icon){ + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 1.5rem; + height: 1.5rem; + fill: var(--nord0); + opacity: 0.6; +} @media (prefers-color-scheme: dark){ :global(.links_grid h3){ color: white; } + :global(.links_grid a .lock-icon){ + fill: white; + } :global(.links_grid a:nth-child(4n)), :global(.links_grid a:nth-child(4n) svg){ background-color: var(--nord6-dark); diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte index bd429b6b..de9e57cd 100644 --- a/src/routes/(main)/+page.svelte +++ b/src/routes/(main)/+page.svelte @@ -108,6 +108,15 @@ section h2{ + + + + + + + + + {#if ! data.session}
@@ -134,16 +143,19 @@ section h2{ +

{labels.streaming}

 +

{labels.familyPhotos}

 +

{labels.cloud}

 @@ -159,11 +171,13 @@ section h2{ +

{labels.shopping}

 +

{labels.familyTree}

 @@ -172,28 +186,33 @@ section h2{

{labels.faith}

+

{labels.transmission}

 {#if !data.session} +

{labels.documents}

 {:else if data.session.user.groups.includes("paperless_users")} +

{labels.documents}

 {:else if data.session.user.groups.includes("paperless_eltern_users")} +

{labels.documents}

 {/if} +

{labels.audiobooksPodcasts}