diff --git a/.changeset/feat-sidebar-settings-discoverability.md b/.changeset/feat-sidebar-settings-discoverability.md new file mode 100644 index 000000000..b32f33ffa --- /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 diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx index e70bbb09d..507fa37c4 100644 --- a/src/app/pages/client/SidebarNav.tsx +++ b/src/app/pages/client/SidebarNav.tsx @@ -1,6 +1,9 @@ -import { useRef } from 'react'; -import { Scroll } from 'folds'; - +import { MouseEventHandler, useRef, useState } from 'react'; +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'; +import { settingsAtom } from '$state/settings'; import { Sidebar, SidebarContent, SidebarStackSeparator, SidebarStack } from '$components/sidebar'; import { DirectTab, @@ -17,9 +20,99 @@ 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 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)); + }; 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 + + + + + + } + /> + )} @@ -37,15 +130,12 @@ export function SidebarNav() { } sticky={ - <> - - - - - - - - + + + + + + } />