diff --git a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx
new file mode 100644
index 000000000..ccae46147
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { SidebarButton } from '../sidebar-button/sidebar-button'
+import { UserLine } from '../user-line/user-line'
+import React from 'react'
+
+/**
+ * Renders the users own {@link UserLine userline}.
+ */
+export const OwnUserLine: React.FC = () => {
+ const ownUsername = useApplicationState((state) => state.user?.username ?? null)
+ const ownDisplayname = useApplicationState((state) => state.realtimeStatus.ownUser.displayName)
+ const ownStyleIndex = useApplicationState((state) => state.realtimeStatus.ownUser.styleIndex)
+
+ return (
+
+
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
index 2a54a4f3f..48663bcfb 100644
--- a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
+++ b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
@@ -1,5 +1,5 @@
/*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@@ -10,6 +10,7 @@ import type { SpecificSidebarMenuProps } from '../types'
import { DocumentSidebarMenuSelection } from '../types'
import { UserLine } from '../user-line/user-line'
import styles from './online-counter.module.scss'
+import { OwnUserLine } from './own-user-line'
import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { People as IconPeople } from 'react-bootstrap-icons'
@@ -35,7 +36,7 @@ export const UsersOnlineSidebarMenu: React.FC = ({
useTranslation()
useEffect(() => {
- buttonRef.current?.style.setProperty('--users-online', `"${realtimeUsers.length}"`)
+ buttonRef.current?.style.setProperty('--users-online', `"${realtimeUsers.length + 1}"`)
}, [realtimeUsers])
const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@@ -44,17 +45,11 @@ export const UsersOnlineSidebarMenu: React.FC = ({
const onlineUserElements = useMemo(() => {
if (realtimeUsers.length === 0) {
- return (
-
-
-
-
-
- )
+ return null
} else {
- return realtimeUsers.map((realtimeUser) => {
+ return realtimeUsers.map((realtimeUser, index) => {
return (
-
+
= ({
className={`${styles['online-entry']} ${className ?? ''}`}>
- {onlineUserElements}
+
+
+ {onlineUserElements}
+
)
}