Merge branch 'master' of https://gitlab.insrt.uk/revolt/revite

src/components/common/user/UserHover.tsx

@@ -0,0 +1,41 @@
+import { Children } from "../../../types/Preact";
+import { Username } from "./UserShort";
+import styled from "styled-components";
+import UserStatus from "./UserStatus";
+import Tooltip from "../Tooltip";
+import { User } from "revolt.js";
+
+interface Props {
+    user?: User,
+    children: Children
+}
+
+const Base = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    .username {
+        font-weight: 600;
+    }
+
+    .status {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+`;
+
+export default function UserHover({ user, children }: Props) {
+    return (
+        <Tooltip placement="right-end" content={
+            <Base>
+                <Username className="username" user={user} />
+                <span className="status">
+                    <UserStatus user={user} />
+                </span>
+            </Base>
+        }>
+            { children }
+        </Tooltip>
+    )
+}

src/components/common/user/UserStatus.tsx

@@ -5,12 +5,12 @@ import { Text } from "preact-i18n";
 import Tooltip from "../Tooltip";
 
 interface Props {
-    user: User;
+    user?: User;
     tooltip?: boolean;
 }
 
 export default function UserStatus({ user, tooltip }: Props) {
-    if (user.online) {
+    if (user?.online) {
         if (user.status?.text) {
             if (tooltip) {
                 return (

src/components/navigation/left/HomeSidebar.tsx

@@ -27,7 +27,6 @@ import {
     useUsers,
 } from "../../../context/revoltjs/hooks";
 
-import UserHeader from "../../common/user/UserHeader";
 import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
 import { mapChannelWithUnread, useUnreads } from "./common";
@@ -81,7 +80,6 @@ function HomeSidebar(props: Props) {
 
     return (
         <GenericSidebarBase padding>
-            <UserHeader user={client.user!} />
             <ConnectionStatus />
             <GenericSidebarList>
                 {!isTouchscreenDevice && (

src/components/navigation/left/ServerListSidebar.tsx

@@ -29,6 +29,7 @@ import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
 
 import { Children } from "../../../types/Preact";
+import UserHover from "../../common/user/UserHover";
 
 function Icon({
     children,
@@ -241,9 +242,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                             onClick={() =>
                                 homeActive && openContextMenu("Status")
                             }>
-                            <Icon size={42} unread={homeUnread}>
-                                <UserIcon target={self} size={32} status />
-                            </Icon>
+                            <UserHover user={self}>
+                                <Icon size={42} unread={homeUnread}>
+                                    <UserIcon target={self} size={32} status />
+                                </Icon>
+                            </UserHover>
                         </div>
                         <span />
                     </ServerEntry>