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 && ( + + {null} + + )} {(triggerRef) => ( )} - {anchor && ( - - {null} - - )} > ); } 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={} /> + + } + /> + (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 = (evt) => { const target = evt.target as HTMLElement; @@ -140,22 +145,36 @@ export function SidebarNav() { } sticky={ - {underOutstep && ( + + {oldSidebar ? ( <> - + + {/*PROBS ADD SETTINGSTAB HERE WHEN ADDING THE STATUSES*/} + + > - )} - - {isCollapsed && } + ) : ( + <> + {isCollapsed && ( + <> + + + + > + )} - + + + + > + )} } /> - + {!oldSidebar && } > ); } 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} /> )} - ); } 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 }) { Add Account + {/*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 && ( + <> + + + Settings + + > + )} 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 && ) || (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'} > 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 }) { {(triggerRef) => ( - + 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 ( - + {(triggerRef) => ( - - + + )} 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) => ( )} diff --git a/src/app/pages/client/sidebar/UserQuickTools.css.ts b/src/app/pages/client/sidebar/UserQuickTools.css.ts index cda4ab95a..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(58), + 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 b5c02e921..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'; @@ -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 && ( - - + - {!underOutstep && ( - <> - - - - > - )} - + + + {!isCollapsed && ( + <> + + + + > + )} + - + )} > ); 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,