fix: Move content into to frontend directory

Doing this BEFORE the merge prevents a lot of merge conflicts.

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

frontend/src/components/document-read-only-page/document-infobar.module.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.document-infobar {
+  color: #777;
+  font-size: 0.85rem;
+}

frontend/src/components/document-read-only-page/document-infobar.tsx

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { InternalLink } from '../common/links/internal-link'
+import { ShowIf } from '../common/show-if/show-if'
+import styles from './document-infobar.module.scss'
+import { useApplicationState } from '../../hooks/common/use-application-state'
+import { NoteInfoLineCreated } from '../editor-page/document-bar/note-info/note-info-line-created'
+import { NoteInfoLineUpdated } from '../editor-page/document-bar/note-info/note-info-line-updated'
+
+/**
+ * Renders an info bar with metadata about the current note.
+ */
+export const DocumentInfobar: React.FC = () => {
+  const { t } = useTranslation()
+  const noteDetails = useApplicationState((state) => state.noteDetails)
+
+  // TODO Check permissions ("writability") of note and show edit link depending on that.
+  return (
+    <div className={`d-flex flex-row my-3 ${styles['document-infobar']}`}>
+      <div className={'col-md'}>&nbsp;</div>
+      <div className={'d-flex flex-fill'}>
+        <div className={'d-flex flex-column'}>
+          <NoteInfoLineCreated />
+          <NoteInfoLineUpdated />
+          <hr />
+        </div>
+        <span className={'ms-auto'}>
+          {noteDetails.viewCount} <Trans i18nKey={'views.readOnly.viewCount'} />
+          <ShowIf condition={true}>
+            <InternalLink
+              text={''}
+              href={`/n/${noteDetails.primaryAddress}`}
+              icon={'pencil'}
+              className={'text-primary text-decoration-none mx-1'}
+              title={t('views.readOnly.editNote') ?? undefined}
+            />
+          </ShowIf>
+        </span>
+      </div>
+      <div className={'col-md'}>&nbsp;</div>
+    </div>
+  )
+}

frontend/src/components/document-read-only-page/document-read-only-page-content.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
+import { DocumentInfobar } from './document-infobar'
+import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
+import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
+import { useTrimmedNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-trimmed-note-markdown-content-without-frontmatter'
+import { setRendererStatus } from '../../redux/renderer-status/methods'
+
+/**
+ * Renders the read-only version of a note with a header bar that contains information about the note.
+ */
+export const DocumentReadOnlyPageContent: React.FC = () => {
+  useTranslation()
+
+  const markdownContentLines = useTrimmedNoteMarkdownContentWithoutFrontmatter()
+
+  // TODO Change todo values with real ones as soon as the backend is ready.
+  return (
+    <Fragment>
+      <DocumentInfobar />
+      <RenderIframe
+        frameClasses={'flex-fill h-100 w-100'}
+        markdownContentLines={markdownContentLines}
+        onFirstHeadingChange={updateNoteTitleByFirstHeading}
+        rendererType={RendererType.DOCUMENT}
+        onRendererStatusChange={setRendererStatus}
+      />
+    </Fragment>
+  )
+}