feat(social): add listening activity, shared rooms and modern chat

apps/web/src/shared/ui/ui.tsx

@@ -210,6 +210,7 @@ export function Menu({
   header,
   align = 'end',
   triggerClassName,
+  portal = false,
 }: {
   label: string;
   trigger: ReactNode;
@@ -217,8 +218,10 @@ export function Menu({
   header?: ReactNode;
   align?: 'start' | 'end';
   triggerClassName?: string;
+  portal?: boolean;
 }) {
   const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<CSSProperties>();
   const ref = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -246,7 +249,7 @@ export function Menu({
     els[next]?.focus();
   };
   const menu = (
-    <div ref={menuRef} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
+      <div ref={menuRef} style={portal && !window.matchMedia?.('(max-width: 767px)').matches ? position : undefined} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
       {header}
       {items.map((it) => (
         <button
@@ -273,11 +276,18 @@ export function Menu({
         aria-label={label}
         aria-haspopup="menu"
         aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+          onClick={e => {
+            if (portal) {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const bottom = Math.max(12, window.innerHeight - rect.top + 6);
+              setPosition({ position: 'fixed', zIndex: 60, top: 'auto', bottom, right: Math.max(12, window.innerWidth - rect.right), maxHeight: Math.max(120, window.innerHeight - bottom - 12), overflowY: 'auto' });
+            }
+            setOpen(v => !v);
+          }}
       >
         {trigger}
       </button>
-      {open && (window.matchMedia?.('(max-width: 767px)').matches
+        {open && (portal || window.matchMedia?.('(max-width: 767px)').matches
         ? createPortal(menu, document.body)
         : menu)}
     </div>