Server Sidebar: Add home icon hover.

Home Sidebar: Remove top bar.

external/lang

@@ -1 +1 @@
-Subproject commit 2054052c791ff2396dcbde68ae257fa13a93ab6c
+Subproject commit de2b94c8d8615b732cbbec3679041e73fd3c7640

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>

src/lib/ContextMenus.tsx

@@ -10,6 +10,7 @@ import {
     LeftArrowAlt,
     Trash,
 } from "@styled-icons/boxicons-regular";
+import Tooltip from "../components/common/Tooltip";
 import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 import {
@@ -875,8 +876,14 @@ function ContextMenus(props: Props) {
                     <>
                         <div className="header">
                             <div className="main">
-                                <div>@{client.user!.username}</div>
-                                <div className="status">
+                                <div className="username"
+                                    onClick={() => writeClipboard(client.user!.username)}>
+                                    <Tooltip content={<Text id="app.special.copy_username" />}>
+                                        @{client.user!.username}
+                                    </Tooltip>
+                                </div>
+                                <div className="status"
+                                    onClick={() => contextClick({ action: 'set_status' })}>
                                     <UserStatus user={client.user!} />
                                 </div>
                             </div>
@@ -924,23 +931,21 @@ function ContextMenus(props: Props) {
                             <Text id={`app.status.invisible`} />
                         </MenuItem>
                         <LineDivider />
-                                <MenuItem
-                                    data={{ action: "set_status" }}
-                                    disabled={!isOnline}>
-                                    <UserVoice size={18} />
-                                    <Text
-                                        id={`app.context_menu.custom_status`}
-                                    />
-                                    {client.user!.status?.text && (
+                        <MenuItem
+                            data={{ action: "set_status" }}
+                            disabled={!isOnline}>
+                            <UserVoice size={18} />
+                            <Text
+                                id={`app.context_menu.custom_status`}
+                            />
+                            {client.user!.status?.text && (
                                 <IconButton>
                                     <MenuItem data={{ action: "clear_status" }}>
                                         <Trash size={18} />
                                     </MenuItem>
                                 </IconButton>
                             )}
-                                </MenuItem>
-                                
-                            
+                        </MenuItem>
                     </>
                 )}
             </ContextMenuWithData>

src/redux/reducers/index.ts

@@ -46,15 +46,3 @@ export type Action =
     | NotificationsAction
     | SectionToggleAction
     | { type: "__INIT"; state: State };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function filter(obj: any, keys: string[]) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const newObj: any = {};
-    for (const key of keys) {
-        const v = obj[key];
-        if (v) newObj[key] = v;
-    }
-
-    return newObj;
-}

src/redux/reducers/settings.ts

@@ -2,7 +2,6 @@ import type { Theme, ThemeOptions } from "../../context/Theme";
 
 import { setEmojiPack } from "../../components/common/Emoji";
 
-import { filter } from ".";
 import type { Sounds } from "../../assets/sounds/Audio";
 import type { SyncUpdateAction } from "./sync";
 
@@ -67,7 +66,7 @@ export function settings(
             return {
                 ...state,
                 theme: {
-                    ...filter(state.theme, ["custom", "preset", "ligatures"]),
+                    ...state.theme,
                     ...action.theme,
                 },
             };
@@ -94,7 +93,7 @@ export function settings(
             return {
                 ...state,
                 appearance: {
-                    ...filter(state.appearance, ["emojiPack"]),
+                    ...state.appearance,
                     ...action.options,
                 },
             };

src/styles/_context-menu.scss

@@ -1,5 +1,5 @@
 .preact-context-menu .context-menu {
-    z-index: 10000;
+    z-index: 5000;
     min-width: 190px;
     padding: 6px 8px;
     user-select: none;
@@ -48,9 +48,17 @@
             flex-grow: 1;
             display: flex;
             flex-direction: column;
+
+            .username {
+                > div {
+                    cursor: pointer;
+                    width: fit-content;
+                }
+            }
         }
 
         .status {
+            cursor: pointer;
             max-width: 132px;
             font-size: .625rem;
             color: var(--secondary-foreground);