Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 850 additions and 456 deletions
src/components/common/messaging/embed/Embed.module.scss
View file @ 1ac5de17
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
iframe { iframe {
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
} }
&.image { &.image {
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
padding: 12px; padding: 12px;
width: fit-content; width: fit-content;
border-radius: 4px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo { .siteinfo {
display: flex; display: flex;
...@@ -80,8 +80,8 @@ ...@@ -80,8 +80,8 @@
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
white-space: pre-wrap; white-space: pre-wrap;
// -webkit-line-clamp: 6; -webkit-line-clamp: 6;
// -webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.footer { .footer {
...@@ -91,7 +91,43 @@ ...@@ -91,7 +91,43 @@
img.image { img.image {
cursor: pointer; cursor: pointer;
object-fit: contain; object-fit: contain;
border-radius: 3px; border-radius: var(--border-radius);
} }
} }
} }
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.openIcon {
grid-area: open;
}
}
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects"; import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
import classNames from "classnames"; import classNames from "classnames";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea"; import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia"; import EmbedMedia from "./EmbedMedia";
interface Props { interface Props {
embed: EmbedRJS; embed: EmbedI;
} }
const MAX_EMBED_WIDTH = 480; const MAX_EMBED_WIDTH = 480;
...@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24; ...@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150; const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) { export default function Embed({ embed }: Props) {
// ! FIXME: temp code const client = useClient();
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const maxWidth = Math.min( const maxWidth = Math.min(
...@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) { ...@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) {
w: number, w: number,
h: number, h: number,
): { width: number; height: number } { ): { width: number; height: number } {
let limitingWidth = Math.min(maxWidth, w); const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h); const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH. // Calculate smallest possible WxH.
let width = Math.min(limitingWidth, limitingHeight * (w / h)); const width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(limitingHeight, limitingWidth * (h / w)); const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height }; return { width, height };
} }
...@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) { ...@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) {
case "Website": { case "Website": {
// Determine special embed size. // Determine special embed size.
let mw, mh; let mw, mh;
let largeMedia = const largeMedia =
(embed.special && embed.special.type !== "None") || (embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large"; embed.image?.size === "Large";
switch (embed.special?.type) { switch (embed.special?.type) {
...@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) { ...@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) {
} }
} }
let { width, height } = calculateSize(mw, mh); const { width, height } = calculateSize(mw, mh);
return ( return (
<div <div
className={classNames(styles.embed, styles.website)} className={classNames(styles.embed, styles.website)}
...@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) { ...@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) {
<div className={styles.siteinfo}> <div className={styles.siteinfo}>
{embed.icon_url && ( {embed.icon_url && (
<img <img
loading="lazy"
className={styles.favicon} className={styles.favicon}
src={proxyImage(embed.icon_url)} src={client.proxyFile(embed.icon_url)}
draggable={false} draggable={false}
onError={(e) => onError={(e) =>
(e.currentTarget.style.display = (e.currentTarget.style.display =
...@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) { ...@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) {
<a <a
href={embed.url} href={embed.url}
target={"_blank"} target={"_blank"}
className={styles.title}> className={styles.title}
rel="noreferrer">
{embed.title} {embed.title}
</a> </a>
</span> </span>
...@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) { ...@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) {
<img <img
className={classNames(styles.embed, styles.image)} className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)} style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)} src={client.proxyFile(embed.url)}
type="text/html" type="text/html"
frameBorder="0" frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })} onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank") ev.button === 1 && window.open(embed.url, "_blank")
......
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import { Embed } from "revolt.js/dist/api/objects"; /* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props { interface Props {
embed: Embed; embed: Embed;
...@@ -11,19 +13,15 @@ interface Props { ...@@ -11,19 +13,15 @@ interface Props {
} }
export default function EmbedMedia({ embed, width, height }: Props) { export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
if (embed.type !== "Website") return null; if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) { switch (embed.special?.type) {
case "YouTube": case "YouTube":
return ( return (
<iframe <iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`} src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen allowFullScreen
style={{ height }} style={{ height }}
...@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
scrolling="no" scrolling="no"
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
...@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
return ( return (
<iframe <iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`} src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
allowTransparency allowTransparency
...@@ -59,6 +59,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -59,6 +59,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`} )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0" frameBorder="0"
scrolling="no" scrolling="no"
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
...@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) {
embed.special.id embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`} }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless seamless
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
} }
default: { default: {
if (embed.image) { if (embed.image) {
let url = embed.image.url; const url = embed.image.url;
return ( return (
<img <img
className={styles.image} className={styles.image}
src={proxyImage(url)} src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }} style={{ width, height }}
onClick={() => onClick={() =>
openScreen({ openScreen({
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import { LinkExternal } from "@styled-icons/boxicons-regular"; import { LinkExternal } from "@styled-icons/boxicons-regular";
import { EmbedImage } from "revolt.js/dist/api/objects"; import { EmbedImage } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
...@@ -14,13 +14,15 @@ export default function EmbedMediaActions({ embed }: Props) { ...@@ -14,13 +14,15 @@ export default function EmbedMediaActions({ embed }: Props) {
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<div className={styles.info}> <span className={styles.filename}>{filename}</span>
<span className={styles.filename}>{filename}</span> <span className={styles.filesize}>
<span className={styles.filesize}> {`${embed.width}x${embed.height}`}
{embed.width + "x" + embed.height} </span>
</span> <a
</div> href={embed.url}
<a href={embed.url} target="_blank"> class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
......
src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { User } from "revolt.js/dist/maps/Users";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox"; import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import UserIcon from "./UserIcon"; import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User }; type UserProps = Omit<CheckboxProps, "children"> & { user: User };
...@@ -10,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) { ...@@ -10,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) {
return ( return (
<Checkbox {...props}> <Checkbox {...props}>
<UserIcon target={user} size={32} /> <UserIcon target={user} size={32} />
{user.username} <Username user={user} />
</Checkbox> </Checkbox>
); );
} }
src/components/common/user/UserHeader.tsx
View file @ 1ac5de17
import { Cog } from "@styled-icons/boxicons-solid"; import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { User } from "revolt.js"; import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components"; import styled from "styled-components";
import { openContextMenu } from "preact-context-menu"; import { openContextMenu } from "preact-context-menu";
import { Text } from "preact-i18n"; import { Text, Localizer } from "preact-i18n";
import { Localizer } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
...@@ -15,7 +15,6 @@ import Header from "../../ui/Header"; ...@@ -15,7 +15,6 @@ import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
import UserIcon from "./UserIcon";
import UserStatus from "./UserStatus"; import UserStatus from "./UserStatus";
const HeaderBase = styled.div` const HeaderBase = styled.div`
...@@ -49,7 +48,7 @@ interface Props { ...@@ -49,7 +48,7 @@ interface Props {
user: User; user: User;
} }
export default function UserHeader({ user }: Props) { export default observer(({ user }: Props) => {
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
return ( return (
...@@ -81,4 +80,4 @@ export default function UserHeader({ user }: Props) { ...@@ -81,4 +80,4 @@ export default function UserHeader({ user }: Props) {
)} )}
</Header> </Header>
); );
} });
src/components/common/user/UserHover.tsx 0 → 100644
View file @ 1ac5de17
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";
interface Props {
user?: User;
children: Children;
}
const Base = styled.div`
display: flex;
flex-direction: column;
.username {
font-size: 13px;
font-weight: 600;
}
.status {
font-size: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tip {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
color: var(--secondary-foreground);
}
`;
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>
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base>
}>
{children}
</Tooltip>
);
}
src/components/common/user/UserIcon.tsx
View file @ 1ac5de17
import { MicrophoneOff } from "@styled-icons/boxicons-regular"; import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects"; import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
...@@ -21,10 +22,10 @@ interface Props extends IconBaseProps<User> { ...@@ -21,10 +22,10 @@ interface Props extends IconBaseProps<User> {
export function useStatusColour(user?: User) { export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
return user?.online && user?.status?.presence !== Users.Presence.Invisible return user?.online && user?.status?.presence !== Presence.Invisible
? user?.status?.presence === Users.Presence.Idle ? user?.status?.presence === Presence.Idle
? theme["status-away"] ? theme["status-away"]
: user?.status?.presence === Users.Presence.Busy : user?.status?.presence === Presence.Busy
? theme["status-busy"] ? theme["status-busy"]
: theme["status-online"] : theme["status-online"]
: theme["status-invisible"]; : theme["status-invisible"];
...@@ -50,55 +51,68 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>` ...@@ -50,55 +51,68 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
`} `}
`; `;
export default function UserIcon( export default observer(
props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>, (
) { props: Props &
const client = useContext(AppContext); Omit<
JSX.SVGAttributes<SVGSVGElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const { const {
target, target,
attachment, attachment,
size, size,
voice, status,
status,
animate,
mask,
children,
as,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate, animate,
) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback); mask,
hover,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? target.defaultAvatarURL : fallback);
return ( return (
<IconBase <IconBase
{...svgProps} {...svgProps}
width={size} width={size}
height={size} height={size}
aria-hidden="true" hover={hover}
viewBox="0 0 32 32"> aria-hidden="true"
<foreignObject viewBox="0 0 32 32">
x="0" <foreignObject
y="0" x="0"
width="32" y="0"
height="32" width="32"
mask={mask ?? (status ? "url(#user)" : undefined)}> height="32"
{<img src={iconURL} draggable={false} />} class="icon"
</foreignObject> mask={mask ?? (status ? "url(#user)" : undefined)}>
{props.status && ( {<img src={iconURL} draggable={false} loading="lazy" />}
<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
)}
{props.voice && (
<foreignObject x="22" y="22" width="10" height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator>
</foreignObject> </foreignObject>
)} {props.status && (
</IconBase> <circle
); cx="27"
} cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
<foreignObject x="22" y="22" width="10" height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && (
<MicrophoneOff size={6} />
)}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
},
);
src/components/common/user/UserShort.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "./UserIcon"; import UserIcon from "./UserIcon";
export function Username({ export const Username = observer(
user, ({
...otherProps user,
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) { ...otherProps
return ( }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
<span {...otherProps}> let username = user?.username;
{user?.username ?? <Text id="app.main.channel.unknown_user" />} let color;
</span>
); if (user) {
} const { server } = useParams<{ server?: string }>();
if (server) {
const client = useClient();
const member = client.members.getKey({
server,
user: user._id,
});
if (member) {
if (member.nickname) {
username = member.nickname;
}
if (member.roles && member.roles.length > 0) {
const srv = client.servers.get(member._id.server);
if (srv?.roles) {
for (const role of member.roles) {
const c = srv.roles[role].colour;
if (c) {
color = c;
continue;
}
}
}
}
}
}
}
return (
<span {...otherProps} style={{ color }}>
{username ?? <Text id="app.main.channel.unknown_user" />}
</span>
);
},
);
export default function UserShort({ export default function UserShort({
user, user,
......
src/components/common/user/UserStatus.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects"; import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Tooltip from "../Tooltip";
interface Props { interface Props {
user: User; user?: User;
tooltip?: boolean;
} }
export default function UserStatus({ user }: Props) { export default observer(({ user, tooltip }: Props) => {
if (user.online) { if (user?.online) {
if (user.status?.text) { if (user.status?.text) {
return <>{user.status?.text}</>; if (tooltip) {
return (
<Tooltip arrow={undefined} content={user.status.text}>
{user.status.text}
</Tooltip>
);
}
return <>{user.status.text}</>;
} }
if (user.status?.presence === Users.Presence.Busy) { if (user.status?.presence === Presence.Busy) {
return <Text id="app.status.busy" />; return <Text id="app.status.busy" />;
} }
if (user.status?.presence === Users.Presence.Idle) { if (user.status?.presence === Presence.Idle) {
return <Text id="app.status.idle" />; return <Text id="app.status.idle" />;
} }
if (user.status?.presence === Users.Presence.Invisible) { if (user.status?.presence === Presence.Invisible) {
return <Text id="app.status.offline" />; return <Text id="app.status.offline" />;
} }
...@@ -29,4 +41,4 @@ export default function UserStatus({ user }: Props) { ...@@ -29,4 +41,4 @@ export default function UserStatus({ user }: Props) {
} }
return <Text id="app.status.offline" />; return <Text id="app.status.offline" />;
} });
src/components/markdown/Markdown.module.scss
View file @ 1ac5de17
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
margin-bottom: 0; margin-bottom: 0;
margin-top: 1px; margin-top: 1px;
margin-right: 2px; margin-right: 2px;
vertical-align: -.3em; vertical-align: -0.3em;
} }
p, p,
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
&[data-type="mention"] { &[data-type="mention"] {
padding: 0 6px; padding: 0 6px;
font-weight: 600; font-weight: 600;
border-radius: 12px;
display: inline-block; display: inline-block;
background: var(--secondary-background); background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
blockquote { blockquote {
margin: 2px 0; margin: 2px 0;
padding: 2px 0; padding: 2px 0;
border-radius: 4px;
background: var(--hover); background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background); border-inline-start: 4px solid var(--tertiary-background);
> * { > * {
...@@ -72,9 +72,8 @@ ...@@ -72,9 +72,8 @@
pre { pre {
padding: 1em; padding: 1em;
border-radius: 4px;
overflow-x: scroll; overflow-x: scroll;
border-radius: 3px; border-radius: var(--border-radius);
background: var(--block) !important; background: var(--block) !important;
} }
...@@ -85,9 +84,9 @@ ...@@ -85,9 +84,9 @@
code { code {
color: white; color: white;
font-size: 90%; font-size: 90%;
border-radius: 4px;
background: var(--block); background: var(--block);
font-family: var(--monoscape-font), monospace; border-radius: var(--border-radius);
font-family: var(--monospace-font), monospace;
} }
input[type="checkbox"] { input[type="checkbox"] {
...@@ -113,12 +112,13 @@ ...@@ -113,12 +112,13 @@
padding: 0 2px; padding: 0 2px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border-radius: 4px;
color: transparent; color: transparent;
background: #151515; background: #151515;
border-radius: var(--border-radius);
> * { > * {
opacity: 0; opacity: 0;
pointer-events: none;
} }
&:global(.shown) { &:global(.shown) {
...@@ -129,22 +129,19 @@ ...@@ -129,22 +129,19 @@
> * { > * {
opacity: 1; opacity: 1;
pointer-events: unset;
} }
} }
} }
:global(.code) { :global(.code) {
font-family: var(--monoscape-font), monospace; font-family: var(--monospace-font), monospace;
:global(.lang) { :global(.lang) {
// height: 8px; width: fit-content;
// position: relative; padding-bottom: 8px;
div { div {
// margin-left: -5px;
// margin-top: -16px;
// position: absolute;
color: #111; color: #111;
cursor: pointer; cursor: pointer;
padding: 2px 6px; padding: 2px 6px;
...@@ -163,10 +160,6 @@ ...@@ -163,10 +160,6 @@
box-shadow: 0 1px #787676; box-shadow: 0 1px #787676;
} }
} }
// ! FIXME: had to change this temporarily due to overflow
width: fit-content;
padding-bottom: 8px;
} }
} }
...@@ -183,18 +176,18 @@ ...@@ -183,18 +176,18 @@
input[type="checkbox"] + label:before { input[type="checkbox"] + label:before {
width: 12px; width: 12px;
height: 12px; height: 12px;
content: 'a'; content: "a";
font-size: 10px; font-size: 10px;
margin-right: 6px; margin-right: 6px;
line-height: 12px; line-height: 12px;
position: relative;
border-radius: 4px;
background: white; background: white;
position: relative;
display: inline-block; display: inline-block;
border-radius: var(--border-radius);
} }
input[type="checkbox"][checked="true"] + label:before { input[type="checkbox"][checked="true"] + label:before {
content: '✓'; content: "✓";
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
......
src/components/markdown/Markdown.tsx
View file @ 1ac5de17
...@@ -9,7 +9,7 @@ export interface MarkdownProps { ...@@ -9,7 +9,7 @@ export interface MarkdownProps {
export default function Markdown(props: MarkdownProps) { export default function Markdown(props: MarkdownProps) {
return ( return (
// @ts-expect-error // @ts-expect-error Typings mis-match.
<Suspense fallback={props.content}> <Suspense fallback={props.content}>
<Renderer {...props} /> <Renderer {...props} />
</Suspense> </Suspense>
......
src/components/markdown/Renderer.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import MarkdownKatex from "@traptitech/markdown-it-katex"; import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler"; import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import MarkdownIt from "markdown-it"; import MarkdownIt from "markdown-it";
// @ts-ignore // @ts-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare"; import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-ignore // @ts-expect-error No typings.
import MarkdownSub from "markdown-it-sub"; import MarkdownSub from "markdown-it-sub";
// @ts-ignore // @ts-expect-error No typings.
import MarkdownSup from "markdown-it-sup"; import MarkdownSup from "markdown-it-sup";
import Prism from "prismjs"; import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css"; import "prismjs/themes/prism-tomorrow.css";
import { RE_MENTIONS } from "revolt.js"; import { RE_MENTIONS } from "revolt.js";
import styles from "./Markdown.module.scss"; import styles from "./Markdown.module.scss";
import { useContext } from "preact/hooks"; import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter"; import { internalEmit } from "../../lib/eventEmitter";
...@@ -35,7 +36,7 @@ declare global { ...@@ -35,7 +36,7 @@ declare global {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.copycode = function (element: HTMLDivElement) { window.copycode = function (element: HTMLDivElement) {
try { try {
let code = element.parentElement?.parentElement?.children[1]; const code = element.parentElement?.parentElement?.children[1];
if (code) { if (code) {
navigator.clipboard.writeText(code.textContent?.trim() ?? ""); navigator.clipboard.writeText(code.textContent?.trim() ?? "");
} }
...@@ -47,9 +48,9 @@ export const md: MarkdownIt = MarkdownIt({ ...@@ -47,9 +48,9 @@ export const md: MarkdownIt = MarkdownIt({
breaks: true, breaks: true,
linkify: true, linkify: true,
highlight: (str, lang) => { highlight: (str, lang) => {
let v = Prism.languages[lang]; const v = Prism.languages[lang];
if (v) { if (v) {
let out = Prism.highlight(str, v, lang); const out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`; return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
} }
...@@ -66,16 +67,11 @@ export const md: MarkdownIt = MarkdownIt({ ...@@ -66,16 +67,11 @@ export const md: MarkdownIt = MarkdownIt({
.use(MarkdownKatex, { .use(MarkdownKatex, {
throwOnError: false, throwOnError: false,
maxExpand: 0, maxExpand: 0,
maxSize: 10,
strict: false,
errorColor: "var(--error)",
}); });
// ? Force links to open _blank.
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender =
md.renderer.rules.link_open ||
function (tokens, idx, options, _env, self) {
return self.renderToken(tokens, idx, options);
};
// TODO: global.d.ts file for defining globals // TODO: global.d.ts file for defining globals
declare global { declare global {
interface Window { interface Window {
...@@ -83,70 +79,15 @@ declare global { ...@@ -83,70 +79,15 @@ declare global {
} }
} }
// Handler for internal links, pushes events to React using magic.
if (typeof window !== "undefined") {
window.internalHandleURL = function (element: HTMLAnchorElement) {
const url = new URL(element.href, location.href);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
internalEmit("Intermediate", "openProfile", pathname.substr(2));
} else {
internalEmit("Intermediate", "navigate", pathname);
}
};
}
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
let internal;
const hIndex = tokens[idx].attrIndex("href");
if (hIndex >= 0) {
try {
// For internal links, we should use our own handler to use react-router history.
// @ts-ignore
const href = tokens[idx].attrs[hIndex][1];
const url = new URL(href, location.href);
if (url.hostname === location.hostname) {
internal = true;
// I'm sorry.
tokens[idx].attrPush([
"onclick",
"internalHandleURL(this); return false",
]);
if (url.pathname.startsWith("/@")) {
tokens[idx].attrPush(["data-type", "mention"]);
}
}
} catch (err) {
// Ignore the error, treat as normal link.
}
}
if (!internal) {
// Add target=_blank for external links.
const aIndex = tokens[idx].attrIndex("target");
if (aIndex < 0) {
tokens[idx].attrPush(["target", "_blank"]);
} else {
try {
// @ts-ignore
tokens[idx].attrs[aIndex][1] = "_blank";
} catch (_) {}
}
}
return defaultRender(tokens, idx, options, env, self);
};
md.renderer.rules.emoji = function (token, idx) { md.renderer.rules.emoji = function (token, idx) {
return generateEmoji(token[idx].content); return generateEmoji(token[idx].content);
}; };
const RE_TWEMOJI = /:(\w+):/g; const RE_TWEMOJI = /:(\w+):/g;
// ! FIXME: Move to library
const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext); const client = useContext(AppContext);
if (typeof content === "undefined") return null; if (typeof content === "undefined") return null;
...@@ -154,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { ...@@ -154,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
// We replace the message with the mention at the time of render. // We replace the message with the mention at the time of render.
// We don't care if the mention changes. // We don't care if the mention changes.
let newContent = content.replace( const newContent = content
RE_MENTIONS, .replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
(sub: string, ...args: any[]) => { const id = args[0] as string,
const id = args[0],
user = client.users.get(id); user = client.users.get(id);
if (user) { if (user) {
...@@ -165,28 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { ...@@ -165,28 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
} }
return sub; return sub;
}, })
); .replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
channel = client.channels.get(id);
if (channel?.channel_type === "TextChannel") {
return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
}
return sub;
});
const useLargeEmojis = disallowBigEmoji const useLargeEmojis = disallowBigEmoji
? false ? false
: content.replace(RE_TWEMOJI, "").trim().length === 0; : content.replace(RE_TWEMOJI, "").trim().length === 0;
const toggle = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLDivElement;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}, []);
const handleLink = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLAnchorElement;
const url = new URL(element.href, location.href);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
const id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault();
internalEmit("Intermediate", "openProfile", id);
}
} else {
ev.preventDefault();
internalEmit("Intermediate", "navigate", pathname);
}
}
}, []);
return ( return (
<span <span
ref={(el) => {
if (el) {
el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
(element) => {
element.removeEventListener("click", toggle);
element.addEventListener("click", toggle);
},
);
el.querySelectorAll<HTMLAnchorElement>("a").forEach(
(element) => {
element.removeEventListener("click", handleLink);
element.removeAttribute("data-type");
element.removeAttribute("target");
let internal;
const href = element.href;
if (href) {
try {
const url = new URL(href, location.href);
if (url.hostname === location.hostname) {
internal = true;
element.addEventListener(
"click",
handleLink,
);
if (url.pathname.startsWith("/@")) {
element.setAttribute(
"data-type",
"mention",
);
}
}
} catch (err) {}
}
if (!internal) {
element.setAttribute("target", "_blank");
}
},
);
}
}}
className={styles.markdown} className={styles.markdown}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: md.render(newContent), __html: md.render(newContent),
}} }}
data-large-emojis={useLargeEmojis} data-large-emojis={useLargeEmojis}
onClick={(ev) => {
if (ev.target) {
let element = ev.currentTarget;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}}
/> />
); );
} }
src/components/native/Titlebar.tsx 0 → 100644
View file @ 1ac5de17
import { Wrench } from "@styled-icons/boxicons-solid";
import styled from "styled-components";
import UpdateIndicator from "../common/UpdateIndicator";
const TitlebarBase = styled.div`
height: var(--titlebar-height);
display: flex;
user-select: none;
align-items: center;
.drag {
flex-grow: 1;
-webkit-app-region: drag;
margin-top: 10px;
height: 100%;
}
.quick {
color: var(--secondary-foreground);
> div,
> div > div {
width: var(--titlebar-height) !important;
}
&.disabled {
color: var(--error);
}
&.unavailable {
background: var(--error);
}
}
.title {
-webkit-app-region: drag;
/*height: var(--titlebar-height);*/
font-size: 16px;
font-weight: 600;
margin-inline-start: 10px;
margin-top: 10px;
gap: 6px;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 90000;
color: var(--titlebar-logo-color);
svg {
margin-bottom: 10px;
}
svg:first-child {
height: calc(var(--titlebar-height) / 3);
}
}
.actions {
z-index: 100;
display: flex;
align-items: center;
margin-inline-start: 6px;
div {
width: calc(
var(--titlebar-height) + var(--titlebar-action-padding)
);
height: var(--titlebar-height);
display: grid;
place-items: center;
transition: 0.2s ease color;
transition: 0.2s ease background-color;
&:hover {
background: var(--primary-background);
}
&.error:hover {
background: var(--error);
}
}
}
`;
export function Titlebar() {
return (
<TitlebarBase>
<div class="title">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 193.733 37.438">
<path
d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
transform="translate(1.586 11.18)"
fill="var(--titlebar-logo-color)"
stroke="var(--titlebar-logo-color)"
stroke-width="1"
/>
</svg>
{window.native.getConfig().build === "dev" && (
<Wrench size="12.5" />
)}
</div>
{/*<div class="actions quick">
<Tooltip
content="Mute"
placement="bottom">
<div onClick={window.native.min}>
<Microphone size={15}/>
</div>
</Tooltip>
<Tooltip
content="Deafen"
placement="bottom">
<div onClick={window.native.min}>
<VolumeFull size={15}/>
</div>
</Tooltip>
</div>*/}
<div class="drag" />
<UpdateIndicator style="titlebar" />
<div class="actions">
<div onClick={window.native.min}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
fill="currentColor"
width="10"
height="1"
x="1"
y="6"
/>
</svg>
</div>
<div onClick={window.native.max}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
width="9"
height="9"
x="1.5"
y="1.5"
fill="none"
stroke="currentColor"
/>
</svg>
</div>
<div onClick={window.native.close} class="error">
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<polygon
fill="currentColor"
stroke-width="1"
fill-rule="evenodd"
points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
style="stroke:currentColor;stroke-width:0.4"
/>
</svg>
</div>
</div>
</TitlebarBase>
);
}
src/components/navigation/BottomNavigation.tsx
View file @ 1ac5de17
import { Message, Group } from "@styled-icons/boxicons-solid"; import { Message, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
...@@ -7,16 +8,21 @@ import ConditionalLink from "../../lib/ConditionalLink"; ...@@ -7,16 +8,21 @@ import ConditionalLink from "../../lib/ConditionalLink";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import { LastOpened } from "../../redux/reducers/last_opened"; import { LastOpened } from "../../redux/reducers/last_opened";
import { useSelf } from "../../context/revoltjs/hooks"; import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../common/user/UserIcon"; import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
const NavigationBase = styled.div` const Base = styled.div`
background: var(--secondary-background);
`;
const Navbar = styled.div`
z-index: 100; z-index: 100;
max-width: 500px;
margin: 0 auto;
display: flex; display: flex;
height: var(--bottom-navigation-height); height: var(--bottom-navigation-height);
background: var(--secondary-background);
`; `;
const Button = styled.a<{ active: boolean }>` const Button = styled.a<{ active: boolean }>`
...@@ -29,6 +35,11 @@ const Button = styled.a<{ active: boolean }>` ...@@ -29,6 +35,11 @@ const Button = styled.a<{ active: boolean }>`
height: 100%; height: 100%;
} }
> div,
> a > div {
padding: 0 20px;
}
${(props) => ${(props) =>
props.active && props.active &&
css` css`
...@@ -40,8 +51,10 @@ interface Props { ...@@ -40,8 +51,10 @@ interface Props {
lastOpened: LastOpened; lastOpened: LastOpened;
} }
export function BottomNavigation({ lastOpened }: Props) { export const BottomNavigation = observer(({ lastOpened }: Props) => {
const user = useSelf(); const client = useClient();
const user = client.users.get(client.user!._id);
const history = useHistory(); const history = useHistory();
const path = useLocation().pathname; const path = useLocation().pathname;
...@@ -52,42 +65,58 @@ export function BottomNavigation({ lastOpened }: Props) { ...@@ -52,42 +65,58 @@ export function BottomNavigation({ lastOpened }: Props) {
const homeActive = !(friendsActive || settingsActive); const homeActive = !(friendsActive || settingsActive);
return ( return (
<NavigationBase> <Base>
<Button active={homeActive}> <Navbar>
<IconButton <Button active={homeActive}>
onClick={() => { <IconButton
if (settingsActive) { onClick={() => {
if (history.length > 0) { if (settingsActive) {
history.goBack(); if (history.length > 0) {
history.goBack();
}
} }
}
if (channel_id) {
if (channel_id) { history.push(`/channel/${channel_id}`);
history.push(`/channel/${channel_id}`); } else {
} else { history.push("/");
history.push("/"); }
} }}>
}}> <Message size={24} />
<Message size={24} />
</IconButton>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton> </IconButton>
</ConditionalLink> </Button>
</Button> <Button active={friendsActive}>
</NavigationBase> <ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
{/*<Button active={searchActive}>
<ConditionalLink active={searchActive} to="/search">
<IconButton>
<Search size={25} />
</IconButton>
</ConditionalLink>
</Button>
<Button active={inboxActive}>
<ConditionalLink active={inboxActive} to="/inbox">
<IconButton>
<Inbox size={25} />
</IconButton>
</ConditionalLink>
</Button>*/}
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton>
</ConditionalLink>
</Button>
</Navbar>
</Base>
); );
} });
export default connectState(BottomNavigation, (state) => { export default connectState(BottomNavigation, (state) => {
return { return {
......
src/components/navigation/items/ButtonItem.tsx
View file @ 1ac5de17
import { X, Crown } from "@styled-icons/boxicons-regular"; import { X, Crown } from "@styled-icons/boxicons-regular";
import { Channels, Users } from "revolt.js/dist/api/objects"; import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Item.module.scss"; import styles from "./Item.module.scss";
import classNames from "classnames"; import classNames from "classnames";
...@@ -14,6 +17,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate"; ...@@ -14,6 +17,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ChannelIcon from "../../common/ChannelIcon"; import ChannelIcon from "../../common/ChannelIcon";
import Tooltip from "../../common/Tooltip"; import Tooltip from "../../common/Tooltip";
import UserIcon from "../../common/user/UserIcon"; import UserIcon from "../../common/user/UserIcon";
import { Username } from "../../common/user/UserShort";
import UserStatus from "../../common/user/UserStatus"; import UserStatus from "../../common/user/UserStatus";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
...@@ -29,12 +33,12 @@ type CommonProps = Omit< ...@@ -29,12 +33,12 @@ type CommonProps = Omit<
}; };
type UserProps = CommonProps & { type UserProps = CommonProps & {
user: Users.User; user: User;
context?: Channels.Channel; context?: Channel;
channel?: Channels.DirectMessageChannel; channel?: Channel;
}; };
export function UserButton(props: UserProps) { export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } = const { active, alert, alertCount, user, context, channel, ...divProps } =
props; props;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
...@@ -47,8 +51,7 @@ export function UserButton(props: UserProps) { ...@@ -47,8 +51,7 @@ export function UserButton(props: UserProps) {
data-alert={typeof alert === "string"} data-alert={typeof alert === "string"}
data-online={ data-online={
typeof channel !== "undefined" || typeof channel !== "undefined" ||
(user.online && (user.online && user.status?.presence !== Presence.Invisible)
user.status?.presence !== Users.Presence.Invisible)
} }
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {
user: user._id, user: user._id,
...@@ -63,11 +66,13 @@ export function UserButton(props: UserProps) { ...@@ -63,11 +66,13 @@ export function UserButton(props: UserProps) {
status status
/> />
<div className={styles.name}> <div className={styles.name}>
<div>{user.username}</div> <div>
<Username user={user} />
</div>
{ {
<div className={styles.subText}> <div className={styles.subText}>
{channel?.last_message && alert ? ( {channel?.last_message && alert ? (
channel.last_message.short (channel.last_message as { short: string }).short
) : ( ) : (
<UserStatus user={user} /> <UserStatus user={user} />
)} )}
...@@ -76,7 +81,7 @@ export function UserButton(props: UserProps) { ...@@ -76,7 +81,7 @@ export function UserButton(props: UserProps) {
</div> </div>
<div className={styles.button}> <div className={styles.button}>
{context?.channel_type === "Group" && {context?.channel_type === "Group" &&
context.owner === user._id && ( context.owner_id === user._id && (
<Localizer> <Localizer>
<Tooltip <Tooltip
content={<Text id="app.main.groups.owner" />}> content={<Text id="app.main.groups.owner" />}>
...@@ -106,15 +111,15 @@ export function UserButton(props: UserProps) { ...@@ -106,15 +111,15 @@ export function UserButton(props: UserProps) {
</div> </div>
</div> </div>
); );
} });
type ChannelProps = CommonProps & { type ChannelProps = CommonProps & {
channel: Channels.Channel & { unread?: string }; channel: Channel & { unread?: string };
user?: Users.User; user?: User;
compact?: boolean; compact?: boolean;
}; };
export function ChannelButton(props: ChannelProps) { export const ChannelButton = observer((props: ChannelProps) => {
const { active, alert, alertCount, channel, user, compact, ...divProps } = const { active, alert, alertCount, channel, user, compact, ...divProps } =
props; props;
...@@ -131,7 +136,7 @@ export function ChannelButton(props: ChannelProps) { ...@@ -131,7 +136,7 @@ export function ChannelButton(props: ChannelProps) {
{...divProps} {...divProps}
data-active={active} data-active={active}
data-alert={typeof alert === "string"} data-alert={typeof alert === "string"}
aria-label={{}} /*FIXME: ADD ARIA LABEL*/ aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })} className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {
channel: channel._id, channel: channel._id,
...@@ -147,12 +152,12 @@ export function ChannelButton(props: ChannelProps) { ...@@ -147,12 +152,12 @@ export function ChannelButton(props: ChannelProps) {
{channel.channel_type === "Group" && ( {channel.channel_type === "Group" && (
<div className={styles.subText}> <div className={styles.subText}>
{channel.last_message && alert ? ( {channel.last_message && alert ? (
channel.last_message.short (channel.last_message as { short: string }).short
) : ( ) : (
<Text <Text
id="quantities.members" id="quantities.members"
plural={channel.recipients.length} plural={channel.recipients!.length}
fields={{ count: channel.recipients.length }} fields={{ count: channel.recipients!.length }}
/> />
)} )}
</div> </div>
...@@ -180,7 +185,7 @@ export function ChannelButton(props: ChannelProps) { ...@@ -180,7 +185,7 @@ export function ChannelButton(props: ChannelProps) {
</div> </div>
</div> </div>
); );
} });
type ButtonProps = CommonProps & { type ButtonProps = CommonProps & {
onClick?: () => void; onClick?: () => void;
......
src/components/navigation/items/Item.module.scss
View file @ 1ac5de17
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
display: flex; display: flex;
padding: 0 8px; padding: 0 8px;
user-select: none; user-select: none;
border-radius: 6px;
margin-bottom: 2px; margin-bottom: 2px;
border-radius: var(--border-radius);
gap: 8px; gap: 8px;
align-items: center; align-items: center;
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
height: 42px; height: 42px;
} }
&.compact { &.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
height: 32px; height: 32px;
} }
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
transition: color .1s ease-in-out; transition: color .1s ease-in-out;
&.content { &.content {
gap: 8px; gap: 10px;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
display: flex; display: flex;
......