From f6780c44c493361fccb96cbc89ce2ed251c3f7ff Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Mon, 9 Oct 2023 06:19:01 +0200
Subject: [PATCH] feat(sidebar): distinguish guest users visually

This change adds a little guest icon next to the active indicator
showing that a user is not logged-in.
Furthermore, the active indicator now has a tooltip explaining it.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 frontend/locales/en.json                      |  5 +-
 .../active-indicator.module.scss              | 10 +---
 .../active-indicator.tsx                      | 11 +++--
 .../user-line/user-line.tsx                   | 48 +++++++++----------
 4 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index ae1e0d63e..90c4cb937 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -231,7 +231,10 @@
     "infoToc": "Structure your note with headings to see a table-of-contents here.",
     "onlineStatus": {
       "online": "Online",
-      "you": "(You)"
+      "you": "(You)",
+      "guestUser": "This is a guest user",
+      "active": "This user is active",
+      "inactive": "This user has been inactive for some time"
     },
     "error": {
       "noPermission": {
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss
index 7fcea26ef..e49c8dd5e 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.module.scss
@@ -9,6 +9,8 @@
   border-radius: $indicator-size;
   height: $indicator-size;
   width: $indicator-size;
+  margin: 0 calc($indicator-size / 2);
+  display: block;
 
   &.active {
     background-color: #5cb85c;
@@ -18,11 +20,3 @@
     background-color: #d20000;
   }
 }
-
-.active-indicator-container {
-  height: 100%;
-  display: flex;
-  flex: 0 0 20px;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx
index cd46a6254..db6ffab42 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/active-indicator.tsx
@@ -5,6 +5,7 @@
  */
 import styles from './active-indicator.module.scss'
 import React from 'react'
+import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
 
 export interface ActiveIndicatorProps {
   active: boolean
@@ -16,9 +17,13 @@ export interface ActiveIndicatorProps {
  * @param status The state of the indicator to render
  */
 export const ActiveIndicator: React.FC<ActiveIndicatorProps> = ({ active }) => {
+  const textActive = useTranslatedText('editor.onlineStatus.active')
+  const textInactive = useTranslatedText('editor.onlineStatus.inactive')
+
   return (
-    <div className={styles['active-indicator-container']}>
-      <span className={`${styles['activeIndicator']} ${active ? styles.active : styles.inactive}`} />
-    </div>
+    <span
+      title={active ? textActive : textInactive}
+      className={`${styles['activeIndicator']} ${active ? styles.active : styles.inactive}`}
+    />
   )
 }
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
index 2f95c9778..29340dcfd 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/users-online-sidebar-menu/user-line/user-line.tsx
@@ -10,6 +10,9 @@ import { ActiveIndicator } from '../active-indicator'
 import styles from './user-line.module.scss'
 import React, { useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { ShowIf } from '../../../../../common/show-if/show-if'
+import { Incognito as IconIncognito } from 'react-bootstrap-icons'
+import { useTranslatedText } from '../../../../../../hooks/common/use-translated-text'
 
 export interface UserLineProps {
   username: string | null
@@ -30,37 +33,32 @@ export interface UserLineProps {
  */
 export const UserLine: React.FC<UserLineProps> = ({ username, displayName, active, own = false, color }) => {
   useTranslation()
+  const guestUserTitle = useTranslatedText('editor.onlineStatus.guestUser')
 
   const avatar = useMemo(() => {
-    if (username) {
-      return (
-        <UserAvatarForUsername
-          username={username}
-          additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'}
-        />
-      )
-    } else {
-      return (
-        <UserAvatar displayName={displayName} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'} />
-      )
-    }
+    return username ? (
+      <UserAvatarForUsername username={username} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap'} />
+    ) : (
+      <UserAvatar displayName={displayName} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap'} />
+    )
   }, [displayName, username])
 
   return (
-    <div className={'d-flex align-items-center h-100 w-100'}>
-      <div
-        className={`d-inline-flex align-items-bottom ${styles['user-line-color-indicator']} ${createCursorCssClass(
-          color
-        )}`}
-      />
+    <div className={'d-flex h-100 w-100'}>
+      <div className={`${styles['user-line-color-indicator']} ${createCursorCssClass(color)}`} />
       {avatar}
-      {own ? (
-        <span className={'px-1'}>
-          <Trans i18nKey={'editor.onlineStatus.you'}></Trans>
-        </span>
-      ) : (
-        <ActiveIndicator active={active} />
-      )}
+      <div className={'ms-auto d-flex align-items-center gap-1 h-100'}>
+        <ShowIf condition={!username}>
+          <IconIncognito title={guestUserTitle} size={'16px'} className={'text-muted'} />
+        </ShowIf>
+        {own ? (
+          <span className={'px-1'}>
+            <Trans i18nKey={'editor.onlineStatus.you'}></Trans>
+          </span>
+        ) : (
+          <ActiveIndicator active={active} />
+        )}
+      </div>
     </div>
   )
 }