control panel ux

src/lib/components/ScenarioPanel.svelte

@@ -13,7 +13,8 @@
     } from "@sveltestrap/sveltestrap";
 
     import { PROFILE_MAP } from "$lib/types";
-    import { FlightParametersStore, writeLocalStorage } from "$lib/stores";
+    import { FlightParametersStore, writeLocalStorage, ScenarioStore, SavedScenarioTemplatesStore } from "$lib/stores";
+    import SelectSearchable from "$lib/components/SelectSearchable.svelte";
 
     let isCollapsed = false;
 
@@ -55,9 +56,20 @@
     {#if !isCollapsed}
         <CardBody>
             <FormGroup spacing="mb-2">
-                <Label for="scenarioName" class="form-label">Название сценария:</Label>
+                <Label for="scenarioName" class="form-label">Cценарий:</Label>
                 <InputGroup size="sm">
-                    <Input id="scenarioName" type="text" />
+                    <SelectSearchable
+                        id="startPoint"
+                        options={$SavedScenarioTemplatesStore.map(scenario => ({
+                            value: scenario.id,
+                            label: scenario.name,
+                        }))}
+                        placeholder="Выберите сценарий..."
+                        searchPlaceholder="Поиск сценариев..."
+                    />
+                     <Button color="success" title="Применить сценарий">
+                        <span>✓</span>
+                    </Button>
                 </InputGroup>
             </FormGroup>