chore: cleanup duplicate markup

4 files changed, 114 insertions, 49 deletions

diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index c990bf87f..281b6765a 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -12,7 +12,7 @@ import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Code } from "@opencode-ai/ui/code"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
-import { MessageNav } from "@opencode-ai/ui/message-nav"
+import { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
 import { SessionReview } from "@opencode-ai/ui/session-review"
 import { SelectDialog } from "@opencode-ai/ui/select-dialog"
 import {
@@ -342,30 +342,13 @@ export default function Page() {
                 <Switch>
                   <Match when={session.id}>
                     <div class="flex items-start justify-start h-full min-h-0">
-                      <Show when={session.messages.user().length > 1}>
-                        <>
-                          <MessageNav
-                            class="@6xl:hidden mt-2.5 absolute left-6"
-                            messages={session.messages.user()}
-                            current={session.messages.active()}
-                            onMessageSelect={session.messages.setActive}
-                            size="compact"
-                            working={session.working()}
-                          />
-                          <MessageNav
-                            classList={{
-                              "hidden @6xl:flex absolute": true,
-                              "mt-0.5 left-[calc(((100%_-_min(100%,_36.5rem))_/_2)-1.5rem)] -translate-x-full": wide(),
-                              "mt-2.5 left-6": !wide(),
-                            }}
-                            messages={session.messages.user()}
-                            current={session.messages.active()}
-                            onMessageSelect={session.messages.setActive}
-                            size={wide() ? "normal" : "compact"}
-                            working={session.working()}
-                          />
-                        </>
-                      </Show>
+                      <SessionMessageRail
+                        messages={session.messages.user()}
+                        current={session.messages.active()}
+                        onMessageSelect={session.messages.setActive}
+                        working={session.working()}
+                        wide={wide()}
+                      />
                       <SessionTurn
                         sessionID={session.id!}
                         messageID={session.messages.active()?.id!}
diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index 7c4af8ac2..ffe7f533a 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -12,7 +12,7 @@ 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 { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
 import { createStore } from "solid-js/store"
 import z from "zod"
 import NotFound from "../[...404]"
@@ -259,29 +259,12 @@ export default function () {
                             {title()}
                           </div>
                           <div class="flex items-start justify-start h-full min-h-0">
-                            <Show when={messages().length > 1}>
-                              <>
-                                <MessageNav
-                                  class="@6xl:hidden mt-2.5 absolute left-6"
-                                  messages={messages()}
-                                  current={activeMessage()}
-                                  onMessageSelect={setActiveMessage}
-                                  size="compact"
-                                />
-                                <MessageNav
-                                  classList={{
-                                    "hidden @6xl:flex absolute": true,
-                                    "mt-0.5 left-[calc(((100%_-_min(100%,_36.5rem))_/_2)-1.5rem)] -translate-x-full":
-                                      wide(),
-                                    "mt-2.5 left-6": !wide(),
-                                  }}
-                                  messages={messages()}
-                                  current={activeMessage()}
-                                  onMessageSelect={setActiveMessage}
-                                  size={wide() ? "normal" : "compact"}
-                                />
-                              </>
-                            </Show>
+                            <SessionMessageRail
+                              messages={messages()}
+                              current={activeMessage()}
+                              onMessageSelect={setActiveMessage}
+                              wide={wide()}
+                            />
                             <SessionTurn
                               sessionID={data().sessionID}
                               messageID={store.messageId ?? firstUserMessage()!.id!}
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>
+  )
+}