mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-07-08 00:25:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

docs: share cleanup title

Browse source
This commit is contained in:
Jay V 2025-06-27 15:31:10 -04:00
parent be0811ecc3
commit 289797f56d
2 changed files with 89 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

122
packages/web/src/components/Share.tsx
View file

@ -859,59 +859,15 @@ export default function Share(props: {
<h1>{store.info?.title}</h1> <h1>{store.info?.title}</h1>
</div> </div>
<div data-section="row"> <div data-section="row">
<ul data-section="stats">
<li>
<span data-element-label>Cost</span>
{data().cost !== undefined ? (
<span>${data().cost.toFixed(2)}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Input Tokens</span>
{data().tokens.input ? (
<span>{data().tokens.input}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Output Tokens</span>
{data().tokens.output ? (
<span>{data().tokens.output}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Reasoning Tokens</span>
{data().tokens.reasoning ? (
<span>{data().tokens.reasoning}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
</ul>
<Show when={data().rootDir}>
<ul data-section="stats" data-section-root>
<li title="Project root">
<div data-stat-icon>
<IconFolder width={16} height={16} />
</div>
<span>{data().rootDir}</span>
</li>
<li title="opencode version">
<div data-stat-icon title="opencode">
<IconOpencode width={16} height={16} />
</div>
<Show when={store.info?.version} fallback="v0.0.1">
<span>v{store.info?.version}</span>
</Show>
</li>
</ul>
</Show>
<ul data-section="stats" data-section-models> <ul data-section="stats" data-section-models>
<li title="opencode version">
<div data-stat-icon title="opencode">
<IconOpencode width={16} height={16} />
</div>
<Show when={store.info?.version} fallback="v0.0.1">
<span>v{store.info?.version}</span>
</Show>
</li>
{Object.values(data().models).length > 0 ? ( {Object.values(data().models).length > 0 ? (
<For each={Object.values(data().models)}> <For each={Object.values(data().models)}>
{([provider, model]) => ( {([provider, model]) => (
@ -1305,12 +1261,12 @@ export default function Share(props: {
> >
{(_part) => { {(_part) => {
const path = createMemo(() => const path = createMemo(() =>
toolData()?.args.path !== data().rootDir toolData()?.args?.path !== data().rootDir
? stripWorkingDirectory( ? stripWorkingDirectory(
toolData()?.args.path, toolData()?.args?.path,
data().rootDir, data().rootDir,
) )
: toolData()?.args.path, : toolData()?.args?.path,
) )
return ( return (
@ -1332,7 +1288,9 @@ export default function Share(props: {
<div data-part-tool-body> <div data-part-tool-body>
<div data-part-title> <div data-part-title>
<span data-element-label>LS</span> <span data-element-label>LS</span>
<b>{path()}</b> <b title={toolData()?.args?.path}>
{path()}
</b>
</div> </div>
<Switch> <Switch>
<Match when={toolData()?.result}> <Match when={toolData()?.result}>
@ -1375,7 +1333,7 @@ export default function Share(props: {
{(_part) => { {(_part) => {
const filePath = createMemo(() => const filePath = createMemo(() =>
stripWorkingDirectory( stripWorkingDirectory(
toolData()?.args.filePath, toolData()?.args?.filePath,
data().rootDir, data().rootDir,
), ),
) )
@ -1398,7 +1356,9 @@ export default function Share(props: {
<div data-part-tool-body> <div data-part-tool-body>
<div data-part-title> <div data-part-title>
<span data-element-label>Read</span> <span data-element-label>Read</span>
<b>{filePath()}</b> <b title={toolData()?.args?.filePath}>
{filePath()}
</b>
</div> </div>
<Switch> <Switch>
<Match when={hasError()}> <Match when={hasError()}>
@ -1499,7 +1459,9 @@ export default function Share(props: {
<div data-part-tool-body> <div data-part-tool-body>
<div data-part-title> <div data-part-title>
<span data-element-label>Write</span> <span data-element-label>Write</span>
<b>{filePath()}</b> <b title={toolData()?.args?.filePath}>
{filePath()}
</b>
</div> </div>
<Show when={diagnostics().length > 0}> <Show when={diagnostics().length > 0}>
<ErrorPart>{diagnostics()}</ErrorPart> <ErrorPart>{diagnostics()}</ErrorPart>
@ -1586,7 +1548,9 @@ export default function Share(props: {
<div data-part-tool-body> <div data-part-tool-body>
<div data-part-title> <div data-part-title>
<span data-element-label>Edit</span> <span data-element-label>Edit</span>
<b>{filePath()}</b> <b title={toolData()?.args?.filePath}>
{filePath()}
</b>
</div> </div>
<Switch> <Switch>
<Match when={hasError()}> <Match when={hasError()}>
@ -1935,13 +1899,47 @@ export default function Share(props: {
</For> </For>
)} )}
</For> </For>
<div data-section="part" data-part-type="connection-status"> <div data-section="part" data-part-type="summary">
<div data-section="decoration"> <div data-section="decoration">
<span data-status={connectionStatus()[0]}></span> <span data-status={connectionStatus()[0]}></span>
<div></div> <div></div>
</div> </div>
<div data-section="content"> <div data-section="content">
<span>{getStatusText(connectionStatus())}</span> <p data-section="copy">{getStatusText(connectionStatus())}</p>
<ul data-section="stats">
<li>
<span data-element-label>Cost</span>
{data().cost !== undefined ? (
<span>${data().cost.toFixed(2)}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Input Tokens</span>
{data().tokens.input ? (
<span>{data().tokens.input}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Output Tokens</span>
{data().tokens.output ? (
<span>{data().tokens.output}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Reasoning Tokens</span>
{data().tokens.reasoning ? (
<span>{data().tokens.reasoning}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>

34
packages/web/src/components/share.module.css
View file

@ -89,7 +89,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
gap: 0.5rem 1rem; gap: 0.5rem 0.875rem;
flex-wrap: wrap; flex-wrap: wrap;
li { li {
@ -104,8 +104,7 @@
} }
} }
[data-section="stats"][data-section-root], [data-section="stats"] {
[data-section="stats"][data-section-models] {
li { li {
gap: 0.3125rem; gap: 0.3125rem;
@ -375,7 +374,7 @@
} }
} }
} }
[data-part-type="connection-status"] { [data-part-type="summary"] {
& > [data-section="decoration"] { & > [data-section="decoration"] {
span:first-child { span:first-child {
flex: 0 0 auto; flex: 0 0 auto;
@ -405,12 +404,37 @@
} }
& > [data-section="content"] { & > [data-section="content"] {
span { display: flex;
flex-direction: column;
gap: 0.5rem;
p[data-section="copy"] {
display: block; display: block;
line-height: 18px; line-height: 18px;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--sl-color-text-dimmed); color: var(--sl-color-text-dimmed);
} }
[data-section="stats"] {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: 0.5rem 0.875rem;
flex-wrap: wrap;
li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--sl-color-text-secondary);
span[data-placeholder] {
color: var(--sl-color-text-dimmed);
}
}
}
} }
} }
} }