Add read-only view (/s/note) (#563)

* Update Link classes to allow tooltips/titles

* Added read-only-view, Move note title extraction into separate file

(cherry picked from commit be23083ca3966f26b1b841d5cf4f21e299c8a55a)
(cherry picked from commit cbc595d3fc336b0a649c396dfae30fa08082384c)

* Optimized look of document-infobar

(cherry picked from commit 0176668b156da3fd7c534161a839ca0e3495119c)

# Conflicts:
#	src/components/editor/document-bar/document-info/document-info-time-line.tsx

* Show help-button only in Editor-variant of AppBar

(cherry picked from commit 3c26e1619c774fe162cb3d8fae9e79ced92c9c3e)

* Update CHANGELOG

(cherry picked from commit d0d29e7d408515cc8f86df45d13fff60d741873e)

* Move motd-banner to top of page

(cherry picked from commit 43a9a274bf5da3fdf640ec905ab38153c81b014b)

* Refactor isInline to size property

(cherry picked from commit cb4ee74b7c97ec9711946f28924e9c890b752ea3)

# Conflicts:
#	src/components/editor/document-bar/document-info/document-info-time-line.tsx

* Add size attribute to user-avatar

(cherry picked from commit 9629b58911b9d4f3aed81ef8c271fbc8e5a15aa4)

* Add mode-enum to app-bar

(cherry picked from commit 08f95be58974468c1e2897b475e5e3235b79c230)

* Split DocumentRenderPane into scrollable- and non-scrollable variant

(cherry picked from commit 44dd27edfd967745c548f7ae1fd2047e812cdc22)

* Removed unnecessary className

src/components/pad-view-only/document-infobar.tsx

@@ -0,0 +1,60 @@
+import { DateTime } from 'luxon'
+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 './document-infobar.scss'
+import {
+  DocumentInfoLineWithTimeMode,
+  DocumentInfoTimeLine
+} from '../editor/document-bar/document-info/document-info-time-line'
+
+export interface DocumentInfobarProps {
+  changedAuthor: string
+  changedTime: number
+  createdAuthor: string
+  createdTime: number
+  editable: boolean
+  noteId: string
+  viewCount: number
+}
+
+export const DocumentInfobar: React.FC<DocumentInfobarProps> = ({
+  changedAuthor,
+  changedTime,
+  createdAuthor,
+  createdTime,
+  editable,
+  noteId,
+  viewCount
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={'d-flex flex-row my-3 document-infobar'}>
+      <div className={'col-md'}>&nbsp;</div>
+      <div className={'d-flex flex-fill'}>
+        <div className={'d-flex flex-column'}>
+          <DocumentInfoTimeLine
+            mode={DocumentInfoLineWithTimeMode.CREATED}
+            time={ DateTime.fromSeconds(createdTime) }
+            userName={createdAuthor}
+            profileImageSrc={'/avatar.png'}/>
+          <DocumentInfoTimeLine
+            mode={DocumentInfoLineWithTimeMode.EDITED}
+            time={ DateTime.fromSeconds(changedTime) }
+            userName={changedAuthor}
+            profileImageSrc={'/avatar.png'}/>
+          <hr/>
+        </div>
+        <span className={'ml-auto'}>
+          { viewCount } <Trans i18nKey={'views.readOnly.viewCount'}/>
+          <ShowIf condition={editable}>
+            <InternalLink text={''} href={`/n/${noteId}`} icon={'pencil'} className={'text-primary text-decoration-none mx-1'} title={t('views.readOnly.editNote')}/>
+          </ShowIf>
+        </span>
+      </div>
+      <div className={'col-md'}>&nbsp;</div>
+    </div>
+  )
+}