001-migration-ui-redesign (#3)

Reviewed-on: #3

frontend/src/components/EnvSelector.svelte

@@ -0,0 +1,57 @@
+<!-- [DEF:EnvSelector:Component] -->
+<!--
+@SEMANTICS: environment, selector, dropdown, migration
+@PURPOSE:   Provides a UI component for selecting source and target environments.
+@LAYER:     Feature
+@RELATION:  BINDS_TO -> environments store
+
+@INVARIANT: Source and target environments must be selectable from the list of configured environments.
+-->
+
+<script lang="ts">
+  // [SECTION: IMPORTS]
+  import { onMount, createEventDispatcher } from 'svelte';
+  // [/SECTION]
+
+  // [SECTION: PROPS]
+  export let label: string = "Select Environment";
+  export let selectedId: string = "";
+  export let environments: Array<{id: string, name: string, url: string}> = [];
+  // [/SECTION]
+
+  const dispatch = createEventDispatcher();
+
+  // [DEF:handleSelect:Function]
+  /**
+   * @purpose Dispatches the selection change event.
+   * @param   {Event} event - The change event from the select element.
+   */
+  function handleSelect(event: Event) {
+    const target = event.target as HTMLSelectElement;
+    selectedId = target.value;
+    dispatch('change', { id: selectedId });
+  }
+  // [/DEF:handleSelect]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="flex flex-col space-y-1">
+  <label class="text-sm font-medium text-gray-700">{label}</label>
+  <select
+    class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+    value={selectedId}
+    on:change={handleSelect}
+  >
+    <option value="" disabled>-- Choose an environment --</option>
+    {#each environments as env}
+      <option value={env.id}>{env.name} ({env.url})</option>
+    {/each}
+  </select>
+</div>
+<!-- [/SECTION] -->
+
+<style>
+  /* Component specific styles */
+</style>
+
+<!-- [/DEF:EnvSelector] -->