From 58a193aa8715adc31470b6b3bc96e27bbedb0641 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Mon, 24 Aug 2026 01:49:10 +0300
Subject: [PATCH] feat(ui): glass surfaces for selection menus and comment
 popovers

The chat selection menu (desktop pill and mobile sheet), the chat
comment input, the file-preview Comment pill, the shared inline comment
editor, and the composer's context chip preview popover now use the
same translucent blurred glass surface as the btw panel, keeping their
borders and soft shadow.
---
 .../chat/composer/ui/ComposerContextChips.tsx        |  2 +-
 .../components/chat/message/TextSelectionMenu.tsx    | 12 ++++++------
 .../components/comments/FilePreviewCommentMenu.tsx   |  4 ++--
 .../src/components/comments/InlineCommentInput.tsx   |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx b/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
index 832dc623..f39bb5fd 100644
--- a/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
+++ b/packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
@@ -323,7 +323,7 @@ export function ComposerContextChips({ draftTarget, colors }: ComposerContextChi
         <div className="relative" ref={containerRef}>
             {openGroup ? (
                 <div
-                    className="absolute bottom-full left-0 z-30 mb-1.5 w-full max-w-[480px] overflow-hidden rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]"
+                    className="oc-glass-popover absolute bottom-full left-0 z-30 mb-1.5 w-full max-w-[480px] overflow-hidden rounded-xl border border-[var(--interactive-border)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]"
                     onMouseEnter={cancelClose}
                     onMouseLeave={scheduleClose}
                 >
diff --git a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
index d52f8d26..723aa186 100644
--- a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
+++ b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
@@ -540,8 +540,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
   const commentInput = (
     <div
       className={cn(
-        'flex items-end gap-2 rounded-3xl border border-[var(--interactive-border)]',
-        'bg-[var(--surface-elevated)] pl-4 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+        'oc-glass-popover flex items-end gap-2 rounded-3xl border border-[var(--interactive-border)]',
+        'pl-4 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
         'py-1 pr-1',
         'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
         isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
@@ -624,8 +624,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         ref={menuRef}
         className={cn(
           'fixed left-3 right-3 bottom-0 z-50 mx-auto max-w-[420px]',
-          'rounded-2xl border border-[var(--interactive-border)]',
-          'bg-[var(--surface-elevated)] p-2 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+          'oc-glass-popover rounded-2xl border border-[var(--interactive-border)]',
+          'p-2 shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
           'safe-area-bottom',
           'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
           isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
@@ -722,8 +722,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         <div
           className={cn(
             'flex items-center whitespace-nowrap',
-            'rounded-full border border-[var(--interactive-border)]',
-            'bg-[var(--surface-elevated)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+            'oc-glass-popover rounded-full border border-[var(--interactive-border)]',
+            'shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
             'p-1',
             'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
             isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
diff --git a/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx b/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
index 5f5ada68..3b3641b3 100644
--- a/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
+++ b/packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
@@ -231,8 +231,8 @@ export function FilePreviewCommentMenu({ containerRef, filePath, fileContent }:
         <div
           className={cn(
             'flex items-center whitespace-nowrap',
-            'rounded-full border border-[var(--interactive-border)]',
-            'bg-[var(--surface-elevated)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
+            'oc-glass-popover rounded-full border border-[var(--interactive-border)]',
+            'shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]',
             'p-1',
           )}
         >
diff --git a/packages/ui/src/components/comments/InlineCommentInput.tsx b/packages/ui/src/components/comments/InlineCommentInput.tsx
index bcdf248c..8af08eaf 100644
--- a/packages/ui/src/components/comments/InlineCommentInput.tsx
+++ b/packages/ui/src/components/comments/InlineCommentInput.tsx
@@ -149,7 +149,7 @@ export function InlineCommentInput({
       onPointerDown={(e) => e.stopPropagation()}
       onTouchStart={(e) => e.stopPropagation()}
     >
-      <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]">
+      <div className="oc-glass-popover rounded-xl border border-[var(--interactive-border)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]">
         {(fileLabel || displayRange) ? (
           <div className="flex items-center gap-2 px-3 pt-2 text-xs font-medium text-[var(--surface-mutedForeground)] opacity-60">
             {fileLabel ? <span className="max-w-[200px] truncate">{fileLabel}</span> : null}