From ab33c94e1dccad2a87e752c619a847609b1cf6e3 Mon Sep 17 00:00:00 2001 From: Kamil Wolter Date: Sun, 22 Mar 2026 13:43:04 +0100 Subject: [PATCH 1/5] Sidebar config discoverability --- src/app/pages/client/SidebarNav.tsx | 141 +++++++++++++++++++++++++++- 1 file changed, 138 insertions(+), 3 deletions(-) diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx index e70bbb09d..7e3bedfc8 100644 --- a/src/app/pages/client/SidebarNav.tsx +++ b/src/app/pages/client/SidebarNav.tsx @@ -1,6 +1,24 @@ -import { useRef } from 'react'; -import { Scroll } from 'folds'; - +import { MouseEventHandler, useRef, useState } from 'react'; +import { + Box, + Checkbox, + config, + Icon, + IconButton, + Icons, + Line, + Menu, + MenuItem, + PopOut, + RectCords, + Scroll, + Text, + toRem, +} from 'folds'; +import FocusTrap from 'focus-trap-react'; +import { stopPropagation } from '$utils/keyboard'; +import { useSetting } from '$state/hooks/settings'; +import { settingsAtom } from '$state/settings'; import { Sidebar, SidebarContent, SidebarStackSeparator, SidebarStack } from '$components/sidebar'; import { DirectTab, @@ -17,6 +35,17 @@ import { CreateTab } from './sidebar/CreateTab'; export function SidebarNav() { const scrollRef = useRef(null); + const [menuAnchor, setMenuAnchor] = useState(); + + const [uniformIcons, setUniformIcons] = useSetting(settingsAtom, 'uniformIcons'); + const [showUnreadCounts, setShowUnreadCounts] = useSetting(settingsAtom, 'showUnreadCounts'); + const [badgeCountDMsOnly, setBadgeCountDMsOnly] = useSetting(settingsAtom, 'badgeCountDMsOnly'); + const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts'); + + const handleToggle: MouseEventHandler = (evt) => { + const cords = evt.currentTarget.getBoundingClientRect(); + setMenuAnchor((current) => (current ? undefined : cords)); + }; return ( @@ -38,6 +67,112 @@ export function SidebarNav() { } sticky={ <> + + + + + {menuAnchor && ( + setMenuAnchor(undefined), + clickOutsideDeactivates: true, + isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown', + isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp', + escapeDeactivates: stopPropagation, + }} + > + + + setShowUnreadCounts(!showUnreadCounts)} + after={ + + } + > + + Show Room Counts + + + setBadgeCountDMsOnly(!badgeCountDMsOnly)} + after={ + + } + > + + Show DM Counts + + + setShowPingCounts(!showPingCounts)} + after={ + + } + > + + Show Mention Counts + + + + + + setUniformIcons(!uniformIcons)} + after={ + + } + > + + Consistent Icon Style + + + + + + } + /> + )} + From 509c6bf7382e7628d8a9441240c5c85adafdad73 Mon Sep 17 00:00:00 2001 From: Kamil Wolter Date: Sun, 22 Mar 2026 13:52:52 +0100 Subject: [PATCH 2/5] Added changeset --- .changeset/feat-sidebar-settings-discoverability.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/feat-sidebar-settings-discoverability.md diff --git a/.changeset/feat-sidebar-settings-discoverability.md b/.changeset/feat-sidebar-settings-discoverability.md new file mode 100644 index 000000000..b8e52626c --- /dev/null +++ b/.changeset/feat-sidebar-settings-discoverability.md @@ -0,0 +1,5 @@ +--- +'default': minor +--- + +Add sidebar three dot menu for quick access to related settings From 6b2e3a85e405290b77e2f9e13764c3c5e9eee054 Mon Sep 17 00:00:00 2001 From: Kamil Wolter Date: Mon, 23 Mar 2026 22:36:22 +0100 Subject: [PATCH 3/5] Moved quick sidebar settings to a context menu --- src/app/pages/client/SidebarNav.tsx | 223 +++++++++++----------------- 1 file changed, 88 insertions(+), 135 deletions(-) diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx index 7e3bedfc8..941cc3908 100644 --- a/src/app/pages/client/SidebarNav.tsx +++ b/src/app/pages/client/SidebarNav.tsx @@ -1,20 +1,5 @@ import { MouseEventHandler, useRef, useState } from 'react'; -import { - Box, - Checkbox, - config, - Icon, - IconButton, - Icons, - Line, - Menu, - MenuItem, - PopOut, - RectCords, - Scroll, - Text, - toRem, -} from 'folds'; +import { Box, Checkbox, config, Line, Menu, MenuItem, PopOut, Scroll, Text, toRem } from 'folds'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; @@ -35,20 +20,97 @@ import { CreateTab } from './sidebar/CreateTab'; export function SidebarNav() { const scrollRef = useRef(null); - const [menuAnchor, setMenuAnchor] = useState(); + const [menuAnchor, setMenuAnchor] = useState(); const [uniformIcons, setUniformIcons] = useSetting(settingsAtom, 'uniformIcons'); const [showUnreadCounts, setShowUnreadCounts] = useSetting(settingsAtom, 'showUnreadCounts'); const [badgeCountDMsOnly, setBadgeCountDMsOnly] = useSetting(settingsAtom, 'badgeCountDMsOnly'); const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts'); - const handleToggle: MouseEventHandler = (evt) => { - const cords = evt.currentTarget.getBoundingClientRect(); + const handleContextMenu: MouseEventHandler = (evt) => { + evt.preventDefault(); + const cords = new DOMRect(evt.clientX, evt.clientY, 0, 0); setMenuAnchor((current) => (current ? undefined : cords)); }; return ( - + + {menuAnchor && ( + setMenuAnchor(undefined), + clickOutsideDeactivates: true, + isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown', + isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp', + escapeDeactivates: stopPropagation, + }} + > + + + setShowUnreadCounts(!showUnreadCounts)} + after={ + + } + > + + Show Room Counts + + + setBadgeCountDMsOnly(!badgeCountDMsOnly)} + after={ + + } + > + + Show DM Counts + + + setShowPingCounts(!showPingCounts)} + after={} + > + + Show Mention Counts + + + + + + setUniformIcons(!uniformIcons)} + after={} + > + + Consistent Icon Style + + + + + + } + /> + )} @@ -66,121 +128,12 @@ export function SidebarNav() { } sticky={ - <> - - - - - {menuAnchor && ( - setMenuAnchor(undefined), - clickOutsideDeactivates: true, - isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown', - isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp', - escapeDeactivates: stopPropagation, - }} - > - - - setShowUnreadCounts(!showUnreadCounts)} - after={ - - } - > - - Show Room Counts - - - setBadgeCountDMsOnly(!badgeCountDMsOnly)} - after={ - - } - > - - Show DM Counts - - - setShowPingCounts(!showPingCounts)} - after={ - - } - > - - Show Mention Counts - - - - - - setUniformIcons(!uniformIcons)} - after={ - - } - > - - Consistent Icon Style - - - - - - } - /> - )} - - - - - - - - - + + + + + + } /> From 5f0f01076b26847f09afaf09d4e6a1afc5e59bde Mon Sep 17 00:00:00 2001 From: Kamil Wolter Date: Mon, 23 Mar 2026 22:39:22 +0100 Subject: [PATCH 4/5] Prevent context menu from bubbling --- src/app/pages/client/SidebarNav.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx index 941cc3908..507fa37c4 100644 --- a/src/app/pages/client/SidebarNav.tsx +++ b/src/app/pages/client/SidebarNav.tsx @@ -28,6 +28,8 @@ export function SidebarNav() { const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts'); const handleContextMenu: MouseEventHandler = (evt) => { + const target = evt.target as HTMLElement; + if (target.closest('button, a, [role="button"]')) return; evt.preventDefault(); const cords = new DOMRect(evt.clientX, evt.clientY, 0, 0); setMenuAnchor((current) => (current ? undefined : cords)); From 662434d6927cf358aa3f12a29e3ed928cbf8aaf0 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Mon, 23 Mar 2026 20:17:45 -0500 Subject: [PATCH 5/5] Update feat-sidebar-settings-discoverability.md --- .changeset/feat-sidebar-settings-discoverability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/feat-sidebar-settings-discoverability.md b/.changeset/feat-sidebar-settings-discoverability.md index b8e52626c..b32f33ffa 100644 --- a/.changeset/feat-sidebar-settings-discoverability.md +++ b/.changeset/feat-sidebar-settings-discoverability.md @@ -1,5 +1,5 @@ --- -'default': minor +default: minor --- Add sidebar three dot menu for quick access to related settings