wip

2024-02-22 14:01:29 +07:00
parent e9ce932646
commit 64286aa354
34 changed files with 899 additions and 354 deletions
@@ -1,6 +1,9 @@
-import { ReplyList, ThreadNote } from "@lume/ui";
+import { useEvent } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { Note, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
+import { ReplyList } from "./-components/replyList";

 export const Route = createLazyFileRoute("/events/$eventId")({
  component: Event,
@@ -8,16 +11,63 @@ export const Route = createLazyFileRoute("/events/$eventId")({

 function Event() {
  const { eventId } = Route.useParams();
+  const { isLoading, isError, data } = useEvent(eventId);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <LoaderIcon className="size-5 animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    <div className="flex h-full w-full items-center justify-center">
+      <p>Not found.</p>
+    </div>;
+  }

  return (
-    <div className="relative h-screen w-screen overflow-y-auto overflow-x-hidden">
-      <div data-tauri-drag-region className="h-11 w-full" />
-      <WindowVirtualizer>
-        <div className="px-6">
-          <ThreadNote eventId={eventId} />
-          <ReplyList eventId={eventId} />
+    <WindowVirtualizer>
+      <div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
+        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+        <div className="flex h-full min-h-0 w-full">
+          <div className="h-full w-full flex-1 px-2 pb-2">
+            <div className="h-full w-full overflow-hidden overflow-y-auto rounded-xl bg-white px-3 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
+              <Note.Provider event={data}>
+                <Note.Root className="flex flex-col">
+                  <div className="mb-2 flex items-center justify-between pt-4">
+                    <User.Provider pubkey={data.pubkey}>
+                      <User.Root className="flex flex-1 items-center gap-3">
+                        <User.Avatar className="size-11 shrink-0 rounded-full object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+                        <div className="flex flex-1 flex-col">
+                          <User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+                          <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+                            <User.Time time={data.created_at} />
+                            <span>·</span>
+                            <User.NIP05 />
+                          </div>
+                        </div>
+                      </User.Root>
+                    </User.Provider>
+                    <Note.Menu />
+                  </div>
+                  <Note.Thread className="mb-2" />
+                  <Note.Content className="min-w-0" />
+                  <div className="flex h-14 items-center justify-between">
+                    <Note.Reaction />
+                    <div className="inline-flex items-center gap-4">
+                      <Note.Repost />
+                      <Note.Zap />
+                    </div>
+                  </div>
+                </Note.Root>
+              </Note.Provider>
+              {data ? <ReplyList eventId={eventId} /> : null}
+            </div>
+          </div>
        </div>
-      </WindowVirtualizer>
-    </div>
+      </div>
+    </WindowVirtualizer>
  );
 }
@@ -0,0 +1,65 @@
+import { NavArrowDownIcon } from "@lume/icons";
+import { EventWithReplies } from "@lume/types";
+import { cn } from "@lume/utils";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Note } from "@lume/ui";
+import { SubReply } from "./subReply";
+
+export function Reply({ event }: { event: EventWithReplies }) {
+  const [t] = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Note.Provider event={event}>
+        <Note.Root className="pt-2">
+          <div className="flex h-14 items-center justify-between">
+            <Note.User className="flex-1 pr-2" />
+            <Note.Menu />
+          </div>
+          <Note.Content />
+          <div className="flex h-14 items-center justify-between">
+            {event.replies?.length > 0 ? (
+              <Collapsible.Trigger asChild>
+                <div className="inline-flex h-14 items-center gap-1 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                  <NavArrowDownIcon
+                    className={cn("size-5", open ? "rotate-180 transform" : "")}
+                  />
+                  {`${event.replies?.length} ${
+                    event.replies?.length === 1
+                      ? t("note.reply.single")
+                      : t("note.reply.plural")
+                  }`}
+                </div>
+              </Collapsible.Trigger>
+            ) : (
+              <div />
+            )}
+            <div className="inline-flex items-center gap-4">
+              <Note.Reply />
+              <Note.Repost />
+              <Note.Zap />
+            </div>
+          </div>
+          <div
+            className={cn(
+              open
+                ? "border-t border-neutral-100 pb-3 dark:border-neutral-900"
+                : "",
+            )}
+          >
+            {event.replies?.length > 0 ? (
+              <Collapsible.Content className="divide-y divide-neutral-100 pl-6 dark:divide-neutral-900">
+                {event.replies?.map((childEvent) => (
+                  <SubReply key={childEvent.id} event={childEvent} />
+                ))}
+              </Collapsible.Content>
+            ) : null}
+          </div>
+        </Note.Root>
+      </Note.Provider>
+    </Collapsible.Root>
+  );
+}
@@ -0,0 +1,53 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { EventWithReplies } from "@lume/types";
+
+export function ReplyList({
+  eventId,
+  className,
+}: {
+  eventId: string;
+  className?: string;
+}) {
+  const ark = useArk();
+
+  const [t] = useTranslation();
+  const [data, setData] = useState<null | EventWithReplies[]>(null);
+
+  useEffect(() => {
+    async function getReplies() {
+      const events = await ark.get_event_thread(eventId);
+      setData(events);
+    }
+    getReplies();
+  }, [eventId]);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900",
+        className,
+      )}
+    >
+      {!data ? (
+        <div className="mt-4 flex h-16 items-center justify-center p-3">
+          <LoaderIcon className="h-5 w-5 animate-spin" />
+        </div>
+      ) : data.length === 0 ? (
+        <div className="mt-4 flex w-full items-center justify-center">
+          <div className="flex flex-col items-center justify-center gap-2 py-6">
+            <h3 className="text-3xl">👋</h3>
+            <p className="leading-none text-neutral-600 dark:text-neutral-400">
+              {t("note.reply.empty")}
+            </p>
+          </div>
+        </div>
+      ) : (
+        data.map((event) => <Reply key={event.id} event={event} />)
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,20 @@
+import { Event } from "@lume/types";
+import { Note } from "@lume/ui";
+
+export function SubReply({ event }: { event: Event; rootEventId?: string }) {
+  return (
+    <Note.Provider event={event}>
+      <Note.Root className="py-2">
+        <div className="flex h-14 items-center justify-between">
+          <Note.User className="flex-1 pr-2" />
+          <Note.Menu />
+        </div>
+        <Note.Content />
+        <div className="mt-2 flex items-center justify-end gap-4">
+          <Note.Repost />
+          <Note.Zap />
+        </div>
+      </Note.Root>
+    </Note.Provider>
+  );
+}