aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2026-01-09 10:54:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: style byok

Browse Source
This commit is contained in:
Frank
2025-10-10 02:34:06 -04:00
parent fec70ae9c9
commit 250393978b
2 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/console/app/src/routes/workspace/[id]/provider-section.module.css
View File

@@ -35,11 +35,6 @@
&[data-slot="provider-status"] {
text-align: left;
color: var(--color-text);
}
&[data-slot="provider-toggle"] {
text-align: left;
font-family: var(--font-sans);
[data-slot="edit-form"] {
display: flex;
@@ -76,11 +71,32 @@
line-height: 1.4;
}
}
}
}
[data-slot="form-actions"] {
display: flex;
gap: var(--space-2);
&[data-slot="provider-action"] {
text-align: left;
font-family: var(--font-sans);
[data-slot="configured-actions"] {
display: flex;
gap: var(--space-2);
[data-slot="delete-form"] {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
&:hover [data-slot="delete-form"] {
opacity: 1;
pointer-events: auto;
}
}
[data-slot="form-actions"] {
display: flex;
gap: var(--space-2);
}
}
}
@@ -90,6 +106,13 @@
opacity: 0.6;
}
&:hover {
[data-slot="provider-action"] [data-slot="delete-form"] {
opacity: 1;
pointer-events: auto;
}
}
&:last-child td {
border-bottom: none;
}

86
packages/console/app/src/routes/workspace/[id]/provider-section.tsx
View File

@@ -12,6 +12,10 @@ const PROVIDERS = [
type Provider = (typeof PROVIDERS)[number]
function maskCredentials(credentials: string) {
return `${credentials.slice(0, 8)}...${credentials.slice(-8)}`
}
const removeProvider = action(async (form: FormData) => {
"use server"
const provider = form.get("provider")?.toString()
@@ -58,7 +62,7 @@ function ProviderRow(props: { provider: Provider }) {
let input: HTMLInputElement
const isEnabled = () => providers()?.some((p) => p.provider === props.provider.key)
const providerData = () => providers()?.find((p) => p.provider === props.provider.key)
createEffect(() => {
if (!saveSubmission.pending && saveSubmission.result && !saveSubmission.result.error) {
@@ -80,32 +84,14 @@ function ProviderRow(props: { provider: Provider }) {
}
return (
<tr data-slot="provider-row" data-enabled={isEnabled()}>
<tr data-slot="provider-row" data-enabled={providerData()}>
<td data-slot="provider-name">{props.provider.name}</td>
<td data-slot="provider-status">{isEnabled() ? "Configured" : "Not Configured"}</td>
<td data-slot="provider-toggle">
<td data-slot="provider-status">
<Show
when={store.editing}
fallback={
<Show
when={isEnabled()}
fallback={
<button data-color="ghost" onClick={() => show()}>
Configure
</button>
}
>
<form action={removeProvider} method="post">
<input type="hidden" name="provider" value={props.provider.key} />
<input type="hidden" name="workspaceID" value={params.id} />
<button data-color="ghost" type="submit" disabled={removeSubmission.pending}>
Disable
</button>
</form>
</Show>
}
fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "Not Configured"}</span>}
>
<form action={saveProvider} method="post" data-slot="edit-form">
<form id={`provider-form-${props.provider.key}`} action={saveProvider} method="post" data-slot="edit-form">
<div data-slot="input-wrapper">
<input
ref={(r) => (input = r)}
@@ -122,17 +108,51 @@ function ProviderRow(props: { provider: Provider }) {
</div>
<input type="hidden" name="provider" value={props.provider.key} />
<input type="hidden" name="workspaceID" value={params.id} />
<div data-slot="form-actions">
<button type="reset" data-color="ghost" onClick={() => hide()}>
Cancel
</button>
<button type="submit" data-color="ghost" disabled={saveSubmission.pending}>
{saveSubmission.pending ? "Saving..." : "Save"}
</button>
</div>
</form>
</Show>
</td>
<td data-slot="provider-action">
<Show
when={store.editing}
fallback={
<Show
when={providerData()}
fallback={
<button data-color="ghost" onClick={() => show()}>
Configure
</button>
}
>
<div data-slot="configured-actions">
<button data-color="ghost" onClick={() => show()}>
Edit
</button>
<form action={removeProvider} method="post" data-slot="delete-form">
<input type="hidden" name="provider" value={props.provider.key} />
<input type="hidden" name="workspaceID" value={params.id} />
<button data-color="ghost" type="submit" disabled={removeSubmission.pending}>
Delete
</button>
</form>
</div>
</Show>
}
>
<div data-slot="form-actions">
<button type="reset" data-color="ghost" onClick={() => hide()}>
Cancel
</button>
<button
type="submit"
data-color="ghost"
disabled={saveSubmission.pending}
form={`provider-form-${props.provider.key}`}
>
{saveSubmission.pending ? "Saving..." : "Save"}
</button>
</div>
</Show>
</td>
</tr>
)
}
@@ -149,8 +169,8 @@ export function ProviderSection() {
<thead>
<tr>
<th>Provider</th>
<th>Status</th>
<th>Action</th>
<th>API Key</th>
<th></th>
</tr>
</thead>
<tbody>