Migrates to svelte 5

web/src/lib/components/base/tabs.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { cubicOut } from "svelte/easing";
-    import { tweened } from "svelte/motion";
+    import { Tween } from "svelte/motion";
 
-    export let tabs: string[];
-    export let activeTab: number;
-    export let extraClasses: string = "";
+    interface Props {
+        tabs: string[];
+        activeTab: number;
+        extraClasses?: string;
+    }
 
-    const indicatorPosition = tweened(0, {
+    let { tabs, activeTab = $bindable(), extraClasses = "" }: Props = $props();
+
+    const indicatorPosition = new Tween(0, {
         duration: 300,
         easing: cubicOut,
     });
 
-    const indicatorWidth = tweened(0, {
+    const indicatorWidth = new Tween(0, {
         duration: 300,
         easing: cubicOut,
     });
@@ -37,13 +41,13 @@
 <div id="tabs" class="flex gap-2 overflow-x-auto relative {extraClasses}">
     <div
         class="absolute h-full bg-menu-item-background-hover rounded-t-lg top-0 z-0"
-        style="width: {$indicatorWidth}px; left: {$indicatorPosition}px;"
+        style="width: {indicatorWidth.current}px; left: {indicatorPosition.current}px;"
     ></div>
     {#each tabs as tab, i}
         <button
             class="tab z-10"
             class:tab-active={activeTab == i}
-            on:click={() => switchTabs(i)}>{tab}</button
+            onclick={() => switchTabs(i)}>{tab}</button
         >
     {/each}
 </div>