Skip to content

Commit f53fc11

Browse files
Aaron Ikeractions-userCopilotaaroniker
authored
feat: Transitions, spacing, scroll fade, prompt area update (anomalyco#11168)
Co-authored-by: Github Action <action@github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: aaroniker <4730431+aaroniker@users.noreply.github.com>
1 parent c1c9a8b commit f53fc11

70 files changed

Lines changed: 6254 additions & 5225 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/app/src/components/dialog-select-model.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const ModelList: Component<{
9090

9191
export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
9292
provider?: string
93-
children?: JSX.Element
93+
children?: JSX.Element | ((open: boolean) => JSX.Element)
9494
triggerAs?: T
9595
triggerProps?: ComponentProps<T>
9696
}) {
@@ -182,12 +182,13 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
182182
as={props.triggerAs ?? "div"}
183183
{...(props.triggerProps as any)}
184184
>
185-
{props.children}
185+
{typeof props.children === "function" ? props.children(store.open) : props.children}
186186
</Kobalte.Trigger>
187187
<Kobalte.Portal>
188188
<Kobalte.Content
189+
class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
190+
data-component="model-popover-content"
189191
ref={(el) => setStore("content", el)}
190-
class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
191192
onEscapeKeyDown={(event) => {
192193
setStore("dismiss", "escape")
193194
setStore("open", false)

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

Lines changed: 93 additions & 55 deletions
Large diffs are not rendered by default.

‎packages/app/src/components/session-context-usage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
6464
}
6565

6666
const circle = () => (
67-
<div class="p-1">
68-
<ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
67+
<div class="text-icon-base">
68+
<ProgressCircle size={18} percentage={context()?.percentage ?? 0} />
6969
</div>
7070
)
7171

@@ -101,7 +101,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
101101
<Button
102102
type="button"
103103
variant="ghost"
104-
class="size-6"
104+
class="size-7 text-icon-base"
105105
onClick={openContext}
106106
aria-label={language.t("context.usage.view")}
107107
>

‎packages/app/src/components/settings-general.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { usePlatform } from "@/context/platform"
1010
import { useSettings, monoFontFamily } from "@/context/settings"
1111
import { playSound, SOUND_OPTIONS } from "@/utils/sound"
1212
import { Link } from "./link"
13+
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
1314

1415
let demoSoundState = {
1516
cleanup: undefined as (() => void) | undefined,
@@ -60,24 +61,24 @@ export const SettingsGeneral: Component = () => {
6061
const actions =
6162
platform.update && platform.restart
6263
? [
63-
{
64-
label: language.t("toast.update.action.installRestart"),
65-
onClick: async () => {
66-
await platform.update!()
67-
await platform.restart!()
68-
},
64+
{
65+
label: language.t("toast.update.action.installRestart"),
66+
onClick: async () => {
67+
await platform.update!()
68+
await platform.restart!()
6969
},
70-
{
71-
label: language.t("toast.update.action.notYet"),
72-
onClick: "dismiss" as const,
73-
},
74-
]
70+
},
71+
{
72+
label: language.t("toast.update.action.notYet"),
73+
onClick: "dismiss" as const,
74+
},
75+
]
7576
: [
76-
{
77-
label: language.t("toast.update.action.notYet"),
78-
onClick: "dismiss" as const,
79-
},
80-
]
77+
{
78+
label: language.t("toast.update.action.notYet"),
79+
onClick: "dismiss" as const,
80+
},
81+
]
8182

8283
showToast({
8384
persistent: true,
@@ -130,7 +131,12 @@ export const SettingsGeneral: Component = () => {
130131
const soundOptions = [...SOUND_OPTIONS]
131132

132133
return (
133-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
134+
<ScrollFade
135+
direction="vertical"
136+
fadeStartSize={0}
137+
fadeEndSize={16}
138+
class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
139+
>
134140
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
135141
<div class="flex flex-col gap-1 pt-6 pb-8">
136142
<h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -394,7 +400,7 @@ export const SettingsGeneral: Component = () => {
394400
</div>
395401
</div>
396402
</div>
397-
</div>
403+
</ScrollFade>
398404
)
399405
}
400406

‎packages/app/src/components/settings-keybinds.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import fuzzysort from "fuzzysort"
99
import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
1010
import { useLanguage } from "@/context/language"
1111
import { useSettings } from "@/context/settings"
12+
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
1213

1314
const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
1415
const PALETTE_ID = "command.palette"
@@ -352,7 +353,12 @@ export const SettingsKeybinds: Component = () => {
352353
})
353354

354355
return (
355-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
356+
<ScrollFade
357+
direction="vertical"
358+
fadeStartSize={0}
359+
fadeEndSize={16}
360+
class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
361+
>
356362
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
357363
<div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
358364
<div class="flex items-center justify-between gap-4">
@@ -429,6 +435,6 @@ export const SettingsKeybinds: Component = () => {
429435
</div>
430436
</Show>
431437
</div>
432-
</div>
438+
</ScrollFade>
433439
)
434440
}

‎packages/desktop/src-tauri/src/lib.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,7 @@ pub fn run() {
345345
.decorations(false);
346346

347347
let window = window_builder.build().expect("Failed to create window");
348+
let _ = window.show();
348349

349350
#[cfg(windows)]
350351
let _ = window.create_overlay_titlebar();

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

Lines changed: 94 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,107 @@
11
[data-component="accordion"] {
2-
display: flex;
3-
flex-direction: column;
4-
align-items: flex-start;
5-
gap: 8px;
6-
align-self: stretch;
2+
display: flex;
3+
flex-direction: column;
4+
align-items: flex-start;
5+
gap: 8px;
6+
align-self: stretch;
77

8-
[data-slot="accordion-item"] {
9-
width: 100%;
10-
display: flex;
11-
flex-direction: column;
12-
align-items: flex-start;
13-
align-self: stretch;
14-
overflow: clip;
8+
[data-slot="accordion-item"] {
9+
width: 100%;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: flex-start;
13+
align-self: stretch;
14+
overflow: clip;
1515

16-
[data-slot="accordion-header"] {
17-
width: 100%;
18-
display: flex;
19-
align-items: center;
20-
margin: 0;
21-
padding: 0;
16+
[data-slot="accordion-header"] {
17+
width: 100%;
18+
display: flex;
19+
align-items: center;
20+
margin: 0;
21+
padding: 0;
2222

23-
[data-slot="accordion-trigger"] {
24-
width: 100%;
25-
display: flex;
26-
height: 32px;
27-
padding: 8px 12px;
28-
justify-content: space-between;
29-
align-items: center;
30-
align-self: stretch;
31-
cursor: default;
32-
user-select: none;
23+
[data-slot="accordion-trigger"] {
24+
width: 100%;
25+
display: flex;
26+
height: 32px;
27+
padding: 8px 12px;
28+
justify-content: space-between;
29+
align-items: center;
30+
align-self: stretch;
31+
cursor: default;
32+
user-select: none;
3333

34-
background-color: var(--surface-base);
35-
border: 1px solid var(--border-weak-base);
36-
border-radius: var(--radius-md);
37-
overflow: clip;
38-
color: var(--text-strong);
39-
transition: background-color 0.15s ease;
34+
background-color: var(--surface-base);
35+
border: 1px solid var(--border-weak-base);
36+
border-radius: var(--radius-md);
37+
overflow: clip;
38+
color: var(--text-strong);
39+
transition-property: background-color, border-color;
40+
transition-duration: var(--transition-duration);
41+
transition-timing-function: var(--transition-easing);
4042

41-
/* text-12-regular */
42-
font-family: var(--font-family-sans);
43-
font-size: var(--font-size-small);
44-
font-style: normal;
45-
font-weight: var(--font-weight-regular);
46-
line-height: var(--line-height-large); /* 166.667% */
47-
letter-spacing: var(--letter-spacing-normal);
43+
/* text-12-regular */
44+
font-family: var(--font-family-sans);
45+
font-size: var(--font-size-small);
46+
font-style: normal;
47+
font-weight: var(--font-weight-regular);
48+
line-height: var(--line-height-large); /* 166.667% */
49+
letter-spacing: var(--letter-spacing-normal);
4850

49-
&:hover {
50-
background-color: var(--surface-base);
51-
}
52-
&:focus-visible {
53-
outline: none;
54-
}
55-
&[data-disabled] {
56-
cursor: not-allowed;
57-
}
58-
}
59-
}
51+
&:hover {
52+
background-color: var(--surface-base);
53+
}
54+
&:focus-visible {
55+
outline: none;
56+
}
57+
&[data-disabled] {
58+
cursor: not-allowed;
59+
}
60+
}
61+
}
6062

61-
&[data-expanded] {
62-
[data-slot="accordion-trigger"] {
63-
border-bottom-left-radius: 0;
64-
border-bottom-right-radius: 0;
65-
}
63+
[data-slot="accordion-arrow"] {
64+
flex-shrink: 0;
65+
width: 16px;
66+
height: 16px;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
color: var(--text-weak);
71+
}
6672

67-
[data-slot="accordion-content"] {
68-
border: 1px solid var(--border-weak-base);
69-
border-top: none;
70-
border-bottom-left-radius: var(--radius-md);
71-
border-bottom-right-radius: var(--radius-md);
72-
}
73-
}
73+
[data-slot="accordion-content"] {
74+
display: grid;
75+
grid-template-rows: 0fr;
76+
transition-property: grid-template-rows, opacity;
77+
transition-duration: var(--transition-duration);
78+
transition-timing-function: var(--transition-easing);
79+
width: 100%;
7480

75-
[data-slot="accordion-content"] {
76-
overflow: hidden;
77-
width: 100%;
78-
}
79-
}
80-
}
81+
> * {
82+
overflow: hidden;
83+
}
84+
}
8185

82-
@keyframes slideDown {
83-
from {
84-
height: 0;
85-
}
86-
to {
87-
height: var(--kb-accordion-content-height);
88-
}
89-
}
86+
[data-slot="accordion-content"][data-expanded] {
87+
grid-template-rows: 1fr;
88+
}
89+
90+
[data-slot="accordion-content"][data-closed] {
91+
grid-template-rows: 0fr;
92+
}
93+
94+
&[data-expanded] [data-slot="accordion-trigger"] {
95+
border-bottom-left-radius: 0;
96+
border-bottom-right-radius: 0;
97+
}
9098

91-
@keyframes slideUp {
92-
from {
93-
height: var(--kb-accordion-content-height);
94-
}
95-
to {
96-
height: 0;
97-
}
99+
&[data-expanded] [data-slot="accordion-content"] {
100+
border: 1px solid var(--border-weak-base);
101+
border-top: none;
102+
border-bottom-left-radius: var(--radius-md);
103+
border-bottom-right-radius: var(--radius-md);
104+
height: auto;
105+
}
106+
}
98107
}

0 commit comments

Comments
 (0)