feat: enhance Tauri support with notification handling and safe area insets

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -14,7 +14,7 @@ import { settingsAtom } from '../../state/settings';
 import { allInvitesAtom } from '../../state/room-list/inviteList';
 import { usePreviousValue } from '../../hooks/usePreviousValue';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getInboxInvitesPath, getInboxNotificationsPath } from '../pathUtils';
+import { getDirectRoomPath, getHomeRoomPath, getInboxInvitesPath } from '../pathUtils';
 import {
   getMemberDisplayName,
   getNotificationType,
@@ -26,6 +26,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { isTauri, sendNotification, setupNotificationTapListener } from '../../utils/tauri';
 
 function SystemEmojiFeature() {
   const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
@@ -88,17 +89,29 @@ function InviteNotifications() {
 
   const notify = useCallback(
     (count: number) => {
-      const noti = new window.Notification('Invitation', {
-        icon: LogoSVG,
-        badge: LogoSVG,
-        body: `You have ${count} new invitation request.`,
-        silent: true,
-      });
+      const body = `You have ${count} new invitation request.`;
+      
+      if (isTauri()) {
+        sendNotification({
+          title: 'Invitation',
+          body,
+          onClick: () => {
+            if (!window.closed) navigate(getInboxInvitesPath());
+          },
+        });
+      } else {
+        const noti = new window.Notification('Invitation', {
+          icon: LogoSVG,
+          badge: LogoSVG,
+          body,
+          silent: true,
+        });
 
-      noti.onclick = () => {
-        if (!window.closed) navigate(getInboxInvitesPath());
-        noti.close();
-      };
+        noti.onclick = () => {
+          if (!window.closed) navigate(getInboxInvitesPath());
+          noti.close();
+        };
+      }
     },
     [navigate]
   );
@@ -141,35 +154,69 @@ function MessageNotifications() {
   const notificationSelected = useInboxNotificationsSelected();
   const selectedRoomId = useSelectedRoom();
 
+  // Set up notification tap listener for mobile
+  useEffect(() => {
+    setupNotificationTapListener((path) => {
+      navigate(path);
+    });
+  }, [navigate]);
+
   const notify = useCallback(
     ({
       roomName,
       roomAvatar,
       username,
+      messageBody,
+      roomId,
+      eventId,
+      isDm,
     }: {
       roomName: string;
       roomAvatar?: string;
       username: string;
+      messageBody?: string;
       roomId: string;
       eventId: string;
+      isDm: boolean;
     }) => {
-      const noti = new window.Notification(roomName, {
-        icon: roomAvatar,
-        badge: roomAvatar,
-        body: `New inbox notification from ${username}`,
-        silent: true,
-      });
+      // In DMs, room name is the username, so don't duplicate it
+      const body = messageBody 
+        ? (isDm ? messageBody : `${username}: ${messageBody}`)
+        : `New message from ${username}`;
+      
+      // Build the path to navigate to on click
+      const roomPath = isDm 
+        ? getDirectRoomPath(roomId, eventId)
+        : getHomeRoomPath(roomId, eventId);
+      
+      if (isTauri()) {
+        sendNotification({
+          title: roomName,
+          body,
+          path: roomPath,
+          onClick: () => {
+            if (!window.closed) navigate(roomPath);
+          },
+        });
+      } else {
+        const noti = new window.Notification(roomName, {
+          icon: roomAvatar,
+          badge: roomAvatar,
+          body,
+          silent: true,
+        });
 
-      noti.onclick = () => {
-        if (!window.closed) navigate(getInboxNotificationsPath());
-        noti.close();
-        notifRef.current = undefined;
-      };
+        noti.onclick = () => {
+          if (!window.closed) navigate(roomPath);
+          noti.close();
+          notifRef.current = undefined;
+        };
 
-      notifRef.current?.close();
-      notifRef.current = noti;
+        notifRef.current?.close();
+        notifRef.current = noti;
+      }
     },
-    [navigate]
+    [mx, navigate]
   );
 
   const playSound = useCallback(() => {
@@ -212,17 +259,22 @@ function MessageNotifications() {
         return;
       }
 
-      if (showNotifications && notificationPermission('granted')) {
+      if (showNotifications && (isTauri() || notificationPermission('granted'))) {
         const avatarMxc =
           room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
+        const content = mEvent.getContent();
+        const messageBody = typeof content.body === 'string' ? content.body : undefined;
+        const isDm = room.getJoinedMemberCount() === 2 && !room.isSpaceRoom();
         notify({
           roomName: room.name ?? 'Unknown',
           roomAvatar: avatarMxc
             ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
             : undefined,
           username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
+          messageBody,
           roomId: room.roomId,
           eventId,
+          isDm,
         });
       }