chore: cleanup duplicate markup

2 files changed, 99 insertions, 0 deletions

diff --git a/packages/ui/src/components/session-message-rail.css b/packages/ui/src/components/session-message-rail.css
new file mode 100644
index 000000000..9d302e10e
--- /dev/null
+++ b/packages/ui/src/components/session-message-rail.css
@@ -0,0 +1,42 @@
+[data-component="session-message-rail"] {
+  display: contents;
+}
+
+[data-slot="session-message-rail-compact"],
+[data-slot="session-message-rail-full"] {
+  position: absolute;
+  left: 1.5rem;
+  margin-top: 0.625rem;
+}
+
+[data-slot="session-message-rail-compact"] {
+  display: flex;
+}
+
+[data-slot="session-message-rail-full"] {
+  display: none;
+}
+
+@media (min-width: 72rem) {
+  [data-slot="session-message-rail-compact"] {
+    display: none;
+  }
+
+  [data-slot="session-message-rail-full"] {
+    display: flex;
+  }
+}
+
+[data-component="session-message-rail"] [data-slot="session-message-rail-full"] {
+  transform: none;
+}
+
+[data-component="session-message-rail"][data-wide] [data-slot="session-message-rail-full"] {
+  margin-top: 0.125rem;
+  left: calc(((100% - min(100%, 36.5rem)) / 2) - 1.5rem);
+  transform: translateX(-100%);
+}
+
+[data-component="session-message-rail"]:not([data-wide]) [data-slot="session-message-rail-full"] {
+  margin-top: 0.625rem;
+}
diff --git a/packages/ui/src/components/session-message-rail.tsx b/packages/ui/src/components/session-message-rail.tsx
new file mode 100644
index 000000000..29d9ac81e
--- /dev/null
+++ b/packages/ui/src/components/session-message-rail.tsx
@@ -0,0 +1,57 @@
+import { UserMessage } from "@opencode-ai/sdk"
+import { ComponentProps, Show, splitProps } from "solid-js"
+import { MessageNav } from "./message-nav"
+import "./session-message-rail.css"
+
+export interface SessionMessageRailProps extends ComponentProps<"div"> {
+  messages: UserMessage[]
+  current?: UserMessage
+  working?: boolean
+  wide?: boolean
+  onMessageSelect: (message: UserMessage) => void
+}
+
+export function SessionMessageRail(props: SessionMessageRailProps) {
+  const [local, others] = splitProps(props, [
+    "messages",
+    "current",
+    "working",
+    "wide",
+    "onMessageSelect",
+    "class",
+    "classList",
+  ])
+
+  return (
+    <Show when={(local.messages?.length ?? 0) > 1}>
+      <div
+        {...others}
+        data-component="session-message-rail"
+        data-wide={local.wide ? "" : undefined}
+        classList={{
+          ...(local.classList ?? {}),
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        <div data-slot="session-message-rail-compact">
+          <MessageNav
+            messages={local.messages}
+            current={local.current}
+            onMessageSelect={local.onMessageSelect}
+            size="compact"
+            working={local.working}
+          />
+        </div>
+        <div data-slot="session-message-rail-full">
+          <MessageNav
+            messages={local.messages}
+            current={local.current}
+            onMessageSelect={local.onMessageSelect}
+            size={local.wide ? "normal" : "compact"}
+            working={local.working}
+          />
+        </div>
+      </div>
+    </Show>
+  )
+}