From fa1eb0d89bc884348af0d005982b04ff0ffbfb0e Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Sat, 4 Apr 2026 21:07:09 +0200
Subject: [PATCH] Make logged-out state visually obvious with top banner

---
 src/App.tsx                                | 12 ++++++++++++
 src/components/sidebar/AccountSwitcher.tsx | 12 ++----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a31d474..8bb897e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,6 +28,7 @@ const V4VView = lazy(() => import("./components/v4v/V4VView").then(m => ({ defau
 const DebugPanel = lazy(() => import("./components/shared/DebugPanel").then(m => ({ default: m.DebugPanel })));
 const HelpModal = lazy(() => import("./components/shared/HelpModal").then(m => ({ default: m.HelpModal })));
 import { useUIStore } from "./stores/ui";
+import { useUserStore } from "./stores/user";
 import { getTheme, applyTheme } from "./lib/themes";
 import { useUpdater } from "./hooks/useUpdater";
 import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
@@ -55,6 +56,16 @@ function UpdateBanner() {
   );
 }
 
+function ReadOnlyBanner() {
+  const loggedIn = useUserStore((s) => s.loggedIn);
+  if (loggedIn) return null;
+  return (
+    <div className="flex items-center justify-center gap-2 px-4 py-1.5 bg-warning/10 border-b border-warning/30 text-[11px] shrink-0">
+      <span className="text-warning">Read-only mode — sign in to post, react, and zap</span>
+    </div>
+  );
+}
+
 function App() {
   const currentView = useUIStore((s) => s.currentView);
   const showHelp = useUIStore((s) => s.showHelp);
@@ -108,6 +119,7 @@ function App() {
   return (
     <div className="flex flex-col h-screen w-screen bg-bg">
       <UpdateBanner />
+      <ReadOnlyBanner />
       <div className="flex flex-1 min-h-0">
       <Sidebar />
       <main className="flex-1 min-w-0 h-full overflow-hidden" style={{ zoom: `${fontSize / 14}` }}>
diff --git a/src/components/sidebar/AccountSwitcher.tsx b/src/components/sidebar/AccountSwitcher.tsx
index d4a16f2..1547c68 100644
--- a/src/components/sidebar/AccountSwitcher.tsx
+++ b/src/components/sidebar/AccountSwitcher.tsx
@@ -140,21 +140,13 @@ export function AccountSwitcher() {
 
         {/* Active account row */}
         <div className="px-3 py-2">
-          {!loggedIn && (
-            <button
-              onClick={() => setShowAddLogin(true)}
-              className="w-full mb-1.5 px-2 py-1 text-[10px] border border-accent/40 text-accent hover:bg-accent/10 transition-colors"
-            >
-              re-login to sign
-            </button>
-          )}
           <div className="flex items-center gap-2">
             <div
               className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
               onClick={() => openProfile(pubkey)}
             >
-              <Avatar account={current} size="w-10 h-10" textSize="text-[14px]" />
-              <span className={`text-[14px] font-medium truncate flex-1 ${loggedIn ? "text-text" : "text-text-muted"}`}>{displayName(current)}</span>
+              <Avatar account={current} size={loggedIn ? "w-11 h-11" : "w-8 h-8"} textSize={loggedIn ? "text-[16px]" : "text-[12px]"} />
+              <span className={`font-medium truncate flex-1 ${loggedIn ? "text-[15px] text-text" : "text-[12px] text-text-muted"}`}>{displayName(current)}</span>
             </div>
             <button
               onClick={() => setOpen((v) => !v)}