Welcome screen slim sidebar

packages/suite-desktop-core/e2e/support/bridge.ts

@@ -14,12 +14,12 @@ export const expectBridgeToBeStopped = async (request: APIRequestContext) => {
     }).rejects.toThrow('ECONNREFUSED');
 };
 
-// We wait for `@welcome/title` or `@dashboard/graph` since
+// We wait for `@welcome-layout/body` or `@dashboard/graph` since
 // one or the other will be display depending on the state of the app
 // due to previously run tests. And both means the same for the porpoise of this test.
 // Bridge should be ready to check `/status` endpoint.
 export const waitForAppToBeInitialized = async (suite: any) =>
     await Promise.race([
-        expect(suite.window.getByTestId('@welcome/title')).toBeVisible(),
+        expect(suite.window.getByTestId('@welcome-layout/body')).toBeVisible(),
         expect(suite.window.getByTestId('@dashboard/graph')).toBeVisible(),
     ]);

packages/suite-desktop-core/e2e/support/pageActions/onboarding/onboardingActions.ts

@@ -18,7 +18,7 @@ export class OnboardingActions {
     readonly pin: PinActions;
     readonly tutorial: TutorialActions;
 
-    readonly welcomeTitle: Locator;
+    readonly welcomeBody: Locator;
     readonly onboardingContinueButton: Locator;
     readonly onboardingViewOnlySkipButton: Locator;
     readonly onboardingViewOnlyEnableButton: Locator;
@@ -52,7 +52,7 @@ export class OnboardingActions {
         this.tutorial = new TutorialActions(page);
         this.pin = new PinActions(page);
 
-        this.welcomeTitle = this.page.getByTestId('@welcome/title');
+        this.welcomeBody = this.page.getByTestId('@welcome-layout/body');
         this.onboardingContinueButton = this.page.getByTestId('@onboarding/exit-app-button');
         this.onboardingViewOnlySkipButton = this.page.getByTestId('@onboarding/viewOnly/skip');
         this.onboardingViewOnlyEnableButton = this.page.getByTestId('@onboarding/viewOnly/enable');
@@ -83,7 +83,7 @@ export class OnboardingActions {
 
     @step()
     async verifySuiteIsLoaded() {
-        await expect(this.welcomeTitle, 'expect Suite to load in under 30s').toBeVisible({
+        await expect(this.welcomeBody, 'expect Suite to load in under 30s').toBeVisible({
             timeout: 30_000,
         });
     }

packages/suite-desktop-core/e2e/support/pageActions/settings/settingsActions.ts

@@ -88,7 +88,7 @@ export class SettingsActions {
             '@settings/early-access-confirm-button',
         );
         this.earlyAccessSkipButton = this.page.getByTestId('@settings/early-access-skip-button');
-        this.settingsCloseButton = this.page.getByTestId('@settings/menu/close');
+        this.settingsCloseButton = this.page.getByTestId('@suite/menu/suite-start');
         this.modal = this.page.getByTestId('@modal');
         this.modalCloseButton = this.page.getByTestId('@modal/close-button');
         this.deviceLabelInput = this.page.getByTestId('@settings/device/label-input');

packages/suite-desktop-core/e2e/tests/bridge-tor/spawn-tor.test.ts

@@ -55,7 +55,7 @@ test.describe.skip('Tor loading screen', { tag: ['@group=suite', '@desktopOnly']
             state: 'visible',
         });
 
-        await suite.window.waitForSelector('[data-testid="@welcome/title"]', { timeout });
+        await suite.window.waitForSelector('[data-testid="@welcome-layout/body"]', { timeout });
 
         suite.electronApp.close();
     });
@@ -83,7 +83,7 @@ test.describe.skip('Tor loading screen', { tag: ['@group=suite', '@desktopOnly']
             state: 'visible',
         });
 
-        await suite.window.waitForSelector('[data-testid="@welcome/title"]', { timeout });
+        await suite.window.waitForSelector('[data-testid="@welcome-layout/body"]', { timeout });
         networkAnalyzer.stop();
         const requests = networkAnalyzer.getRequests();
         requests.forEach(request => {

packages/suite/src/components/suite/Preloader/__tests__/Preloader.test.tsx

@@ -1,6 +1,7 @@
 import * as envUtils from '@trezor/env-utils';
 import { DeepPartial } from '@trezor/type-utils';
 
+import { desktopUpdateInitialState } from 'src/reducers/suite/desktopUpdateReducer';
 import { configureStore } from 'src/support/tests/configureStore';
 import { findByTestId, renderWithProviders } from 'src/support/tests/hooksHelper';
 
@@ -85,7 +86,9 @@ const getInitialState = ({ suite, router, device }: any = {}) => ({
         discovery: [],
         accountSearch: {},
         settings: {},
+        blockchain: {},
     },
+    desktopUpdate: desktopUpdateInitialState,
     router: {
         app: 'suite-index',
         loaded: true,

packages/suite/src/components/suite/layouts/LoggedOutLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useRef, useState } from 'react';
 
-import { ElevationContext, ElevationUp, NewModal } from '@trezor/components';
+import { ElevationContext, ElevationDown, ElevationUp, NewModal } from '@trezor/components';
 
 import { GuideButton, GuideRouter } from 'src/components/guide';
 import { useLayoutSize } from 'src/hooks/suite';
@@ -10,7 +10,6 @@ import { LayoutContext, LayoutContextPayload } from 'src/support/suite/LayoutCon
 import { ModalContextProvider } from 'src/support/suite/ModalContext';
 
 import { Metadata } from '../Metadata';
-import { TrafficLightOffset } from '../TrafficLightOffset';
 import {
     AppWrapper,
     Body,
@@ -19,6 +18,7 @@ import {
     PageWrapper,
     Wrapper,
 } from './SuiteLayout/SuiteLayout';
+import { LoggedOutSidebar } from './WelcomeLayout/WelcomeLayout';
 import { ModalSwitcher } from '../modals/ModalSwitcher/ModalSwitcher';
 
 interface LoggedOutLayout {
@@ -36,38 +36,39 @@ export const LoggedOutLayout = ({ children }: LoggedOutLayout) => {
 
     return (
         <ElevationContext baseElevation={-1}>
-            <TrafficLightOffset>
-                <Wrapper ref={wrapperRef} data-testid="@logged-out-layout">
-                    <PageWrapper>
-                        <NewModal.Provider>
-                            <ModalContextProvider>
-                                <Metadata title={title} />
-                                <ModalSwitcher />
+            <Wrapper ref={wrapperRef} data-testid="@logged-out-layout">
+                <PageWrapper>
+                    <NewModal.Provider>
+                        <ModalContextProvider>
+                            <Metadata title={title} />
+                            <ModalSwitcher />
 
-                                <LayoutContext.Provider value={setLayoutPayload}>
-                                    <Body data-testid="@suite-layout/body">
-                                        <Columns>
-                                            <AppWrapper
-                                                data-testid="@app"
-                                                ref={scrollRef}
-                                                id="layout-scroll"
-                                            >
-                                                {layoutHeader}
-                                                <ElevationUp>
-                                                    <ContentWrapper>{children}</ContentWrapper>
-                                                </ElevationUp>
-                                            </AppWrapper>
-                                        </Columns>
-                                    </Body>
-                                </LayoutContext.Provider>
+                            <LayoutContext.Provider value={setLayoutPayload}>
+                                <Body data-testid="@suite-layout/body">
+                                    <Columns>
+                                        <ElevationDown>
+                                            <LoggedOutSidebar />
+                                        </ElevationDown>
+                                        <AppWrapper
+                                            data-testid="@app"
+                                            ref={scrollRef}
+                                            id="layout-scroll"
+                                        >
+                                            {layoutHeader}
+                                            <ElevationUp>
+                                                <ContentWrapper>{children}</ContentWrapper>
+                                            </ElevationUp>
+                                        </AppWrapper>
+                                    </Columns>
+                                </Body>
+                            </LayoutContext.Provider>
 
-                                {!isMobileLayout && <GuideButton />}
-                            </ModalContextProvider>
-                        </NewModal.Provider>
-                    </PageWrapper>
-                    <GuideRouter />
-                </Wrapper>
-            </TrafficLightOffset>
+                            {!isMobileLayout && <GuideButton />}
+                        </ModalContextProvider>
+                    </NewModal.Provider>
+                </PageWrapper>
+                <GuideRouter />
+            </Wrapper>
         </ElevationContext>
     );
 };

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/SettingsName.tsx

@@ -2,15 +2,13 @@ import { useState } from 'react';
 
 import styled from 'styled-components';
 
-import { IconButton } from '@trezor/components';
 import { desktopApi } from '@trezor/suite-desktop-api';
 import { spacingsPx } from '@trezor/theme';
 
-import { goto } from 'src/actions/suite/routerActions';
 import { setDebugMode } from 'src/actions/suite/suiteActions';
 import { Translation } from 'src/components/suite';
 import { useDispatch, useSelector } from 'src/hooks/suite';
-import { selectIsDebugModeActive, selectIsLoggedOut } from 'src/reducers/suite/suiteReducer';
+import { selectIsDebugModeActive } from 'src/reducers/suite/suiteReducer';
 
 import { HeaderHeading } from './BasicName';
 
@@ -22,7 +20,6 @@ const Container = styled.div`
 
 export const SettingsName = () => {
     const isDebugModeActive = useSelector(selectIsDebugModeActive);
-    const isLoggedOut = useSelector(selectIsLoggedOut);
 
     // show debug menu item after 5 clicks on "Settings" heading
     const [clickCounter, setClickCounter] = useState<number>(0);
@@ -51,20 +48,8 @@ export const SettingsName = () => {
         }
     };
 
-    const handleBackClick = () => dispatch(goto('suite-start'));
-
     return (
         <Container>
-            {isLoggedOut && (
-                <IconButton
-                    icon="caretLeft"
-                    variant="tertiary"
-                    size="medium"
-                    onClick={handleBackClick}
-                    data-testid="@settings/menu/close"
-                />
-            )}
-
             <HeaderHeading onClick={handleTitleClick} data-testid="@settings/menu/title">
                 <Translation id="TR_SETTINGS" />
             </HeaderHeading>

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx

@@ -2,13 +2,14 @@ import { FC } from 'react';
 
 import styled from 'styled-components';
 
+import { Route } from '@suite-common/suite-types';
 import { spacingsPx } from '@trezor/theme';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 import { NotificationDropdown } from './NotificationDropdown';
 import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
 
-const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
+export const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xxs};
@@ -18,6 +19,13 @@ const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `align-items: center;`}
 `;
 
+export const SETTINGS_ROUTES: Route['name'][] = [
+    'settings-index',
+    'settings-device',
+    'settings-coins',
+    'settings-debug',
+] as const;
+
 const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationItemProps> }> = [
     {
         nameId: 'TR_DASHBOARD',
@@ -34,7 +42,7 @@ const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationIte
         nameId: 'TR_SETTINGS',
         icon: 'gearSix',
         goToRoute: 'settings-index',
-        routes: ['settings-index', 'settings-device', 'settings-coins', 'settings-debug'],
+        routes: SETTINGS_ROUTES,
         'data-testid': '@suite/menu/settings',
     },
 ];

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/NavigationItem.tsx

@@ -18,9 +18,7 @@ import { goto } from 'src/actions/suite/routerActions';
 import { Translation } from 'src/components/suite/Translation';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { selectRouteName } from 'src/reducers/suite/routerReducer';
-
-import { CollapsedSidebarOnly } from './CollapsedSidebarOnly';
-import { ExpandedSidebarOnly } from './ExpandedSidebarOnly';
+import { useResponsiveContext } from 'src/support/suite/ResponsiveContext';
 
 export const NavigationItemBase = styled.div.attrs(() => ({
     tabIndex: 0,
@@ -77,6 +75,7 @@ const Container = styled(NavigationItemBase)<{
 export interface NavigationItemProps {
     nameId: TranslationKey;
     icon: IconName;
+    expanded?: boolean;
     routes?: Route['name'][];
     goToRoute?: Route['name'];
     preserveParams?: boolean;
@@ -98,10 +97,11 @@ type TitleProps = {
 
 const Title = ({ nameId, values }: TitleProps) => <Translation id={nameId} values={values} />;
 
-const NavItem = (props: NavigationItemProps) => {
+export const NavItem = (props: NavigationItemProps) => {
     const {
         nameId,
         icon,
+        expanded,
         routes,
         goToRoute,
         isActive,
@@ -144,39 +144,34 @@ const NavItem = (props: NavigationItemProps) => {
             $isRounded={isRounded}
             $typographyStyle={typographyStyle}
         >
-            <Icon name={icon} size={iconSize} color={theme.iconSubdued} pointerEvents="none" />
-            <ExpandedSidebarOnly>
-                <Paragraph typographyStyle={typographyStyle}>
-                    <Translation id={nameId} values={values} />
-                </Paragraph>
-
-                {itemsCount && (
-                    <Paragraph variant="tertiary" typographyStyle={typographyStyle}>
-                        {itemsCount}
+            <Tooltip
+                cursor="pointer"
+                content={<Title nameId={nameId} values={values} />}
+                isActive={!expanded}
+                placement="right"
+                hasArrow
+            >
+                <Icon name={icon} size={iconSize} color={theme.iconSubdued} pointerEvents="none" />
+            </Tooltip>
+            {expanded && (
+                <>
+                    <Paragraph typographyStyle={typographyStyle}>
+                        <Translation id={nameId} values={values} />
                     </Paragraph>
-                )}
-            </ExpandedSidebarOnly>
+
+                    {itemsCount && (
+                        <Paragraph variant="tertiary" typographyStyle={typographyStyle}>
+                            {itemsCount}
+                        </Paragraph>
+                    )}
+                </>
+            )}
         </Container>
     );
 };
 
 export const NavigationItem = (props: NavigationItemProps) => {
-    const { nameId, values } = props;
+    const { isSidebarCollapsed } = useResponsiveContext();
 
-    return (
-        <>
-            <CollapsedSidebarOnly>
-                <Tooltip
-                    content={<Title nameId={nameId} values={values} />}
-                    placement="right"
-                    hasArrow
-                >
-                    <NavItem {...props} />
-                </Tooltip>
-            </CollapsedSidebarOnly>
-            <ExpandedSidebarOnly>
-                <NavItem {...props} />
-            </ExpandedSidebarOnly>
-        </>
-    );
+    return <NavItem expanded={!isSidebarCollapsed} {...props} />;
 };