add timeline health view

.changeset/sixty-planes-sin.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add simple timeline health view

src/components/icons.tsx

@@ -273,11 +273,17 @@ export const ImageGridTimelineIcon = createIcon({
 });
 
 export const TextTimelineIcon = createIcon({
-  displayName: "ImageGridTimeline",
+  displayName: "TextTimelineIcon",
   d: "M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z",
   defaultProps,
 });
 
+export const TimelineHealthIcon = createIcon({
+  displayName: "TimelineHealthIcon",
+  d: "M13.1962 2.26791L16.4462 7.89708C16.7223 8.37537 16.5584 8.98696 16.0801 9.2631L14.7806 10.0122L15.7811 11.7452L14.049 12.7452L13.0485 11.0122L11.75 11.7631C11.2717 12.0392 10.6601 11.8754 10.384 11.3971L8.5462 8.2146C6.49383 8.8373 5 10.7442 5 13C5 13.6253 5.1148 14.2238 5.32447 14.7756C6.0992 14.284 7.01643 14 8 14C9.68408 14 11.1737 14.8326 12.0797 16.1086L19.7681 11.6704L20.7681 13.4024L12.8898 17.9509C12.962 18.2892 13 18.6401 13 19C13 19.3427 12.9655 19.6773 12.8999 20.0006L21 20V22L4.00054 22.0012C3.3723 21.1653 3 20.1261 3 19C3 17.9927 3.29782 17.0551 3.81021 16.2702C3.29276 15.2948 3 14.1816 3 13C3 10.0047 4.88131 7.44875 7.52677 6.44942L7.13397 5.76791C6.58169 4.81133 6.90944 3.58815 7.86603 3.03586L10.4641 1.53586C11.4207 0.983577 12.6439 1.31133 13.1962 2.26791ZM8 16C6.34315 16 5 17.3431 5 19C5 19.3506 5.06014 19.6871 5.17067 19.9999H10.8293C10.9399 19.6871 11 19.3506 11 19C11 17.3431 9.65685 16 8 16ZM11.4641 3.26791L8.86602 4.76791L11.616 9.53105L14.2141 8.03105L11.4641 3.26791Z",
+  defaultProps,
+});
+
 export const MapIcon = createIcon({
   displayName: "MapIcon",
   d: "M4 6.14286V18.9669L9.06476 16.7963L15.0648 19.7963L20 17.6812V4.85714L21.303 4.2987C21.5569 4.18992 21.8508 4.30749 21.9596 4.56131C21.9862 4.62355 22 4.69056 22 4.75827V19L15 22L9 19L2.69696 21.7013C2.44314 21.8101 2.14921 21.6925 2.04043 21.4387C2.01375 21.3765 2 21.3094 2 21.2417V7L4 6.14286ZM16.2426 11.2426L12 15.4853L7.75736 11.2426C5.41421 8.89949 5.41421 5.10051 7.75736 2.75736C10.1005 0.414214 13.8995 0.414214 16.2426 2.75736C18.5858 5.10051 18.5858 8.89949 16.2426 11.2426ZM12 12.6569L14.8284 9.82843C16.3905 8.26633 16.3905 5.73367 14.8284 4.17157C13.2663 2.60948 10.7337 2.60948 9.17157 4.17157C7.60948 5.73367 7.60948 8.26633 9.17157 9.82843L12 12.6569Z",

src/components/timeline-page/index.tsx

@@ -10,6 +10,7 @@ import TimelineActionAndStatus from "./timeline-action-and-status";
 import { useSearchParams } from "react-router-dom";
 import { NostrEvent } from "../../types/nostr-event";
 import { matchImageUrls } from "../../helpers/regexp";
+import TimelineHealth from "./timeline-health";
 
 export function useTimelinePageEventFilter() {
   const [params, setParams] = useSearchParams();
@@ -24,7 +25,7 @@ export function useTimelinePageEventFilter() {
   );
 }
 
-export type TimelineViewType = "timeline" | "images";
+export type TimelineViewType = "timeline" | "images" | "health";
 
 export default function TimelinePage({ timeline, header }: { timeline: TimelineLoader; header?: React.ReactNode }) {
   const callback = useTimelineCurserIntersectionCallback(timeline);
@@ -45,6 +46,9 @@ export default function TimelinePage({ timeline, header }: { timeline: TimelineL
             </SimpleGrid>
           </ImageGalleryProvider>
         );
+
+      case "health":
+        return <TimelineHealth timeline={timeline} />;
       default:
         return null;
     }

src/components/timeline-page/timeline-health/index.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Flex,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tooltip,
+  Tr,
+  useColorMode,
+} from "@chakra-ui/react";
+import { TimelineLoader } from "../../../classes/timeline-loader";
+import useSubject from "../../../hooks/use-subject";
+import { getEventRelays } from "../../../services/event-relays";
+import { NostrEvent } from "../../../types/nostr-event";
+import { useMemo, useRef } from "react";
+import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
+import { RelayFavicon } from "../../relay-favicon";
+import { NoteLink } from "../../note-link";
+import dayjs from "dayjs";
+
+function EventRow({ event, relays }: { event: NostrEvent; relays: string[] }) {
+  const sub = useMemo(() => getEventRelays(event.id), [event.id]);
+  const seenRelays = useSubject(sub);
+
+  const ref = useRef<HTMLTableRowElement | null>(null);
+  useRegisterIntersectionEntity(ref, event.id);
+
+  const { colorMode } = useColorMode();
+  const yes = colorMode === "light" ? "green.200" : "green.800";
+  const no = colorMode === "light" ? "red.200" : "red.800";
+
+  return (
+    <Tr ref={ref}>
+      <Td isTruncated p="2">
+        {dayjs.unix(event.created_at).fromNow()}
+      </Td>
+      <Td isTruncated p="2">
+        <NoteLink noteId={event.id} />
+      </Td>
+      <Td p="2" overflow="hidden">
+        <Text isTruncated w={["xs", "xs", "xs", "sm", "xl"]}>
+          {event.content}
+        </Text>
+      </Td>
+      {relays.map((relay) => (
+        <Td key={relay} backgroundColor={seenRelays.includes(relay) ? yes : no} title={relay} p="2">
+          <RelayFavicon relay={relay} size="2xs" />
+        </Td>
+      ))}
+    </Tr>
+  );
+}
+
+export default function TimelineHealth({ timeline }: { timeline: TimelineLoader }) {
+  const events = useSubject(timeline.timeline);
+
+  return (
+    <>
+      <Flex gap="2">
+        {/* <Button>All Relays</Button> */}
+        {/* <Button>Repair feed</Button> */}
+      </Flex>
+      <TableContainer>
+        <Table size="sm">
+          <Thead>
+            <Tr>
+              <Th p="2" w="1">
+                Date
+              </Th>
+              <Th p="p" w="1">
+                Event
+              </Th>
+              <Th p="p">Content</Th>
+              {timeline.relays.map((relay) => (
+                <Tooltip label={relay}>
+                  <Th title={relay} w="0.1rem" p="2">
+                    <RelayFavicon relay={relay} size="2xs" />
+                  </Th>
+                </Tooltip>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {events.map((event) => (
+              <EventRow key={event.id} event={event} relays={timeline.relays} />
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}

src/components/timeline-page/timeline-view-type.tsx

@@ -1,5 +1,5 @@
 import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
-import { ImageGridTimelineIcon, TextTimelineIcon } from "../icons";
+import { ImageGridTimelineIcon, TextTimelineIcon, TimelineHealthIcon } from "../icons";
 import { TimelineViewType } from "./index";
 import { useSearchParams } from "react-router-dom";
 
@@ -13,6 +13,12 @@ export default function TimelineViewTypeButtons(props: ButtonGroupProps) {
 
   return (
     <ButtonGroup>
+      <IconButton
+        aria-label="Health"
+        icon={<TimelineHealthIcon />}
+        variant={mode === "health" ? "solid" : "ghost"}
+        onClick={() => onChange("health")}
+      />
       <IconButton
         aria-label="Timeline"
         icon={<TextTimelineIcon />}