Merge remote-tracking branch 'duckie/main' into merge-duckie-main-2026-05-06

# Conflicts:
#	index.html
#	public/UITexts.example
#	public/renderer-config.example
#	src/App.tsx
#	src/components/login/LoginView.tsx
#	src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
#	src/components/toolbar/ToolbarView.tsx
#	src/components/user-profile/UserContainerView.tsx

src/components/room/widgets/chat-input/ChatInputEmojiSelectorView.tsx

@@ -1,7 +1,7 @@
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
+import * as Popover from '@radix-ui/react-popover';
 import { FC, useState } from 'react';
-import { Popover } from 'react-tiny-popover';
 
 interface ChatInputEmojiSelectorViewProps
 {
@@ -19,19 +19,16 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
         setSelectorVisible(false);
     };
 
-    const toggleSelector = () => setSelectorVisible(prev => !prev);
-
     return (
-        <div>
-            <Popover
-                containerClassName="z-[1070]"
-                content={ <Picker data={ data } onEmojiSelect={ handleEmojiSelect } /> }
-                isOpen={ selectorVisible }
-                positions={ [ 'top' ] }
-                onClickOutside={ () => setSelectorVisible(false) }
-            >
-                <div className="cursor-pointer text-lg select-none px-1" onClick={ toggleSelector }>🙂</div>
-            </Popover>
-        </div>
+        <Popover.Root open={ selectorVisible } onOpenChange={ setSelectorVisible }>
+            <Popover.Trigger asChild>
+                <div className="cursor-pointer text-lg select-none px-1">🙂</div>
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content className="z-[1070]" side="top" sideOffset={ 8 }>
+                    <Picker data={ data } onEmojiSelect={ handleEmojiSelect } />
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
     );
 };

src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx

@@ -1,5 +1,5 @@
+import * as Popover from '@radix-ui/react-popover';
 import { FC, useState } from 'react';
-import { ArrowContainer, Popover } from 'react-tiny-popover';
 import { Flex, Grid, NitroCardContentView } from '../../../../common';
 
 interface ChatInputStyleSelectorViewProps
@@ -21,20 +21,17 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
   };
 
   return (
-    <Popover
-      padding={12}
-      isOpen={selectorVisible}
-      positions={['top']}
-      reposition={false}
-      containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
-      content={({ position, childRect, popoverRect }) => (
-        <ArrowContainer
-          arrowColor={'black'}
-          arrowSize={7}
-          arrowStyle={{ bottom: 'calc(-.5rem - 1px)' }}
-          childRect={childRect}
-          popoverRect={popoverRect}
-          position={position}
+    <Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
+      <Popover.Trigger asChild>
+        <div className="chatstyles-anchor">
+          <div className="nitro-icon chatstyles-icon" />
+        </div>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side="top"
+          sideOffset={12}
+          className="max-w-[276px] not-italic font-normal leading-normal text-left no-underline normal-case tracking-normal whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-solid border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
         >
           <NitroCardContentView className="bg-transparent max-h-[210px]!" overflow="hidden">
             <Grid columnCount={3} overflow="auto">
@@ -47,15 +44,9 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
               ))}
             </Grid>
           </NitroCardContentView>
-        </ArrowContainer>
-      )}
-    >
-      <div
-        className="chatstyles-anchor"
-        onClick={() => setSelectorVisible(v => !v)}
-      >
-        <div className="nitro-icon chatstyles-icon" />
-      </div>
-    </Popover>
+          <Popover.Arrow className="fill-black" width={14} height={7} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
-};
+};