import { A, createAsync, useNavigate } from "@solidjs/router" import "./workspace.css" import { Title } from "@solidjs/meta" import { github } from "~/lib/github" import { createEffect, createMemo, For, onMount } from "solid-js" import { config } from "~/config" import { createList } from "solid-list" export default function BlackWorkspace() { const navigate = useNavigate() const githubData = createAsync(() => github()) const starCount = createMemo(() => githubData()?.stars ? new Intl.NumberFormat("en-US", { notation: "compact", compactDisplay: "short", }).format(githubData()!.stars!) : config.github.starsFormatted.compact, ) // TODO: Frank, replace with real workspaces const workspaces = [ { name: "Workspace 1", id: "wrk_123" }, { name: "Workspace 2", id: "wrk_456" }, { name: "Workspace 3", id: "wrk_789" }, { name: "Workspace 4", id: "wrk_111" }, { name: "Workspace 5", id: "wrk_222" }, { name: "Workspace 6", id: "wrk_333" }, { name: "Workspace 7", id: "wrk_444" }, { name: "Workspace 8", id: "wrk_555" }, ] let listRef: HTMLUListElement | undefined const { active, setActive, onKeyDown } = createList({ items: () => workspaces.map((w) => w.id), initialActive: workspaces[0]?.id ?? null, handleTab: true, }) onMount(() => { listRef?.focus() }) createEffect(() => { const id = active() if (!id || !listRef) return const el = listRef.querySelector(`[data-id="${id}"]`) el?.scrollIntoView({ block: "nearest" }) }) return (
opencode

Select a workspace for this plan

    { if (e.key === "Enter" && active()) { navigate(`/black/workspace/${active()}`) } else if (e.key === "Tab") { e.preventDefault() onKeyDown(e) } else { onKeyDown(e) } }} > {(workspace) => (
  • setActive(workspace.id)} onClick={() => navigate(`/black/workspace/${workspace.id}`)} > [*] {workspace.name}
    • )}
) }