Alexander Bocken
5c8605c690
All checks were successful
CI / update (push) Successful in 2m8s
Migrated all components and routes from Svelte 4 to Svelte 5 syntax:
- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax
- Updated deprecated event directives to Svelte 5 syntax:
- on:click → onclick
- on:submit → onsubmit
- on:change → onchange
- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks
- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity
- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes
- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings
All functionality tested and working. No breaking changes to user experience.
129 lines
2.8 KiB
Svelte
129 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import { getLanguageContext } from '$lib/contexts/languageContext.js';
|
|
|
|
let { latinPrimary = true, children } = $props<{ latinPrimary?: boolean, children?: Snippet }>();
|
|
|
|
// Get context if available (graceful fallback for standalone usage)
|
|
let showLatinStore;
|
|
try {
|
|
const context = getLanguageContext();
|
|
showLatinStore = context.showLatin;
|
|
} catch {
|
|
showLatinStore = null;
|
|
}
|
|
|
|
let showLatin = $derived(showLatinStore ? $showLatinStore : true);
|
|
</script>
|
|
|
|
<style>
|
|
.prayer-wrapper :global(p) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Reverse order when German is primary */
|
|
.prayer-wrapper.german-primary :global(p) {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.prayer-wrapper :global(v) {
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
/* Latin primary (default) */
|
|
.prayer-wrapper :global(v:lang(la)) {
|
|
color: var(--nord6);
|
|
}
|
|
|
|
.prayer-wrapper :global(v:lang(de)) {
|
|
color: grey;
|
|
}
|
|
|
|
.prayer-wrapper :global(i) {
|
|
font-style: normal;
|
|
color: var(--nord11);
|
|
font-weight: 900;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.prayer-wrapper :global(v:lang(la)) {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
/* German primary mode */
|
|
.prayer-wrapper.german-primary :global(v:lang(de)) {
|
|
color: var(--nord6);
|
|
}
|
|
|
|
.prayer-wrapper.german-primary :global(v:lang(la)) {
|
|
color: grey;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.prayer-wrapper.german-primary :global(v:lang(de)) {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
/* Mystery text styling */
|
|
.prayer-wrapper :global(v.mystery-text:lang(la)) {
|
|
color: var(--nord11) !important;
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.prayer-wrapper :global(v.mystery-text:lang(de)) {
|
|
color: var(--nord12) !important;
|
|
font-weight: 700;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.prayer-wrapper.german-primary :global(v.mystery-text:lang(de)) {
|
|
color: var(--nord11) !important;
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.prayer-wrapper.german-primary :global(v.mystery-text:lang(la)) {
|
|
color: var(--nord12) !important;
|
|
font-weight: 700;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* Hide Latin in monolingual mode */
|
|
.prayer-wrapper.monolingual :global(v:lang(la)) {
|
|
display: none;
|
|
}
|
|
|
|
/* German gets primary styling in monolingual mode */
|
|
.prayer-wrapper.monolingual :global(v:lang(de)) {
|
|
color: var(--nord6);
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.prayer-wrapper.monolingual :global(v:lang(de)) {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
/* Hide Latin mystery text in monolingual mode */
|
|
.prayer-wrapper.monolingual :global(v.mystery-text:lang(la)) {
|
|
display: none;
|
|
}
|
|
|
|
/* German mystery text gets prominent styling in monolingual mode */
|
|
.prayer-wrapper.monolingual :global(v.mystery-text:lang(de)) {
|
|
color: var(--nord11) !important;
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
</style>
|
|
|
|
<div class="prayer-wrapper" class:german-primary={!latinPrimary} class:monolingual={!showLatin}>
|
|
{@render children?.()}
|
|
</div>
|