feat: update Direct component to include invites and notifications navigation items

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

@@ -28,8 +28,9 @@ import {
   NavEmptyLayout,
   NavItem,
   NavItemContent,
+  NavLink,
 } from '../../../components/nav';
-import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
+import { getDirectCreatePath, getDirectRoomPath, getInboxInvitesPath, getInboxNotificationsPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -53,6 +54,9 @@ import {
   useRoomsNotificationPreferencesContext,
 } 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 = {
   requestClose: () => void;
@@ -170,6 +174,66 @@ function DirectEmpty() {
   );
 }
 
+/**
+ * Navigation item for room invites
+ */
+function InvitesNavItem() {
+  const invitesSelected = useInboxInvitesSelected();
+  const allInvites = useAtomValue(allInvitesAtom);
+  const inviteCount = allInvites.length;
+
+  return (
+    <NavItem
+      variant="Background"
+      radii="400"
+      highlight={inviteCount > 0}
+      aria-selected={invitesSelected}
+    >
+      <NavLink to={getInboxInvitesPath()}>
+        <NavItemContent>
+          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+            <Avatar size="200" radii="400">
+              <Icon src={Icons.Mail} size="100" filled={invitesSelected} />
+            </Avatar>
+            <Box as="span" grow="Yes">
+              <Text as="span" size="Inherit" truncate>
+                Invites
+              </Text>
+            </Box>
+            {inviteCount > 0 && <UnreadBadge highlight count={inviteCount} />}
+          </Box>
+        </NavItemContent>
+      </NavLink>
+    </NavItem>
+  );
+}
+
+/**
+ * Navigation item for notifications
+ */
+function NotificationsNavItem() {
+  const notificationsSelected = useInboxNotificationsSelected();
+
+  return (
+    <NavItem variant="Background" radii="400" aria-selected={notificationsSelected}>
+      <NavLink to={getInboxNotificationsPath()}>
+        <NavItemContent>
+          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+            <Avatar size="200" radii="400">
+              <Icon src={Icons.MessageUnread} size="100" filled={notificationsSelected} />
+            </Avatar>
+            <Box as="span" grow="Yes">
+              <Text as="span" size="Inherit" truncate>
+                Notifications
+              </Text>
+            </Box>
+          </Box>
+        </NavItemContent>
+      </NavLink>
+    </NavItem>
+  );
+}
+
 const DEFAULT_CATEGORY_ID = makeNavCategoryId('direct', 'direct');
 export function Direct() {
   const mx = useMatrixClient();
@@ -232,6 +296,10 @@ export function Direct() {
               </NavItem>
               <PluginNavSlot location="direct-messages" />
             </NavCategory>
+            <NavCategory>
+              <NotificationsNavItem />
+              <InvitesNavItem />
+            </NavCategory>
             <NavCategory>
               <NavCategoryHeader>
                 <RoomNavCategoryButton