BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): glass surfaces for selection menus and comment popovers

Browse Source 
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.
This commit is contained in:
Bohdan Triapitsyn
2026-08-24 01:49:10 +03:00
parent d678a4244e
commit 58a193aa87
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/composer/ui/ComposerContextChips.tsx
+1 -1
View File
@@ -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}
>
packages/ui/src/components/chat/message/TextSelectionMenu.tsx
+6 -6
View File
@@ -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'
packages/ui/src/components/comments/FilePreviewCommentMenu.tsx
+2 -2
View File
@@ -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',
)}
>
packages/ui/src/components/comments/InlineCommentInput.tsx
+1 -1
View File
@@ -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}