mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-12-23 10:11:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(share): style collisions

Browse source
This commit is contained in:
Adam 2025-11-20 07:16:16 -06:00
parent 6b29b988c0
commit 16a74bdc02
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 64 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

70
packages/ui/src/components/session-timeline.css
View file

@ -6,7 +6,7 @@
align-items: flex-start;
justify-content: flex-start;
[data-slot="timeline-list"] {
[data-slot="session-timeline-timeline-list"] {
margin-right: 32px;
flex-shrink: 0;
display: flex;
@ -27,7 +27,7 @@
}
}
[data-slot="timeline-item"] {
[data-slot="session-timeline-timeline-item"] {
display: flex;
align-items: center;
align-self: stretch;
@ -40,7 +40,7 @@
}
}
[data-slot="tick-button"] {
[data-slot="session-timeline-tick-button"] {
display: flex;
align-items: center;
justify-content: flex-start;
@ -52,7 +52,7 @@
background: none;
padding: 0;
&[data-active="true"] [data-slot="tick-line"] {
&[data-active="true"] [data-slot="session-timeline-tick-line"] {
background-color: var(--icon-strong-base);
width: 100%;
}
@ -64,7 +64,7 @@
}
}
[data-slot="tick-line"] {
[data-slot="session-timeline-tick-line"] {
height: 1px;
width: 20px;
background-color: var(--icon-base);
@ -73,12 +73,12 @@
background-color 0.2s;
}
[data-slot="tick-button"]:hover [data-slot="tick-line"] {
[data-slot="session-timeline-tick-button"]:hover [data-slot="session-timeline-tick-line"] {
width: 100%;
background-color: var(--icon-strong-base);
}
[data-slot="message-button"] {
[data-slot="session-timeline-message-button"] {
display: none;
align-items: center;
align-self: stretch;
@ -103,7 +103,7 @@
aspect-ratio: 1;
}
[data-slot="message-title-preview"] {
[data-slot="session-timeline-message-title-preview"] {
font-size: 14px; /* text-14-regular */
color: var(--text-weak);
white-space: nowrap;
@ -117,11 +117,11 @@
}
}
[data-slot="timeline-item"]:hover [data-slot="message-title-preview"] {
[data-slot="session-timeline-timeline-item"]:hover [data-slot="session-timeline-message-title-preview"] {
color: var(--text-base);
}
[data-slot="content"] {
[data-slot="session-timeline-content"] {
flex-grow: 1;
width: 100%;
height: 100%;
@ -130,11 +130,11 @@
scrollbar-width: none;
}
[data-slot="content"]::-webkit-scrollbar {
[data-slot="session-timeline-content"]::-webkit-scrollbar {
display: none;
}
[data-slot="message-container"] {
[data-slot="session-timeline-message-container"] {
display: flex;
flex-direction: column;
align-items: flex-start;
@ -143,7 +143,7 @@
padding-bottom: 80px;
}
[data-slot="message-header"] {
[data-slot="session-timeline-message-header"] {
display: flex;
align-items: center;
gap: 8px;
@ -155,7 +155,7 @@
height: 32px;
}
[data-slot="message-title"] {
[data-slot="session-timeline-message-title"] {
width: 100%;
font-size: 14px; /* text-14-medium */
font-weight: 500;
@ -166,7 +166,7 @@
white-space: nowrap;
}
[data-slot="message-title"] h1 {
[data-slot="session-timeline-message-title"] h1 {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
@ -175,7 +175,7 @@
font-weight: inherit;
}
[data-slot="summary-section"] {
[data-slot="session-timeline-summary-section"] {
width: 100%;
display: flex;
flex-direction: column;
@ -184,7 +184,7 @@
align-self: stretch;
}
[data-slot="summary-header"] {
[data-slot="session-timeline-summary-header"] {
display: flex;
flex-direction: column;
align-items: flex-start;
@ -192,13 +192,13 @@
align-self: stretch;
}
[data-slot="summary-title"] {
[data-slot="session-timeline-summary-title"] {
font-size: 12px; /* text-12-medium */
font-weight: 500;
color: var(--text-weak);
}
[data-slot="markdown"] {
[data-slot="session-timeline-markdown"] {
&[data-diffs="true"] {
font-size: 14px; /* text-14-regular */
}
@ -208,11 +208,11 @@
}
}
[data-slot="accordion"] {
[data-slot="session-timeline-accordion"] {
width: 100%;
}
[data-slot="sticky-header"] {
[data-slot="session-timeline-sticky-header"] {
top: 40px; /* top-10 */
&::before {
@ -220,7 +220,7 @@
}
}
[data-slot="accordion-trigger-content"] {
[data-slot="session-timeline-accordion-trigger-content"] {
display: flex;
align-items: center;
justify-content: space-between;
@ -228,7 +228,7 @@
gap: 20px;
}
[data-slot="file-info"] {
[data-slot="session-timeline-file-info"] {
flex-grow: 1;
display: flex;
align-items: center;
@ -236,19 +236,19 @@
min-width: 0;
}
[data-slot="file-icon"] {
[data-slot="session-timeline-file-icon"] {
flex-shrink: 0;
width: 16px;
height: 16px;
}
[data-slot="file-path"] {
[data-slot="session-timeline-file-path"] {
display: flex;
flex-grow: 1;
min-width: 0;
}
[data-slot="directory"] {
[data-slot="session-timeline-directory"] {
color: var(--text-base);
text-overflow: ellipsis;
overflow: hidden;
@ -257,12 +257,12 @@
text-align: left;
}
[data-slot="filename"] {
[data-slot="session-timeline-filename"] {
color: var(--text-strong);
flex-shrink: 0;
}
[data-slot="accordion-actions"] {
[data-slot="session-timeline-accordion-actions"] {
flex-shrink: 0;
display: flex;
gap: 16px;
@ -270,21 +270,21 @@
justify-content: flex-end;
}
[data-slot="accordion-content"] {
[data-slot="session-timeline-accordion-content"] {
max-height: 240px; /* max-h-60 */
overflow-y: auto;
scrollbar-width: none;
}
[data-slot="accordion-content"]::-webkit-scrollbar {
[data-slot="session-timeline-accordion-content"]::-webkit-scrollbar {
display: none;
}
[data-slot="response-section"] {
[data-slot="session-timeline-response-section"] {
width: 100%;
}
[data-slot="collapsible-trigger"] {
[data-slot="session-timeline-collapsible-trigger"] {
color: var(--text-weak);
cursor: pointer;
background: none;
@ -298,14 +298,14 @@
}
}
[data-slot="collapsible-trigger-content"] {
[data-slot="session-timeline-collapsible-trigger-content"] {
display: flex;
align-items: center;
gap: 4px;
align-self: stretch;
}
[data-slot="details-text"] {
[data-slot="session-timeline-details-text"] {
font-size: 12px; /* text-12-medium */
font-weight: 500;
}
@ -314,7 +314,7 @@
color: var(--text-on-critical-base);
}
[data-slot="collapsible-content-inner"] {
[data-slot="session-timeline-collapsible-content-inner"] {
width: 100%;
display: flex;
flex-direction: column;

58
packages/ui/src/components/session-timeline.tsx
View file

@ -51,23 +51,23 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
return (
<div data-component="session-timeline">
<Show when={userMessages().length > 1}>
<ul role="list" data-slot="timeline-list" data-expanded={props.expanded}>
<ul role="list" data-slot="session-timeline-timeline-list" data-expanded={props.expanded}>
<For each={userMessages()}>
{(message) => {
const messageWorking = createMemo(() => message.id === lastUserMessage()?.id && working())
const handleClick = () => setStore("messageId", message.id)
return (
<li data-slot="timeline-item" data-expanded={props.expanded}>
<li data-slot="session-timeline-timeline-item" data-expanded={props.expanded}>
<button
data-slot="tick-button"
data-slot="session-timeline-tick-button"
data-active={activeMessage()?.id === message.id}
data-expanded={props.expanded}
onClick={handleClick}
>
<div data-slot="tick-line" />
<div data-slot="session-timeline-tick-line" />
</button>
<button data-slot="message-button" data-expanded={props.expanded} onClick={handleClick}>
<button data-slot="session-timeline-message-button" data-expanded={props.expanded} onClick={handleClick}>
<Switch>
<Match when={messageWorking()}>
<Spinner class="spinner" />
@ -76,7 +76,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
<DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
</Match>
</Switch>
<div data-slot="message-title-preview" data-active={activeMessage()?.id === message.id}>
<div data-slot="session-timeline-message-title-preview" data-active={activeMessage()?.id === message.id}>
<Show when={message.summary?.title} fallback="New message">
{message.summary?.title}
</Show>
@ -88,7 +88,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
</For>
</ul>
</Show>
<div data-slot="content">
<div data-slot="session-timeline-content">
<For each={userMessages()}>
{(message) => {
const isActive = createMemo(() => activeMessage()?.id === message.id)
@ -129,10 +129,10 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
return (
<Show when={isActive()}>
<div data-message={message.id} data-slot="message-container">
<div data-message={message.id} data-slot="session-timeline-message-container">
{/* Title */}
<div data-slot="message-header">
<div data-slot="message-title">
<div data-slot="session-timeline-message-header">
<div data-slot="session-timeline-message-title">
<Show
when={titled()}
fallback={
@ -150,9 +150,9 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
<Message message={message} parts={parts()} />
{/* Summary */}
<Show when={completed()}>
<div data-slot="summary-section">
<div data-slot="summary-header">
<h2 data-slot="summary-title">
<div data-slot="session-timeline-summary-section">
<div data-slot="session-timeline-summary-header">
<h2 data-slot="session-timeline-summary-title">
<Switch>
<Match when={message.summary?.diffs?.length}>Summary</Match>
<Match when={true}>Response</Match>
@ -161,7 +161,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
<Show when={message.summary?.body}>
{(summary) => (
<Markdown
data-slot="markdown"
data-slot="session-timeline-markdown"
data-diffs={!!message.summary?.diffs?.length}
data-fade={!message.summary?.diffs?.length && !contentSeen()}
text={summary()}
@ -169,30 +169,30 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
)}
</Show>
</div>
<Accordion data-slot="accordion" multiple>
<Accordion data-slot="session-timeline-accordion" multiple>
<For each={message.summary?.diffs ?? []}>
{(diff) => (
<Accordion.Item value={diff.file}>
<StickyAccordionHeader data-slot="sticky-header">
<StickyAccordionHeader data-slot="session-timeline-sticky-header">
<Accordion.Trigger>
<div data-slot="accordion-trigger-content">
<div data-slot="file-info">
<FileIcon node={{ path: diff.file, type: "file" }} data-slot="file-icon" />
<div data-slot="file-path">
<div data-slot="session-timeline-accordion-trigger-content">
<div data-slot="session-timeline-file-info">
<FileIcon node={{ path: diff.file, type: "file" }} data-slot="session-timeline-file-icon" />
<div data-slot="session-timeline-file-path">
<Show when={diff.file.includes("/")}>
<span data-slot="directory">{getDirectory(diff.file)}&lrm;</span>
<span data-slot="session-timeline-directory">{getDirectory(diff.file)}&lrm;</span>
</Show>
<span data-slot="filename">{getFilename(diff.file)}</span>
<span data-slot="session-timeline-filename">{getFilename(diff.file)}</span>
</div>
</div>
<div data-slot="accordion-actions">
<div data-slot="session-timeline-accordion-actions">
<DiffChanges changes={diff} />
<Icon name="chevron-grabber-vertical" size="small" />
</div>
</div>
</Accordion.Trigger>
</StickyAccordionHeader>
<Accordion.Content data-slot="accordion-content">
<Accordion.Content data-slot="session-timeline-accordion-content">
<Diff
before={{
name: diff.file!,
@ -216,16 +216,16 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
</Card>
</Show>
{/* Response */}
<div data-slot="response-section">
<div data-slot="session-timeline-response-section">
<Switch>
<Match when={!completed()}>
<MessageProgress assistantMessages={assistantMessages} done={!messageWorking()} />
</Match>
<Match when={completed() && hasToolPart()}>
<Collapsible variant="ghost" open={detailsExpanded()} onOpenChange={setDetailsExpanded}>
<Collapsible.Trigger data-slot="collapsible-trigger">
<div data-slot="collapsible-trigger-content">
<div data-slot="details-text">
<Collapsible.Trigger data-slot="session-timeline-collapsible-trigger">
<div data-slot="session-timeline-collapsible-trigger-content">
<div data-slot="session-timeline-details-text">
<Switch>
<Match when={detailsExpanded()}>Hide details</Match>
<Match when={!detailsExpanded()}>Show details</Match>
@ -235,7 +235,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
</div>
</Collapsible.Trigger>
<Collapsible.Content>
<div data-slot="collapsible-content-inner">
<div data-slot="session-timeline-collapsible-content-inner">
<For each={assistantMessages()}>
{(assistantMessage) => {
const parts = createMemo(() => data.part[assistantMessage.id])