diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index 66dbb14f0..8ddb7df9e 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -12,6 +12,7 @@ import Account from 'soapbox/components/account'; import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui'; import ProfileStats from 'soapbox/features/ui/components/profile-stats'; import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks'; +import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications'; import { makeGetOtherAccounts } from 'soapbox/selectors'; import type { List as ImmutableList } from 'immutable'; @@ -48,13 +49,14 @@ interface ISidebarLink { icon: string; text: string | JSX.Element; onClick: React.EventHandler; + count?: number; } -const SidebarLink: React.FC = ({ href, to, icon, text, onClick }) => { +const SidebarLink: React.FC = ({ href, to, icon, text, onClick, count }) => { const body = (
- +
{text} @@ -89,6 +91,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const settings = useAppSelector((state) => getSettings(state)); const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count()); const instance = useInstance(); + const settingsNotifications = useSettingsNotifications(); const closeButtonRef = React.useRef(null); @@ -286,6 +289,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { icon={require('@tabler/icons/outline/settings.svg')} text={intl.formatMessage(messages.preferences)} onClick={onClose} + count={settingsNotifications.size} /> {features.federating && ( diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx index e7721d5fc..9af98cd8f 100644 --- a/src/features/ui/components/navbar.tsx +++ b/src/features/ui/components/navbar.tsx @@ -8,10 +8,11 @@ import { fetchInstance } from 'soapbox/actions/instance'; import { openModal } from 'soapbox/actions/modals'; import { openSidebar } from 'soapbox/actions/sidebar'; import SiteLogo from 'soapbox/components/site-logo'; -import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui'; +import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui'; import Search from 'soapbox/features/compose/components/search'; import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks'; import { useIsMobile } from 'soapbox/hooks/useIsMobile'; +import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications'; import { isStandalone } from 'soapbox/utils/state'; import ProfileDropdown from './profile-dropdown'; @@ -35,6 +36,7 @@ const Navbar = () => { const { account } = useOwnAccount(); const node = useRef(null); const isMobile = useIsMobile(); + const settingsNotifications = useSettingsNotifications(); const [isLoading, setLoading] = useState(false); const [username, setUsername] = useState(''); @@ -86,7 +88,12 @@ const Navbar = () => {
{account && (
-