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.
65 lines
1.3 KiB
Svelte
65 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
let { username, size = 40, alt = '' } = $props<{ username: string, size?: number, alt?: string }>();
|
|
|
|
let imageError = $state(false);
|
|
|
|
let profileUrl = $derived(`https://bocken.org/static/user/full/${username}.webp`);
|
|
let altText = $derived(alt || `${username}'s profile picture`);
|
|
|
|
function handleError() {
|
|
imageError = true;
|
|
}
|
|
|
|
function getInitials(name) {
|
|
if (!name) return '?';
|
|
return name.split(' ')
|
|
.map(word => word.charAt(0))
|
|
.join('')
|
|
.toUpperCase()
|
|
.substring(0, 2);
|
|
}
|
|
</script>
|
|
|
|
<div class="profile-picture" style="width: {size}px; height: {size}px;">
|
|
{#if !imageError}
|
|
<img
|
|
src={profileUrl}
|
|
alt={altText}
|
|
onerror={handleError}
|
|
loading="lazy"
|
|
/>
|
|
{:else}
|
|
<div class="fallback">
|
|
{getInitials(username)}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.profile-picture {
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.fallback {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 0.75em;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
</style>
|