From 89b14ce5b72ea8b4a7f848e8dfc81723ec9a7ff9 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 22:19:30 +0100
Subject: [PATCH] feat(toast): add login/logout success messages using existing
 toast system

---
 src/App.tsx           | 13 ++++++++++++-
 src/hooks/useToast.ts | 25 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useToast.ts

diff --git a/src/App.tsx b/src/App.tsx
index 45e1d3d5..86f413bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,8 @@ import { RelayPool } from 'applesauce-relay'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Login from './components/Login'
 import Bookmarks from './components/Bookmarks'
+import Toast from './components/Toast'
+import { useToast } from './hooks/useToast'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
   'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
@@ -18,6 +20,7 @@ function App() {
   const [eventStore, setEventStore] = useState<EventStore | null>(null)
   const [accountManager, setAccountManager] = useState<AccountManager | null>(null)
   const [relayPool, setRelayPool] = useState<RelayPool | null>(null)
+  const { toastMessage, toastType, showToast, clearToast } = useToast()
 
   useEffect(() => {
     // Initialize event store, account manager, and relay pool
@@ -128,6 +131,7 @@ function App() {
                       if (accountManager) {
                         accountManager.setActive(undefined as never)
                         localStorage.removeItem('active')
+                        showToast('Logged out successfully')
                         console.log('Logged out')
                       }
                     }}
@@ -135,10 +139,17 @@ function App() {
                 } 
               />
               <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
-              <Route path="/login" element={<Login onLogin={() => {}} />} />
+              <Route path="/login" element={<Login onLogin={() => showToast('Logged in successfully')} />} />
             </Routes>
           </div>
         </BrowserRouter>
+        {toastMessage && (
+          <Toast
+            message={toastMessage}
+            type={toastType}
+            onClose={clearToast}
+          />
+        )}
       </AccountsProvider>
     </EventStoreProvider>
   )
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
new file mode 100644
index 00000000..0412240b
--- /dev/null
+++ b/src/hooks/useToast.ts
@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react'
+
+interface ToastState {
+  message: string | null
+  type: 'success' | 'error'
+}
+
+export function useToast() {
+  const [toast, setToast] = useState<ToastState>({ message: null, type: 'success' })
+
+  const showToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
+    setToast({ message, type })
+  }, [])
+
+  const clearToast = useCallback(() => {
+    setToast({ message: null, type: 'success' })
+  }, [])
+
+  return {
+    toastMessage: toast.message,
+    toastType: toast.type,
+    showToast,
+    clearToast
+  }
+}