From f199e7149ea2f33bd07cc413078a02629089b3e7 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Tue, 18 Nov 2025 11:55:14 -0600
Subject: [PATCH 01/11] switch wallet directly from logout menu

---
 src/components/Nav.tsx            |  92 +----------------
 src/components/NavLink.tsx        |  80 ++++++++++++++
 src/components/WalletSwitcher.tsx | 166 ++++++++++++++++++++++++++++++
 3 files changed, 250 insertions(+), 88 deletions(-)
 create mode 100644 src/components/NavLink.tsx
 create mode 100644 src/components/WalletSwitcher.tsx

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 0ec64879..5e083b2f 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,8 +1,3 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
 import { usePeers } from '@/hooks/usePeers';
 import { logoutAndUpdateState, useWalletState } from '@/state';
 import { t } from '@lingui/core/macro';
@@ -16,15 +11,15 @@ import {
   FilePenLine,
   Handshake,
   Images,
-  LogOut,
   MonitorCheck,
   MonitorCog,
   SquareUserRound,
   WalletIcon,
 } from 'lucide-react';
-import { PropsWithChildren } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { NavLink } from './NavLink';
 import { Separator } from './ui/separator';
+import { WalletSwitcher } from './WalletSwitcher';
 
 interface NavProps {
   isCollapsed?: boolean;
@@ -212,86 +207,7 @@ export function BottomNav({ isCollapsed }: NavProps) {
         <Cog className={className} aria-hidden='true' />
       </NavLink>
 
-      <NavLink
-        url={logout}
-        isCollapsed={isCollapsed}
-        message={<Trans>Logout</Trans>}
-      >
-        <LogOut className={className} aria-hidden='true' />
-      </NavLink>
+      <WalletSwitcher isCollapsed={isCollapsed} logout={logout} />
     </nav>
   );
 }
-
-interface NavLinkProps extends PropsWithChildren {
-  url: string | (() => void);
-  isCollapsed?: boolean;
-  message: React.ReactNode;
-  customTooltip?: React.ReactNode;
-  ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false;
-}
-
-function NavLink({
-  url,
-  children,
-  isCollapsed,
-  message,
-  customTooltip,
-  ariaCurrent,
-}: NavLinkProps) {
-  const location = useLocation();
-  const isActive =
-    typeof url === 'string' &&
-    (location.pathname === url ||
-      (url !== '/' && location.pathname.startsWith(url)));
-
-  const baseClassName = `flex items-center gap-3 transition-all ${
-    isCollapsed ? 'justify-center p-2 rounded-full' : 'px-2 rounded-lg py-1.5'
-  } text-lg md:text-base`;
-
-  const className = isActive
-    ? `${baseClassName} text-primary border-primary`
-    : `${baseClassName} text-muted-foreground hover:text-primary`;
-
-  const activeStyle = isActive
-    ? { backgroundColor: 'var(--nav-active-background)' }
-    : {};
-
-  const link =
-    typeof url === 'string' ? (
-      <Link
-        to={url}
-        className={className}
-        style={activeStyle}
-        aria-current={isActive ? 'page' : ariaCurrent}
-        aria-label={isCollapsed ? message?.toString() : undefined}
-      >
-        {children}
-        {!isCollapsed && message}
-      </Link>
-    ) : (
-      <button
-        type='button'
-        onClick={url}
-        className={className}
-        style={activeStyle}
-        aria-label={isCollapsed ? message?.toString() : undefined}
-      >
-        {children}
-        {!isCollapsed && message}
-      </button>
-    );
-
-  if (isCollapsed || customTooltip) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{link}</TooltipTrigger>
-        <TooltipContent side='right' role='tooltip' aria-live='polite'>
-          {customTooltip || message}
-        </TooltipContent>
-      </Tooltip>
-    );
-  }
-
-  return link;
-}
diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
new file mode 100644
index 00000000..fab18551
--- /dev/null
+++ b/src/components/NavLink.tsx
@@ -0,0 +1,80 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { PropsWithChildren } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+interface NavLinkProps extends PropsWithChildren {
+  url: string | (() => void);
+  isCollapsed?: boolean;
+  message: React.ReactNode;
+  customTooltip?: React.ReactNode;
+  ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false;
+}
+
+export function NavLink({
+  url,
+  children,
+  isCollapsed,
+  message,
+  customTooltip,
+  ariaCurrent,
+}: NavLinkProps) {
+  const location = useLocation();
+  const isActive =
+    typeof url === 'string' &&
+    (location.pathname === url ||
+      (url !== '/' && location.pathname.startsWith(url)));
+
+  const baseClassName = `flex items-center gap-3 transition-all ${
+    isCollapsed ? 'justify-center p-2 rounded-full' : 'px-2 rounded-lg py-1.5'
+  } text-lg md:text-base`;
+
+  const className = isActive
+    ? `${baseClassName} text-primary border-primary`
+    : `${baseClassName} text-muted-foreground hover:text-primary`;
+
+  const activeStyle = isActive
+    ? { backgroundColor: 'var(--nav-active-background)' }
+    : {};
+
+  const link =
+    typeof url === 'string' ? (
+      <Link
+        to={url}
+        className={className}
+        style={activeStyle}
+        aria-current={isActive ? 'page' : ariaCurrent}
+        aria-label={isCollapsed ? message?.toString() : undefined}
+      >
+        {children}
+        {!isCollapsed && message}
+      </Link>
+    ) : (
+      <button
+        type='button'
+        onClick={url}
+        className={className}
+        style={activeStyle}
+        aria-label={isCollapsed ? message?.toString() : undefined}
+      >
+        {children}
+        {!isCollapsed && message}
+      </button>
+    );
+
+  if (isCollapsed || customTooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{link}</TooltipTrigger>
+        <TooltipContent side='right' role='tooltip' aria-live='polite'>
+          {customTooltip || message}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return link;
+}
diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
new file mode 100644
index 00000000..b21c271f
--- /dev/null
+++ b/src/components/WalletSwitcher.tsx
@@ -0,0 +1,166 @@
+import { commands } from '@/bindings';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { CustomError } from '@/contexts/ErrorContext';
+import { useWallet } from '@/contexts/WalletContext';
+import { useErrors } from '@/hooks/useErrors';
+import { loginAndUpdateState } from '@/state';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import { LogOut, WalletIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface WalletSwitcherProps {
+  isCollapsed?: boolean;
+  logout: () => void;
+}
+
+export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
+  const navigate = useNavigate();
+  const { wallet: currentWallet, setWallet } = useWallet();
+  const { addError } = useErrors();
+  const [wallets, setWallets] = useState<
+    { name: string; fingerprint: number; emoji: string | null }[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchWallets = async () => {
+      try {
+        const data = await commands.getKeys({});
+        setWallets(
+          data.keys.map((key) => ({
+            name: key.name,
+            fingerprint: key.fingerprint,
+            emoji: key.emoji,
+          })),
+        );
+      } catch (error) {
+        addError(error as CustomError);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchWallets();
+  }, [addError]);
+
+  const handleSwitchWallet = async (fingerprint: number) => {
+    try {
+      await loginAndUpdateState(fingerprint);
+      const data = await commands.getKey({});
+      setWallet(data.key);
+      navigate('/wallet');
+    } catch (error) {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        'kind' in error &&
+        error.kind === 'database_migration'
+      ) {
+        // Handle migration error if needed
+        addError(error as CustomError);
+      } else {
+        addError(error as CustomError);
+      }
+    }
+  };
+
+  const className = isCollapsed ? 'h-5 w-5' : 'h-4 w-4';
+  const baseClassName = `flex items-center gap-3 transition-all ${
+    isCollapsed ? 'justify-center p-2 rounded-full' : 'px-2 rounded-lg py-1.5'
+  } text-lg md:text-base text-muted-foreground hover:text-primary`;
+
+  const trigger = (
+    <button
+      type='button'
+      className={baseClassName}
+      aria-label={isCollapsed ? t`Wallet switcher` : undefined}
+    >
+      <LogOut className={className} aria-hidden='true' />
+      {!isCollapsed && <Trans>Logout</Trans>}
+    </button>
+  );
+
+  const dropdownContent = (
+    <DropdownMenuContent align='end' className='w-56'>
+      <DropdownMenuLabel>
+        <Trans>Switch Wallet</Trans>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      {loading ? (
+        <DropdownMenuItem disabled>
+          <Trans>Loading...</Trans>
+        </DropdownMenuItem>
+      ) : wallets.length === 0 ? (
+        <DropdownMenuItem disabled>
+          <Trans>No wallets available</Trans>
+        </DropdownMenuItem>
+      ) : (
+        wallets.map((wallet) => (
+          <DropdownMenuItem
+            key={wallet.fingerprint}
+            onClick={() => handleSwitchWallet(wallet.fingerprint)}
+            disabled={currentWallet?.fingerprint === wallet.fingerprint}
+            className='flex items-center gap-2'
+          >
+            {wallet.emoji ? (
+              <span className='text-lg' role='img' aria-label='Wallet emoji'>
+                {wallet.emoji}
+              </span>
+            ) : (
+              <WalletIcon
+                className='h-4 w-4 text-muted-foreground'
+                aria-hidden='true'
+              />
+            )}
+            <span className='flex-1'>{wallet.name}</span>
+            {currentWallet?.fingerprint === wallet.fingerprint && (
+              <span className='text-xs text-muted-foreground'>
+                <Trans>(current)</Trans>
+              </span>
+            )}
+          </DropdownMenuItem>
+        ))
+      )}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        onClick={logout}
+        className='text-destructive focus:text-destructive'
+      >
+        <LogOut className={className} aria-hidden='true' />
+        <Trans>Logout</Trans>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+
+  const dropdown = (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+        </TooltipTrigger>
+        {isCollapsed && (
+          <TooltipContent side='right' role='tooltip' aria-live='polite'>
+            <Trans>Wallet switcher</Trans>
+          </TooltipContent>
+        )}
+      </Tooltip>
+      {dropdownContent}
+    </DropdownMenu>
+  );
+
+  return dropdown;
+}

From c691f0e10eff5851a0bb67a2b2b0d6207cc72ef8 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Tue, 18 Nov 2025 17:11:36 -0600
Subject: [PATCH 02/11] sort wallets

---
 src/components/WalletSwitcher.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index b21c271f..7fcf2ac3 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -41,11 +41,13 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
       try {
         const data = await commands.getKeys({});
         setWallets(
-          data.keys.map((key) => ({
-            name: key.name,
-            fingerprint: key.fingerprint,
-            emoji: key.emoji,
-          })),
+          data.keys
+            .map((key) => ({
+              name: key.name,
+              fingerprint: key.fingerprint,
+              emoji: key.emoji,
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name)),
         );
       } catch (error) {
         addError(error as CustomError);

From a1853f0af2b893d5ad5cc6ef99e4c4b2f73c2d0d Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Tue, 18 Nov 2025 17:14:42 -0600
Subject: [PATCH 03/11] make emoji and icon same size

---
 src/components/WalletSwitcher.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index 7fcf2ac3..b9b509c8 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -119,12 +119,12 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
             className='flex items-center gap-2'
           >
             {wallet.emoji ? (
-              <span className='text-lg' role='img' aria-label='Wallet emoji'>
+              <span className='text-sm' role='img' aria-label='Wallet emoji'>
                 {wallet.emoji}
               </span>
             ) : (
               <WalletIcon
-                className='h-4 w-4 text-muted-foreground'
+                className='h-5 w-5 text-muted-foreground'
                 aria-hidden='true'
               />
             )}

From e292a4f07cf1771a2aa1bc6032f6118b645f36ec Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Tue, 18 Nov 2025 17:23:45 -0600
Subject: [PATCH 04/11] align wallet names vertically

---
 src/components/WalletSwitcher.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index b9b509c8..96e87612 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -116,19 +116,21 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
             key={wallet.fingerprint}
             onClick={() => handleSwitchWallet(wallet.fingerprint)}
             disabled={currentWallet?.fingerprint === wallet.fingerprint}
-            className='flex items-center gap-2'
+            className='grid grid-cols-[auto_1fr_auto] items-center gap-3'
           >
-            {wallet.emoji ? (
-              <span className='text-sm' role='img' aria-label='Wallet emoji'>
-                {wallet.emoji}
-              </span>
-            ) : (
-              <WalletIcon
-                className='h-5 w-5 text-muted-foreground'
-                aria-hidden='true'
-              />
-            )}
-            <span className='flex-1'>{wallet.name}</span>
+            <div className='w-6 flex items-center justify-center'>
+              {wallet.emoji ? (
+                <span className='text-lg' role='img' aria-label='Wallet emoji'>
+                  {wallet.emoji}
+                </span>
+              ) : (
+                <WalletIcon
+                  className='h-5 w-5 text-muted-foreground'
+                  aria-hidden='true'
+                />
+              )}
+            </div>
+            <span className='truncate'>{wallet.name}</span>
             {currentWallet?.fingerprint === wallet.fingerprint && (
               <span className='text-xs text-muted-foreground'>
                 <Trans>(current)</Trans>

From ad9d2827042cef76417d84fcc1e7dd3e45aa8b8b Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Tue, 18 Nov 2025 17:30:11 -0600
Subject: [PATCH 05/11] fade out of old wallet and into new wallet

---
 src/components/Layout.tsx         | 58 +++++++++++++++++++++----------
 src/components/WalletSwitcher.tsx | 22 ++++++++++--
 src/contexts/WalletContext.tsx    | 11 ++++--
 3 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 148fa43f..92c28d95 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -17,6 +17,26 @@ import { useTheme } from 'theme-o-rama';
 import { useLocalStorage } from 'usehooks-ts';
 import { BottomNav, TopNav } from './Nav';
 
+function WalletTransitionWrapper({ children }: PropsWithChildren) {
+  const { isSwitching, wallet } = useWallet();
+
+  // Only show content if we have a wallet or we're not switching
+  // This prevents old wallet data from showing during transition
+  const shouldShow = wallet !== null || !isSwitching;
+
+  return (
+    <div
+      className={`transition-all duration-300 ${
+        isSwitching || !shouldShow
+          ? 'opacity-0 blur-sm pointer-events-none'
+          : 'opacity-100 blur-0'
+      }`}
+    >
+      {shouldShow ? children : null}
+    </div>
+  );
+}
+
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'sage-wallet-sidebar-collapsed';
 
 type LayoutProps = PropsWithChildren<object> & {
@@ -183,27 +203,29 @@ export function FullLayout(props: LayoutProps) {
             </div>
           </div>
         </div>
-        <div
-          className={`flex flex-col h-screen overflow-hidden ${
-            props.transparentBackground ? 'bg-transparent' : 'bg-background'
-          }`}
-          style={{
-            paddingBottom: insets.bottom
-              ? `${insets.bottom}px`
-              : 'env(safe-area-inset-bottom)',
-          }}
-        >
+        <WalletTransitionWrapper>
           <div
-            className='bg-background'
+            className={`flex flex-col h-screen overflow-hidden ${
+              props.transparentBackground ? 'bg-transparent' : 'bg-background'
+            }`}
             style={{
-              height:
-                insets.top !== 0
-                  ? `${insets.top + 8}px`
-                  : 'env(safe-area-inset-top)',
+              paddingBottom: insets.bottom
+                ? `${insets.bottom}px`
+                : 'env(safe-area-inset-bottom)',
             }}
-          />
-          {props.children}
-        </div>
+          >
+            <div
+              className='bg-background'
+              style={{
+                height:
+                  insets.top !== 0
+                    ? `${insets.top + 8}px`
+                    : 'env(safe-area-inset-top)',
+              }}
+            />
+            {props.children}
+          </div>
+        </WalletTransitionWrapper>
       </div>
     </TooltipProvider>
   );
diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index 96e87612..c4bbd4fd 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -15,7 +15,7 @@ import {
 import { CustomError } from '@/contexts/ErrorContext';
 import { useWallet } from '@/contexts/WalletContext';
 import { useErrors } from '@/hooks/useErrors';
-import { loginAndUpdateState } from '@/state';
+import { loginAndUpdateState, clearState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { LogOut, WalletIcon } from 'lucide-react';
@@ -29,7 +29,7 @@ interface WalletSwitcherProps {
 
 export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
   const navigate = useNavigate();
-  const { wallet: currentWallet, setWallet } = useWallet();
+  const { wallet: currentWallet, setWallet, setIsSwitching } = useWallet();
   const { addError } = useErrors();
   const [wallets, setWallets] = useState<
     { name: string; fingerprint: number; emoji: string | null }[]
@@ -61,11 +61,29 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
 
   const handleSwitchWallet = async (fingerprint: number) => {
     try {
+      // Start switching: clear wallet, state, and set switching state
+      setIsSwitching(true);
+      setWallet(null);
+      clearState();
+
+      // Wait for fade-out transition to complete
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Load new wallet data while still blurred
       await loginAndUpdateState(fingerprint);
       const data = await commands.getKey({});
+
+      // Set new wallet data while still blurred
       setWallet(data.key);
+
+      // Wait a moment for the new data to be set, then fade in
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Now fade in the new wallet
+      setIsSwitching(false);
       navigate('/wallet');
     } catch (error) {
+      setIsSwitching(false);
       if (
         typeof error === 'object' &&
         error !== null &&
diff --git a/src/contexts/WalletContext.tsx b/src/contexts/WalletContext.tsx
index bda575ab..93621d64 100644
--- a/src/contexts/WalletContext.tsx
+++ b/src/contexts/WalletContext.tsx
@@ -1,12 +1,14 @@
 import { KeyInfo, commands } from '@/bindings';
+import { CustomError } from '@/contexts/ErrorContext';
 import { useErrors } from '@/hooks/useErrors';
+import { fetchState, initializeWalletState } from '@/state';
 import { createContext, useContext, useEffect, useState } from 'react';
-import { initializeWalletState, fetchState } from '@/state';
-import { CustomError } from '@/contexts/ErrorContext';
 
 interface WalletContextType {
   wallet: KeyInfo | null;
   setWallet: (wallet: KeyInfo | null) => void;
+  isSwitching: boolean;
+  setIsSwitching: (isSwitching: boolean) => void;
 }
 
 export const WalletContext = createContext<WalletContextType | undefined>(
@@ -15,6 +17,7 @@ export const WalletContext = createContext<WalletContextType | undefined>(
 
 export function WalletProvider({ children }: { children: React.ReactNode }) {
   const [wallet, setWallet] = useState<KeyInfo | null>(null);
+  const [isSwitching, setIsSwitching] = useState(false);
   const { addError } = useErrors();
 
   useEffect(() => {
@@ -33,7 +36,9 @@ export function WalletProvider({ children }: { children: React.ReactNode }) {
   }, [addError]);
 
   return (
-    <WalletContext.Provider value={{ wallet, setWallet }}>
+    <WalletContext.Provider
+      value={{ wallet, setWallet, isSwitching, setIsSwitching }}
+    >
       {children}
     </WalletContext.Provider>
   );

From 5ee8a76f20ce4276ba9cefeb6c9d9f572bb55f1c Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Wed, 19 Nov 2025 14:23:02 -0600
Subject: [PATCH 06/11] Update src/components/Layout.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 92c28d95..70d1db7f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -27,7 +27,7 @@ function WalletTransitionWrapper({ children }: PropsWithChildren) {
   return (
     <div
       className={`transition-all duration-300 ${
-        isSwitching || !shouldShow
+        !shouldShow
           ? 'opacity-0 blur-sm pointer-events-none'
           : 'opacity-100 blur-0'
       }`}

From 7daf54dfe2420b9bf6c4fa8fc776ba54093a2559 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Wed, 19 Nov 2025 14:23:29 -0600
Subject: [PATCH 07/11] Update src/components/WalletSwitcher.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/WalletSwitcher.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index c4bbd4fd..6820f73c 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -95,6 +95,7 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
       } else {
         addError(error as CustomError);
       }
+      navigate('/');
     }
   };
 

From fdb0829de41e3a9232e072b8fa9c59d7e097703d Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Wed, 19 Nov 2025 14:23:56 -0600
Subject: [PATCH 08/11] Update src/components/WalletSwitcher.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/WalletSwitcher.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index 6820f73c..265a82da 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -84,17 +84,7 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
       navigate('/wallet');
     } catch (error) {
       setIsSwitching(false);
-      if (
-        typeof error === 'object' &&
-        error !== null &&
-        'kind' in error &&
-        error.kind === 'database_migration'
-      ) {
-        // Handle migration error if needed
-        addError(error as CustomError);
-      } else {
-        addError(error as CustomError);
-      }
+      addError(error as CustomError);
       navigate('/');
     }
   };

From 9f80789e1c72b6406da2aad3194eeff3885f1bd6 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Wed, 19 Nov 2025 15:22:28 -0600
Subject: [PATCH 09/11] lint

---
 src/components/Layout.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 70d1db7f..eb10e1cf 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -137,7 +137,9 @@ export function FullLayout(props: LayoutProps) {
                       onClick={() => setIsCollapsed(!isCollapsed)}
                       className='text-2xl hover:scale-110 transition-transform cursor-pointer'
                       aria-label={t`Expand sidebar - ${wallet.name}`}
-                      aria-expanded={!isCollapsed}
+                      {...(isCollapsed
+                        ? { 'aria-expanded': false }
+                        : { 'aria-expanded': true })}
                     >
                       <span role='img' aria-label={t`Wallet emoji`}>
                         {wallet.emoji}
@@ -160,7 +162,9 @@ export function FullLayout(props: LayoutProps) {
                         aria-label={
                           isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`
                         }
-                        aria-expanded={!isCollapsed}
+                        {...(isCollapsed
+                          ? { 'aria-expanded': false }
+                          : { 'aria-expanded': true })}
                       >
                         {isCollapsed ? (
                           <PanelLeft className='h-5 w-5' aria-hidden='true' />

From 9f6d11d64be2d8e1b2dfe0203312654912081d77 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Thu, 20 Nov 2025 16:29:12 -0600
Subject: [PATCH 10/11] race condition guard

---
 src/components/WalletSwitcher.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index 265a82da..0851f058 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -15,7 +15,7 @@ import {
 import { CustomError } from '@/contexts/ErrorContext';
 import { useWallet } from '@/contexts/WalletContext';
 import { useErrors } from '@/hooks/useErrors';
-import { loginAndUpdateState, clearState } from '@/state';
+import { clearState, loginAndUpdateState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { LogOut, WalletIcon } from 'lucide-react';
@@ -29,7 +29,12 @@ interface WalletSwitcherProps {
 
 export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
   const navigate = useNavigate();
-  const { wallet: currentWallet, setWallet, setIsSwitching } = useWallet();
+  const {
+    wallet: currentWallet,
+    setWallet,
+    setIsSwitching,
+    isSwitching,
+  } = useWallet();
   const { addError } = useErrors();
   const [wallets, setWallets] = useState<
     { name: string; fingerprint: number; emoji: string | null }[]
@@ -60,6 +65,10 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
   }, [addError]);
 
   const handleSwitchWallet = async (fingerprint: number) => {
+    if (isSwitching) {
+      return;
+    }
+
     try {
       // Start switching: clear wallet, state, and set switching state
       setIsSwitching(true);
@@ -124,7 +133,9 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
           <DropdownMenuItem
             key={wallet.fingerprint}
             onClick={() => handleSwitchWallet(wallet.fingerprint)}
-            disabled={currentWallet?.fingerprint === wallet.fingerprint}
+            disabled={
+              isSwitching || currentWallet?.fingerprint === wallet.fingerprint
+            }
             className='grid grid-cols-[auto_1fr_auto] items-center gap-3'
           >
             <div className='w-6 flex items-center justify-center'>
@@ -151,6 +162,7 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
       <DropdownMenuSeparator />
       <DropdownMenuItem
         onClick={logout}
+        disabled={isSwitching}
         className='text-destructive focus:text-destructive'
       >
         <LogOut className={className} aria-hidden='true' />

From 77ab0f90bd31e83e0b430db4b24e369c996c9ae8 Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Wed, 3 Dec 2025 19:40:38 -0600
Subject: [PATCH 11/11] open menu on hover. don't show if only one wallet

---
 src/components/WalletSwitcher.tsx | 72 ++++++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/components/WalletSwitcher.tsx b/src/components/WalletSwitcher.tsx
index 0851f058..ba3b3893 100644
--- a/src/components/WalletSwitcher.tsx
+++ b/src/components/WalletSwitcher.tsx
@@ -18,8 +18,9 @@ import { useErrors } from '@/hooks/useErrors';
 import { clearState, loginAndUpdateState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
+import { platform } from '@tauri-apps/plugin-os';
 import { LogOut, WalletIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface WalletSwitcherProps {
@@ -40,6 +41,10 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
     { name: string; fingerprint: number; emoji: string | null }[]
   >([]);
   const [loading, setLoading] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isMobile = platform() === 'ios' || platform() === 'android';
 
   useEffect(() => {
     const fetchWallets = async () => {
@@ -64,6 +69,14 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
     fetchWallets();
   }, [addError]);
 
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   const handleSwitchWallet = async (fingerprint: number) => {
     if (isSwitching) {
       return;
@@ -98,24 +111,71 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
     }
   };
 
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsHovering(true);
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 150);
+  };
+
   const className = isCollapsed ? 'h-5 w-5' : 'h-4 w-4';
   const baseClassName = `flex items-center gap-3 transition-all ${
     isCollapsed ? 'justify-center p-2 rounded-full' : 'px-2 rounded-lg py-1.5'
   } text-lg md:text-base text-muted-foreground hover:text-primary`;
 
+  // If only one wallet, show simple logout button
+  if (!loading && wallets.length <= 1) {
+    return (
+      <button
+        type='button'
+        className={baseClassName}
+        onClick={logout}
+        disabled={isSwitching}
+        aria-label={isCollapsed ? t`Logout` : undefined}
+      >
+        <LogOut className={className} aria-hidden='true' />
+        {!isCollapsed && <Trans>Logout</Trans>}
+      </button>
+    );
+  }
+
   const trigger = (
     <button
       type='button'
       className={baseClassName}
       aria-label={isCollapsed ? t`Wallet switcher` : undefined}
+      {...(isMobile
+        ? {}
+        : {
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+          })}
     >
       <LogOut className={className} aria-hidden='true' />
-      {!isCollapsed && <Trans>Logout</Trans>}
+      {!isCollapsed && <Trans>Wallets</Trans>}
     </button>
   );
 
   const dropdownContent = (
-    <DropdownMenuContent align='end' className='w-56'>
+    <DropdownMenuContent
+      align='end'
+      className='w-56'
+      {...(isMobile
+        ? {}
+        : {
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+          })}
+    >
       <DropdownMenuLabel>
         <Trans>Switch Wallet</Trans>
       </DropdownMenuLabel>
@@ -171,9 +231,11 @@ export function WalletSwitcher({ isCollapsed, logout }: WalletSwitcherProps) {
     </DropdownMenuContent>
   );
 
+  // If multiple wallets, show dropdown menu
+  // On mobile, use click to open/close. On desktop, use hover.
   const dropdown = (
-    <DropdownMenu>
-      <Tooltip>
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen} modal={false}>
+      <Tooltip open={isCollapsed && !isHovering && !isOpen ? undefined : false}>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
         </TooltipTrigger>