Show settings menu when session locked

src/app/components/layout/footer/footer.tsx

@@ -9,8 +9,7 @@ export function Footer({ children, ...props }: HasChildren & FlexProps) {
       gap="space.05"
       p="space.05"
       bottom={0}
-      width="100vw"
-      maxWidth="100%"
+      width="100%"
       zIndex={1}
       minHeight="footerHeight"
       position="fixed"

src/app/components/layout/headers/logo-box.tsx

@@ -1,34 +1,16 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Box } from 'leather-styles/jsx';
+import { Box, BoxProps } from 'leather-styles/jsx';
 
 import { Logo } from '@leather.io/ui';
 
-import { RouteUrls } from '@shared/route-urls';
-
-export function LogoBox({ isSessionLocked }: { isSessionLocked?: boolean | undefined }) {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const shouldShowLogo =
-    location.pathname === RouteUrls.Home || location.pathname === RouteUrls.Activity;
-
-  const hideBelow = shouldShowLogo ? undefined : isSessionLocked ? undefined : 'sm';
-  const hideFrom = shouldShowLogo ? undefined : isSessionLocked ? 'sm' : undefined;
+interface LogoBoxProps extends BoxProps {
+  onClick?(): void;
+}
 
+export function LogoBox({ onClick, ...props }: LogoBoxProps) {
   return (
-    <Box
-      height="headerContainerHeight"
-      margin="auto"
-      px="space.02"
-      hideBelow={hideBelow}
-      hideFrom={hideFrom}
-    >
-      <Logo
-        data-testid={OnboardingSelectors.LogoRouteToHome}
-        onClick={() => navigate(RouteUrls.Home)}
-      />
+    <Box height="headerContainerHeight" margin="auto" px="space.02" hideBelow="sm" {...props}>
+      <Logo data-testid={OnboardingSelectors.LogoRouteToHome} onClick={onClick} />
     </Box>
   );
 }

src/app/features/add-network/add-network.tsx

@@ -16,7 +16,7 @@ export function AddNetwork() {
 
   return (
     <>
-      <PageHeader title="Add Network" />
+      <PageHeader title="Add network" />
       <Content>
         <Page>
           <Formik initialValues={initialFormValues} onSubmit={onSubmit}>

src/app/features/container/headers/home.header.tsx

@@ -0,0 +1,33 @@
+import { useOutletContext } from 'react-router-dom';
+
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { HamburgerIcon } from '@leather.io/ui';
+
+import { SwitchAccountOutletContext } from '@shared/switch-account';
+
+import { Header } from '@app/components/layout/headers/header';
+import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid';
+import { LogoBox } from '@app/components/layout/headers/logo-box';
+import { Settings } from '@app/features/settings/settings';
+
+export function HomeHeader() {
+  const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
+    useOutletContext<SwitchAccountOutletContext>();
+
+  return (
+    <Header paddingLeft={{ base: undefined, sm: 0 }}>
+      <HeaderGrid
+        leftCol={<LogoBox hideBelow={undefined} />}
+        rightCol={
+          <HeaderGridRightCol>
+            <Settings
+              triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+              toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+            />
+          </HeaderGridRightCol>
+        }
+      />
+    </Header>
+  );
+}

src/app/features/container/headers/main.header.tsx → src/app/features/container/headers/onboarding.header.tsx

@@ -5,6 +5,7 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel
 
 import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui';
 
+import { RouteUrls } from '@shared/route-urls';
 import { SwitchAccountOutletContext } from '@shared/switch-account';
 
 import { Header } from '@app/components/layout/headers/header';
@@ -13,29 +14,27 @@ import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/h
 import { LogoBox } from '@app/components/layout/headers/logo-box';
 import { Settings } from '@app/features/settings/settings';
 
-interface MainHeaderProps {
-  hideBackButton?: boolean;
+interface OnboardingHeaderProps {
   hideLogo?: boolean;
 }
 
-export function MainHeader({ hideBackButton = false, hideLogo = false }: MainHeaderProps) {
+export function OnboardingHeader({ hideLogo = false }: OnboardingHeaderProps) {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
   const navigate = useNavigate();
+
   return (
     <>
       <Header paddingLeft={{ base: undefined, sm: 0 }}>
         <HeaderGrid
           leftCol={
             <>
-              {!hideBackButton && (
-                <HeaderActionButton
-                  icon={<ArrowLeftIcon />}
-                  onAction={() => navigate(-1)}
-                  dataTestId={SharedComponentsSelectors.HeaderBackBtn}
-                />
-              )}
-              {!hideLogo && <LogoBox />}
+              <HeaderActionButton
+                icon={<ArrowLeftIcon />}
+                onAction={() => navigate(-1)}
+                dataTestId={SharedComponentsSelectors.HeaderBackBtn}
+              />
+              {!hideLogo && <LogoBox onClick={() => navigate(RouteUrls.Home)} />}
             </>
           }
           rightCol={

src/app/features/container/headers/page.header.tsx

@@ -18,17 +18,15 @@ import { Settings } from '@app/features/settings/settings';
 interface PageHeaderProps {
   title?: string;
   isSummaryPage?: boolean;
-  isSessionLocked?: boolean;
   isSettingsVisibleOnSm?: boolean;
   onBackLocation?: RouteUrls;
   onClose?(): void;
 }
 
 export function PageHeader({
   title,
-  isSummaryPage,
-  isSessionLocked,
-  isSettingsVisibleOnSm,
+  isSummaryPage = false,
+  isSettingsVisibleOnSm = true,
   onBackLocation,
 }: PageHeaderProps) {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
@@ -37,7 +35,7 @@ export function PageHeader({
 
   // pages with nested dialogs specify onBackLocation to prevent navigate(-1) re-opening the dialog
   const onGoBack = onBackLocation ? () => navigate(onBackLocation) : () => navigate(-1);
-  const canGoBack = !isSummaryPage && !isSessionLocked;
+  const canGoBack = !isSummaryPage;
 
   return (
     <>
@@ -52,7 +50,7 @@ export function PageHeader({
                   dataTestId={SharedComponentsSelectors.HeaderBackBtn}
                 />
               )}
-              <LogoBox isSessionLocked={isSessionLocked} />
+              <LogoBox onClick={() => navigate(RouteUrls.Home)} />
             </>
           }
           centerCol={title && <styled.span textStyle="heading.05">{title}</styled.span>}

src/app/features/container/headers/unlock.header.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from 'react-router-dom';
+
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { HamburgerIcon } from '@leather.io/ui';
+
+import { RouteUrls } from '@shared/route-urls';
+
+import { Header } from '@app/components/layout/headers/header';
+import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid';
+import { LogoBox } from '@app/components/layout/headers/logo-box';
+import { Settings } from '@app/features/settings/settings';
+
+export function UnlockHeader() {
+  const navigate = useNavigate();
+
+  return (
+    <Header paddingLeft={{ base: undefined, sm: 0 }}>
+      <HeaderGrid
+        leftCol={
+          <LogoBox onClick={() => navigate(RouteUrls.Home)} hideBelow={undefined} hideFrom="sm" />
+        }
+        rightCol={
+          <HeaderGridRightCol>
+            <Settings
+              canLockWallet={false}
+              triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+            />
+          </HeaderGridRightCol>
+        }
+      />
+    </Header>
+  );
+}

src/app/features/settings/settings.tsx

@@ -44,10 +44,15 @@ import { AdvancedMenuItems } from './components/advanced-menu-items';
 import { LedgerDeviceItemRow } from './components/ledger-item-row';
 
 interface SettingsProps {
+  canLockWallet?: boolean;
   triggerButton: React.ReactNode;
-  toggleSwitchAccount(): void;
+  toggleSwitchAccount?(): void;
 }
-export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) {
+export function Settings({
+  canLockWallet = true,
+  triggerButton,
+  toggleSwitchAccount,
+}: SettingsProps) {
   const [showSignOut, setShowSignOut] = useState(false);
   const [showChangeTheme, setShowChangeTheme] = useState(false);
   const [showChangeNetwork, setShowChangeNetwork] = useState(false);
@@ -70,7 +75,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
     () =>
       [
         showAdvancedMenuOptions && <AdvancedMenuItems />,
-        hasKeys && walletType === 'software' && (
+        canLockWallet && hasKeys && walletType === 'software' && (
           <DropdownMenu.Item
             onSelect={() => {
               void analytics.track('lock_session');
@@ -96,7 +101,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
           </DropdownMenu.Item>
         ),
       ].filter(Boolean),
-    [hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType]
+    [canLockWallet, hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType]
   );
 
   return (
@@ -120,7 +125,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
                   <LedgerDeviceItemRow deviceType={extractDeviceNameFromKnownTargetIds(targetId)} />
                 </DropdownMenu.Item>
               )}
-              {hasKeys && (
+              {hasKeys && toggleSwitchAccount && (
                 <DropdownMenu.Item
                   data-testid={SettingsSelectors.SwitchAccountTrigger}
                   onSelect={toggleSwitchAccount}

src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx

@@ -8,7 +8,7 @@ import { EyeSlashIcon, KeyIcon, LockIcon } from '@leather.io/ui';
 import { RouteUrls } from '@shared/route-urls';
 
 import { Content, TwoColumnLayout } from '@app/components/layout';
-import { MainHeader } from '@app/features/container/headers/main.header';
+import { OnboardingHeader } from '@app/features/container/headers/onboarding.header';
 import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer';
 import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors';
 
@@ -24,7 +24,7 @@ export const BackUpSecretKeyPage = memo(() => {
 
   return (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <TwoColumnLayout
           title="Back up your Secret Key"

src/app/pages/onboarding/set-password/set-password.tsx

@@ -20,7 +20,7 @@ import {
   validatePassword,
 } from '@app/common/validation/validate-password';
 import { Content, TwoColumnLayout } from '@app/components/layout';
-import { MainHeader } from '@app/features/container/headers/main.header';
+import { OnboardingHeader } from '@app/features/container/headers/onboarding.header';
 import { OnboardingGate } from '@app/routes/onboarding-gate';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
@@ -111,7 +111,7 @@ function SetPasswordPage() {
   });
   return (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <Formik
           initialValues={setPasswordFormValues}

src/app/pages/onboarding/sign-in/sign-in.tsx

@@ -4,7 +4,7 @@ import { Link } from '@leather.io/ui';
 import { createNullArrayOfLength } from '@leather.io/utils';
 
 import { Content, TwoColumnLayout } from '@app/components/layout';
-import { MainHeader } from '@app/features/container/headers/main.header';
+import { OnboardingHeader } from '@app/features/container/headers/onboarding.header';
 import { MnemonicForm } from '@app/pages/onboarding/sign-in/mnemonic-form';
 
 export function SignIn() {
@@ -20,7 +20,7 @@ export function SignIn() {
 
   return (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <TwoColumnLayout
           title={

src/app/pages/unlock.tsx

@@ -2,7 +2,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 
 import { Content } from '@app/components/layout';
 import { RequestPassword } from '@app/components/request-password';
-import { PageHeader } from '@app/features/container/headers/page.header';
+import { UnlockHeader } from '@app/features/container/headers/unlock.header';
 
 export function Unlock() {
   const navigate = useNavigate();
@@ -12,7 +12,7 @@ export function Unlock() {
 
   return (
     <>
-      <PageHeader isSessionLocked />
+      <UnlockHeader />
       <Content>
         <RequestPassword onSuccess={returnToPreviousRoute} />
         <Outlet />

src/app/pages/view-secret-key/view-secret-key.tsx

@@ -5,7 +5,7 @@ import { analytics } from '@shared/utils/analytics';
 
 import { Content, TwoColumnLayout } from '@app/components/layout';
 import { RequestPassword } from '@app/components/request-password';
-import { MainHeader } from '@app/features/container/headers/main.header';
+import { OnboardingHeader } from '@app/features/container/headers/onboarding.header';
 import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer';
 import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors';
 
@@ -20,7 +20,7 @@ export function ViewSecretKey() {
   if (showSecretKey) {
     return (
       <>
-        <MainHeader />
+        <OnboardingHeader />
         <Content>
           <TwoColumnLayout
             title={
@@ -46,7 +46,7 @@ export function ViewSecretKey() {
 
   return (
     <>
-      <MainHeader hideLogo />
+      <OnboardingHeader hideLogo />
       <Content>
         <RequestPassword onSuccess={() => setShowSecretKey(true)} />
         <Outlet />

src/app/routes/app-routes.tsx

@@ -15,7 +15,7 @@ import { SwitchAccountLayout } from '@app/components/layout/layouts/switch-accou
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { AddNetwork } from '@app/features/add-network/add-network';
 import { Container } from '@app/features/container/container';
-import { MainHeader } from '@app/features/container/headers/main.header';
+import { HomeHeader } from '@app/features/container/headers/home.header';
 import { IncreaseBtcFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog';
 import { IncreaseStxFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog';
 import { leatherIntroDialogRoutes } from '@app/features/dialogs/leather-intro-dialog/leather-intro-dialog';
@@ -82,7 +82,7 @@ function useAppRoutes() {
           <Route
             element={
               <>
-                <MainHeader hideBackButton />
+                <HomeHeader />
                 <Content>
                   <SwitchAccountLayout />
                 </Content>