Fix nostr-relay-tray connection issues

.changeset/hungry-avocados-hug.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix nostr-relay-tray connection issues

src/components/post-modal/index.tsx

@@ -321,7 +321,7 @@ export default function PostModal({
               <Link isExternal href="https://github.com/nostr-protocol/nips/blob/master/89.md#client-tag">
                 NIP-89
               </Link>{" "}
-              client tags and let other users know what app your using to write notes
+              client tags and let other users know what app you're using to write notes
             </Text>
             <ButtonGroup ml="auto" size="sm" variant="ghost">
               <Button onClick={promptAddClientTag.onClose}>Close</Button>

src/services/local-relay.ts

@@ -6,7 +6,6 @@ import { safeRelayUrl } from "../helpers/relay";
 import WasmRelay from "./wasm-relay";
 import MemoryRelay from "../classes/memory-relay";
 import { fakeVerifyEvent } from "./verify-event";
-import relayPoolService from "./relay-pool";
 import localSettings from "./local-settings";
 import dayjs from "dayjs";
 
@@ -82,14 +81,11 @@ async function connectRelay() {
     if (relay instanceof AbstractRelay) {
       // set the base timeout to 2 second
       relay.baseEoseTimeout = 2000;
-
-      relayPoolService.relays.set(relay.url, relay);
-      relay.onnotice = (notice) => relayPoolService.handleRelayNotice(relay, notice);
     }
 
     return relay;
   } catch (e) {
-    log("Failed to connect to local relay, falling back to internal");
+    log("Failed to connect to local relay, falling back to internal", e);
     return createInternalRelay();
   }
 }

src/services/relay-pool.ts

@@ -1,4 +1,6 @@
+import { AbstractRelay } from "nostr-tools/abstract-relay";
 import RelayPool from "../classes/relay-pool";
+import { localRelay } from "./local-relay";
 import { offlineMode } from "./offline-mode";
 
 const relayPoolService = new RelayPool();
@@ -17,6 +19,12 @@ offlineMode.subscribe((offline) => {
   }
 });
 
+// add local relay
+if (localRelay instanceof AbstractRelay) {
+  relayPoolService.relays.set(localRelay.url, localRelay);
+  localRelay.onnotice = (notice) => relayPoolService.handleRelayNotice(localRelay as AbstractRelay, notice);
+}
+
 if (import.meta.env.DEV) {
   // @ts-ignore
   window.relayPoolService = relayPoolService;

src/views/notifications/components/notification-icon-entry.tsx

@@ -64,7 +64,7 @@ const NotificationIconEntry = memo(
             <Text isTruncated>{summary}</Text>
             <Spacer />
             {read && <CheckIcon boxSize={5} color="green.500" />}
-            <Timestamp timestamp={timestamp} />
+            <Timestamp timestamp={timestamp} whiteSpace="pre" />
           </Flex>
 
           {expanded && (

src/views/notifications/components/notification-item.tsx

@@ -66,7 +66,7 @@ const ReplyNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClic
         onClick={onClick}
       >
         {pointer && <EmbedEventPointer pointer={pointer} />}
-        <TimelineNote event={event} showReplyLine={false} />
+        <TimelineNote event={event} showReplyLine={false} showReplyButton />
       </NotificationIconEntry>
     );
   },

src/views/notifications/index.tsx

@@ -1,7 +1,7 @@
-import { memo, ReactNode, useContext, useMemo } from "react";
+import { memo, ReactNode, useCallback, useContext, useMemo } from "react";
 import { BreadcrumbLink, Button, ButtonGroup, Divider, Flex, Switch, Text } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import { useKeyPressEvent } from "react-use";
 
 import RequireCurrentAccount from "../../providers/route/require-current-account";
@@ -23,6 +23,23 @@ import readStatusService from "../../services/read-status";
 
 // const DATE_FORMAT = "YYYY-MM-DD";
 
+function TimeMarker({ date, ids }: { date: Dayjs; ids: string[] }) {
+  const readAll = useCallback(() => {
+    for (const id of ids) readStatusService.setRead(id);
+  }, [ids]);
+
+  return (
+    <Flex gap="4" p="2" key={date.unix() + "-marker"} alignItems="center">
+      <Divider />
+      <Text whiteSpace="pre">{date.fromNow()}</Text>
+      <Divider />
+      <Button variant="link" ml="2" onClick={readAll} flexShrink={0}>
+        Mark Read
+      </Button>
+    </Flex>
+  );
+}
+
 const NotificationsTimeline = memo(
   ({
     // day,
@@ -91,6 +108,17 @@ const NotificationsTimeline = memo(
         }
       }
     };
+    const navigatePrevUnread = () => {
+      const focusedEvent = filteredEvents.find((e) => e.id === focused);
+
+      const idx = focusedEvent ? filteredEvents.indexOf(focusedEvent) : 0;
+      for (let i = idx; i >= 0; i--) {
+        if (readStatusService.getStatus(filteredEvents[i].id).value === false) {
+          setFocus(filteredEvents[i].id);
+          break;
+        }
+      }
+    };
     const navigateNext = () => {
       const focusedEvent = filteredEvents.find((e) => e.id === focused);
 
@@ -116,10 +144,10 @@ const NotificationsTimeline = memo(
 
     useKeyPressEvent("ArrowUp", navigatePrev);
     useKeyPressEvent("ArrowDown", navigateNext);
-    useKeyPressEvent("ArrowLeft", navigatePrev);
+    useKeyPressEvent("ArrowLeft", navigatePrevUnread);
     useKeyPressEvent("ArrowRight", navigateNextUnread);
     useKeyPressEvent("k", navigatePrev);
-    useKeyPressEvent("h", navigatePrev);
+    useKeyPressEvent("h", navigatePrevUnread);
     useKeyPressEvent("j", navigateNext);
     useKeyPressEvent("l", navigateNextUnread);
     useKeyPressEvent("H", navigateTop);
@@ -137,20 +165,17 @@ const NotificationsTimeline = memo(
     const items: ReactNode[] = [];
 
     let prev = dayjs();
+    let ids: string[] = [];
     for (const event of filteredEvents) {
       // insert markers at every day
       if (prev.diff(dayjs.unix(event.created_at), "d") > 0) {
         prev = dayjs.unix(event.created_at);
 
-        items.push(
-          <Flex gap="4" p="2" key={prev.unix() + "-marker"} alignItems="center">
-            <Divider />
-            <Text whiteSpace="pre">{prev.fromNow()}</Text>
-            <Divider />
-          </Flex>,
-        );
+        ids = [];
+        items.push(<TimeMarker key={prev.unix() + "-marker"} date={prev} ids={ids} />);
       }
 
+      ids.push(event.id);
       items.push(<NotificationItem key={event.id} event={event} />);
     }