From 074f695b3e2a0bc39e34443a219b37138e7245f5 Mon Sep 17 00:00:00 2001
From: drelich <david.relich@me.com>
Date: Mon, 16 Mar 2026 23:56:41 +0100
Subject: [PATCH] Add logout functionality and username display

- Added logout button at bottom of sidebar
- Display username with avatar (first letter)
- Clear all credentials and state on logout
- Username persists from saved credentials
- Clean logout flow returns to login screen
---
 src/App.tsx                  | 16 ++++++++++++++++
 src/components/NotesList.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 3c31f3b..18dc951 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ function App() {
   const [searchText, setSearchText] = useState('');
   const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
   const [fontSize] = useState(14);
+  const [username, setUsername] = useState('');
 
   useEffect(() => {
     const savedServer = localStorage.getItem('serverURL');
@@ -26,6 +27,7 @@ function App() {
         password: savedPassword,
       });
       setApi(apiInstance);
+      setUsername(savedUsername);
       setIsLoggedIn(true);
     }
   }, []);
@@ -58,9 +60,21 @@ function App() {
 
     const apiInstance = new NextcloudAPI({ serverURL, username, password });
     setApi(apiInstance);
+    setUsername(username);
     setIsLoggedIn(true);
   };
 
+  const handleLogout = () => {
+    localStorage.removeItem('serverURL');
+    localStorage.removeItem('username');
+    localStorage.removeItem('password');
+    setApi(null);
+    setUsername('');
+    setNotes([]);
+    setSelectedNoteId(null);
+    setIsLoggedIn(false);
+  };
+
   const handleCreateNote = async () => {
     if (!api) return;
     try {
@@ -136,6 +150,8 @@ function App() {
         onCreateNote={handleCreateNote}
         onDeleteNote={handleDeleteNote}
         onSync={syncNotes}
+        onLogout={handleLogout}
+        username={username}
         searchText={searchText}
         onSearchChange={setSearchText}
         showFavoritesOnly={showFavoritesOnly}
diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index dbb8ee4..02da069 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -8,6 +8,8 @@ interface NotesListProps {
   onCreateNote: () => void;
   onDeleteNote: (note: Note) => void;
   onSync: () => void;
+  onLogout: () => void;
+  username: string;
   searchText: string;
   onSearchChange: (text: string) => void;
   showFavoritesOnly: boolean;
@@ -21,6 +23,8 @@ export function NotesList({
   onCreateNote,
   onDeleteNote,
   onSync,
+  onLogout,
+  username,
   searchText,
   onSearchChange,
   showFavoritesOnly,
@@ -168,6 +172,27 @@ export function NotesList({
           ))
         )}
       </div>
+
+      {/* User Info and Logout */}
+      <div className="border-t border-gray-200 p-4 bg-white">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2 min-w-0">
+            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0">
+              {username.charAt(0).toUpperCase()}
+            </div>
+            <span className="text-sm text-gray-700 truncate font-medium">{username}</span>
+          </div>
+          <button
+            onClick={onLogout}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
+            title="Logout"
+          >
+            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+          </button>
+        </div>
+      </div>
     </div>
   );
 }