feat: support nip-36

2024-04-16 07:49:44 +07:00
parent 09b143cb08
commit 94d400cab2
16 changed files with 253 additions and 150 deletions
--- a/apps/desktop2/package.json
+++ b/apps/desktop2/package.json
@@ -19,6 +19,7 @@
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.7",
    "@tanstack/query-sync-storage-persister": "^5.29.0",
    "@tanstack/react-query": "^5.29.0",
    "@tanstack/react-query-persist-client": "^5.29.0",
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -10,7 +10,7 @@ import { getCurrent } from "@tauri-apps/api/webviewWindow";
 import { readTextFile } from "@tauri-apps/plugin-fs";
 import { nanoid } from "nanoid";
 import { useEffect, useRef, useState } from "react";
-import { useDebounce, useDebouncedCallback } from "use-debounce";
+import { useDebouncedCallback } from "use-debounce";
 import { VList, VListHandle } from "virtua";

 export const Route = createFileRoute("/$account/home")({
--- a/apps/desktop2/src/routes/__root.tsx
+++ b/apps/desktop2/src/routes/__root.tsx
@@ -2,8 +2,15 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
 import { type Platform } from "@tauri-apps/plugin-os";
-import { Account, Interests, Settings } from "@lume/types";
+import type { Account, Interests, Settings } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import { type Descendant } from "slate";
+
+type EditorElement = {
+  type: string;
+  children: Descendant[];
+  eventId?: string;
+};

 interface RouterContext {
  ark: Ark;
@@ -13,6 +20,7 @@ interface RouterContext {
  settings?: Settings;
  interests?: Interests;
  accounts?: Account[];
+  initialValue?: EditorElement[];
 }

 export const Route = createRootRouteWithContext<RouterContext>()({
--- a/apps/desktop2/src/routes/auth/settings.tsx
+++ b/apps/desktop2/src/routes/auth/settings.tsx
@@ -69,6 +69,13 @@ function Screen() {
    }));
  };

+  const toggleNsfw = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      nsfw: !newSettings.nsfw,
+    }));
+  };
+
  const submit = async () => {
    try {
      // start loading
@@ -167,18 +174,28 @@ function Screen() {
              </p>
            </div>
          </div>
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-50 px-5 py-4 dark:bg-neutral-950">
-            <p className="text-sm text-neutral-700 dark:text-neutral-300">
-              There are many more settings you can configure from the 'Settings'
-              Screen. Be sure to visit it later.
-            </p>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.nsfw}
+              onClick={() => toggleNsfw()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Filter sensitive content</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                By default, Lume will display all content which have Content
+                Warning tag, it's may include NSFW content.
+              </p>
+            </div>
          </div>
        </div>
        <button
          type="button"
          onClick={submit}
          disabled={loading}
-          className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+          className="mb-1 inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
        >
          {t("global.continue")}
        </button>
--- a/apps/desktop2/src/routes/editor/-components/media.tsx
+++ b/apps/desktop2/src/routes/editor/-components/media.tsx
@@ -7,6 +7,7 @@ import { getCurrent } from "@tauri-apps/api/window";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { useRouteContext } from "@tanstack/react-router";
 import { Spinner } from "@lume/ui";
+import * as Tooltip from "@radix-ui/react-tooltip";

 export function MediaButton({ className }: { className?: string }) {
  const { ark } = useRouteContext({ strict: false });
@@ -16,14 +17,13 @@ export function MediaButton({ className }: { className?: string }) {

  const uploadToNostrBuild = async () => {
    try {
+      // start loading
      setLoading(true);

      const image = await ark.upload();
+      insertImage(editor, image);

-      if (image) {
-        insertImage(editor, image);
-      }
-
+      // reset loading
      setLoading(false);
    } catch (e) {
      setLoading(false);
@@ -63,17 +63,29 @@ export function MediaButton({ className }: { className?: string }) {
  }, []);

  return (
-    <button
-      type="button"
-      onClick={() => uploadToNostrBuild()}
-      disabled={loading}
-      className={cn("inline-flex items-center justify-center", className)}
-    >
-      {loading ? (
-        <Spinner className="size-5" />
-      ) : (
-        <AddMediaIcon className="size-5" />
-      )}
-    </button>
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={() => uploadToNostrBuild()}
+            disabled={loading}
+            className={cn("inline-flex items-center justify-center", className)}
+          >
+            {loading ? (
+              <Spinner className="size-4" />
+            ) : (
+              <AddMediaIcon className="size-4" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
+            Upload media
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
  );
 }
--- a/apps/desktop2/src/routes/editor/-components/nsfw.tsx
+++ b/apps/desktop2/src/routes/editor/-components/nsfw.tsx
@@ -0,0 +1,40 @@
+import { NsfwIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Dispatch, SetStateAction } from "react";
+
+export function NsfwToggle({
+  nsfw,
+  setNsfw,
+  className,
+}: {
+  nsfw: boolean;
+  setNsfw: Dispatch<SetStateAction<boolean>>;
+  className?: string;
+}) {
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={() => setNsfw((prev) => !prev)}
+            className={cn(
+              "inline-flex items-center justify-center",
+              className,
+              nsfw ? "bg-blue-500 text-white" : "",
+            )}
+          >
+            <NsfwIcon className="size-4" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
+            Mark as sensitive content
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -1,4 +1,4 @@
-import { LoaderIcon, TrashIcon } from "@lume/icons";
+import { ComposeFilledIcon, NsfwIcon, TrashIcon } from "@lume/icons";
 import {
  Portal,
  cn,
@@ -35,11 +35,11 @@ import { Spinner, User } from "@lume/ui";
 import { nip19 } from "nostr-tools";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
+import { NsfwToggle } from "./-components/nsfw";

-type EditorElement = {
-  type: string;
-  children: Descendant[];
-  eventId?: string;
+type EditorSearch = {
+  reply_to: string;
+  quote: boolean;
 };

 const contactQueryOptions = queryOptions({
@@ -51,46 +51,48 @@ const contactQueryOptions = queryOptions({
 });

 export const Route = createFileRoute("/editor/")({
-  loader: ({ context }) =>
-    context.queryClient.ensureQueryData(contactQueryOptions),
+  validateSearch: (search: Record<string, string>): EditorSearch => {
+    return {
+      reply_to: search.reply_to,
+      quote: search.quote === "true" ?? false,
+    };
+  },
+  beforeLoad: async ({ search }) => {
+    return {
+      initialValue: search.quote
+        ? [
+            {
+              type: "paragraph",
+              children: [{ text: "" }],
+            },
+            {
+              type: "event",
+              eventId: `nostr:${nip19.noteEncode(search.reply_to)}`,
+              children: [{ text: "" }],
+            },
+            {
+              type: "paragraph",
+              children: [{ text: "" }],
+            },
+          ]
+        : [
+            {
+              type: "paragraph",
+              children: [{ text: "" }],
+            },
+          ],
+    };
+  },
+  loader: ({ context }) => {
+    context.queryClient.ensureQueryData(contactQueryOptions);
+  },
  component: Screen,
  pendingComponent: Pending,
 });

 function Screen() {
-  // @ts-ignore, useless
  const { reply_to, quote } = Route.useSearch();
-  const { ark } = Route.useRouteContext();
-
-  let initialValue: EditorElement[];
-
-  if (quote) {
-    initialValue = [
-      {
-        type: "paragraph",
-        children: [{ text: "" }],
-      },
-      {
-        type: "event",
-        eventId: `nostr:${nip19.noteEncode(reply_to)}`,
-        children: [{ text: "" }],
-      },
-      {
-        type: "paragraph",
-        children: [{ text: "" }],
-      },
-    ];
-  } else {
-    initialValue = [
-      {
-        type: "paragraph",
-        children: [{ text: "" }],
-      },
-    ];
-  }
-
-  const ref = useRef<HTMLDivElement | null>();
-  const contacts = useSuspenseQuery(contactQueryOptions).data as Contact[];
+  const { ark, initialValue } = Route.useRouteContext();

  const [t] = useTranslation();
  const [editorValue, setEditorValue] = useState(initialValue);
@@ -98,10 +100,14 @@ function Screen() {
  const [index, setIndex] = useState(0);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(false);
+  const [nsfw, setNsfw] = useState(false);
  const [editor] = useState(() =>
    withMentions(withNostrEvent(withImages(withReact(createEditor())))),
  );

+  const ref = useRef<HTMLDivElement | null>();
+  const contacts = useSuspenseQuery(contactQueryOptions).data as Contact[];
+
  const filters = contacts
    ?.filter((c) =>
      c?.profile.name?.toLowerCase().startsWith(search.toLowerCase()),
@@ -204,15 +210,25 @@ function Screen() {
      >
        <div
          data-tauri-drag-region
-          className="flex h-16 w-full shrink-0 items-center justify-end gap-3 px-2"
+          className="flex h-14 w-full shrink-0 items-center justify-end gap-2 px-2"
        >
-          <MediaButton className="size-9 rounded-full bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700" />
+          <NsfwToggle
+            nsfw={nsfw}
+            setNsfw={setNsfw}
+            className="size-8 rounded-full bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+          />
+          <MediaButton className="size-8 rounded-full bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700" />
          <button
            type="button"
            onClick={publish}
-            className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 font-medium text-white hover:bg-blue-600"
+            className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
          >
-            {loading ? <Spinner className="size-5" /> : t("global.post")}
+            {loading ? (
+              <Spinner className="size-4" />
+            ) : (
+              <ComposeFilledIcon className="size-4" />
+            )}
+            {t("global.post")}
          </button>
        </div>
        <div className="flex h-full min-h-0 w-full">