feat: polls (#451)

Co-authored-by: silberengel <silberengel7@protonmail.com>
2025-07-27 12:05:50 +08:00
parent 636ceacdad
commit b35e0cf850
35 changed files with 1240 additions and 130 deletions
--- a/src/components/PostEditor/PollEditor.tsx
+++ b/src/components/PostEditor/PollEditor.tsx
@@ -0,0 +1,145 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { normalizeUrl } from '@/lib/url'
+import { TPollCreateData } from '@/types'
+import dayjs from 'dayjs'
+import { AlertCircle, Eraser, X } from 'lucide-react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function PollEditor({
+  pollCreateData,
+  setPollCreateData,
+  setIsPoll
+}: {
+  pollCreateData: TPollCreateData
+  setPollCreateData: Dispatch<SetStateAction<TPollCreateData>>
+  setIsPoll: Dispatch<SetStateAction<boolean>>
+}) {
+  const { t } = useTranslation()
+  const [isMultipleChoice, setIsMultipleChoice] = useState(pollCreateData.isMultipleChoice)
+  const [options, setOptions] = useState(pollCreateData.options)
+  const [endsAt, setEndsAt] = useState(
+    pollCreateData.endsAt ? dayjs(pollCreateData.endsAt * 1000).format('YYYY-MM-DDTHH:mm') : ''
+  )
+  const [relayUrls, setRelayUrls] = useState(pollCreateData.relays.join(', '))
+
+  useEffect(() => {
+    setPollCreateData({
+      isMultipleChoice,
+      options,
+      endsAt: endsAt ? dayjs(endsAt).startOf('minute').unix() : undefined,
+      relays: relayUrls
+        ? relayUrls
+            .split(',')
+            .map((url) => normalizeUrl(url.trim()))
+            .filter(Boolean)
+        : []
+    })
+  }, [isMultipleChoice, options, endsAt, relayUrls])
+
+  const handleAddOption = () => {
+    setOptions([...options, ''])
+  }
+
+  const handleRemoveOption = (index: number) => {
+    if (options.length > 2) {
+      setOptions(options.filter((_, i) => i !== index))
+    }
+  }
+
+  const handleOptionChange = (index: number, value: string) => {
+    const newOptions = [...options]
+    newOptions[index] = value
+    setOptions(newOptions)
+  }
+
+  return (
+    <div className="space-y-4 border rounded-lg p-3">
+      <div className="space-y-2">
+        {options.map((option, index) => (
+          <div key={index} className="flex gap-2">
+            <Input
+              value={option}
+              onChange={(e) => handleOptionChange(index, e.target.value)}
+              placeholder={t('Option {{number}}', { number: index + 1 })}
+            />
+            <Button
+              type="button"
+              variant="ghost-destructive"
+              size="icon"
+              onClick={() => handleRemoveOption(index)}
+              disabled={options.length <= 2}
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+        <Button type="button" variant="outline" onClick={handleAddOption}>
+          {t('Add Option')}
+        </Button>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <Label htmlFor="multiple-choice">{t('Allow multiple choices')}</Label>
+        <Switch
+          id="multiple-choice"
+          checked={isMultipleChoice}
+          onCheckedChange={setIsMultipleChoice}
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="ends-at">{t('End Date (optional)')}</Label>
+        <div className="flex items-center gap-2">
+          <Input
+            id="ends-at"
+            type="datetime-local"
+            value={endsAt}
+            onChange={(e) => setEndsAt(e.target.value)}
+          />
+          <Button
+            type="button"
+            variant="ghost-destructive"
+            size="icon"
+            onClick={() => setEndsAt('')}
+            disabled={!endsAt}
+            title={t('Clear end date')}
+          >
+            <Eraser />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="relay-urls">{t('Relay URLs (optional, comma-separated)')}</Label>
+        <Input
+          id="relay-urls"
+          value={relayUrls}
+          onChange={(e) => setRelayUrls(e.target.value)}
+          placeholder="wss://relay1.com, wss://relay2.com"
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <div className="p-3 rounded-lg text-sm bg-destructive [&_svg]:size-4">
+          <div className="flex items-center gap-2">
+            <AlertCircle />
+            <div className="font-medium">{t('This is a poll note.')}</div>
+          </div>
+          <div className="pl-6">
+            {t(
+              'Unlike regular notes, polls are not widely supported and may not display on other clients.'
+            )}
+          </div>
+        </div>
+
+        <Button variant="ghost-destructive" className="w-full" onClick={() => setIsPoll(false)}>
+          {t('Remove poll')}
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/src/components/PostEditor/PostContent.tsx
+++ b/src/components/PostEditor/PostContent.tsx
@@ -1,17 +1,23 @@
 import Note from '@/components/Note'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
-import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
+import {
+  createCommentDraftEvent,
+  createPollDraftEvent,
+  createShortTextNoteDraftEvent
+} from '@/lib/draft-event'
 import { isTouchDevice } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
-import postContentCache from '@/services/post-content-cache.service'
-import { ImageUp, LoaderCircle, Settings, Smile } from 'lucide-react'
+import postEditorCache from '@/services/post-editor-cache.service'
+import { TPollCreateData } from '@/types'
+import { ImageUp, ListTodo, LoaderCircle, Settings, Smile } from 'lucide-react'
 import { Event, kinds } from 'nostr-tools'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import EmojiPickerDialog from '../EmojiPickerDialog'
 import Mentions from './Mentions'
+import PollEditor from './PollEditor'
 import { usePostEditor } from './PostEditorProvider'
 import PostOptions from './PostOptions'
 import PostTextarea, { TPostTextareaHandle } from './PostTextarea'
@@ -28,7 +34,7 @@ export default function PostContent({
  close: () => void
 }) {
  const { t } = useTranslation()
-  const { publish, checkLogin } = useNostr()
+  const { pubkey, publish, checkLogin } = useNostr()
  const { uploadingFiles, setUploadingFiles } = usePostEditor()
  const [text, setText] = useState('')
  const textareaRef = useRef<TPostTextareaHandle>(null)
@@ -38,7 +44,63 @@ export default function PostContent({
  const [specifiedRelayUrls, setSpecifiedRelayUrls] = useState<string[] | undefined>(undefined)
  const [mentions, setMentions] = useState<string[]>([])
  const [isNsfw, setIsNsfw] = useState(false)
-  const canPost = !!text && !posting && !uploadingFiles
+  const [isPoll, setIsPoll] = useState(false)
+  const [pollCreateData, setPollCreateData] = useState<TPollCreateData>({
+    isMultipleChoice: false,
+    options: ['', ''],
+    endsAt: undefined,
+    relays: []
+  })
+  const isFirstRender = useRef(true)
+  const canPost =
+    !!pubkey &&
+    !!text &&
+    !posting &&
+    !uploadingFiles &&
+    (!isPoll || pollCreateData.options.filter((option) => !!option.trim()).length >= 2)
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      const cachedSettings = postEditorCache.getPostSettingsCache({
+        defaultContent,
+        parentEvent
+      })
+      if (cachedSettings) {
+        setIsNsfw(cachedSettings.isNsfw ?? false)
+        setIsPoll(cachedSettings.isPoll ?? false)
+        setPollCreateData(
+          cachedSettings.pollCreateData ?? {
+            isMultipleChoice: false,
+            options: ['', ''],
+            endsAt: undefined,
+            relays: []
+          }
+        )
+        setSpecifiedRelayUrls(cachedSettings.specifiedRelayUrls)
+        setAddClientTag(cachedSettings.addClientTag ?? false)
+      }
+      return
+    }
+    postEditorCache.setPostSettingsCache(
+      { defaultContent, parentEvent },
+      {
+        isNsfw,
+        isPoll,
+        pollCreateData,
+        specifiedRelayUrls,
+        addClientTag
+      }
+    )
+  }, [
+    defaultContent,
+    parentEvent,
+    isNsfw,
+    isPoll,
+    pollCreateData,
+    specifiedRelayUrls,
+    addClientTag
+  ])

  const post = async (e?: React.MouseEvent) => {
    e?.stopPropagation()
@@ -54,14 +116,23 @@ export default function PostContent({
                protectedEvent: !!specifiedRelayUrls,
                isNsfw
              })
-            : await createShortTextNoteDraftEvent(text, mentions, {
-                parentEvent,
-                addClientTag,
-                protectedEvent: !!specifiedRelayUrls,
-                isNsfw
-              })
-        await publish(draftEvent, { specifiedRelayUrls })
-        postContentCache.clearPostCache({ defaultContent, parentEvent })
+            : isPoll
+              ? await createPollDraftEvent(pubkey, text, mentions, pollCreateData, {
+                  addClientTag,
+                  isNsfw
+                })
+              : await createShortTextNoteDraftEvent(text, mentions, {
+                  parentEvent,
+                  addClientTag,
+                  protectedEvent: !!specifiedRelayUrls,
+                  isNsfw
+                })
+
+        await publish(draftEvent, {
+          specifiedRelayUrls,
+          additionalRelayUrls: isPoll ? pollCreateData.relays : []
+        })
+        postEditorCache.clearPostCache({ defaultContent, parentEvent })
        close()
      } catch (error) {
        if (error instanceof AggregateError) {
@@ -78,6 +149,12 @@ export default function PostContent({
    })
  }

+  const handlePollToggle = () => {
+    if (parentEvent) return
+
+    setIsPoll((prev) => !prev)
+  }
+
  return (
    <div className="space-y-2">
      {parentEvent && (
@@ -94,12 +171,22 @@ export default function PostContent({
        defaultContent={defaultContent}
        parentEvent={parentEvent}
        onSubmit={() => post()}
+        className={isPoll ? 'h-20' : 'min-h-52'}
      />
-      <SendOnlyToSwitch
-        parentEvent={parentEvent}
-        specifiedRelayUrls={specifiedRelayUrls}
-        setSpecifiedRelayUrls={setSpecifiedRelayUrls}
-      />
+      {isPoll && (
+        <PollEditor
+          pollCreateData={pollCreateData}
+          setPollCreateData={setPollCreateData}
+          setIsPoll={setIsPoll}
+        />
+      )}
+      {!isPoll && (
+        <SendOnlyToSwitch
+          parentEvent={parentEvent}
+          specifiedRelayUrls={specifiedRelayUrls}
+          setSpecifiedRelayUrls={setSpecifiedRelayUrls}
+        />
+      )}
      <div className="flex items-center justify-between">
        <div className="flex gap-2 items-center">
          <Uploader
@@ -125,6 +212,17 @@ export default function PostContent({
              </Button>
            </EmojiPickerDialog>
          )}
+          {!parentEvent && (
+            <Button
+              variant="ghost"
+              size="icon"
+              title={t('Create Poll')}
+              className={isPoll ? 'bg-accent' : ''}
+              onClick={handlePollToggle}
+            >
+              <ListTodo />
+            </Button>
+          )}
          <Button
            variant="ghost"
            size="icon"
--- a/src/components/PostEditor/PostTextarea/Preview.tsx
+++ b/src/components/PostEditor/PostTextarea/Preview.tsx
@@ -1,10 +1,11 @@
 import { Card } from '@/components/ui/card'
 import { createFakeEvent } from '@/lib/event'
+import { cn } from '@/lib/utils'
 import Content from '../../Content'

-export default function Preview({ content }: { content: string }) {
+export default function Preview({ content, className }: { content: string; className?: string }) {
  return (
-    <Card className="p-3 min-h-52">
+    <Card className={cn('p-3', className)}>
      <Content event={createFakeEvent({ content })} className="pointer-events-none h-full" />
    </Card>
  )
--- a/src/components/PostEditor/PostTextarea/index.tsx
+++ b/src/components/PostEditor/PostTextarea/index.tsx
@@ -1,6 +1,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { parseEditorJsonToText } from '@/lib/tiptap'
-import postContentCache from '@/services/post-content-cache.service'
+import { cn } from '@/lib/utils'
+import postEditorCache from '@/services/post-editor-cache.service'
 import Document from '@tiptap/extension-document'
 import { HardBreak } from '@tiptap/extension-hard-break'
 import History from '@tiptap/extension-history'
@@ -31,8 +32,9 @@ const PostTextarea = forwardRef<
    defaultContent?: string
    parentEvent?: Event
    onSubmit?: () => void
+    className?: string
  }
->(({ text = '', setText, defaultContent, parentEvent, onSubmit }, ref) => {
+>(({ text = '', setText, defaultContent, parentEvent, onSubmit, className }, ref) => {
  const { t } = useTranslation()
  const { setUploadingFiles } = usePostEditor()
  const editor = useEditor({
@@ -56,8 +58,10 @@ const PostTextarea = forwardRef<
    ],
    editorProps: {
      attributes: {
-        class:
-          'border rounded-lg p-3 min-h-52 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+        class: cn(
+          'border rounded-lg p-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          className
+        )
      },
      handleKeyDown: (_view, event) => {
        // Handle Ctrl+Enter or Cmd+Enter for submit
@@ -69,10 +73,10 @@ const PostTextarea = forwardRef<
        return false
      }
    },
-    content: postContentCache.getPostCache({ defaultContent, parentEvent }),
+    content: postEditorCache.getPostContentCache({ defaultContent, parentEvent }),
    onUpdate(props) {
      setText(parseEditorJsonToText(props.editor.getJSON()))
-      postContentCache.setPostCache({ defaultContent, parentEvent }, props.editor.getJSON())
+      postEditorCache.setPostContentCache({ defaultContent, parentEvent }, props.editor.getJSON())
    },
    onCreate(props) {
      setText(parseEditorJsonToText(props.editor.getJSON()))
@@ -122,7 +126,7 @@ const PostTextarea = forwardRef<
        <EditorContent className="tiptap" editor={editor} />
      </TabsContent>
      <TabsContent value="preview">
-        <Preview content={text} />
+        <Preview content={text} className={className} />
      </TabsContent>
    </Tabs>
  )