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.
93 lines
1.8 KiB
Svelte
93 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
let { shortName, imageIndex } = $props<{ shortName: string; imageIndex: number }>();
|
|
|
|
let loading = $state(false);
|
|
let error = $state('');
|
|
let success = $state('');
|
|
|
|
async function generateAltText() {
|
|
loading = true;
|
|
error = '';
|
|
success = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/generate-alt-text', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
shortName,
|
|
imageIndex,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Failed to generate alt text');
|
|
}
|
|
|
|
success = `Generated: DE: "${data.altText.de}" | EN: "${data.altText.en}"`;
|
|
|
|
// Reload page to show updated alt text
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 2000);
|
|
} catch (err) {
|
|
error = err instanceof Error ? err.message : 'An error occurred';
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
button {
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--nord8);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--nord7);
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: var(--nord3);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.message {
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.success {
|
|
background-color: var(--nord14);
|
|
color: var(--nord0);
|
|
}
|
|
|
|
.error {
|
|
background-color: var(--nord11);
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<button onclick={generateAltText} disabled={loading}>
|
|
{loading ? '🤖 Generating...' : '✨ Generate Alt Text (AI)'}
|
|
</button>
|
|
|
|
{#if success}
|
|
<div class="message success">{success}</div>
|
|
{/if}
|
|
|
|
{#if error}
|
|
<div class="message error">{error}</div>
|
|
{/if}
|