diff --git a/external/lang b/external/lang index 2054052c..de2b94c8 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 2054052c791ff2396dcbde68ae257fa13a93ab6c +Subproject commit de2b94c8d8615b732cbbec3679041e73fd3c7640 diff --git a/src/components/common/user/UserHover.tsx b/src/components/common/user/UserHover.tsx new file mode 100644 index 00000000..28b14ffc --- /dev/null +++ b/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 ( + + + + + + + }> + { children } + + ) +} diff --git a/src/components/common/user/UserStatus.tsx b/src/components/common/user/UserStatus.tsx index b0fb29ad..dc96b8e3 100644 --- a/src/components/common/user/UserStatus.tsx +++ b/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 ( diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index fe951e14..c4ef1e1d 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/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 ( - {!isTouchscreenDevice && ( diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 838b74c2..2ca6c076 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/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") }> - - - + + + + + diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index b3e3de60..801611f1 100644 --- a/src/lib/ContextMenus.tsx +++ b/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) { <>
-
@{client.user!.username}
-
+
writeClipboard(client.user!.username)}> + }> + @{client.user!.username} + +
+
contextClick({ action: 'set_status' })}>
@@ -924,23 +931,21 @@ function ContextMenus(props: Props) { - - - - {client.user!.status?.text && ( + + + + {client.user!.status?.text && ( )} - - - + )} diff --git a/src/redux/reducers/index.ts b/src/redux/reducers/index.ts index 029d5f51..979d36eb 100644 --- a/src/redux/reducers/index.ts +++ b/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; -} diff --git a/src/redux/reducers/settings.ts b/src/redux/reducers/settings.ts index d5c898f3..65d367ba 100644 --- a/src/redux/reducers/settings.ts +++ b/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, }, }; diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index d5f15ee1..55f82c17 100644 --- a/src/styles/_context-menu.scss +++ b/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);