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

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');