maybe better unverified and fix righthand view things

Signed-off-by: Shea <nu@she-a.eu>

Author: nushea

src/app/components/message/modals/GlobalModalManager.tsx

@@ -34,8 +34,8 @@ export function GlobalModalManager() {
           focusTrapOptions={{
             initialFocus: false,
             onDeactivate: close,
-            allowOutsideClick: (e) => {
-              e.preventDefault();
+            allowOutsideClick: (e: { preventDefault?: () => void }) => {
+              if (e.preventDefault) e.preventDefault();
               close();
               return false;
             },

src/app/components/unverified-notice/UnverifiedNoticeBanner.tsx

@@ -4,35 +4,42 @@ import * as css from './UnverifiedNoticeBanner.css';
 import { useOpenSettings } from '$features/settings';
 import { ShieldWarningIcon } from '@phosphor-icons/react';
 import { useIsUnverified, useUnverifiedDevices } from '$pages/client/sidebar/UserMenuTab';
-import { atom, useAtom } from 'jotai';
+import { getLocalStorageItem, setLocalStorageItem } from '$state/utils/atomWithLocalStorage';
 import { useEffect, useState } from 'react';
 
-const dismissedNotice = atom<boolean>(false);
-
 export function UnverifiedNoticeBanner() {
   const openSettings = useOpenSettings();
-  const [isDismissedNotice, setDismissedNotice] = useAtom(dismissedNotice);
 
   const isUnverified = useIsUnverified();
-  const unverifiedDeviceCount = useUnverifiedDevices() ?? 0;
+  const unverifiedDeviceCount = useUnverifiedDevices();
   const hasUnverified =
     isUnverified || (unverifiedDeviceCount !== undefined && unverifiedDeviceCount > 0);
   const [dismissCount, setDismissCount] = useState(unverifiedDeviceCount);
 
+  const [isDismissedNotice, setIsDismissedNotice] = useState(
+    getLocalStorageItem('dismissNotice', false)
+  );
   useEffect(() => {
-    if (unverifiedDeviceCount > 0 && dismissCount < unverifiedDeviceCount)
-      setDismissedNotice(false);
+    if (
+      unverifiedDeviceCount &&
+      dismissCount &&
+      unverifiedDeviceCount > 0 &&
+      dismissCount < unverifiedDeviceCount
+    ) {
+      setLocalStorageItem('dismissNotice', false);
+      setIsDismissedNotice(false);
+    }
     setDismissCount(unverifiedDeviceCount);
-  }, [unverifiedDeviceCount, setDismissedNotice, dismissCount]);
+  }, [unverifiedDeviceCount, dismissCount]);
 
   if (!hasUnverified || isDismissedNotice) return null;
 
   const handleVerify = () => {
     openSettings('devices');
   };
-
   const handleDismiss = () => {
-    setDismissedNotice(true);
+    setLocalStorageItem('dismissNotice', true);
+    setIsDismissedNotice(true);
   };
 
   return (

src/app/pages/client/sidebar/UserMenuTab.tsx

@@ -20,7 +20,7 @@ import {
   config,
   toRem,
 } from 'folds';
-import FocusTrap from 'focus-trap-react';
+import { FocusTrap } from 'focus-trap-react';
 import { SidebarAvatar, SidebarItem, SidebarItemBadge } from '../../../components/sidebar';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -150,7 +150,7 @@ function AccountRow({
   );
 }
 
-export function AccountMenuOption({ isMobile }: { isMobile: boolean }) {
+export function AccountMenuOption({ isMobile, isRight }: { isMobile: boolean; isRight?: boolean }) {
   const mx = useMatrixClient();
   const navigate = useNavigate();
   const sessions = useAtomValue(sessionsAtom);
@@ -286,7 +286,8 @@ export function AccountMenuOption({ isMobile }: { isMobile: boolean }) {
               : {
                   minWidth: toRem(240),
                   position: 'absolute',
-                  left: '98%',
+                  left: isRight ? undefined : '98%',
+                  right: isRight ? '98%' : undefined,
                   padding: toRem(15),
                   bottom: toRem(-15),
                 }
@@ -389,9 +390,11 @@ const PresenceOptions: Array<{ value: Presence; label: string }> = [
 export function PresenceMenuOption({
   initialOpen,
   isMobile,
+  isRight,
 }: {
   initialOpen: boolean;
   isMobile: boolean;
+  isRight?: boolean;
 }) {
   const mx = useMatrixClient();
   const [sendPresence] = useSetting(settingsAtom, 'sendPresence');
@@ -488,7 +491,8 @@ export function PresenceMenuOption({
               : {
                   minWidth: toRem(240),
                   position: 'absolute',
-                  left: '98%',
+                  left: isRight ? undefined : '98%',
+                  right: isRight ? '98%' : undefined,
                   padding: toRem(15),
                   bottom: toRem(25),
                 }
@@ -751,10 +755,17 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
                     </Text>
                   </MenuItem>
 
-                  <PresenceMenuOption initialOpen={false} isMobile={isMobile ?? false} />
+                  <PresenceMenuOption
+                    initialOpen={false}
+                    isMobile={isMobile ?? false}
+                    isRight={(menuAnchor?.x ?? 0) > window.innerWidth / 2}
+                  />
                 </Box>
 
-                <AccountMenuOption isMobile={isMobile ?? false} />
+                <AccountMenuOption
+                  isMobile={isMobile ?? false}
+                  isRight={(menuAnchor?.x ?? 0) > window.innerWidth / 2}
+                />
                 {(oldSidebar || isMobile) && (
                   <>
                     <Line variant="Surface" size="300" />

src/app/pages/client/space/Space.tsx

@@ -1050,7 +1050,7 @@ export function Space() {
                 })}
                 {getConnectorSVG(hierarchy, virtualizedItems)}
               </NavCategory>
-              <div style={{ height: toRem(40) }} />
+              {!isMobile && <div style={{ height: toRem(40) }} />}
             </Box>
           </PageNavContent>
         </SwipeableOverlayWrapper>