add active state to comment cards in prompt input

2 files changed, 17 insertions, 2 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 8fb6155fa..53cffe75e 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -184,6 +184,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!item.commentID) return
 
     comments.setFocus({ file: item.path, id: item.commentID })
+    comments.setActive({ file: item.path, id: item.commentID })
     view().reviewPanel.open()
 
     if (item.commentOrigin === "review") {
@@ -1711,6 +1712,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
             <For each={prompt.context.items()}>
               {(item) => {
+                const active = () => {
+                  const a = comments.active()
+                  return !!item.commentID && item.commentID === a?.id && item.path === a?.file
+                }
                 return (
                   <Tooltip
                     value={
@@ -1729,8 +1734,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   >
                     <div
                       classList={{
-                        "group shrink-0 flex flex-col rounded-[6px] bg-background-stronger pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all shadow-xs-border hover:shadow-xs-border-hover": true,
-                        "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
+                        "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                        "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !active(),
+                        "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
+                          active(),
+                        "bg-background-stronger": !active(),
                       }}
                       onClick={() => {
                         openComment(item)
diff --git a/packages/app/src/context/comments.tsx b/packages/app/src/context/comments.tsx
index 12ee977e9..41123042d 100644
--- a/packages/app/src/context/comments.tsx
+++ b/packages/app/src/context/comments.tsx
@@ -38,6 +38,7 @@ function createCommentSession(dir: string, id: string | undefined) {
   )
 
   const [focus, setFocus] = createSignal<CommentFocus | null>(null)
+  const [active, setActive] = createSignal<CommentFocus | null>(null)
 
   const list = (file: string) => store.comments[file] ?? []
 
@@ -76,6 +77,9 @@ function createCommentSession(dir: string, id: string | undefined) {
     focus: createMemo(() => focus()),
     setFocus,
     clearFocus: () => setFocus(null),
+    active: createMemo(() => active()),
+    setActive,
+    clearActive: () => setActive(null),
   }
 }
 
@@ -135,6 +139,9 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont
       focus: () => session().focus(),
       setFocus: (focus: CommentFocus | null) => session().setFocus(focus),
       clearFocus: () => session().clearFocus(),
+      active: () => session().active(),
+      setActive: (active: CommentFocus | null) => session().setActive(active),
+      clearActive: () => session().clearActive(),
     }
   },
 })