From 9051c142052fb3105f267be7efce4a1c11c23110 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Mon, 18 May 2026 18:17:13 +0200
Subject: [PATCH] polish: capitalise sidebar labels, rounded avatars, stronger
 article titles

- sidebar nav labels Title Case; follows -> People, dm -> Messages
- NoteCard + ArticleCard avatars rounded-sm -> rounded-md
- ArticleCard title 14px/medium -> 15px/semibold; larger tag pills
---
 src/components/article/ArticleCard.tsx |  8 +++----
 src/components/feed/NoteCard.tsx       |  4 ++--
 src/components/sidebar/Sidebar.tsx     | 32 +++++++++++++-------------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/article/ArticleCard.tsx b/src/components/article/ArticleCard.tsx
index fae7bf8..2bdfc0f 100644
--- a/src/components/article/ArticleCard.tsx
+++ b/src/components/article/ArticleCard.tsx
@@ -52,7 +52,7 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
         {/* Text content */}
         <div className="flex-1 min-w-0">
           {/* Title */}
-          <h3 className="text-text text-[14px] font-medium leading-snug mb-1 line-clamp-2">
+          <h3 className="text-text text-[15px] font-semibold leading-snug mb-1.5 line-clamp-2">
             {title || "Untitled"}
           </h3>
 
@@ -73,11 +73,11 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
                 <img
                   src={profile.picture}
                   alt={`${authorName}'s avatar`}
-                  className="w-5 h-5 rounded-sm object-cover"
+                  className="w-5 h-5 rounded-md object-cover"
                   onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                 />
               ) : (
-                <div className="w-5 h-5 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-[9px]">
+                <div className="w-5 h-5 rounded-md bg-bg-raised border border-border flex items-center justify-center text-text-dim text-[9px]">
                   {authorName.charAt(0).toUpperCase()}
                 </div>
               )}
@@ -96,7 +96,7 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
           {tags.length > 0 && (
             <div className="flex flex-wrap gap-1">
               {tags.slice(0, 5).map((tag) => (
-                <span key={tag} className="px-1.5 py-0 text-[9px] border border-border text-text-dim">
+                <span key={tag} className="px-2 py-0.5 text-[10px] border border-border text-text-dim rounded-sm">
                   #{tag}
                 </span>
               ))}
diff --git a/src/components/feed/NoteCard.tsx b/src/components/feed/NoteCard.tsx
index 1503a71..0f327f1 100644
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -86,14 +86,14 @@ export const NoteCard = memo(function NoteCard({ event, focused, onReplyInThread
               alt={`${name}'s avatar`}
               width={36}
               height={36}
-              className="w-9 h-9 rounded-sm object-cover bg-bg-raised ring-1 ring-transparent hover:ring-accent/40 transition-all"
+              className="w-9 h-9 rounded-md object-cover bg-bg-raised ring-1 ring-transparent hover:ring-accent/40 transition-all"
               loading="lazy"
               onError={(e) => {
                 (e.target as HTMLImageElement).style.display = "none";
               }}
             />
           ) : (
-            <div className="w-9 h-9 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-xs hover:border-accent/40 transition-colors">
+            <div className="w-9 h-9 rounded-md bg-bg-raised border border-border flex items-center justify-center text-text-dim text-xs hover:border-accent/40 transition-colors">
               {name.charAt(0).toUpperCase()}
             </div>
           )}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index ce001d8..1d5297e 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -9,20 +9,20 @@ import pkg from "../../../package.json";
 // Items marked `requiresSigner: true` are hidden in read-only mode
 // because they're account-bound and have no useful content without a signer.
 const NAV_ITEMS = [
-  { id: "feed" as const, label: "feed", icon: "◈" },
-  { id: "articles" as const, label: "articles", icon: "☰" },
-  { id: "media" as const, label: "media", icon: "▶" },
-  { id: "podcasts" as const, label: "podcasts", icon: "🎙" },
-  { id: "search" as const, label: "search", icon: "⌕" },
-  { id: "bookmarks" as const, label: "bookmarks", icon: "★", requiresSigner: true },
-  { id: "dm" as const, label: "messages", icon: "✉", requiresSigner: true },
-  { id: "notifications" as const, label: "notifications", icon: "🔔", requiresSigner: true },
-  { id: "follows" as const, label: "follows", icon: "👥" },
-  { id: "zaps" as const, label: "zaps", icon: "⚡", requiresSigner: true },
-  { id: "v4v" as const, label: "v4v", icon: "📡", requiresSigner: true },
-  { id: "relays" as const, label: "relays", icon: "⟐" },
-  { id: "settings" as const, label: "settings", icon: "⚙" },
-  { id: "about" as const, label: "support", icon: "♥" },
+  { id: "feed" as const, label: "Feed", icon: "◈" },
+  { id: "articles" as const, label: "Articles", icon: "☰" },
+  { id: "media" as const, label: "Media", icon: "▶" },
+  { id: "podcasts" as const, label: "Podcasts", icon: "🎙" },
+  { id: "search" as const, label: "Search", icon: "⌕" },
+  { id: "bookmarks" as const, label: "Bookmarks", icon: "★", requiresSigner: true },
+  { id: "dm" as const, label: "Messages", icon: "✉", requiresSigner: true },
+  { id: "notifications" as const, label: "Notifications", icon: "🔔", requiresSigner: true },
+  { id: "follows" as const, label: "People", icon: "👥" },
+  { id: "zaps" as const, label: "Zaps", icon: "⚡", requiresSigner: true },
+  { id: "v4v" as const, label: "Value 4 Value", icon: "📡", requiresSigner: true },
+  { id: "relays" as const, label: "Relays", icon: "⟐" },
+  { id: "settings" as const, label: "Settings", icon: "⚙" },
+  { id: "about" as const, label: "Support", icon: "♥" },
 ] as const;
 
 export function Sidebar() {
@@ -57,7 +57,7 @@ export function Sidebar() {
           /* Expanded: brand on left, collapse chevron on right */
           <>
             <div className="flex flex-col">
-              <span className="text-sm font-bold tracking-widest text-text select-none">VEGA</span>
+              <span className="text-sm font-bold tracking-[0.2em] text-text select-none">VEGA</span>
               <span className="text-text-dim text-[9px] font-mono opacity-50">v{pkg.version}</span>
             </div>
             <button
@@ -91,7 +91,7 @@ export function Sidebar() {
                 <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-accent" />
               )}
             </span>
-            {!c && <span>write article</span>}
+            {!c && <span>Write Article</span>}
             {!c && draftCount > 0 && (
               <span className="ml-auto text-[10px] bg-accent/20 text-accent px-1.5 py-0.5 rounded-sm">{draftCount}</span>
             )}