From f7bc42354b09665dfc3a77b987670032f0b98e2d Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sat, 11 Oct 2025 10:39:02 +0200
Subject: [PATCH] added preview pane

---
 .../DiscussionsPage/CreateThreadDialog.tsx    | 114 +++++++++++++++---
 1 file changed, 97 insertions(+), 17 deletions(-)

diff --git a/src/pages/primary/DiscussionsPage/CreateThreadDialog.tsx b/src/pages/primary/DiscussionsPage/CreateThreadDialog.tsx
index ef2ceb5..fcc5ab4 100644
--- a/src/pages/primary/DiscussionsPage/CreateThreadDialog.tsx
+++ b/src/pages/primary/DiscussionsPage/CreateThreadDialog.tsx
@@ -7,7 +7,8 @@ import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
 import { Slider } from '@/components/ui/slider'
-import { Hash, X, Users, Code, Coins, Newspaper, BookOpen, Scroll, Cpu, Trophy, Film, Heart, TrendingUp, Utensils, MapPin, Home, PawPrint, Shirt, Image, Zap, Settings, Book, Network, Car } from 'lucide-react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Hash, X, Users, Code, Coins, Newspaper, BookOpen, Scroll, Cpu, Trophy, Film, Heart, TrendingUp, Utensils, MapPin, Home, PawPrint, Shirt, Image, Zap, Settings, Book, Network, Car, Eye, Edit3 } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNostr } from '@/providers/NostrProvider'
@@ -17,6 +18,7 @@ import { prefixNostrAddresses } from '@/lib/nostr-address'
 import { showPublishingError } from '@/lib/publishing-feedback'
 import dayjs from 'dayjs'
 import { extractHashtagsFromContent, normalizeTopic } from '@/lib/discussion-topics'
+import DiscussionContent from '@/components/Note/DiscussionContent'
 
 // Utility functions for thread creation
 function extractImagesFromContent(content: string): string[] {
@@ -299,24 +301,102 @@ export default function CreateThreadDialog({
               </p>
             </div>
 
-            {/* Content Input */}
+            {/* Content Input with Preview */}
             <div className="space-y-2">
               <Label htmlFor="content">{t('Thread Content')}</Label>
-              <Textarea
-                id="content"
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                placeholder={t('Share your thoughts, ask questions, or start a discussion...')}
-                rows={8}
-                maxLength={5000}
-                className={errors.content ? 'border-destructive' : ''}
-              />
-              {errors.content && (
-                <p className="text-sm text-destructive">{errors.content}</p>
-              )}
-              <p className="text-sm text-muted-foreground">
-                {content.length}/5000 {t('characters')}
-              </p>
+              <Tabs defaultValue="edit" className="w-full">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="edit" className="flex items-center gap-2">
+                    <Edit3 className="w-4 h-4" />
+                    {t('Edit')}
+                  </TabsTrigger>
+                  <TabsTrigger value="preview" className="flex items-center gap-2">
+                    <Eye className="w-4 h-4" />
+                    {t('Preview')}
+                  </TabsTrigger>
+                </TabsList>
+                <TabsContent value="edit" className="space-y-2">
+                  <Textarea
+                    id="content"
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    placeholder={t('Share your thoughts, ask questions, or start a discussion...')}
+                    rows={8}
+                    maxLength={5000}
+                    className={errors.content ? 'border-destructive' : ''}
+                  />
+                  {errors.content && (
+                    <p className="text-sm text-destructive">{errors.content}</p>
+                  )}
+                  <p className="text-sm text-muted-foreground">
+                    {content.length}/5000 {t('characters')}
+                  </p>
+                </TabsContent>
+                <TabsContent value="preview" className="space-y-2">
+                  <div className="border rounded-lg p-4 bg-muted/30 min-h-[200px]">
+                    {content.trim() ? (
+                      <div className="space-y-4">
+                        {/* Preview of the thread */}
+                        <div className="border-b pb-2">
+                          <h3 className="text-lg font-semibold">{title || t('Untitled')}</h3>
+                          <div className="flex items-center gap-2 mt-1">
+                            <selectedTopicInfo.icon className="w-4 h-4" />
+                            <Badge variant="secondary" className="text-xs">
+                              {selectedTopicInfo.label}
+                            </Badge>
+                            {isReadingGroup && (
+                              <>
+                                <Badge variant="outline" className="text-xs">
+                                  <Hash className="w-3 h-3 mr-1" />
+                                  Readings
+                                </Badge>
+                                {author && (
+                                  <span className="text-xs text-muted-foreground">
+                                    {t('Author')}: {author}
+                                  </span>
+                                )}
+                                {subject && (
+                                  <span className="text-xs text-muted-foreground">
+                                    {t('Book')}: {subject}
+                                  </span>
+                                )}
+                              </>
+                            )}
+                          </div>
+                        </div>
+                        {/* Preview of the content */}
+                        <div className="prose prose-sm max-w-none dark:prose-invert">
+                          <DiscussionContent 
+                            event={{
+                              id: 'preview',
+                              pubkey: pubkey || '',
+                              created_at: Math.floor(Date.now() / 1000),
+                              kind: 11,
+                              tags: [
+                                ['title', title],
+                                ['t', selectedTopic],
+                                ...(isReadingGroup ? [['t', 'readings']] : []),
+                                ...(author ? [['author', author]] : []),
+                                ...(subject ? [['subject', subject]] : [])
+                              ],
+                              content: content,
+                              sig: ''
+                            }}
+                          />
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-center text-muted-foreground py-8">
+                        <Edit3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                        <p>{t('Start typing to see a preview...')}</p>
+                      </div>
+                    )}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {content.length}/5000 {t('characters')}
+                  </p>
+                </TabsContent>
+              </Tabs>
             </div>
 
             {/* Readings Options - Only show for literature topic */}