Fix the new sidebar items

src/app/components/message/RenderBody.tsx

@@ -119,6 +119,11 @@ function AbbreviationTerm({ text, definition }: AbbreviationTermProps) {
 
   return (
     <>
+      {anchor && (
+        <PopOut anchor={anchor} position="Top" align="Center" content={tooltipContent}>
+          {null}
+        </PopOut>
+      )}
       <TooltipProvider position="Top" tooltip={tooltipContent}>
         {(triggerRef) => (
           <button
@@ -141,11 +146,6 @@ function AbbreviationTerm({ text, definition }: AbbreviationTermProps) {
           </button>
         )}
       </TooltipProvider>
-      {anchor && (
-        <PopOut anchor={anchor} position="Top" align="Center" content={tooltipContent}>
-          {null}
-        </PopOut>
-      )}
     </>
   );
 }

src/app/components/sidebar/Sidebar.css.ts

@@ -118,7 +118,7 @@ export const SidebarItem = recipe({
   },
 });
 
-const PUSH_Y = 0;
+const PUSH_Y = 3;
 export const SidebarItemBottom = recipe({
   base: [
     DefaultReset,

src/app/features/settings/cosmetics/Themes.tsx

@@ -230,6 +230,7 @@ function ThemeVisualPreferences() {
   const [autoplayGifs, setAutoplayGifs] = useSetting(settingsAtom, 'autoplayGifs');
   const [autoplayStickers, setAutoplayStickers] = useSetting(settingsAtom, 'autoplayStickers');
   const [autoplayEmojis, setAutoplayEmojis] = useSetting(settingsAtom, 'autoplayEmojis');
+  const [oldSidebar, setOldSidebar] = useSetting(settingsAtom, 'oldSidebar');
   const [pixelatedImageRendering, setPixelatedImageRendering] = useSetting(
     settingsAtom,
     'pixelatedImageRendering'
@@ -337,6 +338,14 @@ function ThemeVisualPreferences() {
           after={<Switch variant="Primary" value={autoplayGifs} onChange={setAutoplayGifs} />}
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Go back to old sidebar"
+          focusId="old-sidebar"
+          description="Reset the sidebar to its old style"
+          after={<Switch variant="Primary" value={oldSidebar} onChange={setOldSidebar} />}
+        />
+      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Pixelated image scaling"

src/app/features/settings/settingsLink.ts

@@ -87,6 +87,7 @@ const settingsLinkFocusIdsBySection: Record<SettingsSectionId, readonly string[]
   persona: ['enable-pk-commands', 'enable-pk-shorthands'],
   appearance: [
     'autoplay-emojis',
+    'old-sidebar',
     'autoplay-gifs',
     'autoplay-stickers',
     'blur-avatars',

src/app/pages/client/SidebarNav.tsx

@@ -19,6 +19,7 @@ import { CreateTab } from './sidebar/CreateTab';
 import { SearchTab } from './sidebar/SearchTab';
 import { SettingsTab } from './sidebar/SettingsTab';
 import { UserQuickTools } from './sidebar/UserQuickTools';
+import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
 
 export function SidebarNav() {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -29,11 +30,15 @@ export function SidebarNav() {
   const [badgeCountDMsOnly, setBadgeCountDMsOnly] = useSetting(settingsAtom, 'badgeCountDMsOnly');
   const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts');
 
+  const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
+
   const [roomSidebarWidth] = useSetting(settingsAtom, 'roomSidebarWidth');
 
+  const screenSize = useScreenSizeContext();
+  const compact = screenSize === ScreenSize.Mobile;
+
   const width = roomSidebarWidth + 66;
-  const underOutstep = width < 190 + 66;
-  const isCollapsed = width < 50 + 66;
+  const isCollapsed = compact ? false : width < 190 + 66;
 
   const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
     const target = evt.target as HTMLElement;
@@ -140,22 +145,36 @@ export function SidebarNav() {
           }
           sticky={
             <SidebarStack>
-              {underOutstep && (
+              <UnverifiedTab />
+              {oldSidebar ? (
                 <>
                   <SearchTab />
-                  <UnverifiedTab />
                   <InboxTab />
+                  <div style={{ paddingBottom: config.space.S100 }}>
+                    {/*PROBS ADD SETTINGSTAB HERE WHEN ADDING THE STATUSES*/}
+                    <AccountSwitcherTab />
+                  </div>
                 </>
-              )}
-
-              {isCollapsed && <SettingsTab />}
+              ) : (
+                <>
+                  {isCollapsed && (
+                    <>
+                      <SearchTab />
+                      <InboxTab />
+                      <SettingsTab />
+                    </>
+                  )}
 
-              <AccountSwitcherTab />
+                  <Box style={{ height: toRem(57) }} alignItems="Center">
+                    <AccountSwitcherTab />
+                  </Box>
+                </>
+              )}
             </SidebarStack>
           }
         />
       </Sidebar>
-      <UserQuickTools width={width} />
+      {!oldSidebar && <UserQuickTools width={width} />}
     </>
   );
 }

src/app/pages/client/home/Home.tsx

@@ -80,7 +80,6 @@ import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useClientConfig } from '$hooks/useClientConfig';
 import { getMxIdServer } from '$utils/mxIdHelper';
-import { UserQuickTools } from '../sidebar/UserQuickTools';
 import { isResizingSidebarAtom } from '$state/isResizingSidebar';
 
 type HomeMenuProps = {
@@ -554,7 +553,6 @@ export function Home() {
           setAnnouncement={setIsResizingSidebar}
         />
       )}
-      <UserQuickTools width={curWidth + 66} />
     </Box>
   );
 }

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

@@ -14,6 +14,7 @@ import {
   toRem,
   Chip,
   Spinner,
+  Line,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
@@ -41,7 +42,9 @@ import { Modal500 } from '$components/Modal500';
 import { createLogger } from '$utils/debug';
 import { useClientConfig } from '$hooks/useClientConfig';
 import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
-import { Check, chipIcon, Plus } from '$components/icons/phosphor';
+import { Check, chipIcon, GearSix, menuIcon, Plus } from '$components/icons/phosphor';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 
 const log = createLogger('AccountSwitcherTab');
 
@@ -144,6 +147,7 @@ export function AccountSwitcherTab({ isBottom }: { isBottom?: boolean }) {
   const backgroundUnreads = useAtomValue(backgroundUnreadCountsAtom);
   const setBackgroundUnreads = useSetAtom(backgroundUnreadCountsAtom);
   const openSettings = useOpenSettings();
+  const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
 
   // Total unread count across all background sessions (for the sidebar badge).
   const totalBackgroundUnread = Object.entries(backgroundUnreads)
@@ -245,6 +249,11 @@ export function AccountSwitcherTab({ isBottom }: { isBottom?: boolean }) {
     setTimeout(() => window.location.assign(url), 100);
   };
 
+  const handleOpenSettings = () => {
+    setMenuAnchor(undefined);
+    openSettings();
+  };
+
   const activeLocalPart =
     getMxIdLocalPart(activeSession?.userId ?? '') ?? activeSession?.userId ?? '';
   const label = activeDisplayName ?? activeLocalPart;
@@ -331,6 +340,24 @@ export function AccountSwitcherTab({ isBottom }: { isBottom?: boolean }) {
                 <MenuItem size="300" radii="300" before={chipIcon(Plus)} onClick={handleAddAccount}>
                   <Text size="T300">Add Account</Text>
                 </MenuItem>
+                {/*This will defo need to be reverted w the new statuses, w the right changes in the SidebarNav to make the cog a permanent fixture but democracy wants old style*/}
+                {oldSidebar && (
+                  <>
+                    <Line
+                      variant="Surface"
+                      size="300"
+                      style={{ margin: `${config.space.S100} 0` }}
+                    />
+                    <MenuItem
+                      size="300"
+                      radii="300"
+                      before={menuIcon(GearSix)}
+                      onClick={handleOpenSettings}
+                    >
+                      <Text size="T300">Settings</Text>
+                    </MenuItem>
+                  </>
+                )}
               </Box>
             </Menu>
           </FocusTrap>

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

@@ -171,7 +171,7 @@ export function CreateTab() {
               ref={triggerRef}
               outlined
               onClick={handleMenu}
-              size="300"
+              size="400"
             >
               {(joinAddress && <Link size={getPhosphorSize().toolbar} />) ||
                 (exploreSelected && (

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

@@ -49,10 +49,10 @@ export function InboxTab({ isBottom }: { isBottom?: boolean }) {
             ref={triggerRef}
             outlined
             onClick={handleInboxClick}
-            size="300"
+            size={'400'}
           >
             <Tray
-              size={getPhosphorIconSize('inline')}
+              size={getPhosphorIconSize(isBottom ? 'inline' : 'toolbar')}
               weight={inboxSelected ? 'fill' : 'regular'}
             />
           </SidebarAvatar>

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

@@ -13,9 +13,9 @@ export function SearchTab({ isBottom }: { isBottom?: boolean }) {
     <SidebarItem active={opened} isBottom={isBottom}>
       <SidebarItemTooltip tooltip="Search" position={isBottom ? 'Top' : 'Right'}>
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={open} size="300">
+          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={open} size={'400'}>
             <ListMagnifyingGlassIcon
-              size={getPhosphorIconSize('inline')}
+              size={getPhosphorIconSize(isBottom ? 'inline' : 'toolbar')}
               weight={opened ? 'fill' : 'regular'}
             />
           </SidebarAvatar>

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

@@ -1,5 +1,5 @@
 import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar';
-import { GearSix, getPhosphorSize } from '$components/icons/phosphor';
+import { GearSix, getPhosphorIconSize } from '$components/icons/phosphor';
 import { useOpenSettings } from '$features/settings';
 import { matchPath } from 'react-router-dom';
 import { SETTINGS_PATH } from '$pages/paths';
@@ -10,10 +10,13 @@ export function SettingsTab({ isBottom }: { isBottom?: boolean }) {
 
   return (
     <SidebarItem active={opened} isBottom={isBottom}>
-      <SidebarItemTooltip tooltip="Search" position={isBottom ? 'Top' : 'Right'}>
+      <SidebarItemTooltip tooltip="Settings" position={isBottom ? 'Top' : 'Right'}>
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={openSettings} size="300">
-            <GearSix size={getPhosphorSize().inline} weight={opened ? 'fill' : 'regular'} />
+          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={openSettings} size={'400'}>
+            <GearSix
+              size={getPhosphorIconSize(isBottom ? 'inline' : 'toolbar')}
+              weight={opened ? 'fill' : 'regular'}
+            />
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>

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

@@ -52,7 +52,7 @@ function UnverifiedIndicator({ isBottom }: { isBottom?: boolean }) {
           >
             {(triggerRef) => (
               <SidebarAvatar
-                size="300"
+                size={'400'}
                 className={unverified ? css.UnverifiedAvatar : css.UnverifiedOtherAvatar}
                 as="button"
                 ref={triggerRef}
@@ -63,7 +63,7 @@ function UnverifiedIndicator({ isBottom }: { isBottom?: boolean }) {
                   style={{
                     color: unverified ? color.Critical.Main : color.Warning.Main,
                   }}
-                  size={getPhosphorIconSize('toolbar')}
+                  size={getPhosphorIconSize(isBottom ? 'inline' : 'toolbar')}
                 />
               </SidebarAvatar>
             )}

src/app/pages/client/sidebar/UserQuickTools.css.ts

@@ -4,11 +4,11 @@ import { color, config, toRem } from 'folds';
 export const UserQuickTools = style({
   backgroundColor: color.SurfaceVariant.Container,
   color: color.SurfaceVariant.OnContainer,
-  position: 'fixed',
+  position: 'absolute',
   zIndex: '1000',
-  height: toRem(58),
+  height: toRem(74),
   bottom: '0',
-  left: '0',
+  left: toRem(-66),
   padding: config.space.S300,
   borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 });

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

@@ -1,6 +1,5 @@
 import { Box, config, toRem } from 'folds';
 import { AccountSwitcherTab } from './AccountSwitcherTab';
-import { UnverifiedTab } from './UnverifiedTab';
 import { InboxTab } from './InboxTab';
 import { SearchTab } from './SearchTab';
 import { SettingsTab } from './SettingsTab';
@@ -16,44 +15,45 @@ export function UserQuickTools({
   underOutstep?: boolean;
   width: number;
 }) {
-  const [isResizingSidebar] = useAtom(isResizingSidebarAtom);
-  const underOutstep = width < 190 + 66;
-  const isCollapsed = width < 50 + 66;
-
   const screenSize = useScreenSizeContext();
   const compact = screenSize === ScreenSize.Mobile;
 
+  const [isResizingSidebar] = useAtom(isResizingSidebarAtom);
+  const isCollapsed = compact ? false : width < 190 + 66;
+
   return (
     <>
       {/* Doing it properly and nicely would require a major rewrite that would cause more trouble*/}
       {!isCollapsed && (
-        <Box
-          direction="Row"
-          justifyContent="SpaceBetween"
-          className={css.UserQuickTools}
-          style={{
-            opacity: isResizingSidebar ? '0%' : '100%',
-            transition: isResizingSidebar ? 'opacity 0.2s ease' : 'opacity 0.5s ease',
-            width: compact ? '100%' : toRem(width),
-            paddingRight: underOutstep ? config.space.S200 : config.space.S300,
-          }}
-        >
-          <AccountSwitcherTab isBottom />
+        <div style={{ position: 'relative' }}>
           <Box
+            direction="Row"
+            justifyContent="SpaceBetween"
+            alignItems="Center"
+            className={css.UserQuickTools}
             style={{
-              gap: config.space.S300,
+              opacity: isResizingSidebar ? '0%' : '100%',
+              transition: isResizingSidebar ? 'opacity 0.2s ease' : 'opacity 0.5s ease',
+              width: compact ? '100vw' : toRem(width),
+              paddingRight: config.space.S300,
             }}
           >
-            {!underOutstep && (
-              <>
-                <UnverifiedTab isBottom />
-                <InboxTab isBottom />
-                <SearchTab isBottom />
-              </>
-            )}
-            <SettingsTab isBottom />
+            <AccountSwitcherTab isBottom />
+            <Box
+              style={{
+                gap: config.space.S300,
+              }}
+            >
+              {!isCollapsed && (
+                <>
+                  <InboxTab isBottom />
+                  <SearchTab isBottom />
+                  <SettingsTab isBottom />
+                </>
+              )}
+            </Box>
           </Box>
-        </Box>
+        </div>
       )}
     </>
   );

src/app/state/settings.ts

@@ -181,6 +181,7 @@ export interface Settings {
   autoplayGifs: boolean;
   autoplayStickers: boolean;
   autoplayEmojis: boolean;
+  oldSidebar: boolean;
   pixelatedImageRendering: PixelatedImageRenderingMode;
   incomingInlineImagesDefaultHeight: number;
   incomingInlineImagesMaxHeight: number;
@@ -333,6 +334,7 @@ export const defaultSettings: Settings = {
   autoplayGifs: true,
   autoplayStickers: true,
   autoplayEmojis: true,
+  oldSidebar: false,
   pixelatedImageRendering: 'smart',
   incomingInlineImagesDefaultHeight: 32,
   incomingInlineImagesMaxHeight: 64,