fix reload prompt

README.md

@@ -61,6 +61,8 @@
 - block notes based on content
 - implement NIP-56 and blocking
 - allow user to select relay or following list when fetching replies (default to my relays + following?)
+  - massive thread note1dapvuu8fl09yjtg2gyr2h6nypaffl2sq0aj5raz86463qk5kpyzqlxvtc3
+  - sort replies by date
 - filter list of followers by users the user has blocked/reported (stops bots/spammers from showing up at followers)
 
 ## Setup

src/components/icons.tsx

@@ -115,3 +115,9 @@ export const ExternalLinkIcon = createIcon({
   d: "M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z",
   defaultProps,
 });
+
+export const SearchIcon = createIcon({
+  displayName: "eternal-link-icon",
+  d: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z",
+  defaultProps,
+});

src/components/note/note-relays.tsx

@@ -1,3 +1,4 @@
+import { memo, useCallback, useState } from "react";
 import {
   Button,
   IconButton,
@@ -9,8 +10,9 @@ import {
   PopoverTrigger,
   Text,
   Flex,
+  Portal,
+  PopoverFooter,
 } from "@chakra-ui/react";
-import { useCallback, useState } from "react";
 import { nostrPostAction } from "../../classes/nostr-post-action";
 import { NostrRequest } from "../../classes/nostr-request";
 import useSubject from "../../hooks/use-subject";
@@ -18,13 +20,13 @@ import { getEventRelays, handleEventFromRelay } from "../../services/event-relay
 import { relayPool } from "../../services/relays";
 import settings from "../../services/settings";
 import { NostrEvent } from "../../types/nostr-event";
-import { RelayIcon } from "../icons";
+import { RelayIcon, SearchIcon } from "../icons";
 
 export type NoteRelaysProps = Omit<IconButtonProps, "icon" | "aria-label"> & {
   event: NostrEvent;
 };
 
-export const NoteRelays = ({ event, ...props }: NoteRelaysProps) => {
+export const NoteRelays = memo(({ event, ...props }: NoteRelaysProps) => {
   const relays = useSubject(getEventRelays(event.id));
 
   const [querying, setQuerying] = useState(false);
@@ -64,24 +66,28 @@ export const NoteRelays = ({ event, ...props }: NoteRelaysProps) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <IconButton title="Note Relays" icon={<RelayIcon />} {...props} aria-label="Note Relays" />
+        <IconButton title="Note Relays" icon={<RelayIcon />} size={props.size ?? "sm"} aria-label="Note Relays" />
       </PopoverTrigger>
-      <PopoverContent>
-        <PopoverArrow />
-        <PopoverBody>
-          <Flex gap="2">
-            <Button size="xs" onClick={queryRelays} isLoading={querying}>
-              Search
-            </Button>
-            <Button size="xs" onClick={broadcast} isLoading={broadcasting}>
-              Broadcast
-            </Button>
-          </Flex>
-          {relays.map((url) => (
-            <Text key={url}>{url}</Text>
-          ))}
-        </PopoverBody>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent>
+          <PopoverArrow />
+          <PopoverBody>
+            {relays.map((url) => (
+              <Text key={url}>{url}</Text>
+            ))}
+          </PopoverBody>
+          <PopoverFooter>
+            <Flex gap="2">
+              <Button size="xs" onClick={queryRelays} isLoading={querying} leftIcon={<SearchIcon />}>
+                Search
+              </Button>
+              <Button size="xs" onClick={broadcast} isLoading={broadcasting} leftIcon={<RelayIcon />}>
+                Broadcast
+              </Button>
+            </Flex>
+          </PopoverFooter>
+        </PopoverContent>
+      </Portal>
     </Popover>
   );
-};
+});

src/components/reload-prompt.tsx

@@ -1,14 +1,23 @@
 import { useRegisterSW } from "virtual:pwa-register/react";
-import { Alert, AlertIcon, AlertTitle, Button } from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Button, CloseButton, useToast } from "@chakra-ui/react";
+
+// check for updates every hour
+const intervalMS = 60 * 60 * 1000;
 
 export const ReloadPrompt = () => {
+  const toast = useToast();
   const {
-    offlineReady: [offlineReady, setOfflineReady],
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker,
   } = useRegisterSW({
+    immediate: false,
     onRegistered(r) {
       console.log("SW Registered: " + r);
+      toast({ variant: "success", title: "Installed" });
+
+      if (r) {
+        setInterval(() => r.update(), intervalMS);
+      }
     },
     onRegisterError(error) {
       console.log("SW registration error", error);
@@ -16,17 +25,17 @@ export const ReloadPrompt = () => {
   });
 
   const close = () => {
-    setOfflineReady(false);
     setNeedRefresh(false);
   };
 
-  return offlineReady || needRefresh ? (
-    <Alert status="success">
+  return needRefresh ? (
+    <Alert status="success" flexShrink={0}>
       <AlertIcon />
       <AlertTitle>New update ready!</AlertTitle>
       <Button size="sm" ml="auto" onClick={() => updateServiceWorker(true)}>
         Refresh
       </Button>
+      <CloseButton ml="4" onClick={close} />
     </Alert>
   ) : null;
 };

vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: "autoUpdate",
+      registerType: "prompt",
       manifest: {
         name: "noStrudel",
         short_name: "noStrudel",