notifs work

client/src/App.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Thread from "./components/Thread";
 import Header from "./components/Header/Header";
 import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
+import Notifications from "./components/Notifications";
 
 function App() {
 
@@ -15,6 +16,7 @@ function App() {
         <Route path="/settings" element={<Settings />} />
         <Route path="/" element={<Home />} />
         <Route path="/thread/:id" element={<Thread />} />
+        <Route path="/notifications" element={<Notifications />} />
       </Routes>
       <AddToHomeScreenPrompt/>
     </Router>

client/src/components/Forms/handleSubmit.ts

@@ -39,6 +39,7 @@ export const useSubmitForm = (unsigned: UnsignedEvent, difficulty: string) => {
     const unsignedWithPubkey = { ...unsigned, pubkey: getPublicKey(sk) };
     const powServer = useState(localStorage.getItem('powserver') || '');
     const [unsignedPoWEvent, setUnsignedPoWEvent] = useState<UnsignedEvent>()
+    let storedKeys = JSON.parse(localStorage.getItem('usedKeys') || '[]');
 
     // Initialize the worker outside of any effects
     const numCores = navigator.hardwareConcurrency || 4;
@@ -85,6 +86,11 @@ export const useSubmitForm = (unsigned: UnsignedEvent, difficulty: string) => {
         } else {
             startWork();
         }
+
+        // Add the logic here
+        storedKeys.push([sk, getPublicKey(sk)]);
+        // Stringify the array and store it back to localStorage
+        localStorage.setItem('usedKeys', JSON.stringify(storedKeys));
     };
 
     useEffect(() => {

client/src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import {
-  Cog6ToothIcon
+  Cog6ToothIcon,
+  BellIcon
 } from "@heroicons/react/24/outline";
 
 export default function Header() {
@@ -14,15 +15,25 @@ export default function Header() {
             </span>
           </div>
         </a>
+        <div>
+        <a
+          href="/notifications"
+          className="text-neutral-300 inline-flex gap-4 items-center"
+        >
+          <button>
+            <BellIcon className="h-5 w-5" />
+          </button>
+        </a>
         <a
           href="/settings"
-          className="text-neutral-300 inline-flex gap-4 items-center"
+          className="text-neutral-300 inline-flex gap-4 items-center pl-4"
         >
           <button>
             <Cog6ToothIcon className="h-5 w-5" />
           </button>
         </a>
         </div>
+      </div>
     </header>
   );
 }

client/src/utils/subscriptions.ts

@@ -235,3 +235,38 @@ export const subNotesOnce = (
     pubkeys.clear();
   }, 2000);
 };  
+
+/** quick subscribe to a note id (nip-19) */
+export const subNotifications = (
+  pubkeys: string[],
+  onEvent: SubCallback,
+) => {
+  const replyPubkeys = new Set<string>();
+  sub({
+    cb: (evt, relay) => {
+      replyPubkeys.add(evt.pubkey);
+      onEvent(evt, relay);
+    },
+    filter: {
+      "#p": pubkeys,
+      kinds: [1],
+      limit: 50,
+    },
+    unsub: true,
+  });
+
+  setTimeout(() => {
+    // get profile info
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: Array.from(replyPubkeys),
+        kinds: [0],
+        limit: replyPubkeys.size,
+      },
+      unsub: true,
+    });
+    replyPubkeys.clear();
+  }, 2000);
+};  
+