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