Skip to content

Commit 2f76b49

Browse files
adamdotdevinadamdotdevin
committed
Revert "feat(ui): Smooth fading out on scroll, style fixes (anomalyco#11683)"
This reverts commit e445dc0.
1 parent dfd5f38 commit 2f76b49

10 files changed

Lines changed: 43 additions & 482 deletions

File tree

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Select } from "@opencode-ai/ui/select"
55
import { Switch } from "@opencode-ai/ui/switch"
66
import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
77
import { showToast } from "@opencode-ai/ui/toast"
8-
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
98
import { useLanguage } from "@/context/language"
109
import { usePlatform } from "@/context/platform"
1110
import { useSettings, monoFontFamily } from "@/context/settings"
@@ -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>
@@ -417,7 +411,7 @@ export const SettingsGeneral: Component = () => {
417411
</div>
418412
</div>
419413
</div>
420-
</ScrollFade>
414+
</div>
421415
)
422416
}
423417

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Icon } from "@opencode-ai/ui/icon"
55
import { IconButton } from "@opencode-ai/ui/icon-button"
66
import { TextField } from "@opencode-ai/ui/text-field"
77
import { showToast } from "@opencode-ai/ui/toast"
8-
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
98
import fuzzysort from "fuzzysort"
109
import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
1110
import { useLanguage } from "@/context/language"
@@ -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">
@@ -436,6 +430,6 @@ export const SettingsKeybinds: Component = () => {
436430
</div>
437431
</Show>
438432
</div>
439-
</ScrollFade>
433+
</div>
440434
)
441435
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { type Component, For, Show } from "solid-js"
99
import { useLanguage } from "@/context/language"
1010
import { useModels } from "@/context/models"
1111
import { popularProviders } from "@/hooks/use-providers"
12-
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
1312

1413
type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
1514

@@ -40,12 +39,7 @@ export const SettingsModels: Component = () => {
4039
})
4140

4241
return (
43-
<ScrollFade
44-
direction="vertical"
45-
fadeStartSize={0}
46-
fadeEndSize={16}
47-
class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
48-
>
42+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
4943
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
5044
<div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
5145
<h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2>
@@ -131,6 +125,6 @@ export const SettingsModels: Component = () => {
131125
</Show>
132126
</Show>
133127
</div>
134-
</ScrollFade>
128+
</div>
135129
)
136130
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { useGlobalSync } from "@/context/global-sync"
1212
import { DialogConnectProvider } from "./dialog-connect-provider"
1313
import { DialogSelectProvider } from "./dialog-select-provider"
1414
import { DialogCustomProvider } from "./dialog-custom-provider"
15-
import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
1615

1716
type ProviderSource = "env" | "api" | "config" | "custom"
1817
type ProviderMeta = { source?: ProviderSource }
@@ -116,12 +115,7 @@ export const SettingsProviders: Component = () => {
116115
}
117116

118117
return (
119-
<ScrollFade
120-
direction="vertical"
121-
fadeStartSize={0}
122-
fadeEndSize={16}
123-
class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
124-
>
118+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
125119
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
126120
<div class="flex flex-col gap-1 pt-6 pb-8 max-w-[720px]">
127121
<h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
@@ -267,6 +261,6 @@ export const SettingsProviders: Component = () => {
267261
</Button>
268262
</div>
269263
</div>
270-
</ScrollFade>
264+
</div>
271265
)
272266
}

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

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
1+
@property --bottom-fade {
2+
syntax: "<length>";
3+
inherits: false;
4+
initial-value: 0px;
5+
}
6+
7+
@keyframes scroll {
8+
0% {
9+
--bottom-fade: 20px;
10+
}
11+
90% {
12+
--bottom-fade: 20px;
13+
}
14+
100% {
15+
--bottom-fade: 0;
16+
}
17+
}
18+
119
[data-component="list"] {
220
display: flex;
321
flex-direction: column;
4-
gap: 8px;
22+
gap: 12px;
523
overflow: hidden;
624
padding: 0 12px;
725

@@ -19,9 +37,7 @@
1937
flex-shrink: 0;
2038
background-color: transparent;
2139
opacity: 0.5;
22-
transition-property: opacity;
23-
transition-duration: var(--transition-duration);
24-
transition-timing-function: var(--transition-easing);
40+
transition: opacity 0.15s ease;
2541

2642
&:hover:not(:disabled),
2743
&:focus-visible:not(:disabled),
@@ -72,9 +88,7 @@
7288
height: 20px;
7389
background-color: transparent;
7490
opacity: 0.5;
75-
transition-property: opacity;
76-
transition-duration: var(--transition-duration);
77-
transition-timing-function: var(--transition-easing);
91+
transition: opacity 0.15s ease;
7892

7993
&:hover:not(:disabled),
8094
&:focus-visible:not(:disabled),
@@ -117,6 +131,15 @@
117131
gap: 12px;
118132
overflow-y: auto;
119133
overscroll-behavior: contain;
134+
mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
135+
animation: scroll;
136+
animation-timeline: --scroll;
137+
scroll-timeline: --scroll y;
138+
scrollbar-width: none;
139+
-ms-overflow-style: none;
140+
&::-webkit-scrollbar {
141+
display: none;
142+
}
120143

121144
[data-slot="list-empty-state"] {
122145
display: flex;
@@ -192,9 +215,7 @@
192215
background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
193216
pointer-events: none;
194217
opacity: 0;
195-
transition-property: opacity;
196-
transition-duration: var(--transition-duration);
197-
transition-timing-function: var(--transition-easing);
218+
transition: opacity 0.15s ease;
198219
}
199220

200221
&[data-stuck="true"]::after {
@@ -230,22 +251,17 @@
230251
align-items: center;
231252
justify-content: center;
232253
flex-shrink: 0;
233-
aspect-ratio: 1 / 1;
254+
aspect-ratio: 1/1;
234255
[data-component="icon"] {
235256
color: var(--icon-strong-base);
236257
}
237258
}
238-
239-
[name="check"] {
240-
color: var(--icon-strong-base);
241-
}
242-
243259
[data-slot="list-item-active-icon"] {
244260
display: none;
245261
align-items: center;
246262
justify-content: center;
247263
flex-shrink: 0;
248-
aspect-ratio: 1 / 1;
264+
aspect-ratio: 1/1;
249265
[data-component="icon"] {
250266
color: var(--icon-strong-base);
251267
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useI18n } from "../context/i18n"
55
import { Icon, type IconProps } from "./icon"
66
import { IconButton } from "./icon-button"
77
import { TextField } from "./text-field"
8-
import { ScrollFade } from "./scroll-fade"
98

109
function findByKey(container: HTMLElement, key: string) {
1110
const nodes = container.querySelectorAll<HTMLElement>('[data-slot="list-item"][data-key]')
@@ -280,7 +279,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
280279
{searchAction()}
281280
</div>
282281
</Show>
283-
<ScrollFade ref={setScrollRef} direction="vertical" fadeStartSize={0} fadeEndSize={20} data-slot="list-scroll">
282+
<div ref={setScrollRef} data-slot="list-scroll">
284283
<Show
285284
when={flat().length > 0 || showAdd()}
286285
fallback={
@@ -353,7 +352,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
353352
</div>
354353
</Show>
355354
</Show>
356-
</ScrollFade>
355+
</div>
357356
</div>
358357
)
359358
}

‎packages/ui/src/components/scroll-fade.css‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

0 commit comments

Comments
 (0)