feat(post): add discard button, settings dropdown, and improve button layout

- Add Discard button to clear editor state and draft
- Add Settings dropdown with client tag toggle (enabled by default)
- Limit publish button width to w-32 and push to right with spacer
- Conditionally include client tag based on setting
- Improve action button layout with better spacing
This commit is contained in:
Claude
2026-01-21 09:19:53 +00:00
parent b25bbc402f
commit 50498f842f

View File

@@ -1,8 +1,22 @@
import { useState, useRef, useCallback, useMemo, useEffect } from "react";
import { Paperclip, Send, Loader2, Check, X, RotateCcw } from "lucide-react";
import {
Paperclip,
Send,
Loader2,
Check,
X,
RotateCcw,
Settings,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
} from "./ui/dropdown-menu";
import { useAccount } from "@/hooks/useAccount";
import { useProfileSearch } from "@/hooks/useProfileSearch";
import { useEmojiSearch } from "@/hooks/useEmojiSearch";
@@ -45,6 +59,7 @@ export function PostViewer() {
const [isEditorEmpty, setIsEditorEmpty] = useState(true);
const [lastPublishedEvent, setLastPublishedEvent] = useState<any>(null);
const [showPublishedPreview, setShowPublishedPreview] = useState(false);
const [includeClientTag, setIncludeClientTag] = useState(true);
// Get active account's write relays from Grimoire state, fallback to aggregators
const writeRelays = useMemo(() => {
@@ -280,8 +295,10 @@ export function PostViewer() {
tags.push(["a", `${addr.kind}:${addr.pubkey}:${addr.identifier}`]);
}
// Add client tag
tags.push(["client", "grimoire"]);
// Add client tag (if enabled)
if (includeClientTag) {
tags.push(["client", "grimoire"]);
}
// Add emoji tags
for (const emoji of emojiTags) {
@@ -389,7 +406,7 @@ export function PostViewer() {
setIsPublishing(false);
}
},
[canSign, signer, pubkey, selectedRelays],
[canSign, signer, pubkey, selectedRelays, includeClientTag],
);
// Handle file paste
@@ -412,6 +429,16 @@ export function PostViewer() {
editorRef.current?.focus();
}, [updateRelayStates]);
// Discard draft and clear editor
const handleDiscard = useCallback(() => {
editorRef.current?.clear();
if (pubkey) {
const draftKey = `${DRAFT_STORAGE_KEY}-${pubkey}`;
localStorage.removeItem(draftKey);
}
editorRef.current?.focus();
}, [pubkey]);
// Show login prompt if not logged in
if (!canSign) {
return (
@@ -450,6 +477,7 @@ export function PostViewer() {
{/* Action buttons */}
<div className="flex items-center gap-2">
{/* Upload button */}
<Button
variant="outline"
size="icon"
@@ -460,12 +488,47 @@ export function PostViewer() {
<Paperclip className="h-4 w-4" />
</Button>
{/* Settings dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
disabled={isPublishing}
title="Post settings"
>
<Settings className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuCheckboxItem
checked={includeClientTag}
onCheckedChange={setIncludeClientTag}
>
Include client tag
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
{/* Spacer */}
<div className="flex-1" />
{/* Discard button */}
<Button
variant="outline"
onClick={handleDiscard}
disabled={isPublishing || isEditorEmpty}
>
Discard
</Button>
{/* Publish button */}
<Button
onClick={() => editorRef.current?.submit()}
disabled={
isPublishing || selectedRelays.size === 0 || isEditorEmpty
}
className="gap-2 flex-1"
className="gap-2 w-32"
>
{isPublishing ? (
<>