feat(app): refine session UI styling (#33860) · argszero/opencode@78a5a03 · GitHub
Skip to content

Commit 78a5a03

Browse files
usrnk1Brendonovich
usrnk1
and
Brendonovich
authored
feat(app): refine session UI styling (anomalyco#33860)
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
1 parent 219ba24 commit 78a5a03

21 files changed

Lines changed: 711 additions & 129 deletions

‎packages/app/src/app.tsx‎

Lines changed: 3 additions & 1 deletion

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -908,7 +908,13 @@ export default function Page() {
908908
)
909909

910910
const reviewPanel = () => (
911-
<div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
911+
<div
912+
classList={{
913+
"flex flex-col h-full overflow-hidden contain-strict": true,
914+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
915+
"bg-background-stronger": !settings.general.newLayoutDesigns(),
916+
}}
917+
>
912918
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
913919
{reviewContent({
914920
diffStyle: layout.review.diffStyle(),
@@ -1713,7 +1719,9 @@ export default function Page() {
17131719
>
17141720
<div
17151721
classList={{
1716-
"flex-1 min-h-0 flex flex-col bg-background-stronger": true,
1722+
"flex-1 min-h-0 flex flex-col": true,
1723+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
1724+
"bg-background-stronger": !settings.general.newLayoutDesigns(),
17171725
"rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
17181726
"shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
17191727
}}

‎packages/app/src/pages/session/composer/session-composer-region.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Show, type JSX } from "solid-js"
22
import { useLanguage } from "@/context/language"
3+
import { useSettings } from "@/context/settings"
34
import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
45
import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
56
import { SessionFollowupDock } from "@/pages/session/composer/session-followup-dock"
@@ -13,6 +14,7 @@ export function SessionComposerRegion(props: {
1314
}) {
1415
const language = useLanguage()
1516
const controller = props.controller
17+
const settings = useSettings()
1618
const rolled = () => {
1719
const revert = controller.revert()
1820
return revert?.items.length ? revert : undefined
@@ -22,7 +24,11 @@ export function SessionComposerRegion(props: {
2224
<div
2325
ref={controller.setDockRef}
2426
data-component="session-prompt-dock"
25-
class="w-full shrink-0 flex flex-col justify-center items-center pb-3 bg-background-stronger pointer-events-none"
27+
classList={{
28+
"w-full shrink-0 flex flex-col justify-center items-center pb-3 pointer-events-none": true,
29+
"bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
30+
"bg-background-stronger": !settings.general.newLayoutDesigns(),
31+
}}
2632
>
2733
<div
2834
classList={{

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1019,7 +1019,13 @@ export function MessageTimeline(props: {
10191019
<div class="flex w-max min-w-full justify-end gap-2">
10201020
<Index each={comments()}>
10211021
{(comment) => (
1022-
<div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
1022+
<div
1023+
classList={{
1024+
"shrink-0 max-w-[260px] rounded-[6px] border-border-weak-base bg-background-stronger px-2.5 py-2": true,
1025+
"border-[0.5px]": settings.general.newLayoutDesigns(),
1026+
border: !settings.general.newLayoutDesigns(),
1027+
}}
1028+
>
10231029
<div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
10241030
<FileIcon node={{ path: comment().path, type: "file" }} class="size-3.5 shrink-0" />
10251031
<span class="truncate">{getFilename(comment().path)}</span>
@@ -1288,7 +1294,11 @@ export function MessageTimeline(props: {
12881294
<div
12891295
data-session-title
12901296
classList={{
1291-
"sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
1297+
"sticky top-0 z-30": true,
1298+
"bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
1299+
settings.general.newLayoutDesigns(),
1300+
"bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
1301+
!settings.general.newLayoutDesigns(),
12921302
"w-full": true,
12931303
"pb-4": true,
12941304
"pr-3": true,
@@ -1509,7 +1519,11 @@ export function MessageTimeline(props: {
15091519
<Button
15101520
size="large"
15111521
variant="secondary"
1512-
class="w-full shadow-none border border-border-weak-base"
1522+
class={
1523+
settings.general.newLayoutDesigns()
1524+
? "w-full shadow-none border-[0.5px] border-border-weak-base"
1525+
: "w-full shadow-none border border-border-weak-base"
1526+
}
15131527
onClick={unshareSession}
15141528
disabled={unshareMutation.isPending}
15151529
>

‎packages/session-ui/src/components/basic-tool.css‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
align-items: center;
4444
justify-content: center;
4545
flex-shrink: 0;
46-
color: var(--text-weak);
46+
color: var(--v2-text-text-faint);
4747

4848
[data-component="spinner"] {
4949
width: 16px;
@@ -89,14 +89,14 @@
8989
font-weight: var(--font-weight-medium);
9090
line-height: var(--line-height-large);
9191
letter-spacing: var(--letter-spacing-normal);
92-
color: var(--text-strong);
92+
color: var(--v2-text-text-base);
9393

9494
&.capitalize {
9595
text-transform: capitalize;
9696
}
9797

9898
&.agent-title {
99-
color: var(--text-strong);
99+
color: var(--v2-text-text-base);
100100
font-weight: var(--font-weight-medium);
101101
}
102102
}
@@ -114,15 +114,15 @@
114114
font-weight: var(--font-weight-regular);
115115
line-height: var(--line-height-large);
116116
letter-spacing: var(--letter-spacing-normal);
117-
color: var(--text-base);
117+
color: var(--v2-text-text-muted);
118118

119119
&.clickable {
120120
cursor: pointer;
121121
text-decoration: underline;
122122
transition: color 0.15s ease;
123123

124124
&:hover {
125-
color: var(--text-base);
125+
color: var(--v2-text-text-muted);
126126
}
127127
}
128128

@@ -160,7 +160,7 @@
160160
font-weight: var(--font-weight-regular);
161161
line-height: var(--line-height-large);
162162
letter-spacing: var(--letter-spacing-normal);
163-
color: var(--text-base);
163+
color: var(--v2-text-text-muted);
164164
}
165165

166166
[data-slot="basic-tool-tool-action"] {
@@ -178,7 +178,7 @@
178178
gap: 8px;
179179
padding: 8px 12px;
180180
border-radius: 6px;
181-
border: 1px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
181+
border: 0.5px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
182182
background: color-mix(in srgb, var(--background-base) 92%, transparent);
183183
transition:
184184
border-color 0.15s ease,
@@ -213,7 +213,7 @@
213213
align-items: center;
214214
justify-content: center;
215215
flex-shrink: 0;
216-
color: var(--icon-weak);
216+
color: var(--v2-text-text-faint);
217217
margin-left: auto;
218218
opacity: 0;
219219
transition:
@@ -233,7 +233,7 @@
233233
}
234234

235235
[data-slot="basic-tool-tool-subtitle"] {
236-
color: var(--text-strong);
236+
color: var(--v2-text-text-base);
237237
}
238238

239239
&:hover,
@@ -246,3 +246,34 @@
246246
}
247247
}
248248
}
249+
250+
body:not([data-new-layout]) {
251+
[data-component="tool-trigger"] {
252+
[data-slot="basic-tool-tool-spinner"] {
253+
color: var(--text-weak);
254+
}
255+
256+
[data-slot="basic-tool-tool-title"],
257+
[data-slot="basic-tool-tool-title"].agent-title {
258+
color: var(--text-strong);
259+
}
260+
261+
[data-slot="basic-tool-tool-subtitle"],
262+
[data-slot="basic-tool-tool-subtitle"].clickable:hover,
263+
[data-slot="basic-tool-tool-arg"] {
264+
color: var(--text-base);
265+
}
266+
}
267+
268+
[data-component="task-tool-card"] {
269+
border-width: 1px;
270+
271+
[data-component="task-tool-action"] {
272+
color: var(--icon-weak);
273+
}
274+
275+
[data-slot="basic-tool-tool-subtitle"] {
276+
color: var(--text-strong);
277+
}
278+
}
279+
}

‎packages/session-ui/src/components/markdown-inline-code-kind.test.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { describe, expect, test } from "bun:test"
2+
import { inlineCodeKind } from "./markdown-inline-code-kind"
3+
4+
describe("inlineCodeKind", () => {
5+
test("leaves code expressions as normal inline code", () => {
6+
expect(
7+
inlineCodeKind(`case "question.asked": ... input.setStore("question", question.sessionID, [question]) / splice/insert`),
8+
).toBeUndefined()
9+
expect(inlineCodeKind(`<SessionQuestionDock request={request} ... />`)).toBeUndefined()
10+
expect(inlineCodeKind(`from sync.data.question + sync.data.session.`)).toBeUndefined()
11+
expect(inlineCodeKind(`@opencode-ai/app <StatusPopover />)`)).toBeUndefined()
12+
expect(inlineCodeKind(`sync.data.session`)).toBeUndefined()
13+
expect(inlineCodeKind(`window.api`)).toBeUndefined()
14+
})
15+
16+
test("detects file and directory paths", () => {
17+
expect(inlineCodeKind(`app.tsx`)).toBe("path")
18+
expect(inlineCodeKind(`packages/desktop-electron`)).toBe("path")
19+
expect(inlineCodeKind(`~/.config/opencode`)).toBe("path")
20+
expect(inlineCodeKind(`@opencode-ai/app`)).toBe("path")
21+
expect(inlineCodeKind(`session/status`)).toBe("path")
22+
})
23+
24+
test("detects urls", () => {
25+
expect(inlineCodeKind(`https://opencode.ai/docs`)).toBe("url")
26+
expect(inlineCodeKind(`http://localhost:4444`)).toBe("url")
27+
expect(inlineCodeKind(`file:///tmp/opencode`)).toBeUndefined()
28+
expect(inlineCodeKind(`ftp://opencode.ai/docs`)).toBeUndefined()
29+
})
30+
})

‎packages/session-ui/src/components/markdown-inline-code-kind.ts‎

Lines changed: 13 additions & 0 deletions

0 commit comments

Comments
 (0)