setup stalker mode

packages/app/src/Pages/Layout.css

@@ -90,3 +90,22 @@ header {
     display: none;
   }
 }
+
+.stalker {
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  box-shadow: 0px 0px 26px 0px rgba(139, 92, 246, 0.7) inset;
+  pointer-events: none;
+}
+
+.stalker button {
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  color: black;
+  background-color: var(--btn-color);
+  padding: 12px;
+  pointer-events: all !important;
+}

packages/app/src/Pages/Layout.tsx

@@ -22,10 +22,12 @@ import { useTheme } from "Hooks/useTheme";
 import { useLoginRelays } from "Hooks/useLoginRelays";
 import { useNoteCreator } from "State/NoteCreator";
 import { LoginUnlock } from "Element/PinPrompt";
+import { LoginStore } from "Login";
 
 export default function Layout() {
   const location = useLocation();
   const [pageClass, setPageClass] = useState("page");
+  const { id, stalker } = useLogin(s => ({ id: s.id, stalker: s.stalker ?? false }));
 
   useLoginFeed();
   useTheme();
@@ -60,6 +62,17 @@ export default function Layout() {
         <Toaster />
       </div>
       <LoginUnlock />
+      {stalker && (
+        <div
+          className="stalker"
+          onClick={() => {
+            LoginStore.removeSession(id);
+          }}>
+          <button type="button" className="btn btn-rnd">
+            <Icon name="close" />
+          </button>
+        </div>
+      )}
     </>
   );
 }

packages/app/src/Pages/Notifications.tsx

@@ -80,23 +80,27 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
     return onHour.toString();
   };
 
+  const myNotifications = useMemo(() => {
+    return orderDescending([...notifications]).filter(
+      a => !isMuted(a.pubkey) && a.tags.some(b => b[0] === "p" && b[1] === login.publicKey),
+    );
+  }, [notifications, login.publicKey]);
+
   const timeGrouped = useMemo(() => {
-    return orderDescending([...notifications])
-      .filter(a => !isMuted(a.pubkey) && a.tags.some(b => b[0] === "p" && b[1] === login.publicKey))
-      .reduce((acc, v) => {
-        const key = `${timeKey(v)}:${notificationContext(v as TaggedNostrEvent)?.encode()}:${v.kind}`;
-        if (acc.has(key)) {
-          unwrap(acc.get(key)).push(v as TaggedNostrEvent);
-        } else {
-          acc.set(key, [v as TaggedNostrEvent]);
-        }
-        return acc;
-      }, new Map<string, Array<TaggedNostrEvent>>());
-  }, [notifications]);
+    return myNotifications.reduce((acc, v) => {
+      const key = `${timeKey(v)}:${notificationContext(v as TaggedNostrEvent)?.encode()}:${v.kind}`;
+      if (acc.has(key)) {
+        unwrap(acc.get(key)).push(v as TaggedNostrEvent);
+      } else {
+        acc.set(key, [v as TaggedNostrEvent]);
+      }
+      return acc;
+    }, new Map<string, Array<TaggedNostrEvent>>());
+  }, [myNotifications]);
 
   return (
     <div className="main-content">
-      <NotificationSummary evs={notifications as TaggedNostrEvent[]} />
+      <NotificationSummary evs={myNotifications as TaggedNostrEvent[]} />
 
       {login.publicKey &&
         [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}