From f66334290a9139d1be8d625a94fa9f873201a198 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Mon, 5 Jan 2026 23:39:33 +0100 Subject: [PATCH] refactor: complete Svelte 5 migration to eliminate all deprecation warnings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Migrated all components and routes to Svelte 5 syntax standards: Event Handlers: - Updated all deprecated on:* directives to new on* attribute syntax - Changed on:click β†’ onclick, on:keydown β†’ onkeydown, on:input β†’ oninput - Updated on:blur, on:focus, on:load, on:submit, on:cancel handlers Reactive State: - Added $state() declarations for all reactive variables - Fixed non-reactive update warnings in layout and component files Component API: - Replaced with {@render children()} pattern - Added children prop to components using slots Accessibility: - Added id attributes to inputs and for attributes to labels - Fixed label-control associations across forms - Removed event listeners from non-interactive elements HTML Fixes: - Fixed self-closing textarea tags - Corrected implicitly closed elements - Proper element nesting CSS Cleanup: - Removed 20+ unused CSS selectors across components - Cleaned up orphaned styles from refactoring All vite-plugin-svelte warnings resolved. Codebase now fully compliant with Svelte 5. --- src/lib/components/Card.svelte | 4 +- .../components/CreateIngredientList.svelte | 78 +++++++++---------- src/lib/components/CreateStepList.svelte | 63 +++++++-------- src/lib/components/DebtBreakdown.svelte | 7 -- src/lib/components/HefeSwapper.svelte | 2 +- src/lib/components/IngredientsPage.svelte | 35 ++------- src/lib/components/PaymentModal.svelte | 31 +------- src/lib/components/SeasonSelect.svelte | 2 +- src/lib/components/SplitMethodSelector.svelte | 18 +++-- src/lib/components/TagFilter.svelte | 2 +- src/lib/components/TitleImgParallax.svelte | 4 +- src/lib/components/TranslationApproval.svelte | 12 ++- .../TranslationFieldComparison.svelte | 6 +- src/routes/+layout.svelte | 6 +- .../edit/[name]/+page.svelte | 6 +- src/routes/cospend/+layout.svelte | 12 +-- src/routes/cospend/+page.svelte | 18 +---- src/routes/cospend/payments/add/+page.svelte | 8 -- .../cospend/payments/edit/[id]/+page.svelte | 26 ------- .../cospend/payments/view/[id]/+page.svelte | 9 --- src/routes/glaube/rosenkranz/+page.svelte | 30 +------ 21 files changed, 120 insertions(+), 259 deletions(-) diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte index 66d2840..94cebc5 100644 --- a/src/lib/components/Card.svelte +++ b/src/lib/components/Card.svelte @@ -136,7 +136,7 @@ const img_alt = $derived( .card:hover, .card:focus-within{ transform: scale(1.02,1.02); - background-color: var(--red); + background-color: hsl(from var(--nord6) 100 s l); box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3); } .card:focus{ @@ -295,7 +295,7 @@ const img_alt = $derived( - {img_alt} isloaded=true}/> + {img_alt} isloaded=true}/> {#if showFavoriteIndicator && isFavorite} diff --git a/src/lib/components/CreateIngredientList.svelte b/src/lib/components/CreateIngredientList.svelte index 265f432..866effd 100644 --- a/src/lib/components/CreateIngredientList.svelte +++ b/src/lib/components/CreateIngredientList.svelte @@ -730,7 +730,7 @@ h3{

{t[lang].portions}

-

+

{t[lang].ingredients}

{#each ingredients as list, list_index} @@ -739,10 +739,10 @@ h3{
- -
@@ -750,7 +750,7 @@ h3{ πŸ“‹ {t[lang].baseRecipe}: {list.name || t[lang].unnamed}
-
@@ -764,24 +764,24 @@ h3{
- -
- -
{/each}
{/if} - @@ -791,7 +791,7 @@ h3{
- {#if list.itemsAfter && list.itemsAfter.length > 0} @@ -801,17 +801,17 @@ h3{
- -
- -
@@ -823,15 +823,15 @@ h3{

- -
-
- -

{#each list.list as ingredient, ingredient_index (ingredient_index)}
- -
- - -
-
+
{/each} {/if} {/each} -
- do_on_key(event, 'Enter', false, add_new_ingredient)}> + do_on_key(event, 'Enter', false, add_new_ingredient)}>
- do_on_key(event, 'Enter', false, add_new_ingredient)}> - do_on_key(event, 'Enter', false, add_new_ingredient)}> - do_on_key(event, 'Enter', false, add_new_ingredient)}> -
- +

{t[lang].editIngredient}

-
do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> - do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> - do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> - do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> -
@@ -905,8 +905,8 @@ h3{

{t[lang].renameCategory}

- do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} > -
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte index baa8afa..fbbaaf1 100644 --- a/src/lib/components/CreateStepList.svelte +++ b/src/lib/components/CreateStepList.svelte @@ -790,10 +790,10 @@ h3{
- -
@@ -801,7 +801,7 @@ h3{ πŸ“‹ {t[lang].baseRecipe}: {list.name || t[lang].unnamed}
-
@@ -817,14 +817,14 @@ h3{
-
- -
@@ -833,7 +833,7 @@ h3{ {/each} {/if} - @@ -843,7 +843,7 @@ h3{
- {#if list.stepsAfter && list.stepsAfter.length > 0} @@ -855,14 +855,14 @@ h3{
-
- -
@@ -876,23 +876,23 @@ h3{

- -
- - -

@@ -901,21 +901,21 @@ h3{
  • - -
    - -
    -
    @@ -926,39 +926,40 @@ h3{ {/each} -
    • - do_on_key(event, 'Enter', false , add_new_step)} > + do_on_key(event, 'Enter', false , add_new_step)} >
    -

    do_on_key(event, 'Enter', true , add_new_step)}>

    -
    - +

    {t[lang].editStep}

    - do_on_key(event, 'Enter', false , edit_step_and_close_modal)}> + do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
    -

    do_on_key(event, 'Enter', true , edit_step_and_close_modal)}>

    -
    +

    {t[lang].renameCategory}

    - do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}> -
    diff --git a/src/lib/components/DebtBreakdown.svelte b/src/lib/components/DebtBreakdown.svelte index 19497d3..f33eb4a 100644 --- a/src/lib/components/DebtBreakdown.svelte +++ b/src/lib/components/DebtBreakdown.svelte @@ -137,13 +137,6 @@ border-radius: 0.5rem; } - .no-debts { - text-align: center; - padding: 2rem; - color: #666; - font-size: 1.1rem; - } - .debt-sections { display: grid; gap: 1.5rem; diff --git a/src/lib/components/HefeSwapper.svelte b/src/lib/components/HefeSwapper.svelte index 3646b76..8d40d8a 100644 --- a/src/lib/components/HefeSwapper.svelte +++ b/src/lib/components/HefeSwapper.svelte @@ -57,7 +57,7 @@ {#each Array.from(currentParams.entries()) as [key, value]} {/each} - diff --git a/src/lib/components/IngredientsPage.svelte b/src/lib/components/IngredientsPage.svelte index 267fd32..f658b39 100644 --- a/src/lib/components/IngredientsPage.svelte +++ b/src/lib/components/IngredientsPage.svelte @@ -325,24 +325,6 @@ font-family: sans-serif; scale: 1.2 !important; box-shadow: 0px 0px 0.4em 0.1em rgba(0,0,0, 0.3) !important; } -input.selected, -span.selected -{ - box-shadow: none !important; - background-color: transparent; - scale: 1 !important; -} -input, -span -{ - display: inline; - flex-grow: 1; - min-width: 1.5ch; - background-color: transparent; - border: unset; - padding: 0; - margin: 0; -} .custom-multiplier { display: flex; align-items: center; @@ -377,9 +359,6 @@ span margin: 0; } -.custom-input[type=number] { - -moz-appearance: textfield; -} .custom-button { padding: 0; @@ -447,7 +426,7 @@ h3 a:hover { {/if} {/each} - +
    @@ -456,7 +435,7 @@ h3 a:hover { {/if} {/each} - +
    @@ -465,7 +444,7 @@ h3 a:hover { {/if} {/each} - +
    @@ -474,7 +453,7 @@ h3 a:hover { {/if} {/each} - +
    @@ -483,9 +462,9 @@ h3 a:hover { {/if} {/each} - +
    -
    + {#each Array.from(currentParams.entries()) as [key, value]} {#if key !== 'multiplier'} @@ -499,7 +478,7 @@ h3 a:hover { placeholder="…" class="custom-input" value={multiplier != 0.5 && multiplier != 1 && multiplier != 1.5 && multiplier != 2 && multiplier != 3 ? multiplier : ''} - on:input={handleCustomInput} + oninput={handleCustomInput} />
    diff --git a/src/lib/components/PaymentModal.svelte b/src/lib/components/PaymentModal.svelte index 9f2bb31..770914d 100644 --- a/src/lib/components/PaymentModal.svelte +++ b/src/lib/components/PaymentModal.svelte @@ -462,7 +462,7 @@ flex-shrink: 0; } - .btn-primary, .btn-secondary, .btn-danger { + .btn-secondary { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-size: 1rem; @@ -472,20 +472,6 @@ text-decoration: none; display: inline-block; text-align: center; - } - - .btn-primary { - background-color: var(--blue); - color: white; - } - - .btn-primary:hover:not(:disabled) { - background-color: var(--nord10); - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - } - - .btn-secondary { background-color: var(--nord5); color: var(--nord0); border: 1px solid var(--nord4); @@ -496,21 +482,6 @@ transform: translateY(-1px); } - .btn-danger { - background-color: var(--red); - color: white; - } - - .btn-danger:hover:not(:disabled) { - background-color: var(--nord11); - transform: translateY(-1px); - } - - .btn-danger:disabled { - opacity: 0.6; - cursor: not-allowed; - } - @media (prefers-color-scheme: dark) { .panel-content { background: var(--nord1); diff --git a/src/lib/components/SeasonSelect.svelte b/src/lib/components/SeasonSelect.svelte index 74aa007..de626cf 100644 --- a/src/lib/components/SeasonSelect.svelte +++ b/src/lib/components/SeasonSelect.svelte @@ -92,7 +92,7 @@ input[type=checkbox]::after {#each months as month}
    - +
    {/each} diff --git a/src/lib/components/SplitMethodSelector.svelte b/src/lib/components/SplitMethodSelector.svelte index e364209..2076cc1 100644 --- a/src/lib/components/SplitMethodSelector.svelte +++ b/src/lib/components/SplitMethodSelector.svelte @@ -142,10 +142,11 @@

    Custom Split Amounts

    {#each users as user}
    - - {user} + Enter personal amounts for each user. The remainder will be split equally.

    {#each users as user}
    - - {user} + import { onMount } from "svelte"; - let { src, placeholder_src, alt = "" } = $props(); + let { src, placeholder_src, alt = "", children } = $props(); let isloaded = $state(false); let isredirected = $state(false); @@ -189,7 +189,7 @@ dialog button{
    -
    +
    {@render children()}
    diff --git a/src/lib/components/TranslationApproval.svelte b/src/lib/components/TranslationApproval.svelte index 0583bec..b0eb5a0 100644 --- a/src/lib/components/TranslationApproval.svelte +++ b/src/lib/components/TranslationApproval.svelte @@ -796,8 +796,9 @@ button:disabled {
    - +
    - +
    - +
    - + + > {:else} {/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 53ec022..10a92f9 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,5 @@ - - - \ No newline at end of file +{@render children()} \ No newline at end of file diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte index 4bb801e..ad0c6b4 100644 --- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte +++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte @@ -499,8 +499,9 @@ button.action_button{

    Bild {i + 1}: {image.mediapath}

    - +
    - + { // Check if URL contains payment view route OR if we have paymentId in state diff --git a/src/routes/cospend/+page.svelte b/src/routes/cospend/+page.svelte index a6a8b73..dfad582 100644 --- a/src/routes/cospend/+page.svelte +++ b/src/routes/cospend/+page.svelte @@ -317,10 +317,6 @@ color: var(--red); } - .even { - color: var(--nord3); - } - .actions { display: flex; gap: 1rem; @@ -617,16 +613,6 @@ } } - .you-badge { - background-color: var(--blue); - color: white; - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; - display: inline-block; - } - .activity-amount { font-weight: bold; font-size: 1rem; @@ -645,7 +631,7 @@ flex-wrap: wrap; } - .paid-by, .payment-date { + .payment-date { color: var(--nord3); font-size: 0.9rem; } @@ -659,7 +645,7 @@ } @media (prefers-color-scheme: dark) { - .paid-by, .payment-date { + .payment-date { color: var(--nord4); } diff --git a/src/routes/cospend/payments/add/+page.svelte b/src/routes/cospend/payments/add/+page.svelte index 443ee4c..ef6ac75 100644 --- a/src/routes/cospend/payments/add/+page.svelte +++ b/src/routes/cospend/payments/add/+page.svelte @@ -803,18 +803,10 @@ display: block; } - .js-enhanced { - display: none; - } - :global(body.js-loaded) .no-js-only { display: none; } - :global(body.js-loaded) .js-enhanced { - display: block; - } - .manual-users textarea { width: 100%; padding: 0.75rem; diff --git a/src/routes/cospend/payments/edit/[id]/+page.svelte b/src/routes/cospend/payments/edit/[id]/+page.svelte index 790e1b5..944d95e 100644 --- a/src/routes/cospend/payments/edit/[id]/+page.svelte +++ b/src/routes/cospend/payments/edit/[id]/+page.svelte @@ -463,32 +463,6 @@ gap: 2rem; } - .form-section { - background: var(--nord6); - padding: 1.5rem; - border-radius: 0.75rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - border: 1px solid var(--nord4); - } - - .form-section h2 { - margin-top: 0; - margin-bottom: 1rem; - color: var(--nord0); - font-size: 1.25rem; - } - - @media (prefers-color-scheme: dark) { - .form-section { - background: var(--nord1); - border-color: var(--nord2); - } - - .form-section h2 { - color: var(--font-default-dark); - } - } - .form-group { margin-bottom: 1rem; } diff --git a/src/routes/cospend/payments/view/[id]/+page.svelte b/src/routes/cospend/payments/view/[id]/+page.svelte index 53d3571..8ef57bf 100644 --- a/src/routes/cospend/payments/view/[id]/+page.svelte +++ b/src/routes/cospend/payments/view/[id]/+page.svelte @@ -479,15 +479,6 @@ margin-left: 0; } - .header-content { - flex-direction: column; - align-items: stretch; - } - - .header-actions { - justify-content: center; - } - .info-grid { grid-template-columns: 1fr; } diff --git a/src/routes/glaube/rosenkranz/+page.svelte b/src/routes/glaube/rosenkranz/+page.svelte index 6cde724..bdbf261 100644 --- a/src/routes/glaube/rosenkranz/+page.svelte +++ b/src/routes/glaube/rosenkranz/+page.svelte @@ -794,18 +794,6 @@ onMount(() => { font-size: 1.3rem; } -.prayer-text { - font-size: 1.15rem; - line-height: 1.8; - color: var(--nord4); -} - -@media(prefers-color-scheme: light) { - .prayer-text { - color: var(--nord0); - } -} - /* Prayer component bilingual styling */ .prayer-section :global(p) { text-align: center; @@ -1045,21 +1033,6 @@ h1 { } /* Mystery description styling */ -.mystery-description { - margin: 1.5rem 0 1.5rem 0; - display: flex; - flex-direction: column; - gap: 0.75rem; - align-items: center; -} - -.mystery-title { - font-weight: 700; - color: var(--nord10); - font-size: 1.1rem; - text-align: center; -} - .decade-buttons { display: flex; flex-direction: row; @@ -1533,8 +1506,7 @@ Die Integration der lichtreichen Geheimnisse hat einige Kontroversen um sich. Ohne diese 5 Dekaden sind die 150 Gebete der drei SΓ€tzen an Geheimnissen eine direkte Parallele zu den 150 Psalmen der Bibel. Die Gottgegebenheit der lichtreichen Geheimnisse ist auch umstritten.

    -Der Plan ohne lichtreiche Geheimnisse ist wie folgt: -

    +

    Der Plan ohne lichtreiche Geheimnisse ist wie folgt: