Skip to content

Commit a552652

Browse files
adamdotdevinadamdotdevin
authored
Revert "feat: Transitions, spacing, scroll fade, prompt area update (anomalyco#11168)" (anomalyco#11461)
Co-authored-by: adamelmore <2363879+adamdottv@users.noreply.github.com>
1 parent 511c7ab commit a552652

49 files changed

Lines changed: 380 additions & 1321 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: 3 additions & 4 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 | ((open: boolean) => JSX.Element)
93+
children?: JSX.Element
9494
triggerAs?: T
9595
triggerProps?: ComponentProps<T>
9696
}) {
@@ -182,13 +182,12 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
182182
as={props.triggerAs ?? "div"}
183183
{...(props.triggerProps as any)}
184184
>
185-
{typeof props.children === "function" ? props.children(store.open) : props.children}
185+
{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"
191189
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"
192191
onEscapeKeyDown={(event) => {
193192
setStore("dismiss", "escape")
194193
setStore("open", false)

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

Lines changed: 43 additions & 81 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="text-icon-base">
68-
<ProgressCircle size={18} percentage={context()?.percentage ?? 0} />
67+
<div class="p-1">
68+
<ProgressCircle size={16} strokeWidth={2} 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-7 text-icon-base"
104+
class="size-6"
105105
onClick={openContext}
106106
aria-label={language.t("context.usage.view")}
107107
>

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ 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"
1413

1514
let demoSoundState = {
1615
cleanup: undefined as (() => void) | undefined,
@@ -131,12 +130,7 @@ export const SettingsGeneral: Component = () => {
131130
const soundOptions = [...SOUND_OPTIONS]
132131

133132
return (
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-
>
133+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
140134
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
141135
<div class="flex flex-col gap-1 pt-6 pb-8">
142136
<h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -401,7 +395,7 @@ export const SettingsGeneral: Component = () => {
401395
</div>
402396
</div>
403397
</div>
404-
</ScrollFade>
398+
</div>
405399
)
406400
}
407401

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ 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"
1312

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

355354
return (
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-
>
355+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
362356
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
363357
<div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
364358
<div class="flex items-center justify-between gap-4">
@@ -435,6 +429,6 @@ export const SettingsKeybinds: Component = () => {
435429
</div>
436430
</Show>
437431
</div>
438-
</ScrollFade>
432+
</div>
439433
)
440434
}

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

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

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

350349
#[cfg(windows)]
351350
let _ = window.create_overlay_titlebar();

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

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@
3636
border-radius: var(--radius-md);
3737
overflow: clip;
3838
color: var(--text-strong);
39-
transition-property: background-color, border-color;
40-
transition-duration: var(--transition-duration);
41-
transition-timing-function: var(--transition-easing);
39+
transition: background-color 0.15s ease;
4240

4341
/* text-12-regular */
4442
font-family: var(--font-family-sans);
@@ -60,48 +58,41 @@
6058
}
6159
}
6260

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-
}
72-
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%;
80-
81-
> * {
82-
overflow: hidden;
61+
&[data-expanded] {
62+
[data-slot="accordion-trigger"] {
63+
border-bottom-left-radius: 0;
64+
border-bottom-right-radius: 0;
8365
}
84-
}
8566

86-
[data-slot="accordion-content"][data-expanded] {
87-
grid-template-rows: 1fr;
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+
}
8873
}
8974

90-
[data-slot="accordion-content"][data-closed] {
91-
grid-template-rows: 0fr;
75+
[data-slot="accordion-content"] {
76+
overflow: hidden;
77+
width: 100%;
9278
}
79+
}
80+
}
9381

94-
&[data-expanded] [data-slot="accordion-trigger"] {
95-
border-bottom-left-radius: 0;
96-
border-bottom-right-radius: 0;
97-
}
82+
@keyframes slideDown {
83+
from {
84+
height: 0;
85+
}
86+
to {
87+
height: var(--kb-accordion-content-height);
88+
}
89+
}
9890

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-
}
91+
@keyframes slideUp {
92+
from {
93+
height: var(--kb-accordion-content-height);
94+
}
95+
to {
96+
height: 0;
10697
}
10798
}

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

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { Accordion as Kobalte } from "@kobalte/core/accordion"
2-
import { Accessor, createContext, splitProps, useContext } from "solid-js"
2+
import { splitProps } from "solid-js"
33
import type { ComponentProps, ParentProps } from "solid-js"
4-
import { MorphChevron } from "./morph-chevron"
54

65
export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
76
export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
87
export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
98
export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
109
export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
1110

12-
const AccordionItemContext = createContext<Accessor<boolean>>()
13-
1411
function AccordionRoot(props: AccordionProps) {
1512
const [split, rest] = splitProps(props, ["class", "classList"])
1613
return (
@@ -25,19 +22,17 @@ function AccordionRoot(props: AccordionProps) {
2522
)
2623
}
2724

28-
function AccordionItem(props: AccordionItemProps & { expanded?: boolean }) {
29-
const [split, rest] = splitProps(props, ["class", "classList", "expanded"])
25+
function AccordionItem(props: AccordionItemProps) {
26+
const [split, rest] = splitProps(props, ["class", "classList"])
3027
return (
31-
<AccordionItemContext.Provider value={() => split.expanded ?? false}>
32-
<Kobalte.Item
33-
{...rest}
34-
data-slot="accordion-item"
35-
classList={{
36-
...(split.classList ?? {}),
37-
[split.class ?? ""]: !!split.class,
38-
}}
39-
/>
40-
</AccordionItemContext.Provider>
28+
<Kobalte.Item
29+
{...rest}
30+
data-slot="accordion-item"
31+
classList={{
32+
...(split.classList ?? {}),
33+
[split.class ?? ""]: !!split.class,
34+
}}
35+
/>
4136
)
4237
}
4338

@@ -89,25 +84,9 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
8984
)
9085
}
9186

92-
export interface AccordionArrowProps extends ComponentProps<"div"> {
93-
expanded?: boolean
94-
}
95-
96-
function AccordionArrow(props: AccordionArrowProps = {}) {
97-
const [local, rest] = splitProps(props, ["expanded"])
98-
const contextExpanded = useContext(AccordionItemContext)
99-
const isExpanded = () => local.expanded ?? contextExpanded?.() ?? false
100-
return (
101-
<div data-slot="accordion-arrow" {...rest}>
102-
<MorphChevron expanded={isExpanded()} />
103-
</div>
104-
)
105-
}
106-
10787
export const Accordion = Object.assign(AccordionRoot, {
10888
Item: AccordionItem,
10989
Header: AccordionHeader,
11090
Trigger: AccordionTrigger,
11191
Content: AccordionContent,
112-
Arrow: AccordionArrow,
11392
})

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,8 @@
88
text-decoration: none;
99
user-select: none;
1010
cursor: default;
11-
padding: 4px 8px;
12-
white-space: nowrap;
13-
transition-property: background-color, border-color, color, box-shadow, opacity;
14-
transition-duration: var(--transition-duration);
15-
transition-timing-function: var(--transition-easing);
1611
outline: none;
17-
line-height: 20px;
12+
white-space: nowrap;
1813

1914
&[data-variant="primary"] {
2015
background-color: var(--button-primary-base);
@@ -99,6 +94,7 @@
9994
&:active:not(:disabled) {
10095
background-color: var(--button-secondary-base);
10196
scale: 0.99;
97+
transition: all 150ms ease-out;
10298
}
10399
&:disabled {
104100
border-color: var(--border-disabled);
@@ -113,27 +109,34 @@
113109
}
114110

115111
&[data-size="small"] {
116-
padding: 2px 8px;
112+
height: 22px;
113+
padding: 0 8px;
117114
&[data-icon] {
118-
padding: 2px 12px 2px 4px;
115+
padding: 0 12px 0 4px;
119116
}
120117

118+
font-size: var(--font-size-small);
119+
line-height: var(--line-height-large);
121120
gap: 4px;
122121

123122
/* text-12-medium */
124123
font-family: var(--font-family-sans);
125-
font-size: var(--font-size-base);
124+
font-size: var(--font-size-small);
126125
font-style: normal;
127126
font-weight: var(--font-weight-medium);
127+
line-height: var(--line-height-large); /* 166.667% */
128128
letter-spacing: var(--letter-spacing-normal);
129129
}
130130

131131
&[data-size="normal"] {
132-
padding: 4px 6px;
132+
height: 24px;
133+
line-height: 24px;
134+
padding: 0 6px;
133135
&[data-icon] {
134-
padding: 4px 12px 4px 4px;
136+
padding: 0 12px 0 4px;
135137
}
136138

139+
font-size: var(--font-size-small);
137140
gap: 6px;
138141

139142
/* text-12-medium */
@@ -145,10 +148,11 @@
145148
}
146149

147150
&[data-size="large"] {
151+
height: 32px;
148152
padding: 6px 12px;
149153

150154
&[data-icon] {
151-
padding: 6px 12px 6px 8px;
155+
padding: 0 12px 0 8px;
152156
}
153157

154158
gap: 4px;
@@ -158,6 +162,7 @@
158162
font-size: 14px;
159163
font-style: normal;
160164
font-weight: var(--font-weight-medium);
165+
line-height: var(--line-height-large); /* 142.857% */
161166
letter-spacing: var(--letter-spacing-normal);
162167
}
163168

‎packages/ui/src/components/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Icon, IconProps } from "./icon"
44

55
export interface ButtonProps
66
extends ComponentProps<typeof Kobalte>,
7-
Pick<ComponentProps<"button">, "class" | "classList" | "children" | "style"> {
7+
Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
88
size?: "small" | "normal" | "large"
99
variant?: "primary" | "secondary" | "ghost"
1010
icon?: IconProps["name"]

0 commit comments

Comments
 (0)