From dd561308e37bfc346e4be6fd47bacc95b9d3bc6f Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Tue, 13 Feb 2024 17:06:52 +0000
Subject: [PATCH] more console changes

---
 src/views/tools/event-console/event-row.tsx   | 41 +++++++++++++++++++
 .../tools/event-console/expand-button.tsx     | 18 ++++++++
 src/views/tools/event-console/index.tsx       | 11 +++--
 src/views/tools/event-console/process.ts      | 13 ++++++
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/views/tools/event-console/event-row.tsx
 create mode 100644 src/views/tools/event-console/expand-button.tsx
 create mode 100644 src/views/tools/event-console/process.ts

diff --git a/src/views/tools/event-console/event-row.tsx b/src/views/tools/event-console/event-row.tsx
new file mode 100644
index 000000000..6b177ac97
--- /dev/null
+++ b/src/views/tools/event-console/event-row.tsx
@@ -0,0 +1,41 @@
+import { Code, Flex, Text, useDisclosure } from "@chakra-ui/react";
+import { NostrEvent } from "nostr-tools";
+import ExpandButton from "./expand-button";
+import UserName from "../../../components/user-name";
+
+export default function EventRow({ event }: { event: NostrEvent }) {
+  const expanded = useDisclosure();
+
+  return (
+    <>
+      <Flex
+        gap="2"
+        alignItems="center"
+        borderTopWidth={1}
+        p="2"
+        onClick={expanded.onToggle}
+        overflow="hidden"
+        cursor="pointer"
+      >
+        <Text fontFamily="monospace" whiteSpace="pre">
+          {event.id.slice(0, 8)} ({event.kind}) [{event.tags.length}]
+        </Text>
+        <UserName pubkey={event.pubkey} fontSize="sm" />
+        {!expanded.isOpen && (
+          <Text isTruncated fontSize="sm">
+            {event.content}
+          </Text>
+        )}
+        <ExpandButton isOpen={expanded.isOpen} onToggle={expanded.onToggle} size="xs" variant="ghost" ml="auto" />
+      </Flex>
+
+      {expanded.isOpen && (
+        <Flex gap="2" direction="column" px="2" pb="2" alignItems="flex-start">
+          <Code whiteSpace="pre-wrap" noOfLines={4} w="full">
+            {event.content}
+          </Code>
+        </Flex>
+      )}
+    </>
+  );
+}
diff --git a/src/views/tools/event-console/expand-button.tsx b/src/views/tools/event-console/expand-button.tsx
new file mode 100644
index 000000000..2962008e5
--- /dev/null
+++ b/src/views/tools/event-console/expand-button.tsx
@@ -0,0 +1,18 @@
+import { IconButton, IconButtonProps } from "@chakra-ui/react";
+import { ChevronDownIcon, ChevronUpIcon } from "../../../components/icons";
+
+export default function ExpandButton({
+  isOpen,
+  onToggle,
+  ...props
+}: { isOpen: boolean; onToggle: () => void } & Omit<IconButtonProps, "aria-label" | "title">) {
+  return (
+    <IconButton
+      onClick={onToggle}
+      icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      aria-label={isOpen ? "Collapse" : "Expand"}
+      title={isOpen ? "Collapse" : "Expand"}
+      {...props}
+    />
+  );
+}
diff --git a/src/views/tools/event-console/index.tsx b/src/views/tools/event-console/index.tsx
index 704b30ffe..fd8b3825f 100644
--- a/src/views/tools/event-console/index.tsx
+++ b/src/views/tools/event-console/index.tsx
@@ -27,10 +27,11 @@ import BackButton from "../../../components/back-button";
 import { NostrFilterSchema } from "./schema";
 import { relayRequest } from "../../../helpers/relay";
 import { localRelay } from "../../../services/local-relay";
-import EmbeddedUnknown from "../../../components/embed-event/event-types/embedded-unknown";
 import Play from "../../../components/icons/play";
 import ClockRewind from "../../../components/icons/clock-rewind";
 import HistoryDrawer from "./history-drawer";
+import EventRow from "./event-row";
+import { processFilter } from "./process";
 
 const FilterEditor = memo(
   ({ value, onChange, onRun }: { value: string; onChange: (v: string) => void; onRun: () => void }) => {
@@ -74,7 +75,7 @@ const EventTimeline = memo(({ events }: { events: NostrEvent[] }) => {
   return (
     <>
       {events.map((event) => (
-        <EmbeddedUnknown key={event.id} event={event} />
+        <EventRow key={event.id} event={event} />
       ))}
     </>
   );
@@ -93,7 +94,7 @@ export default function EventConsoleView() {
   const [events, setEvents] = useState<NostrEvent[]>([]);
   const loadEvents = useCallback(async () => {
     try {
-      const filter: Filter = JSON.parse(queryRef.current);
+      const filter = await processFilter(JSON.parse(queryRef.current));
       setLoading(true);
       setHistory((arr) => (arr || []).concat(queryRef.current));
       const e = await relayRequest(localRelay, [filter]);
@@ -139,7 +140,9 @@ export default function EventConsoleView() {
       <Flex gap="2">
         <Text>{events.length} events</Text>
       </Flex>
-      <EventTimeline events={events} />
+      <Box>
+        <EventTimeline events={events} />
+      </Box>
 
       <HistoryDrawer
         isOpen={historyDrawer.isOpen}
diff --git a/src/views/tools/event-console/process.ts b/src/views/tools/event-console/process.ts
new file mode 100644
index 000000000..9c2600b53
--- /dev/null
+++ b/src/views/tools/event-console/process.ts
@@ -0,0 +1,13 @@
+import { Filter, nip19 } from "nostr-tools";
+
+export async function processFilter(f: Filter): Promise<Filter> {
+  const filter = JSON.parse(JSON.stringify(f)) as Filter;
+
+  if (filter.authors)
+    filter.authors = filter.authors.map((p) => {
+      if (p.startsWith("npub")) return nip19.decode(p).data as string;
+      return p;
+    });
+
+  return filter;
+}