feat(suite): add password manager page header

Author: marekrjpolak

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { Route } from '@suite-common/suite-types';
@@ -28,14 +29,17 @@ const Container = styled.div`
 // TODO: perhaps this could be a part of some router config / useLayoutHook / somthing else?
 interface PageHeaderProps {
     backRoute?: Route['name'];
+    children?: ReactNode;
 }
 
-export const PageHeader = ({ backRoute }: PageHeaderProps) => {
+export const PageHeader = ({ backRoute, children }: PageHeaderProps) => {
     const selectedAccount = useSelector(selectSelectedAccount);
     // TODO subpages + tabs could be in some router config? this approach feels a bit fragile
     const isAccountTabPage = useSelector(selectIsAccountTabPage);
 
-    return (
+    return children ? (
+        <Container>{children}</Container>
+    ) : (
         <Container>
             <PageName backRoute={backRoute} />
 

packages/suite/src/views/password-manager/index.tsx

@@ -1,7 +1,16 @@
 import { useLayout } from 'src/hooks/suite';
 import { PasswordManager } from './PasswordManager/PasswordManager';
+import { PageHeader } from 'src/components/suite/layouts/SuiteLayout';
+import { BasicName } from 'src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/BasicName';
+
+const PasswordManagerView = () => {
+    useLayout('Password manager', () => (
+        <PageHeader>
+            <BasicName nameId="TR_PASSWORD_MANAGER" />
+        </PageHeader>
+    ));
 
-export default () => {
-    useLayout('Password manager');
     return <PasswordManager />;
 };
+
+export default PasswordManagerView;