Skip to content

Commit 23c80e7

Browse files
opencode-agent[bot]opencode-agent[bot]
committed
Apply PR #15420: tweak(ui): shimmering titles and animated counts
2 parents a1a565d + e39cbc0 commit 23c80e7

24 files changed

+1246
-412
lines changed

‎bun.lock‎

Lines changed: 16 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
1010
"dev:desktop": "bun --cwd packages/desktop tauri dev",
1111
"dev:web": "bun --cwd packages/app dev",
12+
"dev:storybook": "bun --cwd packages/storybook storybook",
1213
"typecheck": "bun turbo typecheck",
1314
"prepare": "husky",
1415
"random": "echo 'Random script'",

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export function MessageTimeline(props: {
117117
const dialog = useDialog()
118118
const language = useLanguage()
119119

120+
const rendered = createMemo(() => props.renderedUserMessages.map((message) => message.id))
120121
const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
121122
const sessionID = createMemo(() => params.id)
122123
const info = createMemo(() => {
@@ -552,16 +553,16 @@ export function MessageTimeline(props: {
552553
</Button>
553554
</div>
554555
</Show>
555-
<For each={props.renderedUserMessages}>
556-
{(message) => {
557-
const comments = createMemo(() => messageComments(sync.data.part[message.id] ?? []))
556+
<For each={rendered()}>
557+
{(messageID) => {
558+
const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? []))
558559
return (
559560
<div
560-
id={props.anchor(message.id)}
561-
data-message-id={message.id}
561+
id={props.anchor(messageID)}
562+
data-message-id={messageID}
562563
ref={(el) => {
563-
props.onRegisterMessage(el, message.id)
564-
onCleanup(() => props.onUnregisterMessage(message.id))
564+
props.onRegisterMessage(el, messageID)
565+
onCleanup(() => props.onUnregisterMessage(messageID))
565566
}}
566567
classList={{
567568
"min-w-0 w-full max-w-full": true,
@@ -600,7 +601,7 @@ export function MessageTimeline(props: {
600601
</Show>
601602
<SessionTurn
602603
sessionID={sessionID() ?? ""}
603-
messageID={message.id}
604+
messageID={messageID}
604605
lastUserMessageID={props.lastUserMessageID}
605606
showReasoningSummaries={settings.general.showReasoningSummaries()}
606607
shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}

‎packages/storybook/.storybook/preview.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,8 @@ import { MetaProvider } from "@solidjs/meta"
77
import { addons } from "storybook/preview-api"
88
import { GLOBALS_UPDATED } from "storybook/internal/core-events"
99
import { createJSXDecorator, definePreview } from "storybook-solidjs-vite"
10-
import { Code } from "@opencode-ai/ui/code"
11-
import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
1210
import { DialogProvider } from "@opencode-ai/ui/context/dialog"
13-
import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
1411
import { MarkedProvider } from "@opencode-ai/ui/context/marked"
15-
import { Diff } from "@opencode-ai/ui/diff"
1612
import { ThemeProvider, useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
1713
import { Font } from "@opencode-ai/ui/font"
1814

@@ -58,20 +54,16 @@ const frame = createJSXDecorator((Story, context) => {
5854
<Scheme value={scheme} />
5955
<DialogProvider>
6056
<MarkedProvider>
61-
<DiffComponentProvider component={Diff}>
62-
<CodeComponentProvider component={Code}>
63-
<div
64-
style={{
65-
"min-height": "100vh",
66-
padding: "24px",
67-
"background-color": "var(--background-base)",
68-
color: "var(--text-base)",
69-
}}
70-
>
71-
<Story />
72-
</div>
73-
</CodeComponentProvider>
74-
</DiffComponentProvider>
57+
<div
58+
style={{
59+
"min-height": "100vh",
60+
padding: "24px",
61+
"background-color": "var(--background-base)",
62+
color: "var(--text-base)",
63+
}}
64+
>
65+
<Story />
66+
</div>
7567
</MarkedProvider>
7668
</DialogProvider>
7769
</ThemeProvider>

‎packages/storybook/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@
1010
"devDependencies": {
1111
"@opencode-ai/ui": "workspace:*",
1212
"@solidjs/meta": "catalog:",
13-
"@storybook/addon-a11y": "^10.2.10",
14-
"@storybook/addon-docs": "^10.2.10",
15-
"@storybook/addon-links": "^10.2.10",
16-
"@storybook/addon-onboarding": "^10.2.10",
17-
"@storybook/addon-vitest": "^10.2.10",
13+
"@storybook/addon-a11y": "^10.2.13",
14+
"@storybook/addon-docs": "^10.2.13",
15+
"@storybook/addon-links": "^10.2.13",
16+
"@storybook/addon-onboarding": "^10.2.13",
17+
"@storybook/addon-vitest": "^10.2.13",
1818
"@tsconfig/node22": "catalog:",
1919
"@types/node": "catalog:",
2020
"@types/react": "18.0.25",
2121
"react": "18.2.0",
2222
"solid-js": "catalog:",
23-
"storybook": "^10.2.10",
23+
"storybook": "^10.2.13",
2424
"storybook-solidjs-vite": "^10.0.9",
2525
"typescript": "catalog:",
2626
"vite": "catalog:"

‎packages/ui/src/components/animated-number.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
[data-component="animated-number"] {
2+
display: inline-flex;
3+
align-items: baseline;
4+
vertical-align: baseline;
5+
line-height: inherit;
6+
font-variant-numeric: tabular-nums;
7+
8+
[data-slot="animated-number-value"] {
9+
display: inline-flex;
10+
flex-direction: row-reverse;
11+
align-items: baseline;
12+
justify-content: flex-end;
13+
line-height: inherit;
14+
width: var(--animated-number-width, 1ch);
15+
overflow: hidden;
16+
transition: width var(--tool-motion-spring-ms, 560ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
17+
}
18+
19+
[data-slot="animated-number-digit"] {
20+
display: inline-block;
21+
width: 1ch;
22+
height: 1em;
23+
line-height: 1em;
24+
overflow: hidden;
25+
vertical-align: baseline;
26+
-webkit-mask-image: linear-gradient(
27+
to bottom,
28+
transparent 0%,
29+
#000 var(--tool-motion-mask, 18%),
30+
#000 calc(100% - var(--tool-motion-mask, 18%)),
31+
transparent 100%
32+
);
33+
mask-image: linear-gradient(
34+
to bottom,
35+
transparent 0%,
36+
#000 var(--tool-motion-mask, 18%),
37+
#000 calc(100% - var(--tool-motion-mask, 18%)),
38+
transparent 100%
39+
);
40+
-webkit-mask-repeat: no-repeat;
41+
mask-repeat: no-repeat;
42+
}
43+
44+
[data-slot="animated-number-strip"] {
45+
display: inline-flex;
46+
flex-direction: column;
47+
transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
48+
transition-property: transform;
49+
transition-duration: var(--animated-number-duration, 560ms);
50+
transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
51+
}
52+
53+
[data-slot="animated-number-strip"][data-animating="false"] {
54+
transition-duration: 0ms;
55+
}
56+
57+
[data-slot="animated-number-cell"] {
58+
display: inline-flex;
59+
align-items: center;
60+
justify-content: center;
61+
width: 1ch;
62+
height: 1em;
63+
line-height: 1em;
64+
}
65+
}
66+
67+
@media (prefers-reduced-motion: reduce) {
68+
[data-component="animated-number"] [data-slot="animated-number-value"] {
69+
transition-duration: 0ms;
70+
}
71+
72+
[data-component="animated-number"] [data-slot="animated-number-strip"] {
73+
transition-duration: 0ms;
74+
}
75+
}

0 commit comments

Comments
 (0)