From acf1dd85006a0bb4009ef601ae7f7a60eb36af4d Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Mon, 24 Nov 2025 11:56:00 -0600 Subject: wip(share): more styling --- packages/enterprise/src/app.css | 17 -- packages/enterprise/src/app.tsx | 17 +- .../enterprise/src/routes/share/[sessionID].tsx | 279 +++++++++++++-------- 3 files changed, 175 insertions(+), 138 deletions(-) (limited to 'packages/enterprise/src') diff --git a/packages/enterprise/src/app.css b/packages/enterprise/src/app.css index 01c61e62c..4af87bca6 100644 --- a/packages/enterprise/src/app.css +++ b/packages/enterprise/src/app.css @@ -1,18 +1 @@ @import "@opencode-ai/ui/styles/tailwind"; - -:root { - --background-rgb: 214, 219, 220; - --foreground-rgb: 0, 0, 0; -} - -@media (prefers-color-scheme: dark) { - :root { - --background-rgb: 0, 0, 0; - --foreground-rgb: 255, 255, 255; - } -} - -body { - /* background: rgb(var(--background-rgb)); */ - /* color: rgb(var(--foreground-rgb)); */ -} diff --git a/packages/enterprise/src/app.tsx b/packages/enterprise/src/app.tsx index fd10899f2..77e9d8677 100644 --- a/packages/enterprise/src/app.tsx +++ b/packages/enterprise/src/app.tsx @@ -1,6 +1,5 @@ import { Router } from "@solidjs/router" import { FileRoutes } from "@solidjs/start/router" -import { Suspense } from "solid-js" import { Fonts } from "@opencode-ai/ui/fonts" import { MetaProvider } from "@solidjs/meta" import { MarkedProvider } from "@opencode-ai/ui/context/marked" @@ -10,16 +9,12 @@ export default function App() { return ( ( - <> - - - - - {props.children} - - - - + + + + {props.children} + + )} > diff --git a/packages/enterprise/src/routes/share/[sessionID].tsx b/packages/enterprise/src/routes/share/[sessionID].tsx index a2365aa1d..96a651391 100644 --- a/packages/enterprise/src/routes/share/[sessionID].tsx +++ b/packages/enterprise/src/routes/share/[sessionID].tsx @@ -3,15 +3,26 @@ import { SessionTurn } from "@opencode-ai/ui/session-turn" import { SessionReview } from "@opencode-ai/ui/session-review" import { DataProvider } from "@opencode-ai/ui/context" import { createAsync, query, RouteDefinition, useParams } from "@solidjs/router" -import { createMemo, Show } from "solid-js" +import { createMemo, ErrorBoundary, Show } from "solid-js" import { Share } from "~/core/share" import { Logo, Mark } from "@opencode-ai/ui/logo" import { IconButton } from "@opencode-ai/ui/icon-button" import { iife } from "@opencode-ai/util/iife" import { Binary } from "@opencode-ai/util/binary" +import { NamedError } from "@opencode-ai/util/error" import { DateTime } from "luxon" import { MessageNav } from "@opencode-ai/ui/message-nav" import { createStore } from "solid-js/store" +import z from "zod" +import NotFound from "../[...404]" + +const SessionDataMissingError = NamedError.create( + "SessionDataMissingError", + z.object({ + sessionID: z.string(), + message: z.string().optional(), + }), +) const getData = query(async (sessionID) => { const data = await Share.data(sessionID) @@ -70,6 +81,8 @@ const getData = query(async (sessionID) => { break } } + const match = Binary.search(result.session, sessionID!, (s) => s.id) + if (!match.found) throw new SessionDataMissingError({ sessionID }) return result }, "getShareData") @@ -80,126 +93,172 @@ export const route = { export default function () { const params = useParams() const data = createAsync(async () => { - if (!params.sessionID) return + if (!params.sessionID) throw new Error("Missing sessionID") return getData(params.sessionID) }) return ( - - {(data) => ( - - {iife(() => { - const [store, setStore] = createStore({ - messageId: undefined as string | undefined, - }) - const match = createMemo(() => Binary.search(data().session, params.sessionID!, (s) => s.id)) - if (!match().found) throw new Error(`Session ${params.sessionID} not found`) - const info = createMemo(() => data().session[match().index]) - const messages = createMemo(() => - params.sessionID ? (data().message[params.sessionID]?.filter((m) => m.role === "user") ?? []) : [], - ) - const firstUserMessage = createMemo(() => messages().at(0)) - const activeMessage = createMemo( - () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(), - ) - function setActiveMessage(message: UserMessage | undefined) { - if (message) { - setStore("messageId", message.id) - } else { - setStore("messageId", undefined) + { + return ( + + + + ) + }} + > + + {(data) => ( + + {iife(() => { + const [store, setStore] = createStore({ + messageId: undefined as string | undefined, + }) + const match = createMemo(() => Binary.search(data().session, params.sessionID!, (s) => s.id)) + if (!match().found) throw new Error(`Session ${params.sessionID} not found`) + const info = createMemo(() => data().session[match().index]) + const messages = createMemo(() => + params.sessionID + ? (data().message[params.sessionID]?.filter((m) => m.role === "user") ?? []).sort( + (a, b) => b.time.created - a.time.created, + ) + : [], + ) + const firstUserMessage = createMemo(() => messages().at(0)) + const activeMessage = createMemo( + () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(), + ) + function setActiveMessage(message: UserMessage | undefined) { + if (message) { + setStore("messageId", message.id) + } else { + setStore("messageId", undefined) + } } - } - const provider = createMemo(() => activeMessage()?.model?.providerID) - const modelID = createMemo(() => activeMessage()?.model?.modelID) - const model = createMemo(() => data().model[params.sessionID!]?.find((m) => m.id === modelID())) - const diffs = createMemo(() => data().session_diff[params.sessionID!] ?? []) + const provider = createMemo(() => activeMessage()?.model?.providerID) + const modelID = createMemo(() => activeMessage()?.model?.modelID) + const model = createMemo(() => data().model[params.sessionID!]?.find((m) => m.id === modelID())) + const diffs = createMemo(() => data().session_diff[params.sessionID!] ?? []) - return ( -
-
-
- - - -
-
- - + const title = ( +
+
+
+ +
v{info().version}
+
+
+ +
{model()?.name ?? modelID()}
+
+
+ {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")} +
-
-
-
-
0, - "px-6 max-w-2xl": diffs().length === 0, - }} - > -
-
-
- -
v{info().version}
-
-
- -
{model()?.name ?? modelID()}
-
-
- {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")} -
+
{info().title}
+
+ ) + + return ( +
+
+
+ + + +
+
+ + +
+
+
+
+
0, + "px-6 max-w-2xl": diffs().length === 0, + }} + > + {title} +
+ 1}> + <> +
0, + "absolute right-full": diffs().length === 0, + }} + > + 0, + }} + messages={messages()} + current={activeMessage()} + onMessageSelect={setActiveMessage} + size={!diffs().length ? "normal" : "compact"} + /> +
+
0, + "absolute right-full": diffs().length === 0, + }} + > + 0, + }} + messages={messages()} + current={activeMessage()} + onMessageSelect={setActiveMessage} + size={!diffs().length ? "normal" : "compact"} + /> +
+ + + +
+ +
+
-
{info().title}
-
-
- 1}> - - - -
- -
-
+ +
+ +
+
- -
- -
-
-
- ) - })} - - )} - + ) + })} + + )} + + ) } -- cgit v1.2.3