From 8ace54c358d8309a31a63554e056cac3514eb8d4 Mon Sep 17 00:00:00 2001
From: "detail-app[bot]" <180357370+detail-app[bot]@users.noreply.github.com>
Date: Thu, 3 Sep 2026 13:48:38 +0000
Subject: [PATCH] chore: remove dead v2 branches from PromptImageAttachments

---
 packages/app/src/components/prompt-input.tsx  |   1 -
 .../prompt-input/image-attachments.css        |  43 ----
 .../prompt-input/image-attachments.tsx        | 191 +++++-------------
 3 files changed, 48 insertions(+), 187 deletions(-)
 delete mode 100644 packages/app/src/components/prompt-input/image-attachments.css

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index f70cb3992896..4d0250f179dc 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1493,7 +1493,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           }
           onRemove={removeAttachment}
           removeLabel={language.t("prompt.attachment.remove")}
-          newLayoutDesigns={false}
         />
         <div
           class="relative"
diff --git a/packages/app/src/components/prompt-input/image-attachments.css b/packages/app/src/components/prompt-input/image-attachments.css
deleted file mode 100644
index 2aaf494ebfc4..000000000000
--- a/packages/app/src/components/prompt-input/image-attachments.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@keyframes prompt-attachments-fade-left {
-  from {
-    visibility: hidden;
-  }
-  to {
-    visibility: visible;
-  }
-}
-
-@keyframes prompt-attachments-fade-right {
-  from {
-    visibility: visible;
-  }
-  to {
-    visibility: hidden;
-  }
-}
-
-[data-slot="prompt-attachments"] {
-  timeline-scope: --prompt-attachments-scroll;
-
-  [data-slot^="prompt-attachments-fade-"] {
-    visibility: hidden;
-  }
-}
-
-@supports (animation-timeline: --prompt-attachments-scroll) and (timeline-scope: --prompt-attachments-scroll) {
-  [data-slot="prompt-attachments-scroll"] {
-    scroll-timeline: --prompt-attachments-scroll x;
-  }
-
-  [data-slot="prompt-attachments-fade-left"] {
-    animation: prompt-attachments-fade-left linear both;
-    animation-timeline: --prompt-attachments-scroll;
-    animation-range: 0 0.1px;
-  }
-
-  [data-slot="prompt-attachments-fade-right"] {
-    animation: prompt-attachments-fade-right linear both;
-    animation-timeline: --prompt-attachments-scroll;
-    animation-range: calc(100% - 1.1px) calc(100% - 1px);
-  }
-}
diff --git a/packages/app/src/components/prompt-input/image-attachments.tsx b/packages/app/src/components/prompt-input/image-attachments.tsx
index 3a0cc3e4dd75..b037f7da631a 100644
--- a/packages/app/src/components/prompt-input/image-attachments.tsx
+++ b/packages/app/src/components/prompt-input/image-attachments.tsx
@@ -1,167 +1,72 @@
 import { Component, For, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { AttachmentCardV2 } from "@opencode-ai/session-ui/v2/attachment-card-v2"
-import { CommentCardV2 } from "@opencode-ai/session-ui/v2/comment-card-v2"
-import { typeLabel } from "@opencode-ai/session-ui/message-file"
-import type { ContextItem, ImageAttachmentPart } from "@/context/prompt"
-import "./image-attachments.css"
-
-type PromptCommentItem = ContextItem & { key: string }
+import type { ImageAttachmentPart } from "@/context/prompt"
 
 type PromptImageAttachmentsProps = {
   attachments: ImageAttachmentPart[]
   onOpen: (attachment: ImageAttachmentPart) => void
   onRemove: (id: string) => void
   removeLabel: string
-  newLayoutDesigns: boolean
-  comments?: PromptCommentItem[]
-  commentActive?: (item: PromptCommentItem) => boolean
-  onOpenComment?: (item: PromptCommentItem) => void
-  onRemoveComment?: (item: PromptCommentItem) => void
 }
 
 const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
 const imageClass =
   "size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
-const imageClassV2 = "w-[58px] h-[46px] rounded-[6px] object-cover"
-// inset box-shadows do not paint over <img> content, so the hairline is a separate overlay
-const imageHairlineClassV2 =
-  "absolute inset-0 rounded-[6px] shadow-[inset_0_0_0_0.5px_var(--v2-border-border-base)] pointer-events-none"
 const removeClass =
   "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
-const removeClassV2 =
-  "absolute -top-1 -right-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
 const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
 
 export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
   return (
-    <Show when={props.attachments.length > 0 || (props.newLayoutDesigns && (props.comments?.length ?? 0) > 0)}>
-      <div data-slot="prompt-attachments" classList={{ relative: props.newLayoutDesigns }}>
-        <div
-          data-slot="prompt-attachments-scroll"
-          classList={{
-            "flex gap-2": true,
-            "flex-nowrap overflow-x-auto no-scrollbar px-2 pt-2 pb-1": props.newLayoutDesigns,
-            "flex-wrap px-3 pt-3": !props.newLayoutDesigns,
-          }}
-        >
-          <Show when={props.newLayoutDesigns}>
-            <For each={props.comments ?? []}>
-              {(item) => (
-                <div class="relative group shrink-0">
-                  <TooltipV2
-                    value={item.comment}
-                    placement="top"
-                    openDelay={800}
-                    contentClass="max-w-[300px] break-words"
-                  >
-                    <CommentCardV2
-                      comment={item.comment ?? ""}
-                      path={item.path}
-                      selection={item.selection}
-                      active={props.commentActive?.(item)}
-                      onClick={() => props.onOpenComment?.(item)}
-                    />
-                  </TooltipV2>
-                  <button
-                    type="button"
-                    onClick={() => props.onRemoveComment?.(item)}
-                    class={removeClassV2}
-                    aria-label={props.removeLabel}
-                  >
-                    <IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
-                  </button>
-                </div>
-              )}
-            </For>
-          </Show>
-          <For each={props.attachments}>
-            {(attachment) => {
-              const image = attachment.mime.startsWith("image/")
-              const media = () => (
-                <Show
-                  when={image}
-                  fallback={
-                    <Show
-                      when={props.newLayoutDesigns}
-                      fallback={
-                        <div class={fallbackClass}>
-                          <Icon name="folder" class="size-6 text-text-weak" />
-                        </div>
-                      }
-                    >
-                      <AttachmentCardV2 title={attachment.filename}>
-                        {typeLabel(attachment.filename, attachment.mime)}
-                      </AttachmentCardV2>
-                    </Show>
-                  }
-                >
-                  <img
-                    src={attachment.dataUrl}
-                    alt={attachment.filename}
-                    class={props.newLayoutDesigns ? imageClassV2 : imageClass}
-                    onClick={() => props.onOpen(attachment)}
-                  />
-                </Show>
-              )
-              const name = () => (
-                <div class={nameClass}>
-                  <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
-                </div>
-              )
-              const remove = () => (
-                <button
-                  type="button"
-                  onClick={() => props.onRemove(attachment.id)}
-                  class={props.newLayoutDesigns ? removeClassV2 : removeClass}
-                  aria-label={props.removeLabel}
-                >
-                  <Show when={props.newLayoutDesigns} fallback={<Icon name="close" class="size-3 text-text-weak" />}>
-                    <IconV2 name="outline-xmark" class="text-v2-icon-icon-contrast" />
-                  </Show>
-                </button>
-              )
-              // v2 keeps the remove button outside the tooltip trigger so hovering it dismisses the tooltip
-              return (
-                <Show
-                  when={props.newLayoutDesigns}
-                  fallback={
-                    <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
-                      <div class="relative group">
-                        {media()}
-                        {name()}
-                        {remove()}
-                      </div>
-                    </Tooltip>
-                  }
-                >
-                  <div class="relative group shrink-0">
-                    <TooltipV2 value={attachment.filename} placement="top" contentClass="break-all">
-                      {media()}
-                      <Show when={image}>
-                        <div class={imageHairlineClassV2} />
-                      </Show>
-                    </TooltipV2>
-                    {remove()}
+    <Show when={props.attachments.length > 0}>
+      <div class="flex flex-wrap gap-2 px-3 pt-3">
+        <For each={props.attachments}>
+          {(attachment) => {
+            const image = attachment.mime.startsWith("image/")
+            const media = () => (
+              <Show
+                when={image}
+                fallback={
+                  <div class={fallbackClass}>
+                    <Icon name="folder" class="size-6 text-text-weak" />
                   </div>
-                </Show>
-              )
-            }}
-          </For>
-        </div>
-        <Show when={props.newLayoutDesigns}>
-          <div
-            data-slot="prompt-attachments-fade-left"
-            class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-[linear-gradient(to_right,var(--v2-background-bg-base),transparent)]"
-          />
-          <div
-            data-slot="prompt-attachments-fade-right"
-            class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-[linear-gradient(to_left,var(--v2-background-bg-base),transparent)]"
-          />
-        </Show>
+                }
+              >
+                <img
+                  src={attachment.dataUrl}
+                  alt={attachment.filename}
+                  class={imageClass}
+                  onClick={() => props.onOpen(attachment)}
+                />
+              </Show>
+            )
+            const name = () => (
+              <div class={nameClass}>
+                <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+              </div>
+            )
+            const remove = () => (
+              <button
+                type="button"
+                onClick={() => props.onRemove(attachment.id)}
+                class={removeClass}
+                aria-label={props.removeLabel}
+              >
+                <Icon name="close" class="size-3 text-text-weak" />
+              </button>
+            )
+            return (
+              <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
+                <div class="relative group">
+                  {media()}
+                  {name()}
+                  {remove()}
+                </div>
+              </Tooltip>
+            )
+          }}
+        </For>
       </div>
     </Show>
   )