feat: add notifications and invites routes to the router and update path utilities

src/app/pages/Router.tsx

@@ -221,6 +221,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
           <Route path={_CREATE_PATH} element={<DirectCreate />} />
+          <Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
+          <Route path={_INVITES_PATH} element={<Invites />} />
           <Route
             path={_ROOM_PATH}
             element={

src/app/pages/client/direct/Direct.tsx

@@ -30,7 +30,7 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import { getDirectCreatePath, getDirectRoomPath, getInboxInvitesPath, getInboxNotificationsPath } from '../../pathUtils';
+import { getDirectCreatePath, getDirectRoomPath, getDirectNotificationsPath, getDirectInvitesPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -55,7 +55,6 @@ import {
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
 import { allInvitesAtom } from '../../../state/room-list/inviteList';
-import { useInboxInvitesSelected, useInboxNotificationsSelected } from '../../../hooks/router/useInbox';
 import { UnreadBadge } from '../../../components/unread-badge';
 
 type DirectMenuProps = {
@@ -178,7 +177,6 @@ function DirectEmpty() {
  * Navigation item for room invites
  */
 function InvitesNavItem() {
-  const invitesSelected = useInboxInvitesSelected();
   const allInvites = useAtomValue(allInvitesAtom);
   const inviteCount = allInvites.length;
 
@@ -187,13 +185,12 @@ function InvitesNavItem() {
       variant="Background"
       radii="400"
       highlight={inviteCount > 0}
-      aria-selected={invitesSelected}
     >
-      <NavLink to={getInboxInvitesPath()}>
+      <NavLink to={getDirectInvitesPath()}>
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
-              <Icon src={Icons.Mail} size="100" filled={invitesSelected} />
+              <Icon src={Icons.Mail} size="100" />
             </Avatar>
             <Box as="span" grow="Yes">
               <Text as="span" size="Inherit" truncate>
@@ -212,15 +209,13 @@ function InvitesNavItem() {
  * Navigation item for notifications
  */
 function NotificationsNavItem() {
-  const notificationsSelected = useInboxNotificationsSelected();
-
   return (
-    <NavItem variant="Background" radii="400" aria-selected={notificationsSelected}>
-      <NavLink to={getInboxNotificationsPath()}>
+    <NavItem variant="Background" radii="400">
+      <NavLink to={getDirectNotificationsPath()}>
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
-              <Icon src={Icons.MessageUnread} size="100" filled={notificationsSelected} />
+              <Icon src={Icons.MessageUnread} size="100" />
             </Avatar>
             <Box as="span" grow="Yes">
               <Text as="span" size="Inherit" truncate>
@@ -235,6 +230,7 @@ function NotificationsNavItem() {
 }
 
 const DEFAULT_CATEGORY_ID = makeNavCategoryId('direct', 'direct');
+
 export function Direct() {
   const mx = useMatrixClient();
   useNavToActivePathMapper('direct');

src/app/pages/pathUtils.ts

@@ -3,6 +3,8 @@ import {
   DIRECT_CREATE_PATH,
   DIRECT_PATH,
   DIRECT_ROOM_PATH,
+  DIRECT_NOTIFICATIONS_PATH,
+  DIRECT_INVITES_PATH,
   EXPLORE_FEATURED_PATH,
   EXPLORE_PATH,
   EXPLORE_SERVER_PATH,
@@ -110,6 +112,8 @@ export const getDirectRoomPath = (roomIdOrAlias: string, eventId?: string): stri
 
   return generatePath(DIRECT_ROOM_PATH, params);
 };
+export const getDirectNotificationsPath = (): string => DIRECT_NOTIFICATIONS_PATH;
+export const getDirectInvitesPath = (): string => DIRECT_INVITES_PATH;
 
 export const getSpacePath = (spaceIdOrAlias: string): string => {
   const params = {

src/app/pages/paths.ts

@@ -85,6 +85,9 @@ export type InboxNotificationsPathSearchParams = {
 export const INBOX_NOTIFICATIONS_PATH = `/inbox/${_NOTIFICATIONS_PATH}`;
 export const INBOX_INVITES_PATH = `/inbox/${_INVITES_PATH}`;
 
+export const DIRECT_NOTIFICATIONS_PATH = `/direct/${_NOTIFICATIONS_PATH}`;
+export const DIRECT_INVITES_PATH = `/direct/${_INVITES_PATH}`;
+
 export const SPACE_SETTINGS_PATH = '/space-settings/';
 
 export const ROOM_SETTINGS_PATH = '/room-settings/';