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:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { GitCommitHorizontal, LoaderCircle, Sparkles, X } from "@lucide/svelte";
|
||||
import type { AiCommitPlan } from "../types";
|
||||
import SelectMenu from "./SelectMenu.svelte";
|
||||
|
||||
interface Props {
|
||||
plan: AiCommitPlan;
|
||||
@@ -62,9 +63,7 @@
|
||||
<div class="split-files">
|
||||
{#each group.files as file}
|
||||
<div><code>{file}</code>
|
||||
<select value={groupIndex} onchange={(event) => moveFile(file, groupIndex, Number(event.currentTarget.value))} disabled={isApplying}>
|
||||
{#each draft.groups as _, target}<option value={target}>Commit {target + 1}</option>{/each}
|
||||
</select>
|
||||
<SelectMenu class="split-file-target" value={String(groupIndex)} options={draft.groups.map((_, target) => ({ value: String(target), label: `Commit ${target + 1}` }))} disabled={isApplying} onChange={(value) => moveFile(file, groupIndex, Number(value))} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -98,6 +97,7 @@
|
||||
.split-files{display:grid;gap:5px}
|
||||
.split-files>div{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:var(--color-surface)}
|
||||
code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--color-ink-muted);font-size:11px;white-space:nowrap}
|
||||
select{height:28px;border:1px solid var(--color-border-subtle);border-radius:5px;background:var(--color-surface-raised);color:var(--color-ink);font-size:11px}
|
||||
:global(.split-file-target){width:110px;flex:0 0 110px}
|
||||
:global(.split-file-target .select-menu-trigger){height:28px;min-height:28px;font-size:11px}
|
||||
.dialog-footer p.invalid{color:#e0a040}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user