fix(stats): link market share labs

packages/stats/app/src/routes/index.css

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

packages/stats/app/src/routes/index.tsx

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