feat: picture notes editor

2025-01-12 17:18:45 +08:00
parent 2aba89419e
commit 5bf220fa5b
14 changed files with 467 additions and 119 deletions
--- a/src/components/PostEditor/NormalPostContent.tsx
+++ b/src/components/PostEditor/NormalPostContent.tsx
@@ -4,12 +4,7 @@ import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
 import { StorageKey } from '@/constants'
 import { useToast } from '@/hooks/use-toast'
-import {
-  createCommentDraftEvent,
-  createPictureNoteDraftEvent,
-  createShortTextNoteDraftEvent
-} from '@/lib/draft-event'
-import { extractImagesFromContent } from '@/lib/event'
+import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
 import { useNostr } from '@/providers/NostrProvider'
 import client from '@/services/client.service'
 import { ChevronDown, LoaderCircle } from 'lucide-react'
@@ -20,7 +15,7 @@ import Mentions from './Mentions'
 import Preview from './Preview'
 import Uploader from './Uploader'

-export default function PostContent({
+export default function NormalPostContent({
  defaultContent = '',
  parentEvent,
  close
@@ -37,19 +32,12 @@ export default function PostContent({
  const [posting, setPosting] = useState(false)
  const [showMoreOptions, setShowMoreOptions] = useState(false)
  const [addClientTag, setAddClientTag] = useState(false)
-  const [isPictureNote, setIsPictureNote] = useState(false)
-  const [hasImages, setHasImages] = useState(false)
  const canPost = !!content && !posting

  useEffect(() => {
    setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
  }, [])

-  useEffect(() => {
-    const { images } = extractImagesFromContent(content)
-    setHasImages(!!images && images.length > 0)
-  }, [content])
-
  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value)
  }
@@ -69,18 +57,13 @@ export default function PostContent({
          const relayList = await client.fetchRelayList(parentEvent.pubkey)
          additionalRelayUrls.push(...relayList.read.slice(0, 5))
        }
-        if (isPictureNote && !hasImages) {
-          throw new Error(t('Picture note requires images'))
-        }
        const draftEvent =
-          isPictureNote && !parentEvent && hasImages
-            ? await createPictureNoteDraftEvent(content, pictureInfos, { addClientTag })
-            : parentEvent && parentEvent.kind !== kinds.ShortTextNote
-              ? await createCommentDraftEvent(content, parentEvent, pictureInfos, { addClientTag })
-              : await createShortTextNoteDraftEvent(content, pictureInfos, {
-                  parentEvent,
-                  addClientTag
-                })
+          parentEvent && parentEvent.kind !== kinds.ShortTextNote
+            ? await createCommentDraftEvent(content, parentEvent, pictureInfos, { addClientTag })
+            : await createShortTextNoteDraftEvent(content, pictureInfos, {
+                parentEvent,
+                addClientTag
+              })
        await publish(draftEvent, additionalRelayUrls)
        setContent('')
        close()
@@ -177,21 +160,6 @@ export default function PostContent({
          <div className="text-muted-foreground text-xs">
            {t('Show others this was sent via Jumble')}
          </div>
-          {!parentEvent && (
-            <>
-              <div className="flex items-center space-x-2">
-                <Label htmlFor="picture-note">{t('Picture note')}</Label>
-                <Switch
-                  id="picture-note"
-                  checked={isPictureNote}
-                  onCheckedChange={setIsPictureNote}
-                />
-              </div>
-              <div className="text-muted-foreground text-xs">
-                {t('A special note for picture-first clients like Olas')}
-              </div>
-            </>
-          )}
        </div>
      )}
      <div className="flex gap-2 items-center justify-around sm:hidden">
--- a/src/components/PostEditor/PicturePostContent.tsx
+++ b/src/components/PostEditor/PicturePostContent.tsx
@@ -0,0 +1,233 @@
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
+import { StorageKey } from '@/constants'
+import { useToast } from '@/hooks/use-toast'
+import { createPictureNoteDraftEvent } from '@/lib/draft-event'
+import { useNostr } from '@/providers/NostrProvider'
+import { ChevronDown, LoaderCircle, X } from 'lucide-react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import Lightbox from 'yet-another-react-lightbox'
+import Zoom from 'yet-another-react-lightbox/plugins/zoom'
+import Image from '../Image'
+import Mentions from './Mentions'
+import Uploader from './Uploader'
+
+export default function PicturePostContent({ close }: { close: () => void }) {
+  const { t } = useTranslation()
+  const { toast } = useToast()
+  const { publish, checkLogin } = useNostr()
+  const [content, setContent] = useState('')
+  const [pictureInfos, setPictureInfos] = useState<{ url: string; tags: string[][] }[]>([])
+  const [posting, setPosting] = useState(false)
+  const [showMoreOptions, setShowMoreOptions] = useState(false)
+  const [addClientTag, setAddClientTag] = useState(false)
+  const canPost = !!content && !posting && pictureInfos.length > 0
+
+  useEffect(() => {
+    setAddClientTag(window.localStorage.getItem(StorageKey.ADD_CLIENT_TAG) === 'true')
+  }, [])
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value)
+  }
+
+  const post = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    checkLogin(async () => {
+      if (!canPost) {
+        close()
+        return
+      }
+
+      setPosting(true)
+      try {
+        if (!pictureInfos.length) {
+          throw new Error(t('Picture note requires images'))
+        }
+        const draftEvent = await createPictureNoteDraftEvent(content, pictureInfos, {
+          addClientTag
+        })
+        await publish(draftEvent)
+        setContent('')
+        close()
+      } catch (error) {
+        if (error instanceof AggregateError) {
+          error.errors.forEach((e) =>
+            toast({
+              variant: 'destructive',
+              title: t('Failed to post'),
+              description: e.message
+            })
+          )
+        } else if (error instanceof Error) {
+          toast({
+            variant: 'destructive',
+            title: t('Failed to post'),
+            description: error.message
+          })
+        }
+        console.error(error)
+        return
+      } finally {
+        setPosting(false)
+      }
+      toast({
+        title: t('Post successful'),
+        description: t('Your post has been published')
+      })
+    })
+  }
+
+  const onAddClientTagChange = (checked: boolean) => {
+    setAddClientTag(checked)
+    window.localStorage.setItem(StorageKey.ADD_CLIENT_TAG, checked.toString())
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="text-xs text-muted-foreground">
+        {t('A special note for picture-first clients like Olas')}
+      </div>
+      <PictureUploader pictureInfos={pictureInfos} setPictureInfos={setPictureInfos} />
+      <Textarea
+        className="h-32"
+        onChange={handleTextareaChange}
+        value={content}
+        placeholder={t('Write something...')}
+      />
+      <div className="flex items-center justify-between">
+        <Button
+          variant="link"
+          className="text-foreground gap-0 px-0"
+          onClick={() => setShowMoreOptions((pre) => !pre)}
+        >
+          {t('More options')}
+          <ChevronDown className={`transition-transform ${showMoreOptions ? 'rotate-180' : ''}`} />
+        </Button>
+        <div className="flex gap-2 items-center">
+          <Mentions content={content} />
+          <div className="flex gap-2 items-center max-sm:hidden">
+            <Button
+              variant="secondary"
+              onClick={(e) => {
+                e.stopPropagation()
+                close()
+              }}
+            >
+              {t('Cancel')}
+            </Button>
+            <Button type="submit" disabled={!canPost} onClick={post}>
+              {posting && <LoaderCircle className="animate-spin" />}
+              {t('Post')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {showMoreOptions && (
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Label htmlFor="add-client-tag">{t('Add client tag')}</Label>
+            <Switch
+              id="add-client-tag"
+              checked={addClientTag}
+              onCheckedChange={onAddClientTagChange}
+            />
+          </div>
+          <div className="text-muted-foreground text-xs">
+            {t('Show others this was sent via Jumble')}
+          </div>
+        </div>
+      )}
+      <div className="flex gap-2 items-center justify-around sm:hidden">
+        <Button
+          className="w-full"
+          variant="secondary"
+          onClick={(e) => {
+            e.stopPropagation()
+            close()
+          }}
+        >
+          {t('Cancel')}
+        </Button>
+        <Button className="w-full" type="submit" disabled={!canPost} onClick={post}>
+          {posting && <LoaderCircle className="animate-spin" />}
+          {t('Post')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function PictureUploader({
+  pictureInfos,
+  setPictureInfos
+}: {
+  pictureInfos: { url: string; tags: string[][] }[]
+  setPictureInfos: Dispatch<
+    SetStateAction<
+      {
+        url: string
+        tags: string[][]
+      }[]
+    >
+  >
+}) {
+  const [index, setIndex] = useState(-1)
+
+  return (
+    <>
+      <div className="grid grid-cols-3 gap-4">
+        {pictureInfos.map(({ url }, index) => (
+          <div className="relative" key={`${index}-${url}`}>
+            <Image
+              image={{ url }}
+              className="aspect-square w-full rounded-lg"
+              onClick={(e) => {
+                e.stopPropagation()
+                setIndex(index)
+              }}
+            />
+            <Button
+              variant="destructive"
+              className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 rounded-full w-6 h-6 p-0"
+              onClick={() => {
+                setPictureInfos((prev) => prev.filter((_, i) => i !== index))
+              }}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+        <Uploader
+          variant="big"
+          onUploadSuccess={({ url, tags }) => {
+            setPictureInfos((prev) => [...prev, { url, tags }])
+          }}
+        />
+      </div>
+      {index >= 0 &&
+        createPortal(
+          <div onClick={(e) => e.stopPropagation()}>
+            <Lightbox
+              index={index}
+              slides={pictureInfos.map(({ url }) => ({ src: url }))}
+              plugins={[Zoom]}
+              open={index >= 0}
+              close={() => setIndex(-1)}
+              controller={{
+                closeOnBackdropClick: true,
+                closeOnPullUp: true,
+                closeOnPullDown: true
+              }}
+              styles={{ toolbar: { paddingTop: '2.25rem' } }}
+            />
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}
--- a/src/components/PostEditor/Uploader.tsx
+++ b/src/components/PostEditor/Uploader.tsx
@@ -1,14 +1,17 @@
 import { Button } from '@/components/ui/button'
 import { useToast } from '@/hooks/use-toast'
+import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
-import { ImageUp, LoaderCircle } from 'lucide-react'
+import { ImageUp, Loader, LoaderCircle, Plus } from 'lucide-react'
 import { useRef, useState } from 'react'
 import { z } from 'zod'

 export default function Uploader({
-  onUploadSuccess
+  onUploadSuccess,
+  variant = 'button'
 }: {
  onUploadSuccess: ({ url, tags }: { url: string; tags: string[][] }) => void
+  variant?: 'button' | 'big'
 }) {
  const [uploading, setUploading] = useState(false)
  const { signHttpAuth } = useNostr()
@@ -62,20 +65,46 @@ export default function Uploader({
  }

  const handleUploadClick = () => {
-    fileInputRef.current?.click()
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '' // clear the value so that the same file can be uploaded again
+      fileInputRef.current.click()
+    }
+  }
+
+  if (variant === 'button') {
+    return (
+      <>
+        <Button variant="secondary" onClick={handleUploadClick} disabled={uploading}>
+          {uploading ? <LoaderCircle className="animate-spin" /> : <ImageUp />}
+        </Button>
+        <input
+          type="file"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={handleFileChange}
+          accept="image/*,video/*,audio/*"
+        />
+      </>
+    )
  }

  return (
    <>
-      <Button variant="secondary" onClick={handleUploadClick} disabled={uploading}>
-        {uploading ? <LoaderCircle className="animate-spin" /> : <ImageUp />}
-      </Button>
+      <div
+        className={cn(
+          'flex flex-col gap-2 items-center justify-center aspect-square w-full rounded-lg border border-dashed',
+          uploading ? 'cursor-not-allowed text-muted-foreground' : 'clickable'
+        )}
+        onClick={handleUploadClick}
+      >
+        {uploading ? <Loader size={36} className="animate-spin" /> : <Plus size={36} />}
+      </div>
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: 'none' }}
        onChange={handleFileChange}
-        accept="image/*,video/*,audio/*"
+        accept="image/*"
      />
    </>
  )
--- a/src/components/PostEditor/index.tsx
+++ b/src/components/PostEditor/index.tsx
@@ -5,19 +5,16 @@ import {
  DialogHeader,
  DialogTitle
 } from '@/components/ui/dialog'
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle
-} from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event } from 'nostr-tools'
-import { Dispatch } from 'react'
-import PostContent from './PostContent'
+import { Dispatch, useMemo } from 'react'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet'
+import NormalPostContent from './NormalPostContent'
+import PicturePostContent from './PicturePostContent'
 import Title from './Title'
+import { useTranslation } from 'react-i18next'

 export default function PostEditor({
  defaultContent = '',
@@ -30,32 +27,58 @@ export default function PostEditor({
  open: boolean
  setOpen: Dispatch<boolean>
 }) {
+  const { t } = useTranslation()
  const { isSmallScreen } = useScreenSize()

+  const content = useMemo(() => {
+    return parentEvent ? (
+      <NormalPostContent
+        defaultContent={defaultContent}
+        parentEvent={parentEvent}
+        close={() => setOpen(false)}
+      />
+    ) : (
+      <Tabs defaultValue="normal" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="normal">{t('Normal Post')}</TabsTrigger>
+          <TabsTrigger value="picture">{t('Picture Post')}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="normal">
+          <NormalPostContent
+            defaultContent={defaultContent}
+            parentEvent={parentEvent}
+            close={() => setOpen(false)}
+          />
+        </TabsContent>
+        <TabsContent value="picture">
+          <PicturePostContent close={() => setOpen(false)} />
+        </TabsContent>
+      </Tabs>
+    )
+  }, [parentEvent])
+
  if (isSmallScreen) {
    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerContent className="h-full">
-          <DrawerHeader>
-            <DrawerTitle className="text-start">
-              <Title parentEvent={parentEvent} />
-            </DrawerTitle>
-            <DrawerDescription className="hidden" />
-          </DrawerHeader>
-          <div className="overflow-auto py-2 px-4">
-            <PostContent
-              defaultContent={defaultContent}
-              parentEvent={parentEvent}
-              close={() => setOpen(false)}
-            />
-          </div>
-        </DrawerContent>
-      </Drawer>
+      <Sheet open={open} onOpenChange={setOpen} modal={false}>
+        <SheetContent className="h-full w-full p-0 border-none" side="bottom" hideClose>
+          <ScrollArea className="px-4 h-full max-h-screen">
+            <div className="space-y-4 px-2 py-6">
+              <SheetHeader>
+                <SheetTitle className="text-start">
+                  <Title parentEvent={parentEvent} />
+                </SheetTitle>
+                <SheetDescription className="hidden" />
+              </SheetHeader>
+              {content}
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
    )
  }

  return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={setOpen} modal={false}>
      <DialogContent className="p-0" withoutClose>
        <ScrollArea className="px-4 h-full max-h-screen">
          <div className="space-y-4 px-2 py-6">
@@ -65,11 +88,7 @@ export default function PostEditor({
              </DialogTitle>
              <DialogDescription className="hidden" />
            </DialogHeader>
-            <PostContent
-              defaultContent={defaultContent}
-              parentEvent={parentEvent}
-              close={() => setOpen(false)}
-            />
+            {content}
          </div>
        </ScrollArea>
      </DialogContent>