feat(ui): add SelectMenu component and replace native selects
Introduce a reusable SelectMenu component and replace native select controls across the UI. This centralizes select behavior and styling, enabling grouped options, placeholders, and a consistent popup interaction. Add comprehensive CSS and light-theme tweaks, and update rebase action styling to integrate the new control. - Add a unified SelectMenu component and wire change handlers. - Implement .select-menu styles, popup behavior, and theme overrides. - Replace ad-hoc native selects in dialogs and rebase UI for consistency.
This commit is contained in:
@@ -21,6 +21,7 @@
|
||||
X,
|
||||
} from "@lucide/svelte";
|
||||
import type { GitBranch as GitBranchInfo, GitWorktree } from "../types";
|
||||
import SelectMenu from "./SelectMenu.svelte";
|
||||
|
||||
type CreateMode = "existing" | "new" | "detached";
|
||||
|
||||
@@ -260,12 +261,17 @@
|
||||
{#if createMode === "existing"}
|
||||
<label>
|
||||
<span>Branch</span>
|
||||
<select bind:value={selectedBranch} disabled={isBusy}>
|
||||
<option value="" disabled>Select a local branch</option>
|
||||
{#each localBranches as branch (branch.name)}
|
||||
<option value={branch.name} disabled={!branchAvailable(branch.name)}>{branch.name}{!branchAvailable(branch.name) ? " (already checked out)" : ""}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<SelectMenu
|
||||
value={selectedBranch}
|
||||
placeholder="Select a local branch"
|
||||
options={localBranches.map((branch) => ({
|
||||
value: branch.name,
|
||||
label: `${branch.name}${!branchAvailable(branch.name) ? " (already checked out)" : ""}`,
|
||||
disabled: !branchAvailable(branch.name),
|
||||
}))}
|
||||
disabled={isBusy}
|
||||
onChange={(value) => { selectedBranch = value; }}
|
||||
/>
|
||||
</label>
|
||||
{:else if createMode === "new"}
|
||||
<label>
|
||||
|
||||
Reference in New Issue
Block a user