feat: pictique header & eid privacy thing

Author: coodos

infrastructure/eid-wallet/src/lib/services/NotificationService.ts

@@ -26,11 +26,6 @@ class NotificationService {
     private static instance: NotificationService;
     private deviceRegistration: DeviceRegistration | null = null;
     private provisionerEndpoint: string;
-    private pendingMessageNavigation: {
-        globalMessageId: string;
-        globalChatId: string;
-    } | null = null;
-    private onNavigate: ((path: string) => void) | null = null;
 
     constructor() {
         // Get the provisioner endpoint from environment or use default
@@ -119,26 +114,11 @@ class NotificationService {
         }
     }
 
-    /**
-     * Set a navigation callback for handling notification taps
-     */
-    setNavigationHandler(handler: (path: string) => void): void {
-        this.onNavigate = handler;
-
-        // If there's a pending navigation from a tapped notification, go to notifications page
-        if (this.pendingMessageNavigation) {
-            this.pendingMessageNavigation = null;
-            handler("/notifications");
-        }
-    }
-
     /**
      * Send a local notification
      */
     async sendLocalNotification(payload: NotificationPayload): Promise<void> {
         try {
-            console.log("Attempting to send local notification:", payload);
-
             // Store notification for the notification panel
             const data = payload.data as Record<string, string> | undefined;
             addNotification({
@@ -147,12 +127,6 @@ class NotificationService {
                 data,
             });
 
-            // Navigate to notifications page when notification is tapped
-            this.pendingMessageNavigation = {
-                globalMessageId: "",
-                globalChatId: "",
-            };
-
             // Check permissions first
             const hasPermission = await isPermissionGranted();
             console.log("Has notification permission:", hasPermission);
@@ -225,7 +199,7 @@ class NotificationService {
     /**
      * Check for notifications from provisioner and show them locally
      */
-    async checkAndShowNotifications(): Promise<void> {
+    async checkAndShowNotifications(): Promise<{ globalMessageId?: string; globalChatId?: string } | null> {
         try {
             console.log("🔍 Checking for notifications from provisioner...");
 
@@ -253,25 +227,25 @@ class NotificationService {
                             console.log("Device registered successfully");
                         } else {
                             console.log("Failed to register device");
-                            return;
+                            return null;
                         }
                     } else {
                         console.log(
                             "No eName found in vault, skipping notification check",
                         );
-                        return;
+                        return null;
                     }
                 } catch (error) {
                     console.error("Error getting vault eName:", error);
-                    return;
+                    return null;
                 }
             }
 
             if (!registration) {
                 console.log(
                     "Still no device registration, skipping notification check",
                 );
-                return;
+                return null;
             }
 
             // Check for notifications from provisioner
@@ -293,24 +267,37 @@ class NotificationService {
                 const data = await response.json();
                 if (data.notifications && data.notifications.length > 0) {
                     console.log(
-                        `📱 Found ${data.notifications.length} notification(s)`,
+                        `Found ${data.notifications.length} notification(s)`,
                     );
 
                     // Show each notification locally
+                    let lastMessageNotif: { globalMessageId?: string; globalChatId?: string; title?: string; body?: string } | null = null;
                     for (const notification of data.notifications) {
                         await this.sendLocalNotification(notification);
+                        if (notification.data?.type === "new_message") {
+                            lastMessageNotif = {
+                                globalMessageId: notification.data.globalMessageId,
+                                globalChatId: notification.data.globalChatId,
+                                title: notification.title,
+                                body: notification.body,
+                            };
+                        }
                     }
+                    return lastMessageNotif;
                 } else {
                     console.log("No new notifications");
+                    return null;
                 }
             } else {
                 console.log(
                     "No notifications endpoint available or error:",
                     response.status,
                 );
+                return null;
             }
         } catch (error) {
             console.error("Error checking notifications:", error);
+            return null;
         }
     }
 

infrastructure/eid-wallet/src/routes/(app)/+layout.svelte

@@ -47,13 +47,18 @@ onMount(async () => {
             );
         }
 
-        // Set up notification navigation handler and check for notifications
+        // Check for pending notifications and navigate to the message's open page
         try {
             const notificationService = globalState.notificationService;
-            notificationService.setNavigationHandler((path: string) => {
-                goto(path);
-            });
-            await notificationService.checkAndShowNotifications();
+            const notifData = await notificationService.checkAndShowNotifications();
+            if (notifData?.globalChatId) {
+                const params = new URLSearchParams({
+                    chatId: notifData.globalChatId,
+                    ...(notifData.title && { title: notifData.title }),
+                    ...(notifData.body && { body: notifData.body }),
+                });
+                await goto(`/open-message/${encodeURIComponent(notifData.globalMessageId || notifData.globalChatId)}?${params.toString()}`);
+            }
         } catch (error) {
             console.error("Failed to check notifications:", error);
         }

infrastructure/eid-wallet/src/routes/(app)/notifications/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { AppNav } from "$lib/fragments";
 import {
     getNotifications,
     clearNotificationsForChat,
@@ -34,7 +35,7 @@ function handleNotificationClick(notification: StoredNotification) {
         }
         // Navigate to open-message page
         goto(
-            `/open-message/${encodeURIComponent(data.globalMessageId)}?chatId=${encodeURIComponent(data.globalChatId || data.globalMessageId)}`,
+            `/open-message/${encodeURIComponent(data.globalMessageId)}?chatId=${encodeURIComponent(data.globalChatId || data.globalMessageId)}&title=${encodeURIComponent(notification.title)}&body=${encodeURIComponent(notification.body)}`,
         );
     }
 }
@@ -56,47 +57,48 @@ function formatTime(dateStr: string): string {
 
     return date.toLocaleDateString();
 }
+
+function handleClearAll() {
+    clearAllNotifications();
+    refresh();
+}
 </script>
 
-<div class="flex items-center justify-between mb-6">
-    <button onclick={() => goto("/main")} class="text-gray-500 text-sm">
-        &larr; Back
-    </button>
-    <h1 class="text-xl font-semibold">Notifications</h1>
-    {#if notifications.length > 0}
+<AppNav title="Notifications" />
+
+{#if notifications.length > 0}
+    <div class="flex justify-end mb-4">
         <button
-            onclick={clearAllNotifications}
-            class="text-sm text-blue-500"
+            onclick={handleClearAll}
+            class="text-sm text-primary"
         >
             Clear all
         </button>
-    {:else}
-        <div class="w-16"></div>
-    {/if}
-</div>
+    </div>
+{/if}
 
 {#if notifications.length === 0}
-    <div class="flex flex-col items-center justify-center mt-20 text-gray-400">
-        <p class="text-lg">No notifications</p>
-        <p class="text-sm mt-1">You're all caught up</p>
+    <div class="flex flex-col items-center justify-center mt-20">
+        <p class="text-lg text-black-700">No notifications</p>
+        <p class="text-sm text-black-500 mt-1">You're all caught up</p>
     </div>
 {:else}
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-3">
         {#each notifications as notification (notification.id)}
             <button
                 onclick={() => handleNotificationClick(notification)}
-                class="w-full text-left p-4 bg-white rounded-xl border border-gray-200 hover:border-gray-300 transition-all"
+                class="w-full text-left p-4 bg-gray rounded-2xl active:opacity-80 transition-opacity"
             >
                 <div class="flex justify-between items-start">
-                    <h3 class="font-medium text-gray-800 text-sm">
+                    <p class="font-medium text-sm">
                         {notification.title}
-                    </h3>
-                    <span class="text-xs text-gray-400 ml-2 shrink-0">
+                    </p>
+                    <span class="text-xs text-black-500 ml-2 shrink-0">
                         {formatTime(notification.createdAt)}
                     </span>
                 </div>
                 {#if notification.body}
-                    <p class="text-sm text-gray-500 mt-1 line-clamp-2">
+                    <p class="text-sm text-black-700 mt-1 line-clamp-2">
                         {notification.body}
                     </p>
                 {/if}

infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte

@@ -107,6 +107,16 @@ async function handleVersionTap() {
     }
 }
 
+async function openPrivacy(e: Event) {
+    e.preventDefault();
+    try {
+        const { openUrl } = await import("@tauri-apps/plugin-opener");
+        await openUrl("https://metastate.foundation/");
+    } catch {
+        window.location.href = "https://metastate.foundation/";
+    }
+}
+
 $effect(() => {
     runtime.header.title = "Settings";
 });
@@ -130,11 +140,14 @@ $effect(() => {
             label="Recovery Passphrase"
             href="/settings/passphrase"
         />
-        <SettingsNavigationBtn
-            icon={Shield01Icon}
-            label="Privacy"
-            href="https://metastate.foundation/"
-        />
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div onclick={openPrivacy}>
+            <SettingsNavigationBtn
+                icon={Shield01Icon}
+                label="Privacy"
+                href="https://metastate.foundation/"
+            />
+        </div>
     </div>
     <div>
         <ButtonAction class="mt-5 w-full" callback={showDeleteConfirmation}

infrastructure/eid-wallet/src/routes/(public)/open-message/[globalId]/+page.svelte

@@ -7,43 +7,71 @@ import {
 
 const globalId = page.params.globalId;
 const chatId = page.url.searchParams.get("chatId") || globalId;
+const title = page.url.searchParams.get("title") || "";
+const body = page.url.searchParams.get("body") || "";
 
-function openInPictique() {
-    window.location.href = `${PUBLIC_PICTIQUE_BASE_URL}/open-message/${encodeURIComponent(chatId)}`;
+async function openInApp(baseUrl: string) {
+    const url = new URL(`/open-message/${encodeURIComponent(chatId)}`, baseUrl);
+    try {
+        const { openUrl } = await import("@tauri-apps/plugin-opener");
+        await openUrl(url.toString());
+    } catch {
+        window.location.href = url.toString();
+    }
 }
 
-function openInBlabsy() {
-    window.location.href = `${PUBLIC_BLABSY_BASE_URL}/open-message/${encodeURIComponent(chatId)}`;
+function goBack() {
+    if (window.history.length > 1) {
+        window.history.back();
+    } else {
+        window.location.href = "/main";
+    }
 }
 </script>
 
-<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-6">
-    <h1 class="text-xl font-semibold text-gray-800 mb-2">New Message</h1>
-    <p class="text-gray-500 mb-8">Choose where to open this message</p>
+<div class="flex flex-col items-center justify-center min-h-screen p-6">
+    {#if title}
+        <p class="font-medium text-lg mb-1">{title}</p>
+    {/if}
+    {#if body}
+        <p class="text-black-700 text-sm text-center max-w-sm mb-6">{body}</p>
+    {/if}
+    {#if !title && !body}
+        <p class="font-medium text-lg mb-6">New Message</p>
+    {/if}
 
-    <div class="flex flex-col gap-4 w-full max-w-xs">
+    <p class="text-black-500 text-sm mb-6">Open this conversation in</p>
+
+    <div class="flex flex-col gap-3 w-full max-w-xs">
         <button
-            onclick={openInPictique}
-            class="flex items-center gap-4 w-full px-6 py-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all"
+            onclick={() => openInApp(PUBLIC_PICTIQUE_BASE_URL)}
+            class="flex items-center gap-4 w-full px-5 py-4 bg-gray rounded-2xl active:opacity-80 transition-opacity"
         >
             <img
-                src="/images/pictique-logo.png"
+                src="/images/pictique-logo.svg"
                 alt="Pictique"
-                class="w-10 h-10 rounded-lg"
+                class="w-10 h-10 rounded-xl"
             />
-            <span class="text-lg font-medium text-gray-800">Open in Pictique</span>
+            <span class="font-medium">Pictique</span>
         </button>
 
         <button
-            onclick={openInBlabsy}
-            class="flex items-center gap-4 w-full px-6 py-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all"
+            onclick={() => openInApp(PUBLIC_BLABSY_BASE_URL)}
+            class="flex items-center gap-4 w-full px-5 py-4 bg-gray rounded-2xl active:opacity-80 transition-opacity"
         >
             <img
                 src="/images/blabsy-logo.svg"
                 alt="Blabsy"
-                class="w-10 h-10 rounded-lg"
+                class="w-10 h-10 rounded-xl"
             />
-            <span class="text-lg font-medium text-gray-800">Open in Blabsy</span>
+            <span class="font-medium">Blabsy</span>
+        </button>
+
+        <button
+            onclick={goBack}
+            class="w-full py-3 text-sm text-black-500 active:opacity-80 transition-opacity mt-2"
+        >
+            Cancel
         </button>
     </div>
 </div>