Skip to content

Commit ae85822

Browse files
opencode-agent[bot]opencode-agent[bot]
committed
Apply PR #40845: feat(app): redesign non-modal settings
2 parents bb614a2 + a2c3aef commit ae85822

23 files changed

Lines changed: 2352 additions & 1694 deletions

‎bun.lock‎

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

‎packages/app/src/components/dialog-connect-provider.tsx‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
} from "solid-js"
3030
import { createStore, produce } from "solid-js/store"
3131
import { useParams } from "@solidjs/router"
32-
import { ExternalLink } from "@/components/external-link"
32+
import { Link } from "@/components/link"
3333
import { useServerSDK } from "@/context/server-sdk"
3434
import { useServerSync } from "@/context/server-sync"
3535
import { useLanguage } from "@/context/language"
@@ -389,7 +389,7 @@ function ProviderConnection(props: {
389389
const settings = useSettings()
390390
const newLayout = settings.general.newLayoutDesigns
391391
const providers = useProviders(() => props.directory?.())
392-
const directory = () => props.directory?.() ?? decode64(params.dir)
392+
const directory = () => (props.directory ? props.directory() : decode64(params.dir))
393393
const location = () => {
394394
const value = directory()
395395
return value ? { directory: value } : undefined
@@ -509,12 +509,7 @@ function ProviderConnection(props: {
509509
const hint = suffix?.[1]
510510
return {
511511
label: suffix ? label.slice(0, -suffix[0].length) : label,
512-
hint:
513-
hint?.toLowerCase() === "headless"
514-
? language.t("provider.connect.method.headless")
515-
: hint?.toLowerCase() === "browser" || (!hint && value?.type === "key")
516-
? language.t("provider.connect.method.browser")
517-
: undefined,
512+
hint: hint ? hint[0].toUpperCase() + hint.slice(1) : value?.type === "key" ? "Browser" : undefined,
518513
}
519514
}
520515

@@ -841,12 +836,12 @@ function ProviderConnection(props: {
841836
<div>{language.t("provider.connect.opencodeZen.line2")}</div>
842837
<div>
843838
{language.t("provider.connect.opencodeZen.visit.prefix")}
844-
<ExternalLink
839+
<Link
845840
href="https://opencode.ai/zen"
846841
class="text-v2-text-text-base focus-visible:rounded-xs focus-visible:outline-2 focus-visible:outline-v2-border-border-focus"
847842
>
848843
{language.t("provider.connect.opencodeZen.visit.link")}
849-
</ExternalLink>
844+
</Link>
850845
{language.t("provider.connect.opencodeZen.visit.suffix")}
851846
</div>
852847
</div>
@@ -891,9 +886,9 @@ function ProviderConnection(props: {
891886
<div class="text-14-regular text-text-base">{language.t("provider.connect.opencodeZen.line2")}</div>
892887
<div class="text-14-regular text-text-base">
893888
{language.t("provider.connect.opencodeZen.visit.prefix")}
894-
<ExternalLink href="https://opencode.ai/zen" tabIndex={-1}>
889+
<Link href="https://opencode.ai/zen" tabIndex={-1}>
895890
{language.t("provider.connect.opencodeZen.visit.link")}
896-
</ExternalLink>
891+
</Link>
897892
{language.t("provider.connect.opencodeZen.visit.suffix")}
898893
</div>
899894
</div>
@@ -972,9 +967,9 @@ function ProviderConnection(props: {
972967
<div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
973968
<div>
974969
{language.t("provider.connect.oauth.code.visit.prefix")}
975-
<ExternalLink href={store.authorization!.url} class="text-v2-text-text-base">
970+
<Link href={store.authorization!.url} class="text-v2-text-text-base">
976971
{language.t("provider.connect.oauth.code.visit.link")}
977-
</ExternalLink>
972+
</Link>
978973
{language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
979974
</div>
980975
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
@@ -1011,9 +1006,7 @@ function ProviderConnection(props: {
10111006
<div class="flex flex-col gap-6">
10121007
<div class="text-14-regular text-text-base">
10131008
{language.t("provider.connect.oauth.code.visit.prefix")}
1014-
<ExternalLink href={store.authorization!.url}>
1015-
{language.t("provider.connect.oauth.code.visit.link")}
1016-
</ExternalLink>
1009+
<Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
10171010
{language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
10181011
</div>
10191012
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -1084,9 +1077,7 @@ function ProviderConnection(props: {
10841077
<div class="flex flex-col gap-6">
10851078
<div class="text-14-regular text-text-base">
10861079
{language.t("provider.connect.oauth.auto.visit.prefix")}
1087-
<ExternalLink href={store.authorization!.url}>
1088-
{language.t("provider.connect.oauth.auto.visit.link")}
1089-
</ExternalLink>
1080+
<Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
10901081
{language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
10911082
</div>
10921083
<TextField

‎packages/app/src/components/dialog-edit-project-v2.css‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
.project-settings-v2-dialog [data-slot="dialog-container"] {
2+
background: var(--v2-background-bg-base);
3+
}
4+
5+
.project-settings-v2-dialog [data-slot="dialog-body"] {
6+
padding: 0;
7+
overflow: hidden;
8+
}
9+
10+
.project-settings-v2 {
11+
height: 100%;
12+
}
13+
14+
.project-settings-v2-nav {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 4px;
18+
width: 100%;
19+
}
20+
21+
.project-settings-v2-panel {
22+
display: flex;
23+
flex-direction: column;
24+
height: 100%;
25+
min-width: 0;
26+
overflow: hidden !important;
27+
user-select: none;
28+
}
29+
30+
.project-settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
31+
user-select: text;
32+
}
33+
34+
.project-settings-v2-form {
35+
display: flex;
36+
flex-direction: column;
37+
height: 100%;
38+
min-height: 0;
39+
}
40+
41+
.project-settings-v2-scroll {
42+
display: flex;
43+
flex: 1;
44+
flex-direction: column;
45+
gap: 24px;
46+
min-height: 0;
47+
padding: 40px;
48+
overflow-y: auto;
49+
}
50+
51+
.project-settings-page-header {
52+
display: flex;
53+
flex-direction: column;
54+
gap: 6px;
55+
}
56+
57+
.project-settings-page-header h2 {
58+
color: var(--v2-text-text-base);
59+
font-size: 15px;
60+
font-weight: 640;
61+
line-height: 1;
62+
}
63+
64+
.project-settings-page-header > span {
65+
color: var(--v2-text-text-muted);
66+
font-size: 11px;
67+
font-weight: 440;
68+
line-height: 1;
69+
}
70+
71+
.project-settings-extensions {
72+
display: flex;
73+
flex-direction: column;
74+
height: 100%;
75+
min-height: 0;
76+
padding: 40px;
77+
}
78+
79+
.project-settings-extension-tabs {
80+
flex: 1;
81+
height: auto;
82+
min-height: 0;
83+
margin-top: 24px;
84+
overflow: visible;
85+
}
86+
87+
.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
88+
width: auto;
89+
padding-inline: 0 !important;
90+
}
91+
92+
.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
93+
display: none;
94+
}
95+
96+
.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
97+
> [data-slot="tabs-v2-list"]
98+
[data-slot="tabs-v2-trigger-wrapper"] {
99+
border-radius: 6px;
100+
}
101+
102+
.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
103+
> [data-slot="tabs-v2-list"]
104+
[data-slot="tabs-v2-trigger"] {
105+
padding-inline: 8px;
106+
}
107+
108+
.project-settings-extension-tabs [data-slot="tabs-v2-content"] {
109+
overflow-y: auto;
110+
}
111+
112+
.project-settings-extension-section {
113+
display: flex;
114+
flex-direction: column;
115+
gap: 16px;
116+
padding-top: 20px;
117+
}
118+
119+
.project-settings-extension-section-header {
120+
display: flex;
121+
align-items: center;
122+
justify-content: space-between;
123+
gap: 16px;
124+
color: var(--v2-text-text-base);
125+
font-size: 13px;
126+
font-weight: 530;
127+
line-height: 1;
128+
}
129+
130+
.project-settings-extension-section-header > :last-child {
131+
color: var(--v2-text-text-faint);
132+
font-size: 11px;
133+
font-weight: 440;
134+
}
135+
136+
.project-settings-extension-link {
137+
color: var(--v2-text-text-accent) !important;
138+
text-decoration: none;
139+
}
140+
141+
.project-settings-extension-link:hover {
142+
text-decoration: underline;
143+
}
144+
145+
.project-settings-extension-card {
146+
padding-inline: 12px;
147+
overflow: hidden;
148+
border: 0.5px solid var(--v2-border-border-base);
149+
border-radius: 8px;
150+
background: var(--v2-background-bg-base);
151+
}
152+
153+
.project-settings-extension-row {
154+
display: flex;
155+
align-items: center;
156+
justify-content: space-between;
157+
gap: 12px;
158+
min-height: 48px;
159+
border-bottom: 0.5px solid var(--v2-border-border-base);
160+
}
161+
162+
.project-settings-extension-row:last-child {
163+
border-bottom: 0;
164+
}
165+
166+
.project-settings-extension-row-main {
167+
display: flex;
168+
flex: 1;
169+
align-items: center;
170+
gap: 10px;
171+
min-width: 0;
172+
}
173+
174+
.project-settings-extension-row-icon {
175+
flex-shrink: 0;
176+
color: var(--v2-icon-icon-muted);
177+
}
178+
179+
.project-settings-extension-row-name {
180+
min-width: 0;
181+
overflow: hidden;
182+
color: var(--v2-text-text-base);
183+
font-size: 13px;
184+
font-weight: 530;
185+
text-overflow: ellipsis;
186+
white-space: nowrap;
187+
}
188+
189+
.project-settings-extension-row-status {
190+
display: flex;
191+
align-items: center;
192+
gap: 6px;
193+
flex-shrink: 0;
194+
color: var(--v2-text-text-muted);
195+
font-size: 11px;
196+
}
197+
198+
.project-settings-extension-row-status-dot {
199+
width: 5px;
200+
height: 5px;
201+
border-radius: 50%;
202+
background: var(--v2-state-fg-warning);
203+
}
204+
205+
.project-settings-shared {
206+
display: flex;
207+
flex-direction: column;
208+
gap: 12px;
209+
}
210+
211+
.project-settings-shared-trigger {
212+
display: flex;
213+
align-items: center;
214+
align-self: flex-start;
215+
gap: 6px;
216+
color: var(--v2-text-text-base);
217+
font-size: 11px;
218+
font-weight: 530;
219+
}
220+
221+
.project-settings-shared-chevron {
222+
width: 12px;
223+
height: 12px;
224+
color: var(--v2-icon-icon-muted);
225+
transition: transform 120ms ease;
226+
}
227+
228+
.project-settings-shared-chevron.open {
229+
transform: rotate(90deg);
230+
}
231+
232+
.project-settings-shared-count {
233+
padding: 1px 4px;
234+
border-radius: 3px;
235+
background: var(--v2-background-bg-layer-02);
236+
color: var(--v2-text-text-muted);
237+
font-size: 9px;
238+
}

‎packages/app/src/components/link.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ExternalLink, type ExternalLinkProps } from "./external-link"
2+
3+
export function Link(props: ExternalLinkProps) {
4+
return <ExternalLink {...props} />
5+
}

0 commit comments

Comments
 (0)