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/Note/Poll.tsx
+++ b/src/components/Note/Poll.tsx
@@ -0,0 +1,232 @@
+import { Button } from '@/components/ui/button'
+import { POLL_TYPE } from '@/constants'
+import { useFetchPollResults } from '@/hooks/useFetchPollResults'
+import { createPollResponseDraftEvent } from '@/lib/draft-event'
+import { getPollMetadataFromEvent } from '@/lib/event-metadata'
+import { cn } from '@/lib/utils'
+import { useNostr } from '@/providers/NostrProvider'
+import client from '@/services/client.service'
+import pollResultsService from '@/services/poll-results.service'
+import dayjs from 'dayjs'
+import { CheckCircle2, Loader2 } from 'lucide-react'
+import { Event } from 'nostr-tools'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+
+export default function Poll({ event, className }: { event: Event; className?: string }) {
+  const { t } = useTranslation()
+  const { pubkey, publish, startLogin } = useNostr()
+  const [isVoting, setIsVoting] = useState(false)
+  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>([])
+  const pollResults = useFetchPollResults(event.id)
+  const [isLoadingResults, setIsLoadingResults] = useState(false)
+  const poll = useMemo(() => getPollMetadataFromEvent(event), [event])
+  const votedOptionIds = useMemo(() => {
+    if (!pollResults || !pubkey) return []
+    return Object.entries(pollResults.results)
+      .filter(([, voters]) => voters.has(pubkey))
+      .map(([optionId]) => optionId)
+  }, [pollResults, pubkey])
+  const validPollOptionIds = useMemo(() => poll?.options.map((option) => option.id) || [], [poll])
+  const isExpired = useMemo(() => poll?.endsAt && dayjs().unix() > poll.endsAt, [poll])
+  const isMultipleChoice = useMemo(() => poll?.pollType === POLL_TYPE.MULTIPLE_CHOICE, [poll])
+  const canVote = useMemo(() => !isExpired && !votedOptionIds.length, [isExpired, votedOptionIds])
+
+  if (!poll) {
+    return null
+  }
+
+  const fetchResults = async () => {
+    setIsLoadingResults(true)
+    try {
+      const relays = await ensurePollRelays(event.pubkey, poll)
+      return await pollResultsService.fetchResults(
+        event.id,
+        relays,
+        validPollOptionIds,
+        isMultipleChoice,
+        poll.endsAt
+      )
+    } catch (error) {
+      console.error('Failed to fetch poll results:', error)
+      toast.error('Failed to fetch poll results: ' + (error as Error).message)
+    } finally {
+      setIsLoadingResults(false)
+    }
+  }
+
+  const handleOptionClick = (optionId: string) => {
+    if (isExpired) return
+
+    if (isMultipleChoice) {
+      setSelectedOptionIds((prev) =>
+        prev.includes(optionId) ? prev.filter((id) => id !== optionId) : [...prev, optionId]
+      )
+    } else {
+      setSelectedOptionIds((prev) => (prev.includes(optionId) ? [] : [optionId]))
+    }
+  }
+
+  const handleVote = async () => {
+    if (selectedOptionIds.length === 0) return
+    if (!pubkey) {
+      startLogin()
+      return
+    }
+
+    setIsVoting(true)
+    try {
+      if (!pollResults) {
+        const _pollResults = await fetchResults()
+        if (_pollResults && _pollResults.voters.has(pubkey)) {
+          return
+        }
+      }
+
+      const additionalRelayUrls = await ensurePollRelays(event.pubkey, poll)
+
+      const draftEvent = createPollResponseDraftEvent(event, selectedOptionIds)
+      await publish(draftEvent, {
+        additionalRelayUrls
+      })
+
+      setSelectedOptionIds([])
+      pollResultsService.addPollResponse(event.id, pubkey, selectedOptionIds)
+    } catch (error) {
+      console.error('Failed to vote:', error)
+      toast.error('Failed to vote: ' + (error as Error).message)
+    } finally {
+      setIsVoting(false)
+    }
+  }
+
+  return (
+    <div className={className}>
+      <div className="space-y-2">
+        <div className="text-sm text-muted-foreground">
+          {poll.pollType === POLL_TYPE.MULTIPLE_CHOICE && (
+            <p>{t('Multiple choice (select one or more)')}</p>
+          )}
+        </div>
+
+        {/* Poll Options */}
+        <div className="grid gap-2">
+          {poll.options.map((option) => {
+            const votes = pollResults?.results?.[option.id]?.size ?? 0
+            const totalVotes = pollResults?.totalVotes ?? 0
+            const percentage = totalVotes > 0 ? (votes / totalVotes) * 100 : 0
+            const isMax =
+              pollResults && pollResults.totalVotes > 0
+                ? Object.values(pollResults.results).every((res) => res.size <= votes)
+                : false
+
+            return (
+              <button
+                key={option.id}
+                title={option.label}
+                className={cn(
+                  'relative w-full px-4 py-3 rounded-lg border transition-all flex items-center gap-2',
+                  canVote ? 'cursor-pointer' : 'cursor-not-allowed',
+                  canVote &&
+                    (selectedOptionIds.includes(option.id)
+                      ? 'border-primary bg-primary/20'
+                      : 'hover:border-primary/40 hover:bg-primary/5')
+                )}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleOptionClick(option.id)
+                }}
+                disabled={!canVote}
+              >
+                {/* Content */}
+                <div className="flex items-center gap-2 flex-1 w-0 z-10">
+                  <div className={cn('line-clamp-2 text-left', isMax ? 'font-semibold' : '')}>
+                    {option.label}
+                  </div>
+                  {votedOptionIds.includes(option.id) && (
+                    <CheckCircle2 className="size-4 shrink-0" />
+                  )}
+                </div>
+                {!!pollResults && (
+                  <div
+                    className={cn(
+                      'text-muted-foreground shrink-0 z-10',
+                      isMax ? 'font-semibold text-foreground' : ''
+                    )}
+                  >
+                    {percentage.toFixed(1)}%
+                  </div>
+                )}
+
+                {/* Progress Bar Background */}
+                <div
+                  className={cn(
+                    'absolute inset-0 rounded-md transition-all duration-700 ease-out',
+                    isMax ? 'bg-primary/60' : 'bg-muted/90'
+                  )}
+                  style={{ width: `${percentage}%` }}
+                />
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Results Summary */}
+        <div className="text-sm text-muted-foreground">
+          {!!pollResults && t('{{number}} votes', { number: pollResults.totalVotes ?? 0 })}
+          {!!pollResults && !!poll.endsAt && ' · '}
+          {!!poll.endsAt &&
+            (isExpired
+              ? t('Poll has ended')
+              : t('Poll ends at {{time}}', {
+                  time: new Date(poll.endsAt * 1000).toLocaleString()
+                }))}
+        </div>
+
+        {(canVote || !pollResults) && (
+          <div className="flex items-center justify-between gap-2">
+            {/* Vote Button */}
+            {canVote && (
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (selectedOptionIds.length === 0) return
+                  handleVote()
+                }}
+                disabled={!selectedOptionIds.length || isVoting}
+                className="flex-1"
+              >
+                {isVoting && <Loader2 className="animate-spin" />}
+                {t('Vote')}
+              </Button>
+            )}
+
+            {!pollResults && (
+              <Button
+                variant="secondary"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  fetchResults()
+                }}
+                disabled={isLoadingResults}
+              >
+                {isLoadingResults && <Loader2 className="animate-spin" />}
+                {t('Load results')}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+async function ensurePollRelays(creator: string, poll: { relayUrls: string[] }) {
+  const relays = poll.relayUrls.slice(0, 4)
+  if (!relays.length) {
+    const relayList = await client.fetchRelayList(creator)
+    relays.push(...relayList.read.slice(0, 4))
+  }
+  return relays
+}
--- a/src/components/Note/UnknownNote.tsx
+++ b/src/components/Note/UnknownNote.tsx
@@ -3,7 +3,7 @@ import { Event } from 'nostr-tools'
 import { useTranslation } from 'react-i18next'
 import ClientSelect from '../ClientSelect'

-export function UnknownNote({ event, className }: { event: Event; className?: string }) {
+export default function UnknownNote({ event, className }: { event: Event; className?: string }) {
  const { t } = useTranslation()

  return (
--- a/src/components/Note/index.tsx
+++ b/src/components/Note/index.tsx
@@ -29,7 +29,8 @@ import LiveEvent from './LiveEvent'
 import LongFormArticle from './LongFormArticle'
 import MutedNote from './MutedNote'
 import NsfwNote from './NsfwNote'
-import { UnknownNote } from './UnknownNote'
+import Poll from './Poll'
+import UnknownNote from './UnknownNote'

 export default function Note({
  event,
@@ -69,7 +70,8 @@ export default function Note({
      kinds.CommunityDefinition,
      ExtendedKind.GROUP_METADATA,
      ExtendedKind.PICTURE,
-      ExtendedKind.COMMENT
+      ExtendedKind.COMMENT,
+      ExtendedKind.POLL
    ].includes(event.kind)
  ) {
    content = <UnknownNote className="mt-2" event={event} />
@@ -87,6 +89,13 @@ export default function Note({
    content = <GroupMetadata className="mt-2" event={event} originalNoteId={originalNoteId} />
  } else if (event.kind === kinds.CommunityDefinition) {
    content = <CommunityDefinition className="mt-2" event={event} />
+  } else if (event.kind === ExtendedKind.POLL) {
+    content = (
+      <>
+        <Content className="mt-2" event={event} />
+        <Poll className="mt-2" event={event} />
+      </>
+    )
  } else {
    content = <Content className="mt-2" event={event} />
  }
--- a/src/components/NoteList/index.tsx
+++ b/src/components/NoteList/index.tsx
@@ -24,6 +24,14 @@ import Tabs from '../Tabs'
 const LIMIT = 100
 const ALGO_LIMIT = 500
 const SHOW_COUNT = 10
+const KINDS = [
+  kinds.ShortTextNote,
+  kinds.Repost,
+  kinds.Highlights,
+  kinds.LongFormArticle,
+  ExtendedKind.COMMENT,
+  ExtendedKind.POLL
+]

 export default function NoteList({
  relayUrls = [],
@@ -115,13 +123,7 @@ export default function NoteList({
        subRequests.push({
          urls: myRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
          filter: {
-            kinds: [
-              kinds.ShortTextNote,
-              kinds.Repost,
-              kinds.Highlights,
-              ExtendedKind.COMMENT,
-              kinds.LongFormArticle
-            ],
+            kinds: KINDS,
            authors: [pubkey],
            '#p': [author],
            limit: LIMIT
@@ -130,13 +132,7 @@ export default function NoteList({
        subRequests.push({
          urls: targetRelayList.write.concat(BIG_RELAY_URLS).slice(0, 5),
          filter: {
-            kinds: [
-              kinds.ShortTextNote,
-              kinds.Repost,
-              kinds.Highlights,
-              ExtendedKind.COMMENT,
-              kinds.LongFormArticle
-            ],
+            kinds: KINDS,
            authors: [author],
            '#p': [pubkey],
            limit: LIMIT
@@ -149,16 +145,7 @@ export default function NoteList({
        }
        const _filter = {
          ...filter,
-          kinds:
-            filterType === 'pictures'
-              ? [ExtendedKind.PICTURE]
-              : [
-                  kinds.ShortTextNote,
-                  kinds.Repost,
-                  kinds.Highlights,
-                  ExtendedKind.COMMENT,
-                  kinds.LongFormArticle
-                ],
+          kinds: filterType === 'pictures' ? [ExtendedKind.PICTURE] : KINDS,
          limit: areAlgoRelays ? ALGO_LIMIT : LIMIT
        }
        if (relayUrls.length === 0 && (_filter.authors?.length || author)) {
--- 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>
  )
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
        'secondary-2': 'bg-secondary text-secondary-foreground hover:bg-primary',
        ghost: 'clickable hover:text-accent-foreground',
-        'ghost-destructive': 'cursor-pointer hover:bg-destructive/10 text-destructive',
+        'ghost-destructive': 'cursor-pointer hover:bg-destructive/20 text-destructive',
        link: 'text-primary underline-offset-4 hover:underline'
      },
      size: {