From 8a01ebe4545c0c05d74def671acb4e33d5f562e2 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 18 Feb 2026 21:28:51 -0600
Subject: [PATCH] Use Toggle component for preview mode

- Replace button with proper Toggle component
- Shows on/off state visually with background change
- Eye icon with "Preview" label
- Toggles between edit and preview mode
- Uses shadcn/ui Toggle component with proper pressed state

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/ComposeBox.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ComposeBox.tsx b/src/components/ComposeBox.tsx
index 46cfd38f..9142795b 100644
--- a/src/components/ComposeBox.tsx
+++ b/src/components/ComposeBox.tsx
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Toggle } from '@/components/ui/toggle';
 import { EmojiPicker } from '@/components/EmojiPicker';
 import { EmbeddedNote } from '@/components/EmbeddedNote';
 import { EmbeddedNaddr } from '@/components/EmbeddedNaddr';
@@ -489,14 +490,16 @@ export function ComposeBox({ onSuccess, placeholder = "What's on your mind?", co
 
             {/* Center: Preview toggle */}
             {content && (
-              <button
-                type="button"
-                onClick={() => setPreviewMode(!previewMode)}
-                className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+              <Toggle
+                pressed={previewMode}
+                onPressedChange={setPreviewMode}
+                aria-label="Toggle preview"
+                size="sm"
+                className="gap-1.5"
               >
-                {previewMode ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
-                {previewMode ? 'Edit' : 'Preview'}
-              </button>
+                <Eye className="size-3.5" />
+                <span className="text-xs">Preview</span>
+              </Toggle>
             )}
 
             {/* Right: char count + post button */}