confirm before reposting

.changeset/stale-dots-kick.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Confirm before reposting

src/components/note/buttons/repost-button.tsx

@@ -1,5 +1,18 @@
 import { useState } from "react";
-import { IconButton, useToast } from "@chakra-ui/react";
+import {
+  Button,
+  IconButton,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import { RepostIcon } from "../../icons";
 import { buildRepost } from "../../../helpers/nostr-event";
@@ -7,8 +20,10 @@ import { useCurrentAccount } from "../../../hooks/use-current-account";
 import { nostrPostAction } from "../../../classes/nostr-post-action";
 import clientRelaysService from "../../../services/client-relays";
 import signingService from "../../../services/signing";
+import QuoteNote from "../quote-note";
 
 export function RepostButton({ event }: { event: NostrEvent }) {
+  const { isOpen, onClose, onOpen } = useDisclosure();
   const account = useCurrentAccount();
   const [loading, setLoading] = useState(false);
   const toast = useToast();
@@ -19,6 +34,7 @@ export function RepostButton({ event }: { event: NostrEvent }) {
       const draftRepost = buildRepost(event);
       const repost = await signingService.requestSignature(draftRepost, account);
       await nostrPostAction(clientRelaysService.getWriteUrls(), repost);
+      onClose();
     } catch (e) {
       if (e instanceof Error) {
         toast({ status: "error", description: e.message });
@@ -28,13 +44,38 @@ export function RepostButton({ event }: { event: NostrEvent }) {
   };
 
   return (
+    <>
       <IconButton
         icon={<RepostIcon />}
-      onClick={handleClick}
+        onClick={onOpen}
         aria-label="Repost Note"
         title="Repost Note"
         isDisabled={account.readonly}
         isLoading={loading}
       />
+      {isOpen && (
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader px="4" py="2">
+              Repost Note?
+            </ModalHeader>
+            <ModalCloseButton />
+            <ModalBody px="4" py="0">
+              <QuoteNote noteId={event.id} />
+            </ModalBody>
+
+            <ModalFooter px="4" py="4">
+              <Button variant="ghost" size="sm" mr={2} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme="brand" variant="solid" onClick={handleClick} size="sm" isLoading={loading}>
+                Repost
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      )}
+    </>
   );
 }

src/components/repost-note.tsx

@@ -9,6 +9,7 @@ import { NoteMenu } from "./note/note-menu";
 import { UserAvatar } from "./user-avatar";
 import { UserDnsIdentityIcon } from "./user-dns-identity";
 import { UserLink } from "./user-link";
+import { getUserDisplayName } from "../helpers/user-metadata";
 
 export default function RepostNote({ event, maxHeight }: { event: NostrEvent; maxHeight?: number }) {
   const {
@@ -33,7 +34,7 @@ export default function RepostNote({ event, maxHeight }: { event: NostrEvent; ma
         <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
         <span>Shared note</span>
         <Box flex={1} />
-        {import.meta.env.DEV && <NoteMenu event={event} size="sm" variant="link" aria-label="note options" />}
+        <NoteMenu event={event} size="sm" variant="link" aria-label="note options" />
       </Flex>
       {loading ? (
         <SkeletonText />