add simple unknown event feed

src/app.tsx

@@ -92,6 +92,7 @@ const WotTestView = lazy(() => import("./views/tools/wot-test"));
 const StreamModerationView = lazy(() => import("./views/streams/dashboard"));
 const NetworkMuteGraphView = lazy(() => import("./views/tools/network-mute-graph"));
 const NetworkDMGraphView = lazy(() => import("./views/tools/network-dm-graph"));
+const UnknownTimelineView = lazy(() => import("./views/tools/unknown-event-feed"));
 
 const UserStreamsTab = lazy(() => import("./views/user/streams"));
 const StreamsView = lazy(() => import("./views/streams"));
@@ -302,6 +303,7 @@ const router = createHashRouter([
           { path: "dm-timeline", element: <DMTimelineView /> },
           { path: "transform/:id", element: <TransformNoteView /> },
           { path: "satellite-cdn", element: <SatelliteCDNView /> },
+          { path: "unknown", element: <UnknownTimelineView /> },
         ],
       },
       {

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

@@ -61,7 +61,9 @@ export default function EmbeddedUnknown({ event, ...props }: Omit<CardProps, "ch
               View Raw
             </Button>
           </Flex>
-          <Box whiteSpace="pre-wrap">{content}</Box>
+          <Box whiteSpace="pre-wrap" noOfLines={5}>
+            {content}
+          </Box>
         </CardBody>
       </Card>
       {debugModal.isOpen && <NoteDebugModal isOpen={debugModal.isOpen} onClose={debugModal.onClose} event={event} />}

src/components/timeline-page/generic-note-timeline/timeline-item.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, memo, useRef } from "react";
 import { Kind } from "nostr-tools";
-import { Box, Text } from "@chakra-ui/react";
+import { Box, BreadcrumbLink, Text } from "@chakra-ui/react";
 
 import { ErrorBoundary } from "../../error-boundary";
 import ReplyNote from "./reply-note";
@@ -14,6 +14,8 @@ import { useRegisterIntersectionEntity } from "../../../providers/local/intersec
 import { getEventUID, isReply } from "../../../helpers/nostr/events";
 import { STREAM_KIND } from "../../../helpers/nostr/stream";
 import { NostrEvent } from "../../../types/nostr-event";
+import { FLARE_VIDEO_KIND } from "../../../helpers/nostr/flare";
+import EmbeddedFlareVideo from "../../embed-event/event-types/embedded-flare-video";
 
 function TimelineItem({ event, visible, minHeight }: { event: NostrEvent; visible: boolean; minHeight?: number }) {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,6 +41,9 @@ function TimelineItem({ event, visible, minHeight }: { event: NostrEvent; visibl
     case Kind.BadgeAward:
       content = <BadgeAwardCard award={event} />;
       break;
+    case FLARE_VIDEO_KIND:
+      content = <EmbeddedFlareVideo video={event} />;
+      break;
     default:
       content = <Text>Unknown event kind: {event.kind}</Text>;
       break;

src/views/other-stuff/apps.ts

@@ -17,6 +17,7 @@ import { App } from "./component/app-card";
 import ShieldOff from "../../components/icons/shield-off";
 import Users01 from "../../components/icons/users-01";
 import Film02 from "../../components/icons/film-02";
+import MessageQuestionSquare from "../../components/icons/message-question-square";
 
 export const internalApps: App[] = [
   {
@@ -81,6 +82,13 @@ export const internalTools: App[] = [
     id: "dm-timeline",
     to: "/tools/dm-timeline",
   },
+  {
+    title: "Unknown Events",
+    description: "A timeline of unknown events",
+    icon: MessageQuestionSquare,
+    id: "unknown",
+    to: "/tools/unknown",
+  },
   { title: "WoT Test", description: "Just a test for now", icon: Users01, id: "wot-test", to: "/tools/wot-test" },
 ];
 

src/views/tools/unknown-event-feed.tsx

@@ -0,0 +1,107 @@
+// NOTE: this should be an option in the main feed
+// Also this can be used as a way of discovering apps when NIP-89 is implemented
+import { Button, Flex } from "@chakra-ui/react";
+import { memo, useCallback, useRef } from "react";
+
+import VerticalPageLayout from "../../components/vertical-page-layout";
+import PeopleListProvider, { usePeopleListContext } from "../../providers/local/people-list-provider";
+import PeopleListSelection from "../../components/people-list-selection/people-list-selection";
+import useTimelineLoader from "../../hooks/use-timeline-loader";
+import { useReadRelayUrls } from "../../hooks/use-client-relays";
+import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
+import IntersectionObserverProvider, {
+  useRegisterIntersectionEntity,
+} from "../../providers/local/intersection-observer";
+import useSubject from "../../hooks/use-subject";
+import { NostrEvent } from "../../types/nostr-event";
+import { ChevronLeftIcon } from "../../components/icons";
+import { useNavigate } from "react-router-dom";
+import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter";
+import { getEventUID } from "../../helpers/nostr/events";
+import { EmbedEvent } from "../../components/embed-event";
+import { Kind } from "nostr-tools";
+import { STREAM_CHAT_MESSAGE_KIND, STREAM_KIND } from "../../helpers/nostr/stream";
+import {
+  BOOKMARK_LIST_KIND,
+  BOOKMARK_LIST_SET_KIND,
+  COMMUNITIES_LIST_KIND,
+  MUTE_LIST_KIND,
+  PEOPLE_LIST_KIND,
+  PIN_LIST_KIND,
+} from "../../helpers/nostr/lists";
+
+const UnknownEvent = memo(({ event }: { event: NostrEvent }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useRegisterIntersectionEntity(ref, getEventUID(event));
+
+  return (
+    <div ref={ref}>
+      <EmbedEvent event={event} />
+    </div>
+  );
+});
+
+const commonTimelineKinds = [
+  Kind.Text,
+  Kind.Article,
+  Kind.Repost,
+  Kind.Reaction,
+  Kind.BadgeAward,
+  Kind.BadgeDefinition,
+  STREAM_KIND,
+  Kind.Contacts,
+  Kind.Metadata,
+  Kind.EncryptedDirectMessage,
+  MUTE_LIST_KIND,
+  STREAM_CHAT_MESSAGE_KIND,
+  Kind.EventDeletion,
+  BOOKMARK_LIST_KIND,
+  BOOKMARK_LIST_SET_KIND,
+  PEOPLE_LIST_KIND,
+  PIN_LIST_KIND,
+  COMMUNITIES_LIST_KIND,
+];
+
+export function UnknownTimelinePage() {
+  const navigate = useNavigate();
+  const { listId, filter } = usePeopleListContext();
+
+  const clientMuteFilter = useClientSideMuteFilter();
+  const eventFilter = useCallback(
+    (e: NostrEvent) => {
+      if (clientMuteFilter(e)) return false;
+      if (commonTimelineKinds.includes(e.kind)) return false;
+      return true;
+    },
+    [clientMuteFilter],
+  );
+  const readRelays = useReadRelayUrls();
+  const timeline = useTimelineLoader(`${listId ?? "global"}-unknown-feed`, readRelays, filter, { eventFilter });
+
+  const events = useSubject(timeline.timeline);
+  const callback = useTimelineCurserIntersectionCallback(timeline);
+
+  return (
+    <VerticalPageLayout>
+      <Flex gap="2">
+        <Button leftIcon={<ChevronLeftIcon />} onClick={() => navigate(-1)}>
+          Back
+        </Button>
+        <PeopleListSelection />
+      </Flex>
+      <IntersectionObserverProvider callback={callback}>
+        {events.map((dm) => (
+          <UnknownEvent key={dm.id} event={dm} />
+        ))}
+      </IntersectionObserverProvider>
+    </VerticalPageLayout>
+  );
+}
+
+export default function UnknownTimelineView() {
+  return (
+    <PeopleListProvider>
+      <UnknownTimelinePage />
+    </PeopleListProvider>
+  );
+}