diff --git a/frontend/src/app/(editor)/@appBar/cheatsheet/page.tsx b/frontend/src/app/(editor)/@appBar/cheatsheet/page.tsx
new file mode 100644
index 000000000..888d185f2
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/cheatsheet/page.tsx
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export default function AppBar() {
+ return null
+}
diff --git a/frontend/src/app/(editor)/@appBar/default.tsx b/frontend/src/app/(editor)/@appBar/default.tsx
new file mode 100644
index 000000000..826a13d7f
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/default.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { BaseAppBar } from '../../../components/layout/app-bar/base-app-bar'
+import React from 'react'
+
+export default function AppBar() {
+ return
+}
diff --git a/frontend/src/app/(editor)/@appBar/history/page.tsx b/frontend/src/app/(editor)/@appBar/history/page.tsx
new file mode 100644
index 000000000..0e5065ad6
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/history/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { BaseAppBar } from '../../../../components/layout/app-bar/base-app-bar'
+
+export default function AppBar() {
+ return History
+}
diff --git a/frontend/src/app/(editor)/@appBar/intro/page.tsx b/frontend/src/app/(editor)/@appBar/intro/page.tsx
new file mode 100644
index 000000000..64a74d30f
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/intro/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { BaseAppBar } from '../../../../components/layout/app-bar/base-app-bar'
+
+export default function AppBar() {
+ return Landing
+}
diff --git a/frontend/src/app/(editor)/@appBar/login/page.tsx b/frontend/src/app/(editor)/@appBar/login/page.tsx
new file mode 100644
index 000000000..1929d6a3a
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/login/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { BaseAppBar } from '../../../../components/layout/app-bar/base-app-bar'
+
+export default function AppBar() {
+ return Login
+}
diff --git a/frontend/src/components/layout/app-bar/__snapshots__/editor-app-bar.spec.tsx.snap b/frontend/src/app/(editor)/@appBar/n/[noteId]/__snapshots__/editor-app-bar.spec.tsx.snap
similarity index 85%
rename from frontend/src/components/layout/app-bar/__snapshots__/editor-app-bar.spec.tsx.snap
rename to frontend/src/app/(editor)/@appBar/n/[noteId]/__snapshots__/editor-app-bar.spec.tsx.snap
index b9416557c..e2cae6dc6 100644
--- a/frontend/src/components/layout/app-bar/__snapshots__/editor-app-bar.spec.tsx.snap
+++ b/frontend/src/app/(editor)/@appBar/n/[noteId]/__snapshots__/editor-app-bar.spec.tsx.snap
@@ -30,13 +30,13 @@ exports[`app bar contains note title and read-only marker when having only read
Note Title Test
diff --git a/frontend/src/components/layout/app-bar/editor-app-bar.spec.tsx b/frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.spec.tsx
similarity index 85%
rename from frontend/src/components/layout/app-bar/editor-app-bar.spec.tsx
rename to frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.spec.tsx
index e0b49a004..6e9f05b98 100644
--- a/frontend/src/components/layout/app-bar/editor-app-bar.spec.tsx
+++ b/frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.spec.tsx
@@ -3,16 +3,16 @@
*
* 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 * 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', () => ({
+jest.mock('../../../../../components/layout/app-bar/base-app-bar', () => ({
__esModule: true,
BaseAppBar: ({ children }: PropsWithChildren) => (
@@ -22,7 +22,7 @@ jest.mock('./base-app-bar', () => ({
)
}))
-jest.mock('../../../hooks/common/use-application-state')
+jest.mock('../../../../../hooks/common/use-application-state')
const mockedCommonAppState = {
noteDetails: {
diff --git a/frontend/src/components/layout/app-bar/editor-app-bar.tsx b/frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.tsx
similarity index 52%
rename from frontend/src/components/layout/app-bar/editor-app-bar.tsx
rename to frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.tsx
index 8237e1f62..648b16794 100644
--- a/frontend/src/components/layout/app-bar/editor-app-bar.tsx
+++ b/frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.tsx
@@ -1,12 +1,14 @@
+'use client'
+
/*
* 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 { RealtimeConnectionAlert } from '../../../../../components/editor-page/realtime-connection-alert/realtime-connection-alert'
+import { NoteTitleElement } from '../../../../../components/layout/app-bar/app-bar-elements/note-title-element/note-title-element'
+import { BaseAppBar } from '../../../../../components/layout/app-bar/base-app-bar'
+import { useApplicationState } from '../../../../../hooks/common/use-application-state'
import React from 'react'
/**
diff --git a/frontend/src/app/(editor)/@appBar/n/[noteId]/page.tsx b/frontend/src/app/(editor)/@appBar/n/[noteId]/page.tsx
new file mode 100644
index 000000000..904f9785d
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/n/[noteId]/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { EditorAppBar } from './editor-app-bar'
+import React from 'react'
+
+export default function AppBar() {
+ return
+}
diff --git a/frontend/src/app/(editor)/@appBar/not-found.tsx b/frontend/src/app/(editor)/@appBar/not-found.tsx
new file mode 100644
index 000000000..826a13d7f
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/not-found.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { BaseAppBar } from '../../../components/layout/app-bar/base-app-bar'
+import React from 'react'
+
+export default function AppBar() {
+ return
+}
diff --git a/frontend/src/app/(editor)/@appBar/p/[noteId]/page.tsx b/frontend/src/app/(editor)/@appBar/p/[noteId]/page.tsx
new file mode 100644
index 000000000..888d185f2
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/p/[noteId]/page.tsx
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export default function AppBar() {
+ return null
+}
diff --git a/frontend/src/app/(editor)/@appBar/profile/page.tsx b/frontend/src/app/(editor)/@appBar/profile/page.tsx
new file mode 100644
index 000000000..a4e5b0fef
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/profile/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { BaseAppBar } from '../../../../components/layout/app-bar/base-app-bar'
+
+export default function AppBar() {
+ return
Profile
+}
diff --git a/frontend/src/app/(editor)/@appBar/register/page.tsx b/frontend/src/app/(editor)/@appBar/register/page.tsx
new file mode 100644
index 000000000..82a867ce0
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/register/page.tsx
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { BaseAppBar } from '../../../../components/layout/app-bar/base-app-bar'
+
+export default function AppBar() {
+ return
Register
+}
diff --git a/frontend/src/app/(editor)/@appBar/s/[noteId]/page.tsx b/frontend/src/app/(editor)/@appBar/s/[noteId]/page.tsx
new file mode 100644
index 000000000..b2e39bed7
--- /dev/null
+++ b/frontend/src/app/(editor)/@appBar/s/[noteId]/page.tsx
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { NoteTitleElement } from '../../../../../components/layout/app-bar/app-bar-elements/note-title-element/note-title-element'
+import { BaseAppBar } from '../../../../../components/layout/app-bar/base-app-bar'
+import React from 'react'
+
+export default function AppBar() {
+ return (
+
+
+
+ )
+}
diff --git a/frontend/src/app/(editor)/history/page.tsx b/frontend/src/app/(editor)/history/page.tsx
index 7305fc41c..4c55aedf8 100644
--- a/frontend/src/app/(editor)/history/page.tsx
+++ b/frontend/src/app/(editor)/history/page.tsx
@@ -13,7 +13,7 @@ import { LandingLayout } from '../../../components/landing-layout/landing-layout
import type { NextPage } from 'next'
import React, { useEffect } from 'react'
import { Row } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
/**
* The page that shows the local and remote note history.
@@ -29,9 +29,6 @@ const HistoryPage: NextPage = () => {
return (
-
-
-
diff --git a/frontend/src/app/(editor)/intro/page.tsx b/frontend/src/app/(editor)/intro/page.tsx
index d4834e825..3207285ef 100644
--- a/frontend/src/app/(editor)/intro/page.tsx
+++ b/frontend/src/app/(editor)/intro/page.tsx
@@ -9,7 +9,6 @@ import { CustomBranding } from '../../../components/common/custom-branding/custo
import { HedgeDocLogoVertical } from '../../../components/common/hedge-doc-logo/hedge-doc-logo-vertical'
import { LogoSize } from '../../../components/common/hedge-doc-logo/logo-size'
import { EditorToRendererCommunicatorContextProvider } from '../../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
-import { CoverButtons } from '../../../components/intro-page/cover-buttons/cover-buttons'
import { IntroCustomContent } from '../../../components/intro-page/intro-custom-content'
import { LandingLayout } from '../../../components/landing-layout/landing-layout'
import type { NextPage } from 'next'
@@ -33,7 +32,6 @@ const IntroPage: NextPage = () => {
-
diff --git a/frontend/src/app/(editor)/layout.tsx b/frontend/src/app/(editor)/layout.tsx
index b303fb35e..6f20497b2 100644
--- a/frontend/src/app/(editor)/layout.tsx
+++ b/frontend/src/app/(editor)/layout.tsx
@@ -14,12 +14,17 @@ import { StoreProvider } from '../../redux/store-provider'
import { baseUrlFromEnvExtractor } from '../../utils/base-url-from-env-extractor'
import { configureLuxon } from '../../utils/configure-luxon'
import type { Metadata } from 'next'
+import type { PropsWithChildren } from 'react'
import React from 'react'
import { getConfig } from '../../api/config'
configureLuxon()
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+interface RootLayoutProps extends PropsWithChildren {
+ appBar: React.ReactNode
+}
+
+export default async function RootLayout({ children, appBar }: RootLayoutProps) {
const baseUrls = baseUrlFromEnvExtractor.extractBaseUrls()
const frontendConfig = await getConfig(baseUrls.editor)
@@ -35,7 +40,12 @@ export default async function RootLayout({ children }: { children: React.ReactNo