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/common/document-title/note-title-extractor.ts

@@ -0,0 +1,11 @@
+import { YAMLMetaData } from '../../editor/yaml-metadata/yaml-metadata'
+
+export const extractNoteTitle = (defaultTitle: string, noteMetadata?: YAMLMetaData, firstHeading?: string): string => {
+  if (noteMetadata?.title && noteMetadata?.title !== '') {
+    return noteMetadata.title
+  } else if (noteMetadata?.opengraph && noteMetadata?.opengraph.get('title') && noteMetadata?.opengraph.get('title') !== '') {
+    return (noteMetadata?.opengraph.get('title') ?? defaultTitle)
+  } else {
+    return (firstHeading ?? defaultTitle).trim()
+  }
+}

src/components/common/links/external-link.tsx

@@ -4,13 +4,14 @@ import { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 
-export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light' }) => {
+export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light', title }) => {
   return (
     <a href={href}
       target="_blank"
       rel="noopener noreferrer"
       id={id}
       className={className}
+      title={title}
       dir='auto'
     >
       <ShowIf condition={!!icon}>

src/components/common/links/internal-link.tsx

@@ -5,11 +5,12 @@ import { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 
-export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light' }) => {
+export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = 'text-light', title }) => {
   return (
     <Link to={href}
       className={className}
       id={id}
+      title={title}
     >
       <ShowIf condition={!!icon}>
         <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;

src/components/common/links/types.d.ts

@@ -6,6 +6,7 @@ interface GeneralLinkProp {
   icon?: IconName
   id?: string
   className?: string
+  title?: string
 }
 
 export interface LinkWithTextProps extends GeneralLinkProp {

src/components/common/user-avatar/user-avatar.scss

@@ -1,8 +1,15 @@
 .user-avatar {
   width: 20px;
   height: 20px;
-}
 
-.user-name {
-  font-size: 1rem;
+  &.lg {
+    width: 30px;
+    height: 30px;
+  }
+
+  &.sm {
+    width: 16px;
+    height: 16px;
+  }
+
 }

src/components/common/user-avatar/user-avatar.tsx

@@ -4,25 +4,26 @@ import { ShowIf } from '../show-if/show-if'
 import './user-avatar.scss'
 
 export interface UserAvatarProps {
-    name: string;
-    photo: string;
-    additionalClasses?: string;
-    showName?: boolean
+  size?: 'sm' | 'lg'
+  name: string;
+  photo: string;
+  additionalClasses?: string;
+  showName?: boolean
 }
 
-const UserAvatar: React.FC<UserAvatarProps> = ({ name, photo, additionalClasses = '', showName = true }) => {
+const UserAvatar: React.FC<UserAvatarProps> = ({ name, photo, size, additionalClasses = '', showName = true }) => {
   const { t } = useTranslation()
 
   return (
     <span className={'d-inline-flex align-items-center ' + additionalClasses}>
       <img
         src={photo}
-        className="user-avatar rounded"
+        className={`user-avatar rounded mr-1 ${size ?? ''}`}
         alt={t('common.avatarOf', { name })}
         title={name}
       />
       <ShowIf condition={showName}>
-        <span className="mx-1 user-name">{name}</span>
+        <span className="mx-1">{name}</span>
       </ShowIf>
     </span>
   )