refactor(svelte5): migrated component to svelte5

Signed-off-by: Evzen Gasta <[email protected]>

Author: gastoner

packages/frontend/src/lib/select/ModelSelect.svelte

@@ -4,16 +4,23 @@ import Select from './Select.svelte';
 import Fa from 'svelte-fa';
 import type { ModelInfo } from '@shared/models/IModelInfo';
 
-export let disabled: boolean = false;
-/**
- * Recommended model ids
- */
-export let recommended: string[] | undefined = undefined;
+interface Props {
+  disabled?: boolean;
+  /**
+   * Recommended model ids
+   */
+  recommended?: string[];
+  /**
+   * List of models
+   */
+  models: ModelInfo[];
+  /**
+   * Current value selected
+   */
+  value: ModelInfo | undefined;
+}
 
-/**
- * List of models
- */
-export let models: ModelInfo[];
+let { disabled = false, recommended = undefined, models, value = undefined }: Props = $props();
 
 function getModelSortingScore(modelInfo: ModelInfo): number {
   let score: number = 0;
@@ -22,21 +29,17 @@ function getModelSortingScore(modelInfo: ModelInfo): number {
   return score;
 }
 
-/**
- * Current value selected
- */
-export let value: ModelInfo | undefined = undefined;
-
 /**
  * Handy mechanism to provide the mandatory property `label` and `value` to the Select component
  */
-let selected: (ModelInfo & { label: string; value: string }) | undefined = undefined;
-$: {
+let selected: (ModelInfo & { label: string; value: string }) | undefined = $derived.by(() => {
   // let's select a default model
   if (value) {
-    selected = { ...value, label: value.name, value: value.id };
+    return { ...value, label: value.name, value: value.id };
+  } else {
+    return undefined;
   }
-}
+});
 
 function handleOnChange(nValue: (ModelInfo & { label: string; value: string }) | undefined): void {
   value = nValue;

packages/frontend/src/pages/StartRecipe.svelte

@@ -187,7 +187,7 @@ function handleOnClick(): void {
             <!-- model form -->
             <label for="select-model" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
               >Model</label>
-            <ModelSelect bind:value={model} disabled={loading} recommended={recipe.recommended} models={models} />
+            <ModelSelect value={model} disabled={loading} recommended={recipe.recommended} models={models} />
             {#if model && model.file === undefined}
               <div class="text-gray-800 text-sm flex items-center">
                 <Fa class="mr-2" icon={faWarning} />