fix: extract app bar into layout slot

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/layout/app-bar/__snapshots__/editor-app-bar.spec.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app bar contains alert when editor is not synced 1`] = `
-<div>
-  <div>
-    <span>
-      first part
-    </span>
-    <div>
-      <div
-        class="fade w-100 m-0 px-2 py-1 border-top-0 border-bottom-0 d-flex align-items-center alert alert-warning show"
-        role="alert"
-      >
-        realtime.connecting
-        BootstrapIconMock_ArrowRepeat
-      </div>
-    </div>
-    <span>
-      last part
-    </span>
-  </div>
-</div>
-`;
-
-exports[`app bar contains note title and read-only marker when having only read permissions 1`] = `
-<div>
-  <div>
-    <span>
-      first part
-    </span>
-    <div>
-      <span
-        class="text-secondary me-2"
-      >
-        BootstrapIconMock_Lock
-      </span>
-      <span
-        class="text-truncate mw-100"
-      >
-        Note Title Test
-      </span>
-    </div>
-    <span>
-      last part
-    </span>
-  </div>
-</div>
-`;
-
-exports[`app bar contains note title when editor is synced 1`] = `
-<div>
-  <div>
-    <span>
-      first part
-    </span>
-    <div>
-      <span
-        class="text-truncate mw-100"
-      >
-        Note Title Test
-      </span>
-    </div>
-    <span>
-      last part
-    </span>
-  </div>
-</div>
-`;

frontend/src/components/layout/app-bar/app-bar-elements/branding-element.tsx

@@ -4,12 +4,13 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useDarkModeState } from '../../../../hooks/dark-mode/use-dark-mode-state'
-import { BrandingSeparatorDash } from '../../../common/custom-branding/branding-separator-dash'
 import { CustomBranding } from '../../../common/custom-branding/custom-branding'
 import { HedgeDocLogoHorizontalGrey } from '../../../common/hedge-doc-logo/hedge-doc-logo-horizontal-grey'
 import { LogoSize } from '../../../common/hedge-doc-logo/logo-size'
+import { BrandingSeparatorDash } from './branding-separator-dash'
 import Link from 'next/link'
 import React from 'react'
+import { Navbar } from 'react-bootstrap'
 
 /**
  * Renders the HedgeDoc branding and branding customizations for the app bar.
@@ -18,14 +19,16 @@ export const BrandingElement: React.FC = () => {
   const darkModeActivated = useDarkModeState()
 
   return (
-    <Link
-      href='/intro'
-      className={'text-secondary text-decoration-none d-flex align-items-center justify-content-start gap-1'}>
-      <div>
-        <HedgeDocLogoHorizontalGrey color={darkModeActivated ? 'dark' : 'light'} size={LogoSize.SMALL} />
-      </div>
-      <BrandingSeparatorDash />
-      <CustomBranding inline={true} />
-    </Link>
+    <Navbar.Brand>
+      <Link href='/' className='text-secondary text-decoration-none d-flex align-items-center'>
+        <HedgeDocLogoHorizontalGrey
+          size={LogoSize.SMALL}
+          className={'w-auto'}
+          color={darkModeActivated ? 'dark' : 'light'}
+        />
+        <BrandingSeparatorDash />
+        <CustomBranding inline={true} />
+      </Link>
+    </Navbar.Brand>
   )
 }

frontend/src/components/layout/app-bar/app-bar-elements/branding-separator-dash.tsx

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useBrandingDetails } from '../../../common/custom-branding/use-branding-details'
+import React from 'react'
+
+/**
+ * Renders a long dash if branding is configured.
+ */
+export const BrandingSeparatorDash: React.FC = () => {
+  const branding = useBrandingDetails()
+
+  return !branding ? null : <span className={'mx-1'}>&mdash;</span>
+}

frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/help-dropdown.tsx

@@ -22,7 +22,7 @@ export const HelpDropdown: React.FC = () => {
 
   return (
     <Dropdown>
-      <Dropdown.Toggle size={'sm'}>
+      <Dropdown.Toggle size={'sm'} className={'h-100'}>
         <UiIcon icon={IconQuestion} />
       </Dropdown.Toggle>
       <Dropdown.Menu>

frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/history-button.tsx

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import Link from 'next/link'
+
+/**
+ * A button that links to the history page.
+ */
+export const HistoryButton: React.FC = () => {
+  useTranslation()
+
+  return (
+    <Link href={'/history'}>
+      <Button variant={'secondary'} size={'sm'}>
+        <Trans i18nKey='landing.navigation.history' />
+      </Button>
+    </Link>
+  )
+}

frontend/src/components/layout/app-bar/app-bar-elements/note-title-element/note-title-element.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /*
  * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
@@ -8,7 +10,7 @@ import { useNoteTitle } from '../../../../../hooks/common/use-note-title'
 import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
 import { UiIcon } from '../../../../common/icons/ui-icon'
 import { ShowIf } from '../../../../common/show-if/show-if'
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Lock as IconLock } from 'react-bootstrap-icons'
 
 /**
@@ -20,13 +22,13 @@ export const NoteTitleElement: React.FC = () => {
   const readOnlyLabel = useTranslatedText('appbar.editor.readOnly')
 
   return (
-    <Fragment>
+    <span className={'m-0 text-truncate'}>
       <ShowIf condition={!isWriteable}>
         <span className={'text-secondary me-2'}>
-          <UiIcon icon={IconLock} title={readOnlyLabel} />
+          <UiIcon icon={IconLock} className={'me-2'} title={readOnlyLabel} />
         </span>
       </ShowIf>
-      <span className={'text-truncate mw-100'}>{noteTitle}</span>
-    </Fragment>
+      {noteTitle}
+    </span>
   )
 }

frontend/src/components/layout/app-bar/app-bar-elements/user-element.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const UserElement: React.FC = () => {
   const userExists = useApplicationState((state) => !!state.user)
-  return userExists ? <UserDropdown /> : <SignInButton size={'sm'} />
+  return userExists ? <UserDropdown /> : <SignInButton size={'sm'} className={'h-100'} />
 }

frontend/src/components/layout/app-bar/base-app-bar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /*
  * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
@@ -8,30 +10,31 @@ import { SettingsButton } from '../../global-dialogs/settings-dialog/settings-bu
 import { BrandingElement } from './app-bar-elements/branding-element'
 import { HelpDropdown } from './app-bar-elements/help-dropdown/help-dropdown'
 import { UserElement } from './app-bar-elements/user-element'
+import styles from './navbar.module.scss'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
-import { Col, Nav, Navbar } from 'react-bootstrap'
+import { Nav, Navbar } from 'react-bootstrap'
+import { HistoryButton } from './app-bar-elements/help-dropdown/history-button'
 
 /**
  * Renders the base app bar with branding, help, settings user elements.
  */
 export const BaseAppBar: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <Navbar expand={true} className={'px-2 py-2 shadow-sm'}>
-      <Col>
+    <Navbar expand={true} className={`px-2 py-1 align-items-center border-bottom ${styles.navbar}`}>
+      <Nav className={`align-items-center justify-content-start gap-2 flex-grow-1 ${styles.side}`}>
         <BrandingElement />
-      </Col>
-      <Col md={6} className={'h-100'}>
-        <Nav className={'d-flex align-items-center justify-content-center h-100'}>{children}</Nav>
-      </Col>
-      <Col>
-        <Nav className={'d-flex align-items-center justify-content-end gap-2'}>
+      </Nav>
+      <Nav className={`align-items-center flex-fill overflow-hidden px-4 ${styles.center}`}>{children}</Nav>
+      <Nav className={`align-items-stretch justify-content-end flex-grow-1 ${styles.side} h-100 py-1`}>
+        <div className={'d-flex gap-2'}>
+          <HistoryButton />
           <HelpDropdown />
           <SettingsButton />
           <NewNoteButton />
           <UserElement />
-        </Nav>
-      </Col>
+        </div>
+      </Nav>
     </Navbar>
   )
 }

frontend/src/components/layout/app-bar/editor-app-bar.spec.tsx

@@ -1,89 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import * as UseApplicationStateModule from '../../../hooks/common/use-application-state'
-import type { ApplicationState } from '../../../redux/application-state'
-import { mockI18n } from '../../../test-utils/mock-i18n'
-import { EditorAppBar } from './editor-app-bar'
-import type { NoteGroupPermissionEntry, NoteUserPermissionEntry } from '@hedgedoc/commons'
-import { render } from '@testing-library/react'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-jest.mock('./base-app-bar', () => ({
-  __esModule: true,
-  BaseAppBar: ({ children }: PropsWithChildren) => (
-    <div>
-      <span>first part</span>
-      <div>{children}</div>
-      <span>last part</span>
-    </div>
-  )
-}))
-jest.mock('../../../hooks/common/use-application-state')
-
-const mockedCommonAppState = {
-  noteDetails: {
-    title: 'Note Title Test',
-    permissions: {
-      owner: 'test',
-      sharedToGroups: [
-        {
-          groupName: '_EVERYONE',
-          canEdit: false
-        }
-      ] as NoteGroupPermissionEntry[],
-      sharedToUsers: [] as NoteUserPermissionEntry[]
-    }
-  },
-  user: {
-    username: 'test'
-  }
-}
-
-describe('app bar', () => {
-  beforeAll(mockI18n)
-  afterAll(() => jest.restoreAllMocks())
-
-  it('contains note title when editor is synced', () => {
-    jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation((fn) => {
-      return fn({
-        ...mockedCommonAppState,
-        realtimeStatus: {
-          isSynced: true
-        }
-      } as ApplicationState)
-    })
-    const view = render(<EditorAppBar />)
-    expect(view.container).toMatchSnapshot()
-  })
-
-  it('contains alert when editor is not synced', () => {
-    jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation((fn) => {
-      return fn({
-        ...mockedCommonAppState,
-        realtimeStatus: {
-          isSynced: false
-        }
-      } as ApplicationState)
-    })
-    const view = render(<EditorAppBar />)
-    expect(view.container).toMatchSnapshot()
-  })
-
-  it('contains note title and read-only marker when having only read permissions', () => {
-    jest.spyOn(UseApplicationStateModule, 'useApplicationState').mockImplementation((fn) => {
-      return fn({
-        ...mockedCommonAppState,
-        realtimeStatus: {
-          isSynced: true
-        },
-        user: null
-      } as ApplicationState)
-    })
-    const view = render(<EditorAppBar />)
-    expect(view.container).toMatchSnapshot()
-  })
-})

frontend/src/components/layout/app-bar/editor-app-bar.tsx

@@ -1,19 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import { RealtimeConnectionAlert } from '../../editor-page/realtime-connection-alert/realtime-connection-alert'
-import { NoteTitleElement } from './app-bar-elements/note-title-element/note-title-element'
-import { BaseAppBar } from './base-app-bar'
-import React from 'react'
-
-/**
- * Renders the EditorAppBar that extends the {@link BaseAppBar} with the note title or realtime connection alert.
- */
-export const EditorAppBar: React.FC = () => {
-  const isSynced = useApplicationState((state) => state.realtimeStatus.isSynced)
-
-  return <BaseAppBar>{isSynced ? <NoteTitleElement /> : <RealtimeConnectionAlert />}</BaseAppBar>
-}

frontend/src/components/layout/app-bar/navbar.module.scss

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.side {
+  flex: 1 1 0;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  flex: 2 1 0;
+}
+
+.history {
+  flex: 2 2 0;
+}
+
+.navbar {
+  height: 48px;
+}