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
Hide whitespace changes
Inline Side-by-side
Showing
with 1110 additions and 689 deletions
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss'; /* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt.js/dist/api/objects"; import { Embed } from "revolt-api/types/January";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props { interface Props {
embed: Embed; embed: Embed;
...@@ -9,66 +13,87 @@ interface Props { ...@@ -9,66 +13,87 @@ interface Props {
} }
export default function EmbedMedia({ embed, width, height }: Props) { export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code if (embed.type !== "Website") return null;
// ! add proxy function to client
function proxyImage(url: string) {
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
}
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': return ( case "YouTube":
<iframe return (
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`} <iframe
allowFullScreen loading="lazy"
style={{ height }} /> src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
) allowFullScreen
case 'Twitch': return ( style={{ height }}
<iframe />
src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${embed.special.id}&parent=${window.location.hostname}&autoplay=false`} );
frameBorder="0" case "Twitch":
allowFullScreen return (
scrolling="no" <iframe
style={{ height, }} /> src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
) embed.special.id
case 'Spotify': return ( }&parent=${window.location.hostname}&autoplay=false`}
<iframe frameBorder="0"
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`} allowFullScreen
frameBorder="0" scrolling="no"
allowFullScreen loading="lazy"
allowTransparency style={{ height }}
style={{ height }} /> />
) );
case 'Soundcloud': return ( case "Spotify":
<iframe return (
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(embed.url!)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`} <iframe
frameBorder="0" src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
scrolling="no" loading="lazy"
style={{ height }} /> frameBorder="0"
) allowFullScreen
case 'Bandcamp': { allowTransparency
return <iframe style={{ height }}
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${embed.special.id}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`} />
seamless );
style={{ height }} />; case "Soundcloud":
return (
<iframe
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
embed.url!,
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0"
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
case "Bandcamp": {
return (
<iframe
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
loading="lazy"
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({ id: "image_viewer", embed: embed.image }) openScreen({
id: "image_viewer",
embed: embed.image,
})
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
} }
onMouseDown={ev => />
ev.button === 1 &&
window.open(url, "_blank")
} />
); );
} }
} }
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss'; import { LinkExternal } from "@styled-icons/boxicons-regular";
import IconButton from '../../../ui/IconButton'; import { EmbedImage } from "revolt-api/types/January";
import { ExternalLink } from '@styled-icons/feather';
import { EmbedImage } from "revolt.js/dist/api/objects"; import styles from "./Embed.module.scss";
import IconButton from "../../../ui/IconButton";
interface Props { interface Props {
embed: EmbedImage; embed: EmbedImage;
} }
export default function EmbedMediaActions({ embed }: Props) { export default function EmbedMediaActions({ embed }: Props) {
const filename = embed.url.split('/').pop(); const filename = embed.url.split("/").pop();
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}</span> {`${embed.width}x${embed.height}`}
</div> </span>
<a href={embed.url} target="_blank"> <a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<ExternalLink size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
) );
} }
src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { User } from "revolt.js/dist/maps/Users";
import UserIcon from "./UserIcon";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox"; import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User }; type UserProps = Omit<CheckboxProps, "children"> & { user: User };
export default function UserCheckbox({ user, ...props }: UserProps) { 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 Tooltip from "../Tooltip"; import { Cog } from "@styled-icons/boxicons-solid";
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
import Header from "../../ui/Header";
import UserStatus from './UserStatus';
import styled from "styled-components";
import { Localizer } from 'preact-i18n';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import IconButton from "../../ui/IconButton"; import { User } from "revolt.js/dist/maps/Users";
import { Settings } from "@styled-icons/feather"; import styled from "styled-components";
import { openContextMenu } from "preact-context-menu"; import { openContextMenu } from "preact-context-menu";
import { Text, Localizer } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton";
import Tooltip from "../Tooltip";
import UserStatus from "./UserStatus";
const HeaderBase = styled.div` const HeaderBase = styled.div`
gap: 0; gap: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
* { * {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
...@@ -41,45 +45,39 @@ const HeaderBase = styled.div` ...@@ -41,45 +45,39 @@ const HeaderBase = styled.div`
`; `;
interface Props { interface Props {
user: User user: User;
} }
export default function UserHeader({ user }: Props) { export default observer(({ user }: Props) => {
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
function openPresenceSelector() {
openContextMenu("Status");
}
return ( return (
<Header placement="secondary"> <Header borders placement="secondary">
<UserIcon
target={user}
size={32}
status
onClick={openPresenceSelector}
/>
<HeaderBase> <HeaderBase>
<Localizer> <Localizer>
<Tooltip content={<Text id="app.special.copy_username" />}> <Tooltip content={<Text id="app.special.copy_username" />}>
<span className="username" <span
className="username"
onClick={() => writeClipboard(user.username)}> onClick={() => writeClipboard(user.username)}>
@{user.username} @{user.username}
</span> </span>
</Tooltip> </Tooltip>
</Localizer> </Localizer>
<span className="status" <span
onClick={openPresenceSelector}> className="status"
onClick={() => openContextMenu("Status")}>
<UserStatus user={user} /> <UserStatus user={user} />
</span> </span>
</HeaderBase> </HeaderBase>
{ !isTouchscreenDevice && <div className="actions"> {!isTouchscreenDevice && (
<Link to="/settings"> <div className="actions">
<IconButton> <Link to="/settings">
<Settings size={24} /> <IconButton>
</IconButton> <Cog size={24} />
</Link> </IconButton>
</div> } </Link>
</div>
)}
</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 { User } from "revolt.js"; import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { useContext } from "preact/hooks"; import { observer } from "mobx-react-lite";
import { MicOff } from "@styled-icons/feather"; 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 { Users } from "revolt.js/dist/api/objects";
import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme"; import { ThemeContext } from "../../../context/Theme";
import IconBase, { IconBaseProps } from "../IconBase";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
type VoiceStatus = "muted"; type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> { interface Props extends IconBaseProps<User> {
mask?: string;
status?: boolean; status?: boolean;
voice?: VoiceStatus; voice?: VoiceStatus;
} }
...@@ -16,17 +22,13 @@ interface Props extends IconBaseProps<User> { ...@@ -16,17 +22,13 @@ interface Props extends IconBaseProps<User> {
export function useStatusColour(user?: User) { export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
return ( return user?.online && user?.status?.presence !== Presence.Invisible
user?.online && ? user?.status?.presence === Presence.Idle
user?.status?.presence !== Users.Presence.Invisible ? theme["status-away"]
? user?.status?.presence === Users.Presence.Idle : user?.status?.presence === Presence.Busy
? theme["status-away"] ? theme["status-busy"]
: user?.status?.presence === : theme["status-online"]
Users.Presence.Busy : theme["status-invisible"];
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"]
);
} }
const VoiceIndicator = styled.div<{ status: VoiceStatus }>` const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
...@@ -42,51 +44,75 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>` ...@@ -42,51 +44,75 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
stroke: white; stroke: white;
} }
${ props => props.status === 'muted' && css` ${(props) =>
background: var(--error); props.status === "muted" &&
` } css`
background: var(--error);
`}
`; `;
import fallback from '../assets/user.png'; export default observer(
(
props: Props &
Omit<
JSX.SVGAttributes<SVGSVGElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) { const {
const client = useContext(AppContext); target,
attachment,
size,
status,
animate,
mask,
hover,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? target.defaultAvatarURL : fallback);
const { target, attachment, size, voice, status, animate, children, as, ...svgProps } = props; return (
const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate) <IconBase
?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback); {...svgProps}
width={size}
return ( height={size}
<IconBase {...svgProps} hover={hover}
width={size} aria-hidden="true"
height={size} viewBox="0 0 32 32">
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject x="0" y="0" width="32" height="32">
{
<img src={iconURL}
draggable={false} />
}
</foreignObject>
{props.status && (
<circle
cx="27"
cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
<foreignObject <foreignObject
x="22" x="0"
y="22" y="0"
width="10" width="32"
height="10"> height="32"
<VoiceIndicator status={props.voice}> class="icon"
{props.voice === "muted" && <MicOff size={6} />} mask={mask ?? (status ? "url(#user)" : undefined)}>
</VoiceIndicator> {<img src={iconURL} draggable={false} loading="lazy" />}
</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 UserIcon from "./UserIcon"; import { useParams } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
export function Username({ user }: { user?: User }) { import { useClient } from "../../../context/revoltjs/RevoltClient";
return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
} import UserIcon from "./UserIcon";
export const Username = observer(
({
user,
...otherProps
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
let username = user?.username;
let color;
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({ user }: { user?: User }) { export default function UserShort({
return <> user,
<UserIcon size={24} target={user} /> size,
<Username user={user} /> }: {
</>; user?: User;
size?: number;
}) {
return (
<>
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
</>
);
} }
src/components/common/user/UserStatus.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
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 { Users } from "revolt.js/dist/api/objects";
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" />;
} }
...@@ -28,4 +41,4 @@ export default function UserStatus({ user }: Props) { ...@@ -28,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
@import "@fontsource/fira-mono/400.css";
.markdown { .markdown {
:global(.emoji) { :global(.emoji) {
height: 1.25em; height: 1.25em;
...@@ -14,7 +12,7 @@ ...@@ -14,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,
...@@ -28,9 +26,9 @@ ...@@ -28,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;
...@@ -63,8 +61,8 @@ ...@@ -63,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);
> * { > * {
...@@ -74,9 +72,8 @@ ...@@ -74,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;
} }
...@@ -87,9 +84,9 @@ ...@@ -87,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: "Fira Mono", monospace; border-radius: var(--border-radius);
font-family: var(--monospace-font), monospace;
} }
input[type="checkbox"] { input[type="checkbox"] {
...@@ -116,29 +113,35 @@ ...@@ -116,29 +113,35 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
color: transparent; color: transparent;
border-radius: 4px;
background: #151515; background: #151515;
border-radius: var(--border-radius);
> * {
opacity: 0;
pointer-events: none;
}
&:global(.shown) { &:global(.shown) {
cursor: auto; cursor: auto;
user-select: all; user-select: all;
color: var(--foreground); color: var(--foreground);
background: var(--secondary-background); background: var(--secondary-background);
> * {
opacity: 1;
pointer-events: unset;
}
} }
} }
:global(.code) { :global(.code) {
font-family: "Fira Mono", 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;
...@@ -157,10 +160,6 @@ ...@@ -157,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;
} }
} }
...@@ -177,18 +176,18 @@ ...@@ -177,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
import { Suspense, lazy } from "preact/compat"; import { Suspense, lazy } from "preact/compat";
const Renderer = lazy(() => import('./Renderer')); const Renderer = lazy(() => import("./Renderer"));
export interface MarkdownProps { export interface MarkdownProps {
content?: string; content?: string;
...@@ -9,9 +9,9 @@ export interface MarkdownProps { ...@@ -9,9 +9,9 @@ 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 MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import "katex/dist/katex.min.css";
import MarkdownIt from "markdown-it"; import MarkdownIt from "markdown-it";
// @ts-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-expect-error No typings.
import MarkdownSub from "markdown-it-sub";
// @ts-expect-error No typings.
import MarkdownSup from "markdown-it-sup";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
import { RE_MENTIONS } from "revolt.js"; import { RE_MENTIONS } from "revolt.js";
import { useContext } from "preact/hooks";
import { MarkdownProps } from "./Markdown";
import styles from "./Markdown.module.scss"; import styles from "./Markdown.module.scss";
import { generateEmoji } from "../common/Emoji"; import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter"; import { internalEmit } from "../../lib/eventEmitter";
import { emojiDictionary } from "../../assets/emojis";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
import Prism from "prismjs"; import { generateEmoji } from "../common/Emoji";
import "katex/dist/katex.min.css";
import "prismjs/themes/prism-tomorrow.css";
import MarkdownKatex from "@traptitech/markdown-it-katex"; import { emojiDictionary } from "../../assets/emojis";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler"; import { MarkdownProps } from "./Markdown";
// @ts-ignore // TODO: global.d.ts file for defining globals
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare"; declare global {
// @ts-ignore interface Window {
import MarkdownSup from "markdown-it-sup"; copycode: (element: HTMLDivElement) => void;
// @ts-ignore }
import MarkdownSub from "markdown-it-sub"; }
// Handler for code block copy. // Handler for code block copy.
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
(window as any).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 as any).innerText.trim()); navigator.clipboard.writeText(code.textContent?.trim() ?? "");
} }
} catch (e) {} } catch (e) {}
}; };
...@@ -38,97 +48,46 @@ export const md: MarkdownIt = MarkdownIt({ ...@@ -38,97 +48,46 @@ 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>`;
} }
return `<pre class="code"><code>${md.utils.escapeHtml(str)}</code></pre>`;
}
})
.disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers)
.use(MarkdownSup)
.use(MarkdownSub)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0
});
// ? 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);
};
// Handler for internal links, pushes events to React using magic. return `<pre class="code"><code>${md.utils.escapeHtml(
if (typeof window !== "undefined") { str,
(window as any).internalHandleURL = function(element: HTMLAnchorElement) { )}</code></pre>`;
const url = new URL(element.href, location as any); },
const pathname = url.pathname; })
.disable("image")
if (pathname.startsWith("/@")) { .use(MarkdownEmoji, { defs: emojiDictionary })
internalEmit("Intermediate", "openProfile", pathname.substr(2)); .use(MarkdownSpoilers)
} else { .use(MarkdownSup)
internalEmit("Intermediate", "navigate", pathname.substr(2)); .use(MarkdownSub)
} .use(MarkdownKatex, {
}; throwOnError: false,
} maxExpand: 0,
maxSize: 10,
md.renderer.rules.link_open = function(tokens, idx, options, env, self) { strict: false,
let internal; errorColor: "var(--error)",
const hIndex = tokens[idx].attrIndex("href"); });
if (hIndex >= 0) {
try { // TODO: global.d.ts file for defining globals
// For internal links, we should use our own handler to use react-router history. declare global {
// @ts-ignore interface Window {
const href = tokens[idx].attrs[hIndex][1]; internalHandleURL: (element: HTMLAnchorElement) => void;
const url = new URL(href, location as any);
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;
...@@ -136,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { ...@@ -136,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) {
...@@ -147,26 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { ...@@ -147,26 +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 ? false : content.replace(RE_TWEMOJI, '').trim().length === 0; const useLargeEmojis = disallowBigEmoji
? false
: 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: Element = ev.target as any;
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 { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Link } from "react-router-dom";
import IconButton from "../ui/IconButton"; import ConditionalLink from "../../lib/ConditionalLink";
import { connectState } from "../../redux/connector";
import { LastOpened } from "../../redux/reducers/last_opened";
import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../common/user/UserIcon"; import UserIcon from "../common/user/UserIcon";
import { useSelf } from "../../context/revoltjs/hooks"; import IconButton from "../ui/IconButton";
import { useHistory, useLocation } from "react-router";
import { MessageCircle, Users } from "@styled-icons/feather";
const NavigationBase = styled.div` const Base = styled.div`
z-index: 10;
height: 50px;
display: flex;
background: var(--secondary-background); background: var(--secondary-background);
`; `;
const Navbar = styled.div`
z-index: 100;
max-width: 500px;
margin: 0 auto;
display: flex;
height: var(--bottom-navigation-height);
`;
const Button = styled.a<{ active: boolean }>` const Button = styled.a<{ active: boolean }>`
flex: 1; flex: 1;
> a, > div, > a > div { > a,
> div,
> a > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
${ props => props.active && css` > div,
background: var(--hover); > a > div {
` } padding: 0 20px;
}
${(props) =>
props.active &&
css`
background: var(--hover);
`}
`; `;
export default function BottomNavigation() { interface Props {
const user = useSelf(); lastOpened: LastOpened;
}
export const BottomNavigation = observer(({ lastOpened }: Props) => {
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;
const channel_id = lastOpened["home"];
const friendsActive = path.startsWith("/friends"); const friendsActive = path.startsWith("/friends");
const settingsActive = path.startsWith("/settings"); const settingsActive = path.startsWith("/settings");
const homeActive = !(friendsActive || settingsActive); const homeActive = !(friendsActive || settingsActive);
return ( return (
<NavigationBase> <Base>
<Button active={homeActive}> <Navbar>
<IconButton <Button active={homeActive}>
onClick={() => { <IconButton
if (!homeActive) { onClick={() => {
if (settingsActive) { if (settingsActive) {
if (history.length > 0) { if (history.length > 0) {
history.goBack(); history.goBack();
} else {
history.push('/');
} }
} }
}
}}> if (channel_id) {
<MessageCircle size={26} /> history.push(`/channel/${channel_id}`);
</IconButton> } else {
</Button> history.push("/");
<Button active={friendsActive}> }
<Link to="/friends"> }}>
<IconButton> <Message size={24} />
<Users size={26} />
</IconButton>
</Link>
</Button>
<Button active={settingsActive}>
<Link to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton> </IconButton>
</Link> </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) => {
return {
lastOpened: state.lastOpened,
};
});
src/components/navigation/LeftSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router"; import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
import SidebarBase from "./SidebarBase";
import HomeSidebar from "./left/HomeSidebar";
import ServerListSidebar from "./left/ServerListSidebar"; import ServerListSidebar from "./left/ServerListSidebar";
import ServerSidebar from "./left/ServerSidebar"; import ServerSidebar from "./left/ServerSidebar";
import HomeSidebar from "./left/HomeSidebar";
export default function LeftSidebar() { export default function LeftSidebar() {
return ( return (
...@@ -29,4 +29,4 @@ export default function LeftSidebar() { ...@@ -29,4 +29,4 @@ export default function LeftSidebar() {
</Switch> </Switch>
</SidebarBase> </SidebarBase>
); );
}; }
src/components/navigation/RightSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router"; import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
import SidebarBase from "./SidebarBase";
import MemberSidebar from "./right/MemberSidebar"; import MemberSidebar from "./right/MemberSidebar";
export default function RightSidebar() { export default function RightSidebar() {
...@@ -16,4 +16,4 @@ export default function RightSidebar() { ...@@ -16,4 +16,4 @@ export default function RightSidebar() {
</Switch> </Switch>
</SidebarBase> </SidebarBase>
); );
}; }
src/components/navigation/SidebarBase.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export default styled.div` export default styled.div`
...@@ -16,10 +17,14 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>` ...@@ -16,10 +17,14 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-end-start-radius: 8px;
${ props => props.padding && isTouchscreenDevice && css` ${(props) =>
padding-bottom: 50px; props.padding &&
` } isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`; `;
export const GenericSidebarList = styled.div` export const GenericSidebarList = styled.div`
...@@ -27,7 +32,7 @@ export const GenericSidebarList = styled.div` ...@@ -27,7 +32,7 @@ export const GenericSidebarList = styled.div`
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
> svg { > img {
width: 100%; width: 100%;
} }
`; `;
src/components/navigation/items/ButtonItem.tsx
View file @ 1ac5de17
import classNames from 'classnames'; import { X, Crown } from "@styled-icons/boxicons-regular";
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 Tooltip from '../../common/Tooltip'; import classNames from "classnames";
import IconButton from '../../ui/IconButton'; import { attachContextMenu } from "preact-context-menu";
import { Localizer, Text } from "preact-i18n"; import { Localizer, Text } from "preact-i18n";
import { X, Zap } from "@styled-icons/feather";
import { Children } from "../../../types/Preact";
import UserIcon from '../../common/user/UserIcon';
import ChannelIcon from '../../common/ChannelIcon';
import UserStatus from '../../common/user/UserStatus';
import { attachContextMenu } from 'preact-context-menu';
import { Channels, Users } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from '../../../context/intermediate/Intermediate'; import { stopPropagation } from "../../../lib/stopPropagation";
interface CommonProps { import { useIntermediate } from "../../../context/intermediate/Intermediate";
active?: boolean
alert?: 'unread' | 'mention' import ChannelIcon from "../../common/ChannelIcon";
alertCount?: number import Tooltip from "../../common/Tooltip";
} import UserIcon from "../../common/user/UserIcon";
import { Username } from "../../common/user/UserShort";
import UserStatus from "../../common/user/UserStatus";
import IconButton from "../../ui/IconButton";
import { Children } from "../../../types/Preact";
type CommonProps = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as"
> & {
active?: boolean;
alert?: "unread" | "mention";
alertCount?: number;
};
type UserProps = CommonProps & { type UserProps = CommonProps & {
user: Users.User, user: User;
context?: Channels.Channel, context?: Channel;
channel?: Channels.DirectMessageChannel channel?: Channel;
} };
export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) { export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } =
props;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
return ( return (
<div <div
{...divProps}
className={classNames(styles.item, styles.user)} className={classNames(styles.item, styles.user)}
data-active={active} data-active={active}
data-alert={typeof alert === 'string'} data-alert={typeof alert === "string"}
data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)} data-online={
onContextMenu={attachContextMenu('Menu', { typeof channel !== "undefined" ||
(user.online && user.status?.presence !== Presence.Invisible)
}
onContextMenu={attachContextMenu("Menu", {
user: user._id, user: user._id,
channel: channel?._id, channel: channel?._id,
unread: alert, unread: alert,
contextualChannel: context?._id contextualChannel: context?._id,
})}> })}>
<div className={styles.avatar}> <UserIcon
<UserIcon target={user} size={32} status /> className={styles.avatar}
</div> target={user}
size={32}
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} />
) } )}
</div> </div>
} }
</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={ content={<Text id="app.main.groups.owner" />}>
<Text id="app.main.groups.owner" /> <Crown size={20} />
}
>
<Zap size={20} />
</Tooltip> </Tooltip>
</Localizer> </Localizer>
)}
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)} )}
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>} {!isTouchscreenDevice && channel && (
{ !isTouchscreenDevice && channel &&
<IconButton <IconButton
className={styles.icon} className={styles.icon}
onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}> onClick={(e) =>
stopPropagation(e) &&
openScreen({
id: "special_prompt",
type: "close_dm",
target: channel,
})
}>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
} )}
</div> </div>
</div> </div>
) );
} });
type ChannelProps = CommonProps & { type ChannelProps = CommonProps & {
channel: Channels.Channel, channel: Channel & { unread?: string };
user?: Users.User user?: User;
compact?: boolean compact?: boolean;
} };
export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) { export const ChannelButton = observer((props: ChannelProps) => {
if (channel.channel_type === 'SavedMessages') throw "Invalid channel type."; const { active, alert, alertCount, channel, user, compact, ...divProps } =
if (channel.channel_type === 'DirectMessage') { props;
if (typeof user === 'undefined') throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} /> if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
if (channel.channel_type === "DirectMessage") {
if (typeof user === "undefined") throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />;
} }
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
return ( return (
<div <div
{...divProps}
data-active={active} data-active={active}
data-alert={typeof alert === 'string'} data-alert={typeof alert === "string"}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })} className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu('Menu', { channel: channel._id })}> onContextMenu={attachContextMenu("Menu", {
<div className={styles.avatar}> channel: channel._id,
<ChannelIcon target={channel} size={compact ? 24 : 32} /> unread: typeof channel.unread !== "undefined",
</div> })}>
<ChannelIcon
className={styles.avatar}
target={channel}
size={compact ? 24 : 32}
/>
<div className={styles.name}> <div className={styles.name}>
<div>{channel.name}</div> <div>{channel.name}</div>
{ 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>
} )}
</div> </div>
<div className={styles.button}> <div className={styles.button}>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>} {alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
{!isTouchscreenDevice && channel.channel_type === "Group" && ( {!isTouchscreenDevice && channel.channel_type === "Group" && (
<IconButton <IconButton
className={styles.icon} className={styles.icon}
onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}> onClick={() =>
openScreen({
id: "special_prompt",
type: "leave_group",
target: channel,
})
}>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
)} )}
</div> </div>
</div> </div>
) );
} });
type ButtonProps = CommonProps & { type ButtonProps = CommonProps & {
onClick?: () => void onClick?: () => void;
children?: Children children?: Children;
className?: string className?: string;
compact?: boolean compact?: boolean;
} };
export default function ButtonItem(props: ButtonProps) {
const {
active,
alert,
alertCount,
onClick,
className,
children,
compact,
...divProps
} = props;
export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
return ( return (
<div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)} <div
{...divProps}
className={classNames(
styles.item,
{ [styles.compact]: compact, [styles.normal]: !compact },
className,
)}
onClick={onClick} onClick={onClick}
data-active={active} data-active={active}
data-alert={typeof alert === 'string'}> data-alert={typeof alert === "string"}>
<div className={styles.content}>{ children }</div> <div className={styles.content}>{children}</div>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>} {alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
</div> </div>
) );
} }
src/components/navigation/items/ConnectionStatus.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Banner from "../../ui/Banner";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import {
ClientStatus,
StatusContext,
} from "../../../context/revoltjs/RevoltClient";
import Banner from "../../ui/Banner";
export default function ConnectionStatus() { export default function ConnectionStatus() {
const status = useContext(StatusContext); const status = useContext(StatusContext);
......
src/components/navigation/items/Item.module.scss
View file @ 1ac5de17
.item { .item {
height: 48px; height: 42px;
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;
...@@ -15,20 +15,19 @@ ...@@ -15,20 +15,19 @@
transition: .1s ease-in-out background-color; transition: .1s ease-in-out background-color;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
stroke: var(--tertiary-foreground);
&.normal { &.normal {
height: 38px; height: 42px;
} }
&.compact { &.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
height: 32px; height: 32px;
} }
&.user { &.user {
opacity: 0.4; opacity: 0.4;
cursor: pointer; cursor: pointer;
transition: .15s ease opacity; transition: .1s ease-in-out opacity;
&[data-online="true"], &[data-online="true"],
&:hover { &:hover {
...@@ -47,7 +46,7 @@ ...@@ -47,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;
...@@ -66,6 +65,7 @@ ...@@ -66,6 +65,7 @@
} }
&.avatar { &.avatar {
display: flex;
flex-shrink: 0; flex-shrink: 0;
} }
...@@ -117,7 +117,6 @@ ...@@ -117,7 +117,6 @@
&[data-alert="true"], &[data-active="true"], &:hover { &[data-alert="true"], &[data-active="true"], &:hover {
color: var(--foreground); color: var(--foreground);
stroke: var(--foreground);
.subText { .subText {
color: var(--secondary-foreground) !important; color: var(--secondary-foreground) !important;
...@@ -146,158 +145,21 @@ ...@@ -146,158 +145,21 @@
} }
} }
/* ! FIXME: check if anything is missing, then remove this block @media (pointer: coarse) {
.olditem { .item {
display: flex; height: 40px;
user-select: none;
align-items: center;
flex-direction: row;
gap: 8px;
height: 48px;
padding: 0 8px;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
box-sizing: content-box;
transition: .1s ease background-color;
color: var(--tertiary-foreground);
stroke: var(--tertiary-foreground);
.avatar {
flex-shrink: 0;
height: 32px;
flex-shrink: 0;
padding: 10px 0;
box-sizing: content-box;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: color .1s ease-in-out;
&.content {
gap: 8px;
flex-grow: 1;
min-width: 0;
display: flex;
align-items: center;
flex-direction: row;
svg {
flex-shrink: 0;
}
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&.name {
flex-grow: 1;
display: flex;
flex-direction: column;
font-size: .90625rem;
font-weight: 600;
.subText {
font-size: .6875rem;
margin-top: -1px;
color: var(--tertiary-foreground);
font-weight: 500;
}
}
&.unread { &.compact {
width: 6px; height: var(--bottom-navigation-height);
height: 6px;
margin: 9px;
flex-shrink: 0;
border-radius: 50%;
background: var(--foreground);
}
&.button { > div {
flex-shrink: 0; gap: 20px;
.icon { > svg {
opacity: 0; height: 24px;
display: none; width: 24px;
transition: 0.1s ease opacity; }
} }
} }
} }
}
&[data-active="true"] { \ No newline at end of file
color: var(--foreground);
stroke: var(--foreground);
background: var(--hover);
cursor: default;
.subText {
color: var(--secondary-foreground) !important;
}
.unread {
display: none;
}
}
&[data-alert="true"] {
color: var(--secondary-foreground);
}
&[data-type="user"] {
opacity: 0.4;
color: var(--foreground);
transition: 0.15s ease opacity;
cursor: pointer;
&[data-online="true"],
&:hover {
opacity: 1;
//background: none;
}
}
&[data-size="compact"] {
margin-bottom: 2px;
height: 32px;
transition: border-inline-start .1s ease-in-out;
border-inline-start: 4px solid transparent;
&[data-active="true"] {
border-inline-start: 4px solid var(--accent);
border-radius: 4px;
}
}
&[data-size="small"] {
margin-bottom: 2px;
height: 42px;
}
&:hover {
background: var(--hover);
div.button .unread {
display: none;
}
div.button .icon {
opacity: 1;
display: block;
}
}
}*/
src/components/navigation/left/HomeSidebar.tsx
View file @ 1ac5de17
import { Localizer, Text } from "preact-i18n"; import {
import { useContext } from "preact/hooks"; Home,
import { Home, Users, Tool, Save } from "@styled-icons/feather"; UserDetail,
Wrench,
Notepad,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import Category from '../../ui/Category'; import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
import UserHeader from "../../common/user/UserHeader"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { Channels } from "revolt.js/dist/api/objects";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector"; import { connectState } from "../../../redux/connector";
import ConnectionStatus from '../items/ConnectionStatus';
import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { mapChannelWithUnread, useUnreads } from "./common";
import { Users as UsersNS } from 'revolt.js/dist/api/objects'; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import ButtonItem, { ChannelButton } from '../items/ButtonItem';
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { mapChannelWithUnread, useUnreads } from "./common";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { Link, Redirect, useLocation, useParams } from "react-router-dom"; import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import ConnectionStatus from "../items/ConnectionStatus";
import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
type Props = WithDispatcher & { type Props = {
unreads: Unreads; unreads: Unreads;
} };
function HomeSidebar(props: Props) { const HomeSidebar = observer((props: Props) => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const client = useContext(AppContext); const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>(); const { channel } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const ctx = useForceUpdate(); const channels = [...client.channels.values()]
const channels = useDMs(ctx); .filter(
(x) =>
x.channel_type === "DirectMessage" ||
x.channel_type === "Group",
)
.map((x) => mapChannelWithUnread(x, props.unreads));
const obj = channels.find(x => x?._id === channel); const obj = client.channels.get(channel);
if (channel && !obj) return <Redirect to="/" />; if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj }); if (obj) useUnreads({ ...props, channel: obj });
const channelsArr = channels useEffect(() => {
.filter(x => x.channel_type !== 'SavedMessages') if (!channel) return;
.map(x => mapChannelWithUnread(x, props.unreads));
const users = useUsers( dispatch({
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[]) type: "LAST_OPENED_SET",
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], []) parent: "home",
, ctx); child: channel,
});
}, [channel]);
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp)); channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return ( return (
<GenericSidebarBase padding> <GenericSidebarBase padding>
<UserHeader user={client.user!} />
<ConnectionStatus /> <ConnectionStatus />
<GenericSidebarList> <GenericSidebarList>
<ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span>
<Text id="app.navigation.tabs.home" />
</span>
</ButtonItem>
</ConditionalLink>
{!isTouchscreenDevice && ( {!isTouchscreenDevice && (
<> <>
<Link to="/"> <ConditionalLink
<ButtonItem active={pathname === "/"}> active={pathname === "/friends"}
<Home size={20} /> to="/friends">
<span><Text id="app.navigation.tabs.home" /></span>
</ButtonItem>
</Link>
<Link to="/friends">
<ButtonItem <ButtonItem
active={pathname === "/friends"} active={pathname === "/friends"}
alert={ alert={
typeof users.find( typeof [...client.users.values()].find(
user => (user) =>
user?.relationship === user?.relationship ===
UsersNS.Relationship.Incoming RelationshipStatus.Incoming,
) !== "undefined" ? 'unread' : undefined ) !== "undefined"
} ? "unread"
> : undefined
<Users size={20} /> }>
<span><Text id="app.navigation.tabs.friends" /></span> <UserDetail size={20} />
<span>
<Text id="app.navigation.tabs.friends" />
</span>
</ButtonItem> </ButtonItem>
</Link> </ConditionalLink>
</> </>
)} )}
<Link to="/open/saved"> <ConditionalLink
active={obj?.channel_type === "SavedMessages"}
to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}> <ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Save size={20} /> <Notepad size={20} />
<span><Text id="app.navigation.tabs.saved" /></span> <span>
<Text id="app.navigation.tabs.saved" />
</span>
</ButtonItem> </ButtonItem>
</Link> </ConditionalLink>
{import.meta.env.DEV && ( {import.meta.env.DEV && (
<Link to="/dev"> <Link to="/dev">
<ButtonItem active={pathname === "/dev"}> <ButtonItem active={pathname === "/dev"}>
<Tool size={20} /> <Wrench size={20} />
<span><Text id="app.navigation.tabs.dev" /></span> <span>
<Text id="app.navigation.tabs.dev" />
</span>
</ButtonItem> </ButtonItem>
</Link> </Link>
)} )}
<Localizer> <Category
<Category text={<Text id="app.main.categories.conversations" />}
text={ action={() =>
( openScreen({
<Text id="app.main.categories.conversations" /> id: "special_input",
) as any type: "create_group",
} })
action={() => openScreen({ id: "special_input", type: "create_group" })} }
/> />
</Localizer> {channels.length === 0 && (
{channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />} <img src={placeholderSVG} loading="eager" />
{channelsArr.map(x => { )}
{channels.map((x) => {
let user; let user;
if (x.channel_type === 'DirectMessage') { if (x.channel.channel_type === "DirectMessage") {
let recipient = client.channels.getRecipient(x._id); if (!x.channel.active) return null;
user = users.find(x => x?._id === recipient); user = x.channel.recipient;
if (!user) { if (!user) {
console.warn(`Skipped DM ${x._id} because user was missing.`); console.warn(
`Skipped DM ${x.channel._id} because user was missing.`,
);
return null; return null;
} }
} }
return ( return (
<Link to={`/channel/${x._id}`}> <ConditionalLink
key={x.channel._id}
active={x.channel._id === channel}
to={`/channel/${x.channel._id}`}>
<ChannelButton <ChannelButton
user={user} user={user}
channel={x} channel={x.channel}
alert={x.unread} alert={x.unread}
alertCount={x.alertCount} alertCount={x.alertCount}
active={x._id === channel} active={x.channel._id === channel}
/> />
</Link> </ConditionalLink>
); );
})} })}
<PaintCounter /> <PaintCounter />
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
}; });
export default connectState( export default connectState(
HomeSidebar, HomeSidebar,
state => { (state) => {
return { return {
unreads: state.unreads unreads: state.unreads,
}; };
}, },
true, true,
true
); );