sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: cleanup

temp
Adam 2026-02-17 10:34:43 -06:00
parent fafc74b052
commit acb46679e3
No known key found for this signature in database
GPG Key ID: 9CB48779AF150E75
2 changed files with 67 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/app/src/components/prompt-input.tsx
View File

@ -26,6 +26,7 @@ import type { IconName } from "@opencode-ai/ui/icons/provider"
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { Select } from "@opencode-ai/ui/select"
import { RadioGroup } from "@opencode-ai/ui/radio-group"
import { useDialog } from "@opencode-ai/ui/context/dialog"
import { ModelSelectorPopover } from "@/components/dialog-select-model"
import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
@ -1332,56 +1333,27 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
</div>
<div class="shrink-0">
<div
data-component="prompt-mode-toggle"
class="relative h-7 w-[68px] rounded-[4px] bg-surface-inset-base border border-[0.5px] border-border-weak-base p-0 flex items-center gap-1 overflow-visible"
>
<div
class="absolute inset-y-0 left-0 w-[calc((100%-4px)/2)] rounded-[4px] bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-xs-border)] transition-transform duration-200 ease-out will-change-transform"
style={{
transform: store.mode === "shell" ? "translateX(0px)" : "translateX(calc(100% + 4px))",
}}
<div data-component="prompt-mode-toggle">
<RadioGroup
options={["shell", "normal"] as const}
current={store.mode}
onSelect={(mode) => mode && setMode(mode)}
label={(mode) => (
<div class="flex size-full items-center justify-center">
<Icon
name={mode === "shell" ? "console" : "prompt"}
class="size-[18px]"
classList={{
"text-icon-strong-base": mode === "shell" && store.mode === "shell",
"text-icon-interactive-base": mode === "normal" && store.mode === "normal",
"text-icon-weak": store.mode !== mode,
}}
/>
<span class="sr-only">{mode === "shell" ? language.t("prompt.mode.shell") : "Prompt"}</span>
</div>
)}
class="w-[68px] [&_[data-slot=radio-group-wrapper]]:w-full [&_[data-slot=radio-group-item]]:flex-1 [&_[data-slot=radio-group-item-label]]:h-6 [&_[data-slot=radio-group-item-label]]:p-0"
/>
<button
type="button"
class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center"
aria-pressed={store.mode === "shell"}
onClick={() => setMode("shell")}
>
<div
class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
classList={{ "hover:bg-transparent": store.mode === "shell" }}
>
<Icon
name="console"
class="size-[18px]"
classList={{
"text-icon-strong-base": store.mode === "shell",
"text-icon-weak": store.mode !== "shell",
}}
/>
</div>
</button>
<button
type="button"
class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center"
aria-pressed={store.mode === "normal"}
onClick={() => setMode("normal")}
>
<div
class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
classList={{ "hover:bg-transparent": store.mode === "normal" }}
>
<Icon
name="prompt"
class="size-[18px]"
classList={{
"text-icon-interactive-base": store.mode === "normal",
"text-icon-weak": store.mode !== "normal",
}}
/>
</div>
</button>
</div>
</div>
</div>

99
packages/ui/src/components/radio-group.css
View File

@ -1,15 +1,29 @@
[data-component="radio-group"] {
display: flex;
display: inline-flex;
flex-direction: column;
gap: calc(var(--spacing) * 2);
width: fit-content;
--radio-group-padding: 2px;
--radio-group-gap: 2px;
--radio-group-radius: var(--radius-sm);
--radio-group-border-width: 0.5px;
--radio-group-border-color: var(--border-weak-base);
--radio-group-bg: var(--surface-inset-base);
--radio-group-indicator-bg: var(--surface-raised-stronger-non-alpha);
--radio-group-indicator-shadow: var(--shadow-xs-border);
[data-slot="radio-group-wrapper"] {
all: unset;
background-color: var(--surface-base);
border-radius: var(--radius-md);
background-color: var(--radio-group-bg);
border: var(--radio-group-border-width) solid var(--radio-group-border-color);
border-radius: var(--radio-group-radius);
box-shadow: var(--shadow-xs-border);
box-sizing: border-box;
display: inline-flex;
overflow: clip;
margin: 0;
padding: 0;
padding: var(--radio-group-padding);
position: relative;
width: fit-content;
}
@ -18,63 +32,52 @@
display: inline-flex;
list-style: none;
flex-direction: row;
gap: var(--radio-group-gap);
position: relative;
z-index: 1;
}
[data-slot="radio-group-indicator"] {
background: var(--button-secondary-base);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs-border);
background: var(--radio-group-indicator-bg);
border-radius: calc(var(--radio-group-radius) - var(--radio-group-padding));
box-shadow: var(--radio-group-indicator-shadow);
content: "";
opacity: var(--indicator-opacity, 1);
position: absolute;
transition:
opacity 300ms ease-in-out,
box-shadow 100ms ease-in-out,
width 150ms ease,
height 150ms ease,
transform 150ms ease;
opacity 200ms ease-out,
box-shadow 120ms ease-out,
width 200ms ease-out,
height 200ms ease-out,
transform 200ms ease-out;
will-change: transform, width, height;
}
[data-slot="radio-group-item"] {
position: relative;
}
/* Separator between items */
[data-slot="radio-group-item"]:not(:first-of-type)::before {
background: var(--border-weak-base);
border-radius: var(--radius-xs);
content: "";
inset: 6px 0;
position: absolute;
transition: opacity 150ms ease;
width: 1px;
transform: translateX(-0.5px);
}
/* Hide separator when item or previous item is checked */
[data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])::before,
[data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])
+ [data-slot="radio-group-item"]::before {
opacity: 0;
}
[data-slot="radio-group-item-label"] {
color: var(--text-weak);
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
border-radius: calc(var(--radio-group-radius) - var(--radio-group-padding) - 1px);
cursor: pointer;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: calc(var(--spacing) * 1);
line-height: 1;
padding: 6px 12px;
min-height: 24px;
padding: 5px 10px;
place-content: center;
position: relative;
transition-duration: 150ms;
transition-property: color, opacity;
transition-timing-function: ease-in-out;
transition:
color 150ms ease-out,
background-color 150ms ease-out,
opacity 150ms ease-out;
user-select: none;
}
@ -101,6 +104,7 @@
[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+ [data-slot="radio-group-item-label"]:hover {
background-color: var(--surface-inset-base-hover);
color: var(--text-base);
}
@ -112,7 +116,7 @@
/* Focus state */
[data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
[data-slot="radio-group-indicator"] {
box-shadow: var(--shadow-xs-border-focus);
box-shadow: var(--shadow-xs-border-focus), var(--radio-group-indicator-shadow);
}
/* Hide indicator when nothing is checked */
@ -126,27 +130,16 @@
flex-direction: column;
}
&[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
height: 1px;
width: auto;
inset: 0 6px;
transform: translateY(-0.5px);
}
/* Small size variant */
&[data-size="small"] {
--radio-group-padding: 1px;
--radio-group-gap: 1px;
[data-slot="radio-group-item-label"] {
font-size: 12px;
min-height: 20px;
padding: 4px 8px;
}
[data-slot="radio-group-item"]:not(:first-of-type)::before {
inset: 4px 0;
}
&[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
inset: 0 4px;
}
}
/* Disabled root state */