From 1fa463f8c788f68e3574aa565c639fd837325b1d Mon Sep 17 00:00:00 2001
From: Shea <nu@she-a.eu>
Date: Tue, 23 Jun 2026 21:48:59 +0300
Subject: [PATCH 1/5] new version

Signed-off-by: Shea <nu@she-a.eu>
---
 src/app/components/message/RenderBody.tsx     | 10 +++----
 src/app/components/sidebar/Sidebar.css.ts     |  2 +-
 .../features/settings/cosmetics/Themes.tsx    |  9 ++++++
 src/app/features/settings/settingsLink.ts     |  1 +
 src/app/pages/client/SidebarNav.tsx           | 29 +++++++++++++++----
 src/app/pages/client/home/Home.tsx            |  2 --
 .../client/sidebar/AccountSwitcherTab.tsx     | 29 ++++++++++++++++++-
 src/app/pages/client/sidebar/CreateTab.tsx    |  2 +-
 src/app/pages/client/sidebar/InboxTab.tsx     |  4 +--
 src/app/pages/client/sidebar/SearchTab.tsx    |  4 +--
 src/app/pages/client/sidebar/SettingsTab.tsx  | 11 ++++---
 .../pages/client/sidebar/UnverifiedTab.tsx    |  4 +--
 .../client/sidebar/UserQuickTools.css.ts      |  2 +-
 .../pages/client/sidebar/UserQuickTools.tsx   |  3 +-
 src/app/state/settings.ts                     |  2 ++
 15 files changed, 86 insertions(+), 28 deletions(-)

diff --git a/src/app/components/message/RenderBody.tsx b/src/app/components/message/RenderBody.tsx
index 67217c2fb..02105f762 100644
--- a/src/app/components/message/RenderBody.tsx
+++ b/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>
-      )}
     </>
   );
 }
diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts
index 5215531f7..f97c0f9fc 100644
--- a/src/app/components/sidebar/Sidebar.css.ts
+++ b/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,
diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx
index 31fa299a5..77e4da3b4 100644
--- a/src/app/features/settings/cosmetics/Themes.tsx
+++ b/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"
diff --git a/src/app/features/settings/settingsLink.ts b/src/app/features/settings/settingsLink.ts
index 962c522ec..e3621f413 100644
--- a/src/app/features/settings/settingsLink.ts
+++ b/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',
diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index a44270828..da13250cd 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -29,6 +29,8 @@ 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 width = roomSidebarWidth + 66;
@@ -140,22 +142,37 @@ export function SidebarNav() {
           }
           sticky={
             <SidebarStack>
-              {underOutstep && (
+              {oldSidebar ? (
                 <>
                   <SearchTab />
                   <UnverifiedTab />
                   <InboxTab />
+                  <div style={{ paddingBottom: config.space.S100 }}>
+                    {/*PROBS ADD SETTINGSTAB HERE WHEN ADDING THE STATUSES*/}
+                    <AccountSwitcherTab />
+                  </div>
                 </>
-              )}
-
-              {isCollapsed && <SettingsTab />}
+              ) : (
+                <>
+                  {underOutstep && (
+                    <>
+                      <SearchTab />
+                      <UnverifiedTab />
+                      <InboxTab />
+                    </>
+                  )}
 
-              <AccountSwitcherTab />
+                  {isCollapsed && <SettingsTab />}
+                  <Box style={{ height: toRem(70) }} alignItems="Center">
+                    <AccountSwitcherTab />
+                  </Box>
+                </>
+              )}
             </SidebarStack>
           }
         />
       </Sidebar>
-      <UserQuickTools width={width} />
+      {!oldSidebar && <UserQuickTools width={width} />}
     </>
   );
 }
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 2c8217014..3b2da2945 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/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>
   );
 }
diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx
index 712b2af67..119bbc039 100644
--- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx
+++ b/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>
diff --git a/src/app/pages/client/sidebar/CreateTab.tsx b/src/app/pages/client/sidebar/CreateTab.tsx
index 5f09bccce..7b8295a4a 100644
--- a/src/app/pages/client/sidebar/CreateTab.tsx
+++ b/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 && (
diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx
index e69ba487a..fe3f636e9 100644
--- a/src/app/pages/client/sidebar/InboxTab.tsx
+++ b/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>
diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx
index c3e072fbd..0a8045860 100644
--- a/src/app/pages/client/sidebar/SearchTab.tsx
+++ b/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>
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index b0f5d35d3..37372e2eb 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/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>
diff --git a/src/app/pages/client/sidebar/UnverifiedTab.tsx b/src/app/pages/client/sidebar/UnverifiedTab.tsx
index 919927565..74070a011 100644
--- a/src/app/pages/client/sidebar/UnverifiedTab.tsx
+++ b/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>
             )}
diff --git a/src/app/pages/client/sidebar/UserQuickTools.css.ts b/src/app/pages/client/sidebar/UserQuickTools.css.ts
index cda4ab95a..bf030a9ee 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.css.ts
+++ b/src/app/pages/client/sidebar/UserQuickTools.css.ts
@@ -6,7 +6,7 @@ export const UserQuickTools = style({
   color: color.SurfaceVariant.OnContainer,
   position: 'fixed',
   zIndex: '1000',
-  height: toRem(58),
+  height: toRem(74),
   bottom: '0',
   left: '0',
   padding: config.space.S300,
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index b5c02e921..80e4f0283 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/src/app/pages/client/sidebar/UserQuickTools.tsx
@@ -30,12 +30,13 @@ export function UserQuickTools({
         <Box
           direction="Row"
           justifyContent="SpaceBetween"
+          alignItems="Center"
           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,
+            paddingRight: config.space.S300,
           }}
         >
           <AccountSwitcherTab isBottom />
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 2bac0e9ed..0ec9d3bb2 100644
--- a/src/app/state/settings.ts
+++ b/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,

From 567a11f55ddf0e73a43b759ac7fa3a260c08b7d6 Mon Sep 17 00:00:00 2001
From: Shea <nu@she-a.eu>
Date: Tue, 23 Jun 2026 23:26:57 +0300
Subject: [PATCH 2/5] fix call view

Signed-off-by: Shea <nu@she-a.eu>
---
 src/app/pages/client/SidebarNav.tsx           |  2 +-
 .../client/sidebar/UserQuickTools.css.ts      |  4 +-
 .../pages/client/sidebar/UserQuickTools.tsx   | 48 ++++++++++---------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index da13250cd..754082da8 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -163,7 +163,7 @@ export function SidebarNav() {
                   )}
 
                   {isCollapsed && <SettingsTab />}
-                  <Box style={{ height: toRem(70) }} alignItems="Center">
+                  <Box style={{ height: toRem(58) }} alignItems="Center">
                     <AccountSwitcherTab />
                   </Box>
                 </>
diff --git a/src/app/pages/client/sidebar/UserQuickTools.css.ts b/src/app/pages/client/sidebar/UserQuickTools.css.ts
index bf030a9ee..8cd733038 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.css.ts
+++ b/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(74),
   bottom: '0',
-  left: '0',
+  left: toRem(-66),
   padding: config.space.S300,
   borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 });
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index 80e4f0283..0af265b9b 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/src/app/pages/client/sidebar/UserQuickTools.tsx
@@ -27,34 +27,36 @@ export function UserQuickTools({
     <>
       {/* Doing it properly and nicely would require a major rewrite that would cause more trouble*/}
       {!isCollapsed && (
-        <Box
-          direction="Row"
-          justifyContent="SpaceBetween"
-          alignItems="Center"
-          className={css.UserQuickTools}
-          style={{
-            opacity: isResizingSidebar ? '0%' : '100%',
-            transition: isResizingSidebar ? 'opacity 0.2s ease' : 'opacity 0.5s ease',
-            width: compact ? '100%' : toRem(width),
-            paddingRight: 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,
+              }}
+            >
+              {!underOutstep && (
+                <>
+                  <UnverifiedTab isBottom />
+                  <InboxTab isBottom />
+                  <SearchTab isBottom />
+                </>
+              )}
+              <SettingsTab isBottom />
+            </Box>
           </Box>
-        </Box>
+        </div>
       )}
     </>
   );

From 6076850906db1d981f1c536183209de744bc4894 Mon Sep 17 00:00:00 2001
From: Shea <nu@she-a.eu>
Date: Tue, 23 Jun 2026 23:34:18 +0300
Subject: [PATCH 3/5] fix mobile view things

Signed-off-by: Shea <nu@she-a.eu>
---
 src/app/pages/client/SidebarNav.tsx             | 8 ++++++--
 src/app/pages/client/sidebar/UserQuickTools.tsx | 9 +++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index 754082da8..b800bbc37 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/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);
@@ -33,9 +34,12 @@ export function SidebarNav() {
 
   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 underOutstep = compact ? false : width < 190 + 66;
+  const isCollapsed = compact? false:  width < 50 + 66;
 
   const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
     const target = evt.target as HTMLElement;
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index 0af265b9b..662e3208f 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/src/app/pages/client/sidebar/UserQuickTools.tsx
@@ -16,13 +16,14 @@ 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 underOutstep = compact? false : width < 190 + 66;
+  const isCollapsed = compact? false :  width < 50 + 66;
+
+
   return (
     <>
       {/* Doing it properly and nicely would require a major rewrite that would cause more trouble*/}

From 3b5c148e401cc8fb3c6f7a8968b4d6adeb854faa Mon Sep 17 00:00:00 2001
From: Shea <nu@she-a.eu>
Date: Tue, 23 Jun 2026 23:41:05 +0300
Subject: [PATCH 4/5] remove instep

Signed-off-by: Shea <nu@she-a.eu>
---
 src/app/pages/client/SidebarNav.tsx             | 9 ++++-----
 src/app/pages/client/sidebar/UserQuickTools.tsx | 8 +++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index b800bbc37..3524495cf 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -38,8 +38,7 @@ export function SidebarNav() {
   const compact = screenSize === ScreenSize.Mobile;
 
   const width = roomSidebarWidth + 66;
-  const underOutstep = compact ? false : width < 190 + 66;
-  const isCollapsed = compact? false:  width < 50 + 66;
+  const isCollapsed = compact ? false : width < 190 + 66;
 
   const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
     const target = evt.target as HTMLElement;
@@ -158,16 +157,16 @@ export function SidebarNav() {
                 </>
               ) : (
                 <>
-                  {underOutstep && (
+                  {isCollapsed && (
                     <>
                       <SearchTab />
                       <UnverifiedTab />
                       <InboxTab />
+                      <SettingsTab />
                     </>
                   )}
 
-                  {isCollapsed && <SettingsTab />}
-                  <Box style={{ height: toRem(58) }} alignItems="Center">
+                  <Box style={{ height: toRem(57) }} alignItems="Center">
                     <AccountSwitcherTab />
                   </Box>
                 </>
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index 662e3208f..6449632cb 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/src/app/pages/client/sidebar/UserQuickTools.tsx
@@ -20,9 +20,7 @@ export function UserQuickTools({
   const compact = screenSize === ScreenSize.Mobile;
 
   const [isResizingSidebar] = useAtom(isResizingSidebarAtom);
-  const underOutstep = compact? false : width < 190 + 66;
-  const isCollapsed = compact? false :  width < 50 + 66;
-
+  const isCollapsed = compact ? false : width < 190 + 66;
 
   return (
     <>
@@ -47,14 +45,14 @@ export function UserQuickTools({
                 gap: config.space.S300,
               }}
             >
-              {!underOutstep && (
+              {!isCollapsed && (
                 <>
                   <UnverifiedTab isBottom />
                   <InboxTab isBottom />
                   <SearchTab isBottom />
+                  <SettingsTab isBottom />
                 </>
               )}
-              <SettingsTab isBottom />
             </Box>
           </Box>
         </div>

From 3549449719bf53fcedaf34ce12dc381bddf05c9b Mon Sep 17 00:00:00 2001
From: Shea <nu@she-a.eu>
Date: Wed, 24 Jun 2026 13:09:59 +0300
Subject: [PATCH 5/5] maybe move the unverified at the top

Signed-off-by: Shea <nu@she-a.eu>
---
 src/app/pages/client/SidebarNav.tsx             | 3 +--
 src/app/pages/client/sidebar/UserQuickTools.tsx | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index 3524495cf..99ca73d64 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -145,10 +145,10 @@ export function SidebarNav() {
           }
           sticky={
             <SidebarStack>
+              <UnverifiedTab />
               {oldSidebar ? (
                 <>
                   <SearchTab />
-                  <UnverifiedTab />
                   <InboxTab />
                   <div style={{ paddingBottom: config.space.S100 }}>
                     {/*PROBS ADD SETTINGSTAB HERE WHEN ADDING THE STATUSES*/}
@@ -160,7 +160,6 @@ export function SidebarNav() {
                   {isCollapsed && (
                     <>
                       <SearchTab />
-                      <UnverifiedTab />
                       <InboxTab />
                       <SettingsTab />
                     </>
diff --git a/src/app/pages/client/sidebar/UserQuickTools.tsx b/src/app/pages/client/sidebar/UserQuickTools.tsx
index 6449632cb..783b0db2a 100644
--- a/src/app/pages/client/sidebar/UserQuickTools.tsx
+++ b/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';
@@ -47,7 +46,6 @@ export function UserQuickTools({
             >
               {!isCollapsed && (
                 <>
-                  <UnverifiedTab isBottom />
                   <InboxTab isBottom />
                   <SearchTab isBottom />
                   <SettingsTab isBottom />