some small changes

nushea · nushea · commit 90d5ab2c1324 · 2026-07-05T15:21:14.000+03:00
Signed-off-by: Shea &lt;nu@she-a.eu&gt;
diff --git a/src/app/components/message/modals/Options.tsx b/src/app/components/message/modals/Options.tsx
@@ -654,35 +654,35 @@ export function OptionMenu({
                   Reply
                 </Text>
               </MenuItem>
-              {!isThreadedMessage && (
+              {canEditEvent(mx, mEvent) && onEditId && (
                 <MenuItem
                   size="300"
-                  after={menuIcon(ChatCircleDots)}
+                  after={menuIcon(PencilSimple)}
                   radii="300"
                   data-event-id={mEvent.getId()}
-                  onClick={(evt) => {
-                    onReplyClick(evt, true);
+                  onClick={() => {
+                    onEditId(mEvent.getId());
                     onTotalClose();
                   }}
                 >
                   <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                    Reply in Thread
+                    Edit Message
                   </Text>
                 </MenuItem>
               )}
-              {canEditEvent(mx, mEvent) && onEditId && (
+              {!isThreadedMessage && (
                 <MenuItem
                   size="300"
-                  after={menuIcon(PencilSimple)}
+                  after={menuIcon(ChatCircleDots)}
                   radii="300"
                   data-event-id={mEvent.getId()}
-                  onClick={() => {
-                    onEditId(mEvent.getId());
+                  onClick={(evt) => {
+                    onReplyClick(evt, true);
                     onTotalClose();
                   }}
                 >
                   <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                    Edit Message
+                    Reply in Thread
                   </Text>
                 </MenuItem>
               )}
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
@@ -78,14 +78,14 @@ export enum SettingsPages {
 
 type PhosphorIcon = ComponentType<IconProps>;
 
-type SettingsMenuItem = {
+export type SettingsMenuItem = {
   id: SettingsSectionId;
   name: string;
   icon: PhosphorIcon;
   activeIcon?: PhosphorIcon;
 };
 
-const settingsMenuIcons: Record<
+export const settingsMenuIcons: Record<
   SettingsSectionId,
   Pick<SettingsMenuItem, 'icon' | 'activeIcon'>
 > = {
diff --git a/src/app/pages/client/profile/Profile.tsx b/src/app/pages/client/profile/Profile.tsx
@@ -1,7 +1,22 @@
-import { Box, toRem, Text, color, config, Menu, Icon, Icons, Line, MenuItem } from 'folds';
-import { SquaresFour, sizedIcon } from '$components/icons/phosphor';
+import {
+  Box,
+  toRem,
+  Text,
+  color,
+  config,
+  Menu,
+  Icon,
+  Icons,
+  Line,
+  MenuItem,
+  Button,
+  OverlayBackdrop,
+  Overlay,
+  OverlayCenter,
+} from 'folds';
+import { SquaresFour, menuIcon, settingsNavIcon, sizedIcon } from '$components/icons/phosphor';
 import { PageNav, PageNavHeader } from '$components/page';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
@@ -19,8 +34,14 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { useUserPresence } from '$hooks/useUserPresence';
 import { useUserProfile } from '$hooks/useUserProfile';
-import { useOpenSettings } from '$features/settings';
+import type { SettingsMenuItem } from '$features/settings';
+import { settingsMenuIcons, settingsSections, useOpenSettings } from '$features/settings';
 import { UserQuickTools } from '../sidebar/UserQuickTools';
+import { SignOutIcon } from '@phosphor-icons/react';
+import { UseStateProvider } from '$components/UseStateProvider';
+import { FocusTrap } from 'focus-trap-react';
+import { LogoutDialog } from '$components/LogoutDialog';
+import { stopPropagation } from '$utils/keyboard';
 
 export function ProfileMobile() {
   const mx = useMatrixClient();
@@ -31,6 +52,7 @@ export function ProfileMobile() {
   const userId = mx.getUserId() ?? '';
   const profile = useUserProfile(userId);
   const presence = useUserPresence(userId);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(true);
 
   const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
   const heroAvatarUrl = profile.avatarUrl
@@ -54,6 +76,18 @@ export function ProfileMobile() {
   const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
 
+  const [showPersona] = useSetting(settingsAtom, 'showPersonaSetting');
+  const menuItems = useMemo<SettingsMenuItem[]>(
+    () =>
+      settingsSections
+        .filter((section) => showPersona || section.id !== 'persona')
+        .map((section) => {
+          const icon = settingsMenuIcons[section.id];
+          return { id: section.id, name: section.label, ...icon };
+        }),
+    [showPersona]
+  );
+
   return (
     <>
       {!isMobile && (
@@ -99,9 +133,18 @@ export function ProfileMobile() {
         direction="Column"
         gap="0"
         alignItems="Center"
+        justifyContent="SpaceBetween"
         style={{ width: '100%', minWidth: '100%' }}
       >
-        <Menu style={{ minWidth: '100%', overflowY: 'scroll' }}>
+        <Menu
+          style={{
+            minWidth: '100%',
+            minHeight: '100%',
+            overflowY: 'scroll',
+            border: 'none',
+            background: color.Background.Container,
+          }}
+        >
           <UserHero
             userId={userId}
             avatarUrl={heroAvatarUrl}
@@ -119,7 +162,10 @@ export function ProfileMobile() {
             <UnverifiedMenuOption />
           </Box>
           <Line variant="Surface" size="300" />
-          <PresenceMenuOption initialOpen isMobile />
+
+          <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+            <PresenceMenuOption isMobile />
+          </Box>
           <AccountMenuOption isMobile />
 
           <Line variant="Surface" size="300" />
@@ -128,13 +174,73 @@ export function ProfileMobile() {
             <MenuItem
               size="300"
               radii="300"
+              variant="Background"
               before={<Icon size="100" src={Icons.Setting} />}
-              onClick={() => openSettings()}
+              after={
+                <Icon
+                  size="100"
+                  src={isSettingsOpen && isMobile ? Icons.ChevronBottom : Icons.ChevronRight}
+                />
+              }
+              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
             >
               <Text style={{ flexGrow: 1 }} size="T300">
                 Settings
               </Text>
             </MenuItem>
+            {isSettingsOpen && (
+              <div style={{ paddingLeft: config.space.S100 }}>
+                {menuItems.map((item) => {
+                  const IconComponent = item.icon;
+
+                  return (
+                    <MenuItem
+                      key={item.id}
+                      radii="400"
+                      size="300"
+                      variant="Background"
+                      before={settingsNavIcon(IconComponent, false)}
+                      onClick={() => openSettings(item.id)}
+                    >
+                      <Text size="T300" truncate>
+                        {item.name}
+                      </Text>
+                    </MenuItem>
+                  );
+                })}
+
+                <UseStateProvider initial={false}>
+                  {(logout, setLogout) => (
+                    <>
+                      <MenuItem
+                        size="300"
+                        variant="Background"
+                        style={{ color: color.Critical.OnContainer }}
+                        before={menuIcon(SignOutIcon)}
+                        onClick={() => setLogout(true)}
+                      >
+                        <Text size="B400">Logout</Text>
+                      </MenuItem>
+                      {logout && (
+                        <Overlay open backdrop={<OverlayBackdrop />}>
+                          <OverlayCenter>
+                            <FocusTrap
+                              focusTrapOptions={{
+                                onDeactivate: () => setLogout(false),
+                                clickOutsideDeactivates: true,
+                                escapeDeactivates: stopPropagation,
+                              }}
+                            >
+                              <LogoutDialog handleClose={() => setLogout(false)} />
+                            </FocusTrap>
+                          </OverlayCenter>
+                        </Overlay>
+                      )}
+                    </>
+                  )}
+                </UseStateProvider>
+              </div>
+            )}
           </Box>
         </Menu>
       </Box>
diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx
@@ -21,7 +21,7 @@ import {
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useNavToActivePathAtom } from '$state/hooks/navToActivePath';
 import { useInviteCount } from '$hooks/useInviteCount';
-import { Text, Box } from 'folds';
+import { Text, Box, color } from 'folds';
 import { searchModalAtom } from '$state/searchModal';
 import { EnvelopeSimple, getPhosphorIconSize, Tray } from '$components/icons/phosphor';
 import { BookmarkIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';
@@ -56,7 +56,7 @@ export function InboxTab({ isBottom, isMobile }: { isBottom?: boolean; isMobile?
   };
 
   return (
-    <SidebarItem active={opened} isBottom={isBottom}>
+    <SidebarItem active={opened && !isMobile} isBottom={isBottom}>
       <SidebarItemTooltip tooltip="Inbox" position={isBottom ? 'Top' : 'Right'}>
         {(triggerRef) => (
           <Box direction="Column" alignItems="Center">
@@ -68,15 +68,35 @@ export function InboxTab({ isBottom, isMobile }: { isBottom?: boolean; isMobile?
               size={'400'}
             >
               {(notificationsSelected && (
-                <ChatCircleDotsIcon size={InboxIconSize} weight="fill" />
+                <ChatCircleDotsIcon
+                  size={InboxIconSize}
+                  weight="fill"
+                  color={opened && isMobile ? color.Primary.Main : color.Background.OnContainer}
+                />
               )) ||
-                (bookmarksSelected && <BookmarkIcon size={InboxIconSize} weight="fill" />) ||
-                (invitesSelected && <EnvelopeSimple size={InboxIconSize} weight="fill" />) || (
-                  <Tray size={InboxIconSize} weight={inboxSelected ? 'fill' : 'regular'} />
+                (bookmarksSelected && (
+                  <BookmarkIcon
+                    size={InboxIconSize}
+                    weight="fill"
+                    color={opened && isMobile ? color.Primary.Main : color.Background.OnContainer}
+                  />
+                )) ||
+                (invitesSelected && (
+                  <EnvelopeSimple
+                    size={InboxIconSize}
+                    weight="fill"
+                    color={opened && isMobile ? color.Primary.Main : color.Background.OnContainer}
+                  />
+                )) || (
+                  <Tray
+                    size={InboxIconSize}
+                    weight={inboxSelected ? 'fill' : 'regular'}
+                    color={opened && isMobile ? color.Primary.Main : color.Background.OnContainer}
+                  />
                 )}
             </SidebarAvatar>
             {isMobile && (
-              <Text size="O400" priority="300">
+              <Text size="B300" priority="300">
                 Inbox
               </Text>
             )}
diff --git a/src/app/pages/client/sidebar/MessageTab.tsx b/src/app/pages/client/sidebar/MessageTab.tsx
@@ -63,7 +63,7 @@ export function MessageTab({ isBottom, isMobile }: { isBottom?: boolean; isMobil
     : undefined;
 
   return (
-    <SidebarItem active={opened} isBottom={isBottom}>
+    <SidebarItem active={opened && !isMobile} isBottom={isBottom}>
       <SidebarItemTooltip tooltip="Messages" position={isBottom ? 'Top' : 'Right'}>
         {(triggerRef) => (
           <Box direction="Column" alignItems="Center">
@@ -96,7 +96,7 @@ export function MessageTab({ isBottom, isMobile }: { isBottom?: boolean; isMobil
               </Box>
             )}
             {isMobile && (
-              <Text size="O400" priority="300">
+              <Text size="B300" priority="300">
                 Messages
               </Text>
             )}
diff --git a/src/app/pages/client/sidebar/NavigateTab.tsx b/src/app/pages/client/sidebar/NavigateTab.tsx
@@ -19,7 +19,7 @@ export function NavigateTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
   };
 
   return (
-    <SidebarItem active={opened} isBottom={isBottom}>
+    <SidebarItem active={opened && !isMobile} isBottom={isBottom}>
       <SidebarItemTooltip tooltip="Search" position={isBottom ? 'Top' : 'Right'}>
         {(triggerRef) => (
           <Box direction="Column" alignItems="Center">
@@ -37,7 +37,7 @@ export function NavigateTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
               />
             </SidebarAvatar>
             {isMobile && (
-              <Text size="O400" priority="300">
+              <Text size="B300" priority="300">
                 Navigate
               </Text>
             )}
diff --git a/src/app/pages/client/sidebar/UserMenuTab.tsx b/src/app/pages/client/sidebar/UserMenuTab.tsx
