hide advanced options

src/pages/primary/DiscussionsPage/CreateThreadDialog.tsx

@@ -7,7 +7,7 @@ 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 } from 'lucide-react'
+import { Hash, X, Users, Code, Coins, Newspaper, BookOpen, Scroll, Cpu, Trophy, Film, Heart, TrendingUp, Utensils, MapPin, Home, PawPrint, Shirt, Image, Zap, Settings } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNostr } from '@/providers/NostrProvider'
@@ -78,6 +78,7 @@ export default function CreateThreadDialog({
   const [isNsfw, setIsNsfw] = useState(false)
   const [addClientTag, setAddClientTag] = useState(true)
   const [minPow, setMinPow] = useState(0)
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
 
   const validateForm = () => {
     const newErrors: { title?: string; content?: string; relay?: string } = {}
@@ -265,14 +266,25 @@ export default function CreateThreadDialog({
               </p>
             </div>
 
-            {/* Advanced Options */}
+            {/* Advanced Options Toggle */}
-            <div className="space-y-4 border-t pt-4">
+            <div className="border-t pt-4">
-              <h4 className="text-sm font-medium">{t('Advanced Options')}</h4>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+                className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <Settings className="w-4 h-4" />
+                {t('Advanced Options')}
+              </Button>
               
+              {showAdvancedOptions && (
+                <div className="space-y-4 mt-4">
                   {/* NSFW Toggle */}
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                  <Hash className="w-4 h-4 text-red-500" />
+                      <Hash className="w-4 h-4 text-foreground" />
                       <Label htmlFor="nsfw" className="text-sm">
                         {t('Mark as NSFW')}
                       </Label>
@@ -287,7 +299,7 @@ export default function CreateThreadDialog({
                   {/* Client Tag Toggle */}
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                  <Image className="w-4 h-4 text-blue-500" />
+                      <Image className="w-4 h-4 text-foreground" />
                       <Label htmlFor="client-tag" className="text-sm">
                         {t('Add client identifier')}
                       </Label>
@@ -302,7 +314,7 @@ export default function CreateThreadDialog({
                   {/* PoW Setting */}
                   <div className="space-y-2">
                     <div className="flex items-center gap-2">
-                  <Zap className="w-4 h-4 text-yellow-500" />
+                      <Zap className="w-4 h-4 text-foreground" />
                       <Label className="text-sm">
                         {t('Proof of Work')}: {minPow}
                       </Label>
@@ -326,6 +338,8 @@ export default function CreateThreadDialog({
                     </p>
                   </div>
                 </div>
+              )}
+            </div>
 
             {/* Form Actions */}
             <div className="flex gap-3 pt-4">