add comments to unknown events

src/components/comment/generic-comment-form.tsx

@@ -15,6 +15,7 @@ import InsertImageButton from "../../views/new/note/insert-image-button";
 import InsertGifButton from "../gif/insert-gif-button";
 import { TrustProvider } from "../../providers/local/trust-provider";
 import TextNoteContents from "../note/timeline-note/text-note-contents";
+import InsertReactionButton from "../reactions/insert-reaction-button";
 
 export default function GenericCommentForm({
   event,
@@ -79,8 +80,11 @@ export default function GenericCommentForm({
         }}
       />
       <Flex gap="2" alignItems="center">
-        <InsertImageButton onUploaded={insertText} size="sm" aria-label="Upload image" />
-        <InsertGifButton onSelectURL={insertText} aria-label="Add gif" size="sm" />
+        <ButtonGroup size="sm">
+          <InsertImageButton onUploaded={insertText} aria-label="Upload image" />
+          <InsertGifButton onSelectURL={insertText} aria-label="Add gif" />
+          <InsertReactionButton onSelect={insertText} aria-label="Add Emoji" />
+        </ButtonGroup>
         <ButtonGroup size="sm" ml="auto">
           {onCancel && <Button onClick={onCancel}>Cancel</Button>}
           <Button type="submit" colorScheme="primary" size="sm">

src/components/comment/generic-comments.tsx

@@ -31,7 +31,7 @@ import { ChevronDownIcon, ChevronUpIcon, ReplyIcon } from "../icons";
 import EventZapButton from "../zap/event-zap-button";
 import GenericCommentForm from "./generic-comment-form";
 
-const Comment = memo(({ comment }: { comment: NostrEvent }) => {
+const Comment = memo(({ comment, level = 0 }: { comment: NostrEvent; level?: number }) => {
   const reply = useDisclosure();
   const replies = useStoreQuery(RepliesQuery, [comment]);
   const expand = useDisclosure({ defaultIsOpen: true });
@@ -85,7 +85,7 @@ const Comment = memo(({ comment }: { comment: NostrEvent }) => {
       {replies && replies.length > 0 && expand.isOpen && (
         <Flex pl="4" direction="column" gap="2" borderLeftWidth={1} position="relative">
           {(replies.length > 2 && !all.isOpen ? replies.slice(0, 2) : replies).map((reply) => (
-            <Comment key={comment.id} comment={reply} />
+            <Comment key={comment.id} comment={reply} level={level + 1} />
           ))}
         </Flex>
       )}

src/components/embed-event/event-types/embedded-unknown.tsx

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from "react";
-import { Box, Button, ButtonGroup, Card, CardBody, CardHeader, CardProps, Text } from "@chakra-ui/react";
+import { Box, Button, ButtonGroup, Card, CardBody, CardHeader, CardProps, IconButton, Text } from "@chakra-ui/react";
 
 import { NostrEvent } from "../../../types/nostr-event";
 import UserAvatarLink from "../../user/user-avatar-link";
@@ -11,6 +11,8 @@ import DebugEventButton from "../../debug-modal/debug-event-button";
 import DebugEventTags from "../../debug-modal/event-tags";
 import { AppHandlerContext } from "../../../providers/route/app-handler-provider";
 import { getSharableEventAddress } from "../../../services/relay-hints";
+import { QuestionIcon } from "@chakra-ui/icons";
+import RouterLink from "../../router-link";
 
 export default function EmbeddedUnknown({ event, ...props }: Omit<CardProps, "children"> & { event: NostrEvent }) {
   const address = useMemo(() => getSharableEventAddress(event), [event]);
@@ -27,13 +29,14 @@ export default function EmbeddedUnknown({ event, ...props }: Omit<CardProps, "ch
           <UserDnsIdentity pubkey={event.pubkey} onlyIcon />
           <Text>kind: {event.kind}</Text>
           <Timestamp timestamp={event.created_at} />
-          <ButtonGroup ml="auto">
+          <ButtonGroup ml="auto" size="sm">
             {address && (
-              <Button size="sm" leftIcon={<ExternalLinkIcon />} onClick={() => openAddress(address)}>
+              <Button leftIcon={<ExternalLinkIcon />} onClick={() => openAddress(address)}>
                 Open
               </Button>
             )}
-            <DebugEventButton event={event} size="sm" variant="outline" />
+            <IconButton icon={<QuestionIcon />} aria-label="Details" as={RouterLink} to={`/l/${address}`} />
+            <DebugEventButton event={event} variant="outline" />
           </ButtonGroup>
         </CardHeader>
         <CardBody p="2">

src/views/link/index.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertIcon, AlertTitle, Spinner } from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Button, Flex, Spinner, useDisclosure } from "@chakra-ui/react";
 import { Navigate, useParams } from "react-router-dom";
 import { NostrEvent, kinds, nip19 } from "nostr-tools";
 
@@ -10,6 +10,10 @@ import { EmbedEvent, EmbedEventPointer } from "../../components/embed-event";
 import useReplaceableEvent from "../../hooks/use-replaceable-event";
 import useSingleEvent from "../../hooks/use-single-event";
 import { MEDIA_POST_KIND } from "../../helpers/nostr/media";
+import SimpleView from "../../components/layout/presets/simple-view";
+import { GenericComments } from "../../components/comment/generic-comments";
+import GenericCommentForm from "../../components/comment/generic-comment-form";
+import { ThreadIcon } from "../../components/icons";
 
 function LoadUnknownAddress({ pointer, link }: { pointer: nip19.AddressPointer; link: string }) {
   const event = useReplaceableEvent(pointer, pointer.relays);
@@ -22,15 +26,27 @@ function LoadUnknownEvent({ pointer, link }: { pointer: nip19.EventPointer; link
   return <RenderRedirect event={event} link={link} />;
 }
 
-function Unknown({ pointer }: { pointer: nip19.DecodeResult }) {
+function UnknownView({ pointer, event }: { pointer: nip19.DecodeResult; event?: NostrEvent }) {
+  const comment = useDisclosure();
+
   return (
-    <>
-      <Alert status="warning">
-        <AlertIcon />
-        <AlertTitle>Unknown event kind</AlertTitle>
-      </Alert>
-      <EmbedEventPointer pointer={pointer} />
-    </>
+    <SimpleView title="Unknown event kind" maxW="4xl" center>
+      {event ? <EmbedEvent event={event} /> : <EmbedEventPointer pointer={pointer} />}
+
+      {event && (
+        <Flex mx="auto" maxW="4xl" w="full" gap="2" direction="column" mt="4">
+          {comment.isOpen ? (
+            <GenericCommentForm event={event} onCancel={comment.onClose} onSubmitted={comment.onClose} />
+          ) : (
+            <Button leftIcon={<ThreadIcon />} onClick={comment.onOpen} mr="auto">
+              Comment
+            </Button>
+          )}
+
+          <GenericComments event={event} />
+        </Flex>
+      )}
+    </SimpleView>
   );
 }
 
@@ -67,8 +83,7 @@ function RenderRedirect({ event, link }: { event?: NostrEvent; link: string }) {
     }
   }
 
-  if (event) return <EmbedEvent event={event} />;
-  return <Unknown pointer={decoded} />;
+  return <UnknownView pointer={decoded} event={event} />;
 }
 
 function NostrLinkPage() {