feat: support nip-36

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>
   );
 }

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>
+  );
+}