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.scss

@@ -0,0 +1,4 @@
+.document-infobar {
+  color: #777;
+  font-size: 0.85rem;
+}

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>
+  )
+}

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

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Alert } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { useParams } from 'react-router'
+import { getNote, Note } from '../../api/notes'
+import { ApplyDarkMode } from '../common/apply-dark-mode/apply-dark-mode'
+import { DocumentTitle } from '../common/document-title/document-title'
+import { extractNoteTitle } from '../common/document-title/note-title-extractor'
+import { MotdBanner } from '../common/motd-banner/motd-banner'
+import { ShowIf } from '../common/show-if/show-if'
+import { AppBar, AppBarMode } from '../editor/app-bar/app-bar'
+import { DocumentRenderPane } from '../editor/document-renderer-pane/document-render-pane'
+import { EditorPathParams } from '../editor/editor'
+import { YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata'
+import { DocumentInfobar } from './document-infobar'
+
+export const PadViewOnly: React.FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams<EditorPathParams>()
+  const untitledNote = t('editor.untitledNote')
+  const [documentTitle, setDocumentTitle] = useState(untitledNote)
+  const [noteData, setNoteData] = useState<Note>()
+  const [error, setError] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const noteMetadata = useRef<YAMLMetaData>()
+  const firstHeading = useRef<string>()
+
+  const updateDocumentTitle = useCallback(() => {
+    const noteTitle = extractNoteTitle(untitledNote, noteMetadata.current, firstHeading.current)
+    setDocumentTitle(noteTitle)
+  }, [untitledNote])
+
+  const onFirstHeadingChange = useCallback((newFirstHeading: string | undefined) => {
+    firstHeading.current = newFirstHeading
+    updateDocumentTitle()
+  }, [updateDocumentTitle])
+
+  const onMetadataChange = useCallback((metaData: YAMLMetaData | undefined) => {
+    noteMetadata.current = metaData
+    updateDocumentTitle()
+  }, [updateDocumentTitle])
+
+  useEffect(() => {
+    getNote(id)
+      .then(note => setNoteData(note))
+      .catch(() => setError(true))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  return (
+    <div className={'d-flex flex-column mvh-100 bg-light'}>
+      <ApplyDarkMode/>
+      <DocumentTitle title={documentTitle}/>
+      <MotdBanner/>
+      <AppBar mode={AppBarMode.BASIC}/>
+      <div className={'container'}>
+        <ShowIf condition={error}>
+          <Alert variant={'danger'} className={'my-2'}>
+            <b><Trans i18nKey={'views.readOnly.error.title'}/></b>
+            <br/>
+            <Trans i18nKey={'views.readOnly.error.description'}/>
+          </Alert>
+        </ShowIf>
+        <ShowIf condition={loading}>
+          <Alert variant={'info'} className={'my-2'}>
+            <Trans i18nKey={'views.readOnly.loading'}/>
+          </Alert>
+        </ShowIf>
+      </div>
+      <ShowIf condition={!error && !loading}>
+        { /* TODO set editable and created author properly */ }
+        <DocumentInfobar
+          changedAuthor={noteData?.lastChange.userId ?? ''}
+          changedTime={noteData?.lastChange.timestamp ?? 0}
+          createdAuthor={'Test'}
+          createdTime={noteData?.createtime ?? 0}
+          editable={true}
+          noteId={id}
+          viewCount={noteData?.viewcount ?? 0}
+        />
+        <DocumentRenderPane
+          content={noteData?.content ?? ''}
+          onFirstHeadingChange={onFirstHeadingChange}
+          onMetadataChange={onMetadataChange}
+          onTaskCheckedChange={() => false}
+        />
+      </ShowIf>
+    </div>
+  )
+}