duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(chat-input): style selector trigger shows selected bubble preview + caret

Browse Source 
Replace the generic grayscale styles-icon trigger with a ▼ caret plus a small
clipped preview of the currently-selected chat bubble (chat-bubble bubble-N),
matching the reference layout.
This commit is contained in:
simoleo89
2026-06-14 21:05:47 +02:00
parent 11167cb9b3
commit 450db9f817
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+8 -3
View File
@@ -11,7 +11,7 @@ interface ChatInputStyleSelectorViewProps
export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props => export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
{ {
const { chatStyleIds = null, selectChatStyleId = null } = props; const { chatStyleId = 0, chatStyleIds = null, selectChatStyleId = null } = props;
const [ selectorVisible, setSelectorVisible ] = useState(false); const [ selectorVisible, setSelectorVisible ] = useState(false);
const selectStyle = (styleId: number) => const selectStyle = (styleId: number) =>
@@ -23,8 +23,13 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
return ( return (
<Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}> <Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
<Popover.Trigger asChild> <Popover.Trigger asChild>
<div className="chatstyles-anchor"> <div className="flex h-[26px] items-center gap-[3px] cursor-pointer select-none pl-[2px]" aria-label="Stili chat">
<div className="nitro-icon chatstyles-icon" /> <svg className="h-[9px] w-[9px] shrink-0 text-black/70" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 3 } d="M19 9l-7 7-7-7" />
</svg>
<div className="relative h-[24px] w-[30px] overflow-hidden pointer-events-none">
<div className={ `chat-bubble bubble-${ chatStyleId } absolute left-0 top-[1px] h-[22px] w-[52px]` } />
</div>
</div> </div>
</Popover.Trigger> </Popover.Trigger>
<Popover.Portal> <Popover.Portal>