Skip to content

Commit c769380

Browse files
arvsrnarvsrn
authored
feat(app): visual improvements (anomalyco#36073)
1 parent 01131c7 commit c769380

14 files changed

Lines changed: 103 additions & 25 deletions

File tree

‎packages/app/src/components/prompt-input.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import { Icon } from "@opencode-ai/ui/icon"
3636
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
3737
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
3838
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
39+
import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
40+
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
3941
import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
4042
import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
4143
import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
@@ -1704,22 +1706,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
17041706
>
17051707
<MenuV2 gutter={6} modal={false} placement="top-start">
17061708
<MenuV2.Trigger
1707-
as={IconButton}
1709+
as={IconButtonV2}
17081710
data-action="prompt-attach"
17091711
type="button"
1710-
icon="plus"
1711-
variant="ghost"
1712-
class="size-7 rounded-md p-[6px] text-v2-icon-icon-muted"
1712+
icon={<IconV2 name="plus" />}
1713+
variant="ghost-muted"
1714+
size="large"
17131715
style={buttons()}
17141716
disabled={store.mode !== "normal"}
17151717
tabIndex={store.mode === "normal" ? undefined : -1}
17161718
aria-label={language.t("prompt.menu.addImagesAndFiles")}
17171719
/>
17181720
<MenuV2.Portal>
1719-
<MenuV2.Content
1720-
class="[&_[data-slot=menu-v2-item-shortcut]]:w-5 [&_[data-slot=menu-v2-item-shortcut]]:justify-center"
1721-
style={{ "min-width": "180px" }}
1722-
>
1721+
<MenuV2.Content style={{ "min-width": "180px" }}>
17231722
<MenuV2.Item onSelect={pick} shortcut={command.keybind("file.attach")}>
17241723
{language.t("prompt.menu.imagesAndFiles")}
17251724
</MenuV2.Item>

‎packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,17 @@ export function SortableTerminalTabV2(props: {
211211
<MenuV2.Context.Trigger class="relative" as="div">
212212
<Tabs.Trigger
213213
value={props.terminal.id}
214-
onClick={focus}
214+
onMouseDown={(e) => {
215+
// Switch on mousedown to shave the press-release delay off tab switches.
216+
if (e.button !== 0) return
217+
if (store.editing) return
218+
focus()
219+
}}
220+
onClick={(e) => {
221+
// Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
222+
if (e.detail > 0) return
223+
focus()
224+
}}
215225
closeButton={
216226
<IconButton
217227
icon="close-small"

‎packages/app/src/components/settings-v2/settings-v2.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
height: 100%;
2121
overflow-y: auto;
2222
scrollbar-width: none;
23+
user-select: none;
24+
}
25+
26+
.settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
27+
user-select: text;
2328
}
2429

2530
.settings-v2-panel::-webkit-scrollbar {
@@ -181,6 +186,7 @@
181186
flex-direction: column;
182187
gap: 8px;
183188
padding: 4px 0 4px 4px;
189+
user-select: none;
184190
}
185191

186192
.settings-v2-nav-footer > span {

‎packages/app/src/components/terminal.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { withAlpha } from "@opencode-ai/ui/theme/color"
22
import { useTheme } from "@opencode-ai/ui/theme/context"
33
import { resolveThemeVariant } from "@opencode-ai/ui/theme/resolve"
4-
import type { HexColor } from "@opencode-ai/ui/theme/types"
4+
import { resolveThemeVariantV2 } from "@opencode-ai/ui/theme/v2/resolve"
5+
import type { HexColor, ResolvedV2Theme } from "@opencode-ai/ui/theme/types"
56
import { showToast } from "@/utils/toast"
67
import type { FitAddon, Ghostty, Terminal as Term } from "ghostty-web"
78
import { type ComponentProps, createEffect, createMemo, onCleanup, onMount, splitProps } from "solid-js"
@@ -68,6 +69,19 @@ const debugTerminal = (...values: unknown[]) => {
6869
console.debug("[terminal]", ...values)
6970
}
7071

72+
const resolveV2Token = (tokens: ResolvedV2Theme, key: string) => {
73+
let current = tokens[key]
74+
for (let i = 0; i < 8 && current; i++) {
75+
const match = /^var\(--([^)]+)\)$/.exec(current.trim())
76+
if (!match) {
77+
const hex = current.trim()
78+
if (/^#[0-9a-fA-F]{8}$/.test(hex)) return hex.slice(0, 7)
79+
return hex
80+
}
81+
current = tokens[match[1]]
82+
}
83+
}
84+
7185
const useTerminalUiBindings = (input: {
7286
container: HTMLDivElement
7387
term: Term
@@ -238,7 +252,10 @@ export const Terminal = (props: TerminalProps) => {
238252
if (!variant?.seeds && !variant?.palette) return fallback
239253
const resolved = resolveThemeVariant(variant, mode === "dark")
240254
const text = resolved["text-stronger"] ?? fallback.foreground
241-
const background = resolved["background-stronger"] ?? fallback.background
255+
const background = settings.general.newLayoutDesigns()
256+
? (resolveV2Token(resolveThemeVariantV2(variant, mode === "dark"), "v2-background-bg-base") ??
257+
fallback.background)
258+
: (resolved["background-stronger"] ?? fallback.background)
242259
const alpha = mode === "dark" ? 0.25 : 0.2
243260
const base = text.startsWith("#") ? (text as HexColor) : (fallback.foreground as HexColor)
244261
const selectionBackground = withAlpha(base, alpha)

‎packages/app/src/pages/session.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1304,7 +1304,7 @@ export default function Page() {
13041304
const reviewPanelV2Rendered = createMemo<boolean>((prev) => prev || !store.deferRender, false)
13051305

13061306
const reviewPanelV2 = () => (
1307-
<div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
1307+
<div class="flex flex-col h-full overflow-hidden bg-v2-background-bg-base contain-strict">
13081308
<Show when={reviewPanelV2Rendered()}>
13091309
<ReviewPanelV2 {...reviewPanelV2Props()} />
13101310
</Show>

‎packages/app/src/pages/session/session-side-panel.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -255,8 +255,10 @@ export function SessionSidePanel(props: {
255255
aria-label={language.t("session.panel.reviewAndFiles")}
256256
aria-hidden={!open()}
257257
inert={!open()}
258-
class="relative min-w-0 flex overflow-hidden bg-background-base"
258+
class="relative min-w-0 flex overflow-hidden"
259259
classList={{
260+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
261+
"bg-background-base": !settings.general.newLayoutDesigns(),
260262
"h-full shrink-0": !props.stacked,
261263
"h-full min-h-0": props.stacked,
262264
"pointer-events-none": !open(),
@@ -275,8 +277,20 @@ export function SessionSidePanel(props: {
275277
}}
276278
>
277279
<Show when={reviewOpen()}>
278-
<div class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base">
279-
<div class="size-full min-w-0 h-full bg-background-base">
280+
<div
281+
class="relative min-w-0 h-full flex-1 overflow-hidden"
282+
classList={{
283+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
284+
"bg-background-base": !settings.general.newLayoutDesigns(),
285+
}}
286+
>
287+
<div
288+
class="size-full min-w-0 h-full"
289+
classList={{
290+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
291+
"bg-background-base": !settings.general.newLayoutDesigns(),
292+
}}
293+
>
280294
<DragDropProvider
281295
onDragStart={handleDragStart}
282296
onDragEnd={handleDragEnd}
@@ -379,7 +393,13 @@ export function SessionSidePanel(props: {
379393
)}
380394
</For>
381395
</SortableProvider>
382-
<div class="bg-background-stronger h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3">
396+
<div
397+
class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3"
398+
classList={{
399+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
400+
"bg-background-stronger": !settings.general.newLayoutDesigns(),
401+
}}
402+
>
383403
<TooltipKeybind
384404
title={language.t("command.file.open")}
385405
keybind={command.keybind("file.open")}

‎packages/app/src/pages/session/terminal-panel-v2.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
195195
aria-label={language.t("terminal.title")}
196196
aria-hidden={!opened()}
197197
inert={!opened()}
198-
class="relative shrink-0 overflow-hidden bg-background-stronger"
198+
class="relative shrink-0 overflow-hidden bg-v2-background-bg-base"
199199
classList={{
200200
"w-full": !isDesktop() || stacked(),
201201
"min-w-0 h-full flex-1": isDesktop() && opened() && !stacked(),
@@ -237,7 +237,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
237237
when={terminal.ready()}
238238
fallback={
239239
<div class="flex flex-col h-full pointer-events-none">
240-
<div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-background-stronger overflow-hidden">
240+
<div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-v2-background-bg-base overflow-hidden">
241241
<For each={handoff()}>
242242
{(title) => (
243243
<div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">

‎packages/app/src/pages/session/timeline/message-timeline.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1386,7 +1386,7 @@ export function MessageTimeline(props: {
13861386
"w-full": true,
13871387
"pb-4": true,
13881388
"pr-3": true,
1389-
"pl-2": settings.general.newLayoutDesigns(),
1389+
"pl-2.5": settings.general.newLayoutDesigns(),
13901390
"pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
13911391
"md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
13921392
}}

‎packages/session-ui/src/v2/components/session-review-v2.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
height: 100%;
55
min-height: 0;
66
overflow: hidden;
7-
background: var(--background-stronger, var(--v2-background-bg-base));
7+
background: var(--v2-background-bg-base);
88
}
99

1010
[data-component="session-review-v2"] [data-slot="session-review-v2-body"] {
@@ -31,7 +31,7 @@
3131
min-height: 0;
3232
overflow: hidden;
3333
border-right: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
34-
background: var(--background-stronger, var(--v2-background-bg-base));
34+
background: var(--v2-background-bg-base);
3535
}
3636

3737
[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"][aria-hidden="true"] {

‎packages/ui/src/components/tabs.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -679,3 +679,22 @@
679679
[data-component="tabs-drag-preview"] > * {
680680
position: relative;
681681
}
682+
683+
body[data-new-layout] #review-panel [data-component="tabs"],
684+
body[data-new-layout] #terminal-panel [data-component="tabs"],
685+
body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
686+
body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
687+
background-color: var(--v2-background-bg-base);
688+
689+
[data-slot="tabs-list"] {
690+
background-color: var(--v2-background-bg-base);
691+
692+
> .sticky {
693+
background-color: var(--v2-background-bg-base);
694+
695+
&::before {
696+
background: linear-gradient(90deg, transparent, var(--v2-background-bg-base));
697+
}
698+
}
699+
}
700+
}

0 commit comments

Comments
 (0)