From 49bcf8d930d5c084c505706fcba32a0985dfdb65 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 11:42:49 +0000
Subject: [PATCH] fix: Improve post composer UI with proper alignment, compact
 buttons, and RelayLink
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UI improvements:
- Lock editor to 4 rows initially (max-height: 6rem)
- Reduce vertical padding to 0.5rem for better top alignment
- Remove margin-bottom from paragraphs, use margin-top between paragraphs
- Fixes text appearing centered/floating

Button simplification:
- @ button now shows just icon + count (was "Mentions (2)")
- # button now shows just icon + count (was "Hashtags (2)")
- Cleaner, more compact UI matching the mockup

Relay display enhancement:
- Replace plain text links with RelayLink component
- Shows relay icons, insecure relay warnings
- Clickable to open relay detail window
- Maintains status indicators (loading/success/error)

All issues from screenshot addressed:
✅ Text alignment now starts at top (4 rows visible)
✅ @ and # show just count, not text
✅ Relay URLs use RelayLink component with icons

Build successful.
---
 src/components/editor/PostComposer.tsx | 31 +++++++++++++-------------
 src/index.css                          | 10 +++++----
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/editor/PostComposer.tsx b/src/components/editor/PostComposer.tsx
index 1c714f7..c9a45e2 100644
--- a/src/components/editor/PostComposer.tsx
+++ b/src/components/editor/PostComposer.tsx
@@ -36,6 +36,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { UserName } from "../nostr/UserName";
+import { RelayLink } from "../nostr/RelayLink";
 
 /**
  * Result when submitting a post
@@ -327,8 +328,8 @@ export const PostComposer = forwardRef<PostComposerHandle, PostComposerProps>(
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="outline" size="sm" className="h-8">
-                    <AtSign className="size-4 mr-1.5" />
-                    Mentions ({selectedMentions.length})
+                    <AtSign className="size-4 mr-1" />
+                    {selectedMentions.length}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-72">
@@ -363,8 +364,8 @@ export const PostComposer = forwardRef<PostComposerHandle, PostComposerProps>(
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="outline" size="sm" className="h-8">
-                    <Hash className="size-4 mr-1.5" />
-                    Hashtags ({selectedHashtags.length})
+                    <Hash className="size-4 mr-1" />
+                    {selectedHashtags.length}
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-48">
@@ -413,9 +414,9 @@ export const PostComposer = forwardRef<PostComposerHandle, PostComposerProps>(
               {userRelays.map((relay) => {
                 const status = relayStatuses.find((s) => s.url === relay);
                 return (
-                  <label
+                  <div
                     key={relay}
-                    className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 p-1.5 rounded"
+                    className="flex items-center gap-2 text-sm hover:bg-muted/50 p-1.5 rounded"
                   >
                     <Checkbox
                       checked={selectedRelays.includes(relay)}
@@ -429,15 +430,13 @@ export const PostComposer = forwardRef<PostComposerHandle, PostComposerProps>(
                         }
                       }}
                     />
-                    <a
-                      href={relay}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={(e) => e.stopPropagation()}
-                      className="font-mono text-xs flex-1 text-primary hover:underline"
-                    >
-                      {relay.replace(/^wss?:\/\//, "")}
-                    </a>
+                    <div className="flex-1 min-w-0">
+                      <RelayLink
+                        url={relay}
+                        showInboxOutbox={false}
+                        className="text-xs"
+                      />
+                    </div>
                     {status && (
                       <div className="flex items-center gap-1">
                         {status.state === "publishing" && (
@@ -453,7 +452,7 @@ export const PostComposer = forwardRef<PostComposerHandle, PostComposerProps>(
                         )}
                       </div>
                     )}
-                  </label>
+                  </div>
                 );
               })}
             </div>
diff --git a/src/index.css b/src/index.css
index 83cbad5..1fa0a77 100644
--- a/src/index.css
+++ b/src/index.css
@@ -388,21 +388,23 @@ body.animating-layout
 
 .editor-card .ProseMirror {
   min-height: 6rem; /* 4 rows at 1.5rem line-height */
+  max-height: 6rem; /* Lock to 4 rows initially */
   overflow-y: auto;
   line-height: 1.5rem;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   text-align: left !important;
   vertical-align: top;
 }
 
 .editor-card .ProseMirror p {
   line-height: 1.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
+  margin-top: 0;
   text-align: left !important;
 }
 
-.editor-card .ProseMirror p:last-child {
-  margin-bottom: 0;
+.editor-card .ProseMirror p + p {
+  margin-top: 0.5rem;
 }
 
 .editor-card .ProseMirror p.is-editor-empty:first-child::before {