ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(stats): link market share labs

Browse source
This commit is contained in:
Adam 2026-07-03 10:34:13 -05:00
commit 1f47bbfce2
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 63 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/stats/app/src/routes/index.css
View file

@ -2129,27 +2129,40 @@
} }
[data-page="stats"] [data-component="market-share-list"] li { [data-page="stats"] [data-component="market-share-list"] li {
min-width: 0;
}
[data-page="stats"] [data-component="market-share-list"] li > a,
[data-page="stats"] [data-component="market-share-list"] li > button {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 100%;
min-width: 0; min-width: 0;
height: 28px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 8px; padding: 0 8px;
background: var(--stats-layer);
border: 1px solid var(--stats-line); border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: inherit;
font: inherit;
font-size: 11px; font-size: 11px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-decoration: none;
transition: transition:
border-color 120ms ease, border-color 120ms ease,
box-shadow 120ms ease, box-shadow 120ms ease,
background 120ms ease; background 120ms ease;
} }
[data-page="stats"] [data-component="market-share-list"] li[data-active="true"], [data-page="stats"] [data-component="market-share-list"] li > button {
[data-page="stats"] [data-component="market-share-list"] li:focus-visible { appearance: none;
}
[data-page="stats"] [data-component="market-share-list"] li[data-active="true"] > :is(a, button),
[data-page="stats"] [data-component="market-share-list"] li > :is(a, button):focus-visible {
border-color: var(--stats-text); border-color: var(--stats-text);
background: var(--stats-layer); background: var(--stats-layer);
box-shadow: box-shadow:

68
packages/stats/app/src/routes/index.tsx
View file

@ -1262,30 +1262,56 @@ function MarketShareList(props: {
onActiveAuthorChange: (author: string) => void onActiveAuthorChange: (author: string) => void
}) { }) {
const i18n = useI18n() const i18n = useI18n()
const language = useLanguage()
return ( return (
<ol data-component="market-share-list"> <ol data-component="market-share-list">
<For each={props.data}> <For each={props.data}>
{(item, index) => ( {(item, index) => {
<li const label = () =>
role="button" `${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}`
tabIndex={0} const content = () => (
aria-label={`${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}`} <>
data-active={props.activeAuthor === item.author ? "true" : undefined} <span>{String(index() + 1).padStart(2, "0")}</span>
onPointerEnter={() => props.onActiveAuthorChange(item.author)} <i style={{ background: getRankColor(item.author, index(), props.authorOrder, marketColors) }} />
onFocus={() => props.onActiveAuthorChange(item.author)} <strong>{item.author}</strong>
onKeyDown={(event) => { <em>{formatTrillions(item.tokens)}</em>
if (event.key !== "Enter" && event.key !== " ") return <b>{item.share.toFixed(1)}%</b>
event.preventDefault() </>
props.onActiveAuthorChange(item.author) )
}} const href = () =>
> item.author === "Other" ? undefined : language.route(`${import.meta.env.BASE_URL}${modelSlug(item.author)}`)
<span>{String(index() + 1).padStart(2, "0")}</span> return (
<i style={{ background: getRankColor(item.author, index(), props.authorOrder, marketColors) }} /> <li
<strong>{item.author}</strong> data-active={props.activeAuthor === item.author ? "true" : undefined}
<em>{formatTrillions(item.tokens)}</em> onPointerEnter={() => props.onActiveAuthorChange(item.author)}
<b>{item.share.toFixed(1)}%</b> >
</li> <Show
)} when={href()}
fallback={
<button
type="button"
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)}
>
{content()}
</button>
}
>
{(href) => (
<a
href={href()}
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)}
>
{content()}
</a>
)}
</Show>
</li>
)
}}
</For> </For>
</ol> </ol>
) )