cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 22:52:09 -05:00
Code Issues Projects Releases Packages Wiki Activity

Format and automatically fix linted code.

Browse source
This commit is contained in:
Paul 2021-07-10 15:57:29 +01:00
parent 392cb23541
commit 7586b365fe
87 changed files with 789 additions and 563 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/assets/emojis.ts
View file

@ -1,6 +1,6 @@
export const emojiDictionary = { export const emojiDictionary = {
"100": "💯", 100: "💯",
"1234": "🔢", 1234: "🔢",
grinning: "😀", grinning: "😀",
smiley: "😃", smiley: "😃",
smile: "😄", smile: "😄",

4
src/assets/sounds/Audio.ts
View file

@ -19,8 +19,8 @@ export const SOUNDS_ARRAY: Sounds[] = [
]; ];
export function playSound(sound: Sounds) { export function playSound(sound: Sounds) {
let file = SoundMap[sound]; const file = SoundMap[sound];
let el = new Audio(file); const el = new Audio(file);
try { try {
el.play(); el.play();
} catch (err) { } catch (err) {

57
src/components/common/AgeGate.tsx
View file

@ -1,12 +1,16 @@
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { useState } from "preact/hooks";
import styled from "styled-components";
import { dispatch, getState } from "../../redux";
import Checkbox from "../ui/Checkbox";
import Button from "../ui/Button";
import { Children } from "../../types/Preact";
import { Channel } from "revolt.js"; import { Channel } from "revolt.js";
import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { dispatch, getState } from "../../redux";
import Button from "../ui/Button";
import Checkbox from "../ui/Checkbox";
import { Children } from "../../types/Preact";
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
@ -38,19 +42,27 @@ type Props = {
gated: boolean; gated: boolean;
children: Children; children: Children;
} & { } & {
type: 'channel'; type: "channel";
channel: Channel; channel: Channel;
} };
export default function AgeGate(props: Props) { export default function AgeGate(props: Props) {
const history = useHistory(); const history = useHistory();
const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false); const [consent, setConsent] = useState(
getState().sectionToggle["nsfw"] ?? false,
);
const [ageGate, setAgeGate] = useState(false); const [ageGate, setAgeGate] = useState(false);
if (ageGate || !props.gated) { if (ageGate || !props.gated) {
return <>{ props.children }</>; return <>{props.children}</>;
} else { }
if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>; if (
!(
props.channel.channel_type === "Group" ||
props.channel.channel_type === "TextChannel"
)
)
return <>{props.children}</>;
return ( return (
<Base> <Base>
@ -61,15 +73,23 @@ export default function AgeGate(props: Props) {
<h2>{props.channel.name}</h2> <h2>{props.channel.name}</h2>
<span className="subtext"> <span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "} <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a> <a href="#">
<Text id={`app.main.channel.nsfw.learn_more`} />
</a>
</span> </span>
<Checkbox checked={consent} onChange={(v) => { <Checkbox
checked={consent}
onChange={(v) => {
setConsent(v); setConsent(v);
if (v) { if (v) {
dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true }); dispatch({
type: "SECTION_TOGGLE_SET",
id: "nsfw",
state: true,
});
} else { } else {
dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' }); dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
} }
}}> }}>
<Text id="app.main.channel.nsfw.confirm" /> <Text id="app.main.channel.nsfw.confirm" />
@ -78,13 +98,10 @@ export default function AgeGate(props: Props) {
<Button contrast onClick={() => history.goBack()}> <Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" /> <Text id="app.special.modals.actions.back" />
</Button> </Button>
<Button <Button contrast onClick={() => consent && setAgeGate(true)}>
contrast
onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} /> <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button> </Button>
</div> </div>
</Base> </Base>
); );
}
} }

38
src/components/common/AutoComplete.tsx
View file

@ -58,10 +58,10 @@ export function useAutoComplete(
el: HTMLTextAreaElement, el: HTMLTextAreaElement,
): ["emoji" | "user" | "channel", string, number] | undefined { ): ["emoji" | "user" | "channel", string, number] | undefined {
if (el.selectionStart === el.selectionEnd) { if (el.selectionStart === el.selectionEnd) {
let cursor = el.selectionStart; const cursor = el.selectionStart;
let content = el.value.slice(0, cursor); const content = el.value.slice(0, cursor);
let valid = /\w/; const valid = /\w/;
let j = content.length - 1; let j = content.length - 1;
if (content[j] === "@") { if (content[j] === "@") {
@ -75,10 +75,10 @@ export function useAutoComplete(
} }
if (j === -1) return; if (j === -1) return;
let current = content[j]; const current = content[j];
if (current === ":" || current === "@" || current === "#") { if (current === ":" || current === "@" || current === "#") {
let search = content.slice(j + 1, content.length); const search = content.slice(j + 1, content.length);
if (search.length > 0) { if (search.length > 0) {
return [ return [
current === "#" current === "#"
@ -97,19 +97,19 @@ export function useAutoComplete(
function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) { function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
const el = ev.currentTarget; const el = ev.currentTarget;
let result = findSearchString(el); const result = findSearchString(el);
if (result) { if (result) {
let [type, search] = result; const [type, search] = result;
const regex = new RegExp(search, "i"); const regex = new RegExp(search, "i");
if (type === "emoji") { if (type === "emoji") {
// ! FIXME: we should convert it to a Binary Search Tree and use that // ! FIXME: we should convert it to a Binary Search Tree and use that
let matches = Object.keys(emojiDictionary) const matches = Object.keys(emojiDictionary)
.filter((emoji: string) => emoji.match(regex)) .filter((emoji: string) => emoji.match(regex))
.splice(0, 5); .splice(0, 5);
if (matches.length > 0) { if (matches.length > 0) {
let currentPosition = const currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
@ -130,7 +130,9 @@ export function useAutoComplete(
users = client.users.toArray(); users = client.users.toArray();
break; break;
case "channel": { case "channel": {
let channel = client.channels.get(searchClues.users.id); const channel = client.channels.get(
searchClues.users.id,
);
switch (channel?.channel_type) { switch (channel?.channel_type) {
case "Group": case "Group":
case "DirectMessage": case "DirectMessage":
@ -162,7 +164,7 @@ export function useAutoComplete(
users = users.filter((x) => x._id !== SYSTEM_USER_ID); users = users.filter((x) => x._id !== SYSTEM_USER_ID);
let matches = ( const matches = (
search.length > 0 search.length > 0
? users.filter((user) => ? users.filter((user) =>
user.username.toLowerCase().match(regex), user.username.toLowerCase().match(regex),
@ -173,7 +175,7 @@ export function useAutoComplete(
.filter((x) => typeof x !== "undefined"); .filter((x) => typeof x !== "undefined");
if (matches.length > 0) { if (matches.length > 0) {
let currentPosition = const currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
@ -188,14 +190,14 @@ export function useAutoComplete(
} }
if (type === "channel" && searchClues?.channels) { if (type === "channel" && searchClues?.channels) {
let channels = client.servers const channels = client.servers
.get(searchClues.channels.server) .get(searchClues.channels.server)
?.channels.map((x) => client.channels.get(x)) ?.channels.map((x) => client.channels.get(x))
.filter( .filter(
(x) => typeof x !== "undefined", (x) => typeof x !== "undefined",
) as Channels.TextChannel[]; ) as Channels.TextChannel[];
let matches = ( const matches = (
search.length > 0 search.length > 0
? channels.filter((channel) => ? channels.filter((channel) =>
channel.name.toLowerCase().match(regex), channel.name.toLowerCase().match(regex),
@ -206,7 +208,7 @@ export function useAutoComplete(
.filter((x) => typeof x !== "undefined"); .filter((x) => typeof x !== "undefined");
if (matches.length > 0) { if (matches.length > 0) {
let currentPosition = const currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
@ -228,11 +230,11 @@ export function useAutoComplete(
function selectCurrent(el: HTMLTextAreaElement) { function selectCurrent(el: HTMLTextAreaElement) {
if (state.type !== "none") { if (state.type !== "none") {
let result = findSearchString(el); const result = findSearchString(el);
if (result) { if (result) {
let [_type, search, index] = result; const [_type, search, index] = result;
let content = el.value.split(""); const content = el.value.split("");
if (state.type === "emoji") { if (state.type === "emoji") {
content.splice( content.splice(
index, index,

3
src/components/common/ChannelIcon.tsx
View file

@ -45,9 +45,8 @@ export default function ChannelIcon(
if (isServerChannel) { if (isServerChannel) {
if (target?.channel_type === "VoiceChannel") { if (target?.channel_type === "VoiceChannel") {
return <VolumeFull size={size} />; return <VolumeFull size={size} />;
} else {
return <Hash size={size} />;
} }
return <Hash size={size} />;
} }
} }

4
src/components/common/Emoji.tsx
View file

@ -1,6 +1,6 @@
import { EmojiPacks } from "../../redux/reducers/settings"; import { EmojiPacks } from "../../redux/reducers/settings";
var EMOJI_PACK = "mutant"; let EMOJI_PACK = "mutant";
const REVISION = 3; const REVISION = 3;
export function setEmojiPack(pack: EmojiPacks) { export function setEmojiPack(pack: EmojiPacks) {
@ -41,7 +41,7 @@ function toCodePoint(rune: string) {
} }
function parseEmoji(emoji: string) { function parseEmoji(emoji: string) {
let codepoint = toCodePoint(emoji); const codepoint = toCodePoint(emoji);
return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`; return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
} }

2
src/components/common/UpdateIndicator.tsx
View file

@ -10,7 +10,7 @@ import IconButton from "../ui/IconButton";
import { updateSW } from "../../main"; import { updateSW } from "../../main";
var pendingUpdate = false; let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true)); internalSubscribe("PWA", "update", () => (pendingUpdate = true));
export default function UpdateIndicator() { export default function UpdateIndicator() {

7
src/components/common/messaging/MessageBase.tsx
View file

@ -219,7 +219,7 @@ export function MessageDetail({
</span> </span>
</> </>
); );
} else { }
return ( return (
<> <>
<time> <time>
@ -232,14 +232,15 @@ export function MessageDetail({
</> </>
); );
} }
}
return ( return (
<DetailBase> <DetailBase>
<time>{dayjs(decodeTime(message._id)).calendar()}</time> <time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && ( {message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}> <Tooltip content={dayjs(message.edited).format("LLLL")}>
<span className="edited"><Text id="app.main.channel.edited" /></span> <span className="edited">
<Text id="app.main.channel.edited" />
</span>
</Tooltip> </Tooltip>
)} )}
</DetailBase> </DetailBase>

7
src/components/common/messaging/MessageBox.tsx
View file

@ -232,7 +232,7 @@ export default function MessageBox({ channel }: Props) {
async function sendFile(content: string) { async function sendFile(content: string) {
if (uploadState.type !== "attached") return; if (uploadState.type !== "attached") return;
let attachments: string[] = []; const attachments: string[] = [];
const cancel = Axios.CancelToken.source(); const cancel = Axios.CancelToken.source();
const files = uploadState.files; const files = uploadState.files;
@ -502,8 +502,9 @@ export default function MessageBox({ channel }: Props) {
<HappyAlt size={20} /> <HappyAlt size={20} />
</IconButton>*/} </IconButton>*/}
<IconButton <IconButton
className="mobile" onClick={send} className="mobile"
onMouseDown={e => e.preventDefault()}> onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} /> <Send size={20} />
</IconButton> </IconButton>
</Action> </Action>

15
src/components/common/messaging/SystemMessage.tsx
View file

@ -39,11 +39,16 @@ interface Props {
hideInfo?: boolean; hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) { export function SystemMessage({
attachContext,
message,
highlight,
hideInfo,
}: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
let data: SystemMessageParsed; let data: SystemMessageParsed;
let content = message.content; const content = message.content;
if (typeof content === "object") { if (typeof content === "object") {
switch (content.type) { switch (content.type) {
case "text": case "text":
@ -154,9 +159,11 @@ export function SystemMessage({ attachContext, message, highlight, hideInfo }: P
}) })
: undefined : undefined
}> }>
{ !hideInfo && <MessageInfo> {!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" /> <MessageDetail message={message} position="left" />
</MessageInfo> } </MessageInfo>
)}
<SystemContent>{children}</SystemContent> <SystemContent>{children}</SystemContent>
</MessageBase> </MessageBase>
); );

41
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -8,9 +8,9 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions"; import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile";
import { SizedGrid } from "./Grid"; import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler"; import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props { interface Props {
attachment: AttachmentRJS; attachment: AttachmentRJS;
@ -34,9 +34,16 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) { switch (metadata.type) {
case "Image": { case "Image": {
return ( return (
<SizedGrid width={metadata.width} height={metadata.height} <SizedGrid
className={classNames({ [styles.margin]: hasContent, spoiler })}> width={metadata.width}
<img src={url} alt={filename} height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
className={styles.image} className={styles.image}
loading="lazy" loading="lazy"
onClick={() => onClick={() =>
@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
} }
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} /> }
{ spoiler && <Spoiler set={setSpoiler} /> } />
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid> </SizedGrid>
) );
} }
case "Video": { case "Video": {
return ( return (
<div className={classNames(styles.container, { [styles.margin]: hasContent })} <div
style={{ '--width': metadata.width + 'px' }}> className={classNames(styles.container, {
[styles.margin]: hasContent,
})}
style={{ "--width": `${metadata.width}px` }}>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
<SizedGrid width={metadata.width} height={metadata.height} <SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({ spoiler })}> className={classNames({ spoiler })}>
<video src={url} alt={filename} <video
src={url}
alt={filename}
controls controls
loading="lazy" loading="lazy"
width={metadata.width} width={metadata.width}
@ -66,10 +81,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
/> />
{ spoiler && <Spoiler set={setSpoiler} /> } {spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid> </SizedGrid>
</div> </div>
) );
} }
case "Audio": { case "Audio": {

22
src/components/common/messaging/attachments/AttachmentActions.tsx
View file

@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
<div className={classNames(styles.actions, styles.imageAction)}> <div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize}) {`${metadata.width}x${metadata.height}`} ({filesize})
</span> </span>
<a <a
href={open_url} href={open_url}
target="_blank" target="_blank"
className={styles.iconType}> className={styles.iconType}
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
<Video size={24} className={styles.iconType} /> <Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize}) {`${metadata.width}x${metadata.height}`} ({filesize})
</span> </span>
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
<a <a
href={open_url} href={open_url}
target="_blank" target="_blank"
className={styles.externalType}> className={styles.externalType}
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>

31
src/components/common/messaging/attachments/Grid.tsx
View file

@ -1,4 +1,5 @@
import styled from "styled-components"; import styled from "styled-components";
import { Children } from "../../../../types/Preact"; import { Children } from "../../../../types/Preact";
const Grid = styled.div` const Grid = styled.div`
@ -9,7 +10,8 @@ const Grid = styled.div`
max-height: min(var(--attachment-max-height), var(--height)); max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
img, video { img,
video {
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
@ -23,7 +25,8 @@ const Grid = styled.div`
} }
&.spoiler { &.spoiler {
img, video { img,
video {
filter: blur(44px); filter: blur(44px);
} }
@ -33,25 +36,29 @@ const Grid = styled.div`
export default Grid; export default Grid;
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'style'> & { type Props = Omit<
style?: JSX.CSSProperties, JSX.HTMLAttributes<HTMLDivElement>,
children?: Children, "children" | "as" | "style"
width: number, > & {
height: number, style?: JSX.CSSProperties;
children?: Children;
width: number;
height: number;
}; };
export function SizedGrid(props: Props) { export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props; const { width, height, children, style, ...divProps } = props;
return ( return (
<Grid {...divProps} <Grid
{...divProps}
style={{ style={{
...style, ...style,
"--width": width + 'px', "--width": `${width}px`,
"--height": height + 'px', "--height": `${height}px`,
"--aspect-ratio": width / height, "--aspect-ratio": width / height,
}}> }}>
{ children } {children}
</Grid> </Grid>
) );
} }

62
src/components/common/messaging/attachments/MessageReply.tsx
View file

@ -1,21 +1,21 @@
import { Reply } from "@styled-icons/boxicons-regular"; import { Reply } from "@styled-icons/boxicons-regular";
import { File } from "@styled-icons/boxicons-solid"; import { File } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import { SYSTEM_USER_ID } from "revolt.js"; import { SYSTEM_USER_ID } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks"; import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage"; import { SystemMessage } from "../SystemMessage";
import { Users } from "revolt.js/dist/api/objects";
import { useHistory } from "react-router-dom";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
interface Props { interface Props {
channel: string; channel: string;
@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
transition: filter 1s ease-in-out; transition: filter 1s ease-in-out;
transition: transform ease-in-out .1s; transition: transform ease-in-out 0.1s;
filter: brightness(1); filter: brightness(1);
&:hover { &:hover {
@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) {
const view = useRenderState(channel); const view = useRenderState(channel);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const [ message, setMessage ] = useState<MessageObject | undefined>(undefined); const [message, setMessage] = useState<MessageObject | undefined>(
undefined,
);
useLayoutEffect(() => { useLayoutEffect(() => {
// ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable. // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
const m = view.messages.find((x) => x._id === id); const m = view.messages.find((x) => x._id === id);
@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) {
if (m) { if (m) {
setMessage(m); setMessage(m);
} else { } else {
ctx.client.channels.fetchMessage(channel, id) ctx.client.channels
.then(m => setMessage(mapMessage(m))); .fetchMessage(channel, id)
.then((m) => setMessage(mapMessage(m)));
} }
}, [ view.messages ]); }, [view.messages]);
if (!message) { if (!message) {
return ( return (
@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) {
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} /> <Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ? {user?.relationship === Users.Relationship.Blocked ? (
<>Blocked User</> : <>Blocked User</>
) : (
<> <>
{message.author === SYSTEM_USER_ID ? ( {message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo /> <SystemMessage message={message} hideInfo />
) : <> ) : (
<div className="user"><UserShort user={user} size={16} /></div> <>
<div className="content" onClick={() => { <div className="user">
let obj = ctx.client.channels.get(channel); <UserShort user={user} size={16} />
if (obj?.channel_type === 'TextChannel') { </div>
history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`); <div
className="content"
onClick={() => {
const obj =
ctx.client.channels.get(channel);
if (obj?.channel_type === "TextChannel") {
history.push(
`/server/${obj.server}/channel/${obj._id}/${message._id}`,
);
} else { } else {
history.push(`/channel/${channel}/${message._id}`); history.push(
`/channel/${channel}/${message._id}`,
);
} }
}}> }}>
{message.attachments && message.attachments.length > 0 && ( {message.attachments &&
message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")} content={(
message.content as string
).replace(/\n/g, " ")}
/> />
</div> </div>
</>}
</> </>
} )}
</>
)}
</ReplyBase> </ReplyBase>
); );
} }

11
src/components/common/messaging/attachments/Spoiler.tsx
View file

@ -1,5 +1,6 @@
import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styled from "styled-components"
const Base = styled.div` const Base = styled.div`
display: grid; display: grid;
@ -21,13 +22,15 @@ const Base = styled.div`
`; `;
interface Props { interface Props {
set: (v: boolean) => void set: (v: boolean) => void;
} }
export default function Spoiler({ set }: Props) { export default function Spoiler({ set }: Props) {
return ( return (
<Base onClick={() => set(false)}> <Base onClick={() => set(false)}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span> <span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</Base> </Base>
) );
} }

2
src/components/common/messaging/attachments/TextFile.tsx
View file

@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(true); setLoading(true);
let cached = fileCache[attachment._id]; const cached = fileCache[attachment._id];
if (cached) { if (cached) {
setContent(cached); setContent(cached);
setLoading(false); setLoading(false);

2
src/components/common/messaging/bars/FilePreview.tsx
View file

@ -160,7 +160,7 @@ function FileEntry({
const [url, setURL] = useState(""); const [url, setURL] = useState("");
useEffect(() => { useEffect(() => {
let url: string = URL.createObjectURL(file); const url: string = URL.createObjectURL(file);
setURL(url); setURL(url);
return () => URL.revokeObjectURL(url); return () => URL.revokeObjectURL(url);
}, [file]); }, [file]);

4
src/components/common/messaging/bars/ReplyBar.tsx
View file

@ -78,7 +78,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
return ( return (
<div> <div>
{replies.map((reply, index) => { {replies.map((reply, index) => {
let message = messages.find((x) => reply.id === x._id); const message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to // ! FIXME: better solution would be to
// ! have a hook for resolving messages from // ! have a hook for resolving messages from
// ! render state along with relevant users // ! render state along with relevant users
@ -90,7 +90,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
</span> </span>
); );
let user = users.find((x) => message!.author === x?._id); const user = users.find((x) => message!.author === x?._id);
if (!user) return; if (!user) return;
return ( return (

17
src/components/common/messaging/embed/Embed.tsx
View file

@ -22,7 +22,7 @@ export default function Embed({ embed }: Props) {
// ! FIXME: temp code // ! FIXME: temp code
// ! add proxy function to client // ! add proxy function to client
function proxyImage(url: string) { function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
} }
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
@ -35,14 +35,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 +51,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 +80,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)}
@ -115,7 +115,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>

4
src/components/common/messaging/embed/EmbedMedia.tsx
View file

@ -14,7 +14,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code // ! FIXME: temp code
// ! add proxy function to client // ! add proxy function to client
function proxyImage(url: string) { function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
} }
if (embed.type !== "Website") return null; if (embed.type !== "Website") return null;
@ -75,7 +75,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
} }
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}

8
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file

@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
<div className={styles.actions}> <div className={styles.actions}>
<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 href={embed.url} class={styles.openIcon} target="_blank"> <a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>

23
src/components/common/user/UserHover.tsx
View file

@ -1,14 +1,15 @@
import { InfoCircle } from "@styled-icons/boxicons-regular"; import { InfoCircle } from "@styled-icons/boxicons-regular";
import { Children } from "../../../types/Preact";
import { Username } from "./UserShort";
import styled from "styled-components";
import UserStatus from "./UserStatus";
import Tooltip from "../Tooltip";
import { User } from "revolt.js"; import { User } from "revolt.js";
import styled from "styled-components";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";
interface Props { interface Props {
user?: User, user?: User;
children: Children children: Children;
} }
const Base = styled.div` const Base = styled.div`
@ -38,7 +39,9 @@ const Base = styled.div`
export default function UserHover({ user, children }: Props) { export default function UserHover({ user, children }: Props) {
return ( return (
<Tooltip placement="right-end" content={ <Tooltip
placement="right-end"
content={
<Base> <Base>
<Username className="username" user={user} /> <Username className="username" user={user} />
<span className="status"> <span className="status">
@ -47,7 +50,7 @@ export default function UserHover({ user, children }: Props) {
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/} {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base> </Base>
}> }>
{ children } {children}
</Tooltip> </Tooltip>
) );
} }

7
src/components/common/user/UserStatus.tsx
View file

@ -2,6 +2,7 @@ import { User } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
interface Props { interface Props {
@ -14,10 +15,10 @@ export default function UserStatus({ user, tooltip }: Props) {
if (user.status?.text) { if (user.status?.text) {
if (tooltip) { if (tooltip) {
return ( return (
<Tooltip arrow={undefined} content={ user.status.text }> <Tooltip arrow={undefined} content={user.status.text}>
{ user.status.text } {user.status.text}
</Tooltip> </Tooltip>
) );
} }
return <>{user.status.text}</>; return <>{user.status.text}</>;

54
src/components/markdown/Renderer.tsx
View file

@ -35,7 +35,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 +47,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,7 +66,7 @@ export const md: MarkdownIt = MarkdownIt({
.use(MarkdownKatex, { .use(MarkdownKatex, {
throwOnError: false, throwOnError: false,
maxExpand: 0, maxExpand: 0,
maxSize: 10 maxSize: 10,
}); });
// TODO: global.d.ts file for defining globals // TODO: global.d.ts file for defining globals
@ -89,7 +89,7 @@ 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.replace(
RE_MENTIONS, RE_MENTIONS,
(sub: string, ...args: any[]) => { (sub: string, ...args: any[]) => {
const id = args[0], const id = args[0],
@ -109,7 +109,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const toggle = useCallback((ev: MouseEvent) => { const toggle = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) { if (ev.currentTarget) {
let element = ev.currentTarget as HTMLDivElement; const element = ev.currentTarget as HTMLDivElement;
if (element.classList.contains("spoiler")) { if (element.classList.contains("spoiler")) {
element.classList.add("shown"); element.classList.add("shown");
} }
@ -123,7 +123,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const pathname = url.pathname; const pathname = url.pathname;
if (pathname.startsWith("/@")) { if (pathname.startsWith("/@")) {
let id = pathname.substr(2); const id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) { if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault(); ev.preventDefault();
internalEmit("Intermediate", "openProfile", id); internalEmit("Intermediate", "openProfile", id);
@ -137,19 +137,20 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
return ( return (
<span <span
ref={el => { ref={(el) => {
if (el) { if (el) {
(el.querySelectorAll<HTMLDivElement>('.spoiler')) el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
.forEach(element => { (element) => {
element.removeEventListener('click', toggle); element.removeEventListener("click", toggle);
element.addEventListener('click', toggle); element.addEventListener("click", toggle);
}); },
);
(el.querySelectorAll<HTMLAnchorElement>('a')) el.querySelectorAll<HTMLAnchorElement>("a").forEach(
.forEach(element => { (element) => {
element.removeEventListener('click', handleLink); element.removeEventListener("click", handleLink);
element.removeAttribute('data-type'); element.removeAttribute("data-type");
element.removeAttribute('target'); element.removeAttribute("target");
let internal; let internal;
const href = element.href; const href = element.href;
@ -159,19 +160,26 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
if (url.hostname === location.hostname) { if (url.hostname === location.hostname) {
internal = true; internal = true;
element.addEventListener('click', handleLink); element.addEventListener(
"click",
handleLink,
);
if (url.pathname.startsWith('/@')) { if (url.pathname.startsWith("/@")) {
element.setAttribute('data-type', 'mention'); element.setAttribute(
"data-type",
"mention",
);
} }
} }
} catch (err) {} } catch (err) {}
} }
if (!internal) { if (!internal) {
element.setAttribute('target', '_blank'); element.setAttribute("target", "_blank");
} }
}); },
);
} }
}} }}
className={styles.markdown} className={styles.markdown}

3
src/components/navigation/BottomNavigation.tsx
View file

@ -1,5 +1,5 @@
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { Search } from "@styled-icons/boxicons-regular"; import { Search } from "@styled-icons/boxicons-regular";
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
@ -113,7 +113,6 @@ export function BottomNavigation({ lastOpened }: Props) {
</Button> </Button>
</Navbar> </Navbar>
</Base> </Base>
); );
} }

2
src/components/navigation/left/HomeSidebar.tsx
View file

@ -149,7 +149,7 @@ function HomeSidebar(props: Props) {
if (x.channel_type === "DirectMessage") { if (x.channel_type === "DirectMessage") {
if (!x.active) return null; if (!x.active) return null;
let recipient = client.channels.getRecipient(x._id); const recipient = client.channels.getRecipient(x._id);
user = users.find((x) => x?._id === recipient); user = users.find((x) => x?._id === recipient);
if (!user) { if (!user) {

51
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -21,16 +21,16 @@ import {
useServers, useServers,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import logoSVG from "../../../assets/logo.svg";
import ServerIcon from "../../common/ServerIcon"; import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip"; import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover";
import UserIcon from "../../common/user/UserIcon"; import UserIcon from "../../common/user/UserIcon";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider"; import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common"; import { mapChannelWithUnread } from "./common";
import logoSVG from '../../../assets/logo.svg';
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
import UserHover from "../../common/user/UserHover";
function Icon({ function Icon({
children, children,
@ -129,7 +129,7 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
!props.active && !props.active &&
css` css`
display: none; display: none;
` } `}
svg { svg {
width: 57px; width: 57px;
@ -152,13 +152,17 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
function Swoosh() { function Swoosh() {
return ( return (
<span> <span>
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="117" fill="var(--sidebar-active)"> <svg
<path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z"/> xmlns="http://www.w3.org/2000/svg"
<path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z"/> width="57"
<path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z"/> height="117"
fill="var(--sidebar-active)">
<path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z" />
<path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z" />
<path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z" />
</svg> </svg>
</span> </span>
) );
} }
interface Props { interface Props {
@ -178,8 +182,8 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
const servers = activeServers.map((server) => { const servers = activeServers.map((server) => {
let alertCount = 0; let alertCount = 0;
for (let id of server.channels) { for (const id of server.channels) {
let channel = channels.find((x) => x._id === id); const channel = channels.find((x) => x._id === id);
if (channel?.alertCount) { if (channel?.alertCount) {
alertCount += channel.alertCount; alertCount += channel.alertCount;
} }
@ -206,7 +210,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
let homeUnread: "mention" | "unread" | undefined; let homeUnread: "mention" | "unread" | undefined;
let alertCount = 0; let alertCount = 0;
for (let x of channels) { for (const x of channels) {
if ( if (
((x.channel_type === "DirectMessage" && x.active) || ((x.channel_type === "DirectMessage" && x.active) ||
x.channel_type === "Group") && x.channel_type === "Group") &&
@ -229,10 +233,14 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}> to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<ServerEntry home active={homeActive}> <ServerEntry home active={homeActive}>
<Swoosh /> <Swoosh />
{ isTouchscreenDevice ? {isTouchscreenDevice ? (
<Icon size={42} unread={homeUnread}> <Icon size={42} unread={homeUnread}>
<img style={{ width: 32, height: 32 }} src={logoSVG} /> <img
</Icon> : style={{ width: 32, height: 32 }}
src={logoSVG}
/>
</Icon>
) : (
<div <div
onContextMenu={attachContextMenu("Status")} onContextMenu={attachContextMenu("Status")}
onClick={() => onClick={() =>
@ -240,11 +248,15 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
}> }>
<UserHover user={self}> <UserHover user={self}>
<Icon size={42} unread={homeUnread}> <Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status /> <UserIcon
target={self}
size={32}
status
/>
</Icon> </Icon>
</UserHover> </UserHover>
</div> </div>
} )}
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
<LineDivider /> <LineDivider />
@ -255,10 +267,9 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
return ( return (
<ConditionalLink <ConditionalLink
active={active} active={active}
to={ to={`/server/${entry!._id}${
`/server/${entry!._id}` + id ? `/channel/${id}` : ""
(id ? `/channel/${id}` : "") }`}>
}>
<ServerEntry <ServerEntry
active={active} active={active}
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {

12
src/components/navigation/left/ServerSidebar.tsx
View file

@ -81,8 +81,8 @@ function ServerSidebar(props: Props) {
}); });
}, [channel_id]); }, [channel_id]);
let uncategorised = new Set(server.channels); const uncategorised = new Set(server.channels);
let elements = []; const elements = [];
function addChannel(id: string) { function addChannel(id: string) {
const entry = channels.find((x) => x._id === id); const entry = channels.find((x) => x._id === id);
@ -106,9 +106,9 @@ function ServerSidebar(props: Props) {
} }
if (server.categories) { if (server.categories) {
for (let category of server.categories) { for (const category of server.categories) {
let channels = []; const channels = [];
for (let id of category.channels) { for (const id of category.channels) {
uncategorised.delete(id); uncategorised.delete(id);
channels.push(addChannel(id)); channels.push(addChannel(id));
} }
@ -124,7 +124,7 @@ function ServerSidebar(props: Props) {
} }
} }
for (let id of Array.from(uncategorised).reverse()) { for (const id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id)); elements.unshift(addChannel(id));
} }

2
src/components/navigation/right/ChannelDebugInfo.tsx
View file

@ -6,7 +6,7 @@ interface Props {
export function ChannelDebugInfo({ id }: Props) { export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null; if (process.env.NODE_ENV !== "development") return null;
let view = useRenderState(id); const view = useRenderState(id);
if (!view) return null; if (!view) return null;
return ( return (

96
src/components/navigation/right/MemberSidebar.tsx
View file

@ -1,12 +1,14 @@
import { useParams } from "react-router"; import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { User } from "revolt.js"; import { User } from "revolt.js";
import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects"; import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"; import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { Link } from "react-router-dom";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { import {
AppContext, AppContext,
@ -22,14 +24,13 @@ import {
import CollapsibleSection from "../../common/CollapsibleSection"; import CollapsibleSection from "../../common/CollapsibleSection";
import Category from "../../ui/Category"; import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader"; import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg"; import placeholderSVG from "../items/placeholder.svg";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem"; import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo"; import { ChannelDebugInfo } from "./ChannelDebugInfo";
import InputBox from "../../ui/InputBox";
import { getState } from "../../../redux";
interface Props { interface Props {
ctx: HookContext; ctx: HookContext;
@ -56,7 +57,7 @@ export function GroupMemberSidebar({
}: Props & { channel: Channels.GroupChannel }) { }: Props & { channel: Channels.GroupChannel }) {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx); const users = useUsers(undefined, ctx);
let members = channel.recipients const members = channel.recipients
.map((x) => users.find((y) => y?._id === x)) .map((x) => users.find((y) => y?._id === x))
.filter((x) => typeof x !== "undefined") as User[]; .filter((x) => typeof x !== "undefined") as User[];
@ -77,18 +78,18 @@ export function GroupMemberSidebar({
members.sort((a, b) => { members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // ! FIXME: should probably rewrite all this code
let l = const l =
+( +(
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? (a.online && a.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let r = const r =
+( +(
(b.online && b.status?.presence !== Users.Presence.Invisible) ?? (b.online && b.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let n = r - l; const n = r - l;
if (n !== 0) { if (n !== 0) {
return n; return n;
} }
@ -219,18 +220,18 @@ export function ServerMemberSidebar({
// copy paste from above // copy paste from above
users.sort((a, b) => { users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // ! FIXME: should probably rewrite all this code
let l = const l =
+( +(
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? (a.online && a.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let r = const r =
+( +(
(b.online && b.status?.presence !== Users.Presence.Invisible) ?? (b.online && b.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let n = r - l; const n = r - l;
if (n !== 0) { if (n !== 0) {
return n; return n;
} }
@ -249,13 +250,12 @@ export function ServerMemberSidebar({
//sticky //will re-add later, need to fix css //sticky //will re-add later, need to fix css
id="members" id="members"
defaultValue defaultValue
summary={<span> summary={
<Text id="app.main.categories.members" />{" "} <span>
— {users.length} <Text id="app.main.categories.members" /> —{" "}
{users.length}
</span> </span>
} }>
>
{users.length === 0 && <img src={placeholderSVG} />} {users.length === 0 && <img src={placeholderSVG} />}
{users.map( {users.map(
(user) => (user) =>
@ -281,14 +281,18 @@ export function ServerMemberSidebar({
} }
function Search({ channel }: { channel: string }) { function Search({ channel }: { channel: string }) {
if (!getState().experiments.enabled?.includes('search')) return null; if (!getState().experiments.enabled?.includes("search")) return null;
const client = useContext(AppContext); const client = useContext(AppContext);
const [query,setV] = useState(''); const [query, setV] = useState("");
const [results,setResults] = useState<Message[]>([]); const [results, setResults] = useState<Message[]>([]);
async function search() { async function search() {
let data = await client.channels.searchWithUsers(channel, { query, sort: 'Relevance' }, true); const data = await client.channels.searchWithUsers(
channel,
{ query, sort: "Relevance" },
true,
);
setResults(data.messages); setResults(data.messages);
} }
@ -298,27 +302,47 @@ function Search({ channel }: { channel: string }) {
id="search" id="search"
defaultValue={false} defaultValue={false}
summary={"Search (BETA)"}> summary={"Search (BETA)"}>
<InputBox style={{ width: '100%' }} <InputBox
onKeyDown={e => e.key === 'Enter' && search()} style={{ width: "100%" }}
value={query} onChange={e => setV(e.currentTarget.value)} /> onKeyDown={(e) => e.key === "Enter" && search()}
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '8px' }}> value={query}
{ onChange={(e) => setV(e.currentTarget.value)}
results.map(message => { />
let href = ''; <div
let channel = client.channels.get(message.channel); style={{
if (channel?.channel_type === 'TextChannel') { display: "flex",
flexDirection: "column",
gap: "4px",
marginTop: "8px",
}}>
{results.map((message) => {
let href = "";
const channel = client.channels.get(message.channel);
if (channel?.channel_type === "TextChannel") {
href += `/server/${channel.server}`; href += `/server/${channel.server}`;
} }
href += `/channel/${message.channel}/${message._id}`; href += `/channel/${message.channel}/${message._id}`;
return <Link to={href}><div style={{ margin: '2px', padding: '6px', background: 'var(--primary-background)' }}> return (
<b>@{ client.users.get(message.author)?.username }</b><br/> <Link to={href}>
{ message.content } <div
</div></Link> style={{
}) margin: "2px",
} padding: "6px",
background: "var(--primary-background)",
}}>
<b>
@
{client.users.get(message.author)?.username}
</b>
<br />
{message.content}
</div>
</Link>
);
})}
</div> </div>
</CollapsibleSection> </CollapsibleSection>
) );
} }

2
src/components/ui/Category.tsx
View file

@ -44,7 +44,7 @@ type Props = Omit<
}; };
export default function Category(props: Props) { export default function Category(props: Props) {
let { text, action, ...otherProps } = props; const { text, action, ...otherProps } = props;
return ( return (
<CategoryBase {...otherProps}> <CategoryBase {...otherProps}>

12
src/components/ui/ColourSwatches.tsx
View file

@ -55,7 +55,11 @@ const SwatchesBase = styled.div`
div { div {
width: 8px; width: 8px;
height: 68px; height: 68px;
background: linear-gradient(to right, var(--primary-background), transparent); background: linear-gradient(
to right,
var(--primary-background),
transparent
);
} }
} }
`; `;
@ -127,7 +131,9 @@ export default function ColourSwatches({ value, onChange }: Props) {
<Palette size={32} /> <Palette size={32} />
</Swatch> </Swatch>
<div class="overlay"><div /></div> <div class="overlay">
<div />
</div>
<Rows> <Rows>
{presets.map((row, i) => ( {presets.map((row, i) => (
@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
</div> </div>
))} ))}
</Rows> </Rows>
</SwatchesBase> </SwatchesBase>
); );
} }

4
src/components/ui/DateDivider.tsx
View file

@ -12,8 +12,8 @@ const Base = styled.div<{ unread?: boolean }>`
time { time {
margin-top: -2px; margin-top: -2px;
font-size: .6875rem; font-size: 0.6875rem;
line-height: .6875rem; line-height: 0.6875rem;
padding: 2px 0 2px 0; padding: 2px 0 2px 0;
padding-inline-end: 5px; padding-inline-end: 5px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);

12
src/components/ui/Modal.tsx
View file

@ -2,9 +2,10 @@ import styled, { css, keyframes } from "styled-components";
import { createPortal, useEffect, useState } from "preact/compat"; import { createPortal, useEffect, useState } from "preact/compat";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import Button, { ButtonProps } from "./Button"; import Button, { ButtonProps } from "./Button";
import { internalSubscribe } from "../../lib/eventEmitter";
const open = keyframes` const open = keyframes`
0% {opacity: 0;} 0% {opacity: 0;}
@ -145,7 +146,7 @@ export let isModalClosing = false;
export default function Modal(props: Props) { export default function Modal(props: Props) {
if (!props.visible) return null; if (!props.visible) return null;
let content = ( const content = (
<ModalContent <ModalContent
attachment={!!props.actions} attachment={!!props.actions}
noBackground={props.noBackground} noBackground={props.noBackground}
@ -167,7 +168,7 @@ export default function Modal(props: Props) {
setTimeout(() => props.onClose(), 2e2); setTimeout(() => props.onClose(), 2e2);
} }
useEffect(() => internalSubscribe('Modal', 'close', onClose), []); useEffect(() => internalSubscribe("Modal", "close", onClose), []);
useEffect(() => { useEffect(() => {
if (props.disallowClosing) return; if (props.disallowClosing) return;
@ -182,7 +183,7 @@ export default function Modal(props: Props) {
return () => document.body.removeEventListener("keydown", keyDown); return () => document.body.removeEventListener("keydown", keyDown);
}, [props.disallowClosing, props.onClose]); }, [props.disallowClosing, props.onClose]);
let confirmationAction = props.actions?.find( const confirmationAction = props.actions?.find(
(action) => action.confirmation, (action) => action.confirmation,
); );
@ -203,7 +204,8 @@ export default function Modal(props: Props) {
}, [confirmationAction]); }, [confirmationAction]);
return createPortal( return createPortal(
<ModalBase className={animateClose ? 'closing' : undefined} <ModalBase
className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}> onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}> <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content} {content}

3
src/context/Theme.tsx
View file

@ -335,8 +335,7 @@ function Theme({ children, options }: Props) {
return ( return (
<ThemeContext.Provider value={theme}> <ThemeContext.Provider value={theme}>
<Helmet> <Helmet>
<meta name="theme-color" content={theme["background"]} <meta name="theme-color" content={theme["background"]} />
/>
</Helmet> </Helmet>
<GlobalTheme theme={theme} /> <GlobalTheme theme={theme} />
{theme.css && ( {theme.css && (

9
src/context/intermediate/Modals.tsx
View file

@ -1,5 +1,7 @@
import { isModalClosing } from "../../components/ui/Modal";
import { internalEmit } from "../../lib/eventEmitter"; import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate"; import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard"; import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error"; import { ErrorModal } from "./modals/Error";
@ -14,7 +16,10 @@ export interface Props {
} }
export default function Modals({ screen, openScreen }: Props) { export default function Modals({ screen, openScreen }: Props) {
const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close'); const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) { switch (screen.id) {
case "_prompt": case "_prompt":

9
src/context/intermediate/Popovers.tsx
View file

@ -1,7 +1,9 @@
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { isModalClosing } from "../../components/ui/Modal";
import { internalEmit } from "../../lib/eventEmitter"; import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { IntermediateContext, useIntermediate } from "./Intermediate"; import { IntermediateContext, useIntermediate } from "./Intermediate";
import { SpecialInputModal } from "./modals/Input"; import { SpecialInputModal } from "./modals/Input";
import { SpecialPromptModal } from "./modals/Prompt"; import { SpecialPromptModal } from "./modals/Prompt";
@ -16,7 +18,10 @@ export default function Popovers() {
const { screen } = useContext(IntermediateContext); const { screen } = useContext(IntermediateContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close'); const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) { switch (screen.id) {
case "profile": case "profile":

2
src/context/intermediate/modals/Prompt.tsx
View file

@ -92,7 +92,7 @@ export function SpecialPromptModal(props: SpecialProps) {
block_user: ["block_user", "block"], block_user: ["block_user", "block"],
}; };
let event = EVENTS[props.type]; const event = EVENTS[props.type];
let name; let name;
switch (props.type) { switch (props.type) {
case "unfriend_user": case "unfriend_user":

2
src/context/intermediate/popovers/ImageViewer.tsx
View file

@ -25,7 +25,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
// ! FIXME: temp code // ! FIXME: temp code
// ! add proxy function to client // ! add proxy function to client
function proxyImage(url: string) { function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
} }
if (attachment && attachment.metadata.type !== "Image") { if (attachment && attachment.metadata.type !== "Image") {

12
src/context/revoltjs/FileUploads.tsx
View file

@ -55,7 +55,7 @@ export async function uploadFile(
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);
const res = await Axios.post(autumnURL + "/" + tag, formData, { const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
}, },
@ -78,7 +78,7 @@ export function grabFiles(
input.onchange = async (e) => { input.onchange = async (e) => {
const files = (e.currentTarget as HTMLInputElement)?.files; const files = (e.currentTarget as HTMLInputElement)?.files;
if (!files) return; if (!files) return;
for (let file of files) { for (const file of files) {
if (file.size > maxFileSize) { if (file.size > maxFileSize) {
return tooLarge(); return tooLarge();
} }
@ -139,14 +139,12 @@ export function FileUploader(props: Props) {
} else { } else {
onClick(); onClick();
} }
} else { } else if (props.previewURL) {
if (props.previewURL) {
props.remove(); props.remove();
} else { } else {
onClick(); onClick();
} }
} }
}
if (props.behaviour === "multi" && props.append) { if (props.behaviour === "multi" && props.append) {
useEffect(() => { useEffect(() => {
@ -156,7 +154,7 @@ export function FileUploader(props: Props) {
if (typeof items === "undefined") return; if (typeof items === "undefined") return;
if (props.behaviour !== "multi" || !props.append) return; if (props.behaviour !== "multi" || !props.append) return;
let files = []; const files = [];
for (const item of items) { for (const item of items) {
if (!item.type.startsWith("text/")) { if (!item.type.startsWith("text/")) {
const blob = item.getAsFile(); const blob = item.getAsFile();
@ -190,7 +188,7 @@ export function FileUploader(props: Props) {
const dropped = e.dataTransfer?.files; const dropped = e.dataTransfer?.files;
if (dropped) { if (dropped) {
let files = []; const files = [];
for (const item of dropped) { for (const item of dropped) {
if (item.size > props.maxFileSize) { if (item.size > props.maxFileSize) {
openScreen({ id: "error", error: "FileTooLarge" }); openScreen({ id: "error", error: "FileTooLarge" });

12
src/context/revoltjs/Notifications.tsx
View file

@ -32,7 +32,7 @@ async function createNotification(
try { try {
return new Notification(title, options); return new Notification(title, options);
} catch (err) { } catch (err) {
let sw = await navigator.serviceWorker.getRegistration(); const sw = await navigator.serviceWorker.getRegistration();
sw?.showNotification(title, options); sw?.showNotification(title, options);
} }
} }
@ -90,7 +90,7 @@ function Notifier({ options, notifs }: Props) {
let image; let image;
if (msg.attachments) { if (msg.attachments) {
let imageAttachment = msg.attachments.find( const imageAttachment = msg.attachments.find(
(x) => x.metadata.type === "Image", (x) => x.metadata.type === "Image",
); );
if (imageAttachment) { if (imageAttachment) {
@ -105,7 +105,7 @@ function Notifier({ options, notifs }: Props) {
body = client.markdownToText(msg.content); body = client.markdownToText(msg.content);
icon = client.users.getAvatarURL(msg.author, { max_side: 256 }); icon = client.users.getAvatarURL(msg.author, { max_side: 256 });
} else { } else {
let users = client.users; const users = client.users;
switch (msg.content.type) { switch (msg.content.type) {
case "user_added": case "user_added":
case "user_remove": case "user_remove":
@ -161,7 +161,7 @@ function Notifier({ options, notifs }: Props) {
} }
} }
let notif = await createNotification(title, { const notif = await createNotification(title, {
icon, icon,
image, image,
body, body,
@ -176,7 +176,7 @@ function Notifier({ options, notifs }: Props) {
window.focus(); window.focus();
const id = msg.channel; const id = msg.channel;
if (id !== channel_id) { if (id !== channel_id) {
let channel = client.channels.get(id); const channel = client.channels.get(id);
if (channel) { if (channel) {
if (channel.channel_type === "TextChannel") { if (channel.channel_type === "TextChannel") {
history.push( history.push(
@ -218,7 +218,7 @@ function Notifier({ options, notifs }: Props) {
return; return;
} }
let notif = await createNotification(event, { const notif = await createNotification(event, {
icon: client.users.getAvatarURL(user._id, { max_side: 256 }), icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
badge: "/assets/icons/android-chrome-512x512.png", badge: "/assets/icons/android-chrome-512x512.png",
timestamp: +new Date(), timestamp: +new Date(),

4
src/context/revoltjs/RevoltClient.tsx
View file

@ -66,7 +66,7 @@ function Context({ auth, children }: Props) {
// Match sw.ts#L23 // Match sw.ts#L23
db = await openDB("state", 3, { db = await openDB("state", 3, {
upgrade(db) { upgrade(db) {
for (let store of [ for (const store of [
"channels", "channels",
"servers", "servers",
"users", "users",
@ -150,7 +150,7 @@ function Context({ auth, children }: Props) {
ready: () => ready: () =>
operations.loggedIn() && typeof client.user !== "undefined", operations.loggedIn() && typeof client.user !== "undefined",
openDM: async (user_id: string) => { openDM: async (user_id: string) => {
let channel = await client.users.openDM(user_id); const channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`); history.push(`/channel/${channel!._id}`);
return channel!._id; return channel!._id;
}, },

8
src/context/revoltjs/StateMonitor.tsx
View file

@ -44,10 +44,10 @@ function StateMonitor(props: Props) {
useEffect(() => { useEffect(() => {
function removeOld() { function removeOld() {
if (!props.typing) return; if (!props.typing) return;
for (let channel of Object.keys(props.typing)) { for (const channel of Object.keys(props.typing)) {
let users = props.typing[channel]; const users = props.typing[channel];
for (let user of users) { for (const user of users) {
if (+new Date() > user.started + 5000) { if (+new Date() > user.started + 5000) {
dispatch({ dispatch({
type: "TYPING_STOP", type: "TYPING_STOP",
@ -61,7 +61,7 @@ function StateMonitor(props: Props) {
removeOld(); removeOld();
let interval = setInterval(removeOld, 1000); const interval = setInterval(removeOld, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [props.typing]); }, [props.typing]);

16
src/context/revoltjs/SyncManager.tsx
View file

@ -28,15 +28,15 @@ type Props = {
notifications: Notifications; notifications: Notifications;
}; };
var lastValues: { [key in SyncKeys]?: any } = {}; const lastValues: { [key in SyncKeys]?: any } = {};
export function mapSync( export function mapSync(
packet: Sync.UserSettings, packet: Sync.UserSettings,
revision?: Record<string, number>, revision?: Record<string, number>,
) { ) {
let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {}; const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
for (let key of Object.keys(packet)) { for (const key of Object.keys(packet)) {
let [timestamp, obj] = packet[key]; const [timestamp, obj] = packet[key];
if (timestamp < (revision ?? {})[key] ?? 0) { if (timestamp < (revision ?? {})[key] ?? 0) {
continue; continue;
} }
@ -81,7 +81,7 @@ function SyncManager(props: Props) {
}, [status]); }, [status]);
function syncChange(key: SyncKeys, data: any) { function syncChange(key: SyncKeys, data: any) {
let timestamp = +new Date(); const timestamp = +new Date();
dispatch({ dispatch({
type: "SYNC_SET_REVISION", type: "SYNC_SET_REVISION",
key, key,
@ -96,8 +96,8 @@ function SyncManager(props: Props) {
); );
} }
let disabled = props.sync.disabled ?? []; const disabled = props.sync.disabled ?? [];
for (let [key, object] of [ for (const [key, object] of [
["appearance", props.settings.appearance], ["appearance", props.settings.appearance],
["theme", props.settings.theme], ["theme", props.settings.theme],
["locale", props.locale], ["locale", props.locale],
@ -119,7 +119,7 @@ function SyncManager(props: Props) {
useEffect(() => { useEffect(() => {
function onPacket(packet: ClientboundNotification) { function onPacket(packet: ClientboundNotification) {
if (packet.type === "UserSettingsUpdate") { if (packet.type === "UserSettingsUpdate") {
let update: { [key in SyncKeys]?: [number, SyncData[key]] } = const update: { [key in SyncKeys]?: [number, SyncData[key]] } =
mapSync(packet.update, props.sync.revision); mapSync(packet.update, props.sync.revision);
dispatch({ dispatch({

12
src/context/revoltjs/hooks.ts
View file

@ -16,9 +16,9 @@ export function useForceUpdate(context?: HookContext): HookContext {
if (context) return context; if (context) return context;
const H = useState(0); const H = useState(0);
var updateState: (_: number) => void; let updateState: (_: number) => void;
if (Array.isArray(H)) { if (Array.isArray(H)) {
let [, u] = H; const [, u] = H;
updateState = u; updateState = u;
} else { } else {
console.warn("Failed to construct using useState."); console.warn("Failed to construct using useState.");
@ -124,7 +124,7 @@ export function useDMs(context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
function mutation(target: string) { function mutation(target: string) {
let channel = ctx.client.channels.get(target); const channel = ctx.client.channels.get(target);
if (channel) { if (channel) {
if ( if (
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
@ -164,7 +164,7 @@ export function useUserPermission(id: string, context?: HookContext) {
return () => ctx.client.users.removeListener("update", mutation); return () => ctx.client.users.removeListener("update", mutation);
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); const calculator = new PermissionCalculator(ctx.client);
return calculator.forUser(id); return calculator.forUser(id);
} }
@ -206,7 +206,7 @@ export function useChannelPermission(id: string, context?: HookContext) {
}; };
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); const calculator = new PermissionCalculator(ctx.client);
return calculator.forChannel(id); return calculator.forChannel(id);
} }
@ -227,6 +227,6 @@ export function useServerPermission(id: string, context?: HookContext) {
}; };
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); const calculator = new PermissionCalculator(ctx.client);
return calculator.forServer(id); return calculator.forServer(id);
} }

4
src/context/revoltjs/util.tsx
View file

@ -7,7 +7,7 @@ import { Children } from "../../types/Preact";
export function takeError(error: any): string { export function takeError(error: any): string {
const type = error?.response?.data?.type; const type = error?.response?.data?.type;
let id = type; const id = type;
if (!type) { if (!type) {
if (error?.response?.status === 403) { if (error?.response?.status === 403) {
return "Unauthorized"; return "Unauthorized";
@ -31,7 +31,7 @@ export function getChannelName(
return <Text id="app.navigation.tabs.saved" />; return <Text id="app.navigation.tabs.saved" />;
if (channel.channel_type === "DirectMessage") { if (channel.channel_type === "DirectMessage") {
let uid = client.channels.getRecipient(channel._id); const uid = client.channels.getRecipient(channel._id);
return ( return (
<> <>
{prefixType && "@"} {prefixType && "@"}

3
src/lib/ConditionalLink.tsx
View file

@ -10,7 +10,6 @@ export default function ConditionalLink(props: Props) {
if (active) { if (active) {
return <a>{props.children}</a>; return <a>{props.children}</a>;
} else {
return <Link {...linkProps} />;
} }
return <Link {...linkProps} />;
} }

46
src/lib/ContextMenus.tsx
View file

@ -10,7 +10,6 @@ import {
LeftArrowAlt, LeftArrowAlt,
Trash, Trash,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import Tooltip from "../components/common/Tooltip";
import { Cog, UserVoice } from "@styled-icons/boxicons-solid"; import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { import {
@ -61,6 +60,7 @@ import {
} from "../context/revoltjs/hooks"; } from "../context/revoltjs/hooks";
import { takeError } from "../context/revoltjs/util"; import { takeError } from "../context/revoltjs/util";
import Tooltip from "../components/common/Tooltip";
import UserStatus from "../components/common/user/UserStatus"; import UserStatus from "../components/common/user/UserStatus";
import IconButton from "../components/ui/IconButton"; import IconButton from "../components/ui/IconButton";
import LineDivider from "../components/ui/LineDivider"; import LineDivider from "../components/ui/LineDivider";
@ -168,7 +168,7 @@ function ContextMenus(props: Props) {
) )
return; return;
let message = const message =
data.channel.channel_type === "TextChannel" data.channel.channel_type === "TextChannel"
? data.channel.last_message ? data.channel.last_message
: data.channel.last_message._id; : data.channel.last_message._id;
@ -292,8 +292,9 @@ function ContextMenus(props: Props) {
const { filename } = data.attachment; const { filename } = data.attachment;
writeClipboard( writeClipboard(
// ! FIXME: do from r.js // ! FIXME: do from r.js
client.generateFileURL(data.attachment) + `${client.generateFileURL(
`/${encodeURI(filename)}`, data.attachment,
)}/${encodeURI(filename)}`,
); );
} }
break; break;
@ -376,7 +377,7 @@ function ContextMenus(props: Props) {
case "clear_status": case "clear_status":
{ {
let { text, ...status } = client.user?.status ?? {}; const { text, ...status } = client.user?.status ?? {};
await client.users.editUser({ status }); await client.users.editUser({ status });
} }
break; break;
@ -459,7 +460,7 @@ function ContextMenus(props: Props) {
}: ContextMenuData) => { }: ContextMenuData) => {
const forceUpdate = useForceUpdate(); const forceUpdate = useForceUpdate();
const elements: Children[] = []; const elements: Children[] = [];
var lastDivider = false; let lastDivider = false;
function generateAction( function generateAction(
action: Action, action: Action,
@ -487,8 +488,8 @@ function ContextMenus(props: Props) {
} }
if (server_list) { if (server_list) {
let server = useServer(server_list, forceUpdate); const server = useServer(server_list, forceUpdate);
let permissions = useServerPermission( const permissions = useServerPermission(
server_list, server_list,
forceUpdate, forceUpdate,
); );
@ -742,7 +743,7 @@ function ContextMenus(props: Props) {
} }
if (document.activeElement?.tagName === "A") { if (document.activeElement?.tagName === "A") {
let link = const link =
document.activeElement.getAttribute("href"); document.activeElement.getAttribute("href");
if (link) { if (link) {
pushDivider(); pushDivider();
@ -752,7 +753,7 @@ function ContextMenus(props: Props) {
} }
} }
let id = sid ?? cid ?? uid ?? message?._id; const id = sid ?? cid ?? uid ?? message?._id;
if (id) { if (id) {
pushDivider(); pushDivider();
@ -876,14 +877,23 @@ function ContextMenus(props: Props) {
<> <>
<div className="header"> <div className="header">
<div className="main"> <div className="main">
<div className="username" <div
onClick={() => writeClipboard(client.user!.username)}> className="username"
<Tooltip content={<Text id="app.special.copy_username" />}> onClick={() =>
writeClipboard(client.user!.username)
}>
<Tooltip
content={
<Text id="app.special.copy_username" />
}>
@{client.user!.username} @{client.user!.username}
</Tooltip> </Tooltip>
</div> </div>
<div className="status" <div
onClick={() => contextClick({ action: 'set_status' })}> className="status"
onClick={() =>
contextClick({ action: "set_status" })
}>
<UserStatus user={client.user!} /> <UserStatus user={client.user!} />
</div> </div>
</div> </div>
@ -935,9 +945,7 @@ function ContextMenus(props: Props) {
data={{ action: "set_status" }} data={{ action: "set_status" }}
disabled={!isOnline}> disabled={!isOnline}>
<UserVoice size={18} /> <UserVoice size={18} />
<Text <Text id={`app.context_menu.custom_status`} />
id={`app.context_menu.custom_status`}
/>
{client.user!.status?.text && ( {client.user!.status?.text && (
<IconButton> <IconButton>
<MenuItem data={{ action: "clear_status" }}> <MenuItem data={{ action: "clear_status" }}>
@ -959,7 +967,7 @@ function ContextMenus(props: Props) {
channel, channel,
); );
let elements: Children[] = [ const elements: Children[] = [
<MenuItem <MenuItem
data={{ data={{
action: "set_notification_state", action: "set_notification_state",

2
src/lib/PaintCounter.tsx
View file

@ -11,7 +11,7 @@ export default function PaintCounter({
}) { }) {
if (import.meta.env.PROD && !always) return null; if (import.meta.env.PROD && !always) return null;
const [uniqueId] = useState("" + Math.random()); const [uniqueId] = useState(`${Math.random()}`);
const count = counts[uniqueId] ?? 0; const count = counts[uniqueId] ?? 0;
counts[uniqueId] = count + 1; counts[uniqueId] = count + 1;
return ( return (

2
src/lib/TextAreaAutoSize.tsx
View file

@ -74,7 +74,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
useLayoutEffect(() => { useLayoutEffect(() => {
if (ref.current && ghost.current) { if (ref.current && ghost.current) {
ref.current.style.height = ghost.current.clientHeight + "px"; ref.current.style.height = `${ghost.current.clientHeight}px`;
} }
}, [ghost, props.value]); }, [ghost, props.value]);

6
src/lib/eventEmitter.ts
View file

@ -7,12 +7,12 @@ export function internalSubscribe(
event: string, event: string,
fn: (...args: any[]) => void, fn: (...args: any[]) => void,
) { ) {
InternalEvent.addListener(ns + "/" + event, fn); InternalEvent.addListener(`${ns}/${event}`, fn);
return () => InternalEvent.removeListener(ns + "/" + event, fn); return () => InternalEvent.removeListener(`${ns}/${event}`, fn);
} }
export function internalEmit(ns: string, event: string, ...args: any[]) { export function internalEmit(ns: string, event: string, ...args: any[]) {
InternalEvent.emit(ns + "/" + event, ...args); InternalEvent.emit(`${ns}/${event}`, ...args);
} }
// Event structure: namespace/event // Event structure: namespace/event

5
src/lib/i18n.tsx
View file

@ -46,10 +46,9 @@ function recursiveReplaceFields(input: string, fields: Fields) {
} }
return values.flat(); return values.flat();
} else { }
// base case // base case
return [input]; return [input];
}
} }
export function TextReact({ id, fields }: Props) { export function TextReact({ id, fields }: Props) {
@ -57,7 +56,7 @@ export function TextReact({ id, fields }: Props) {
const path = id.split("."); const path = id.split(".");
let entry = intl.dictionary[path.shift()!]; let entry = intl.dictionary[path.shift()!];
for (let key of path) { for (const key of path) {
// @ts-expect-error // @ts-expect-error
entry = entry[key]; entry = entry[key];
} }

2
src/lib/isTouchscreenDevice.ts
View file

@ -1,7 +1,7 @@
import { isDesktop, isMobile, isTablet } from "react-device-detect"; import { isDesktop, isMobile, isTablet } from "react-device-detect";
export const isTouchscreenDevice = export const isTouchscreenDevice =
(isDesktop || isTablet) isDesktop || isTablet
? false ? false
: (typeof window !== "undefined" : (typeof window !== "undefined"
? navigator.maxTouchPoints > 0 ? navigator.maxTouchPoints > 0

25
src/lib/renderer/Singleton.ts
View file

@ -74,10 +74,15 @@ export class SingletonRenderer extends EventEmitter3 {
async init(id: string, message_id?: string) { async init(id: string, message_id?: string) {
if (message_id) { if (message_id) {
if (this.state.type === 'RENDER') { if (this.state.type === "RENDER") {
let message = this.state.messages.find(x => x._id === message_id); const message = this.state.messages.find(
(x) => x._id === message_id,
);
if (message) { if (message) {
this.emit("scroll", { type: "ScrollToView", id: message_id }); this.emit("scroll", {
type: "ScrollToView",
id: message_id,
});
return; return;
} }
} }
@ -103,9 +108,9 @@ export class SingletonRenderer extends EventEmitter3 {
function generateScroll(end: string): ScrollState { function generateScroll(end: string): ScrollState {
if (ref) { if (ref) {
let heightRemoved = 0; let heightRemoved = 0;
let messageContainer = ref.children[0]; const messageContainer = ref.children[0];
if (messageContainer) { if (messageContainer) {
for (let child of Array.from(messageContainer.children)) { for (const child of Array.from(messageContainer.children)) {
// If this child has a ulid. // If this child has a ulid.
if (child.id?.length === 26) { if (child.id?.length === 26) {
// Check whether it was removed. // Check whether it was removed.
@ -127,13 +132,12 @@ export class SingletonRenderer extends EventEmitter3 {
type: "OffsetTop", type: "OffsetTop",
previousHeight: ref.scrollHeight - heightRemoved, previousHeight: ref.scrollHeight - heightRemoved,
}; };
} else { }
return { return {
type: "OffsetTop", type: "OffsetTop",
previousHeight: 0, previousHeight: 0,
}; };
} }
}
await this.currentRenderer.loadTop(this, generateScroll); await this.currentRenderer.loadTop(this, generateScroll);
@ -148,9 +152,9 @@ export class SingletonRenderer extends EventEmitter3 {
function generateScroll(start: string): ScrollState { function generateScroll(start: string): ScrollState {
if (ref) { if (ref) {
let heightRemoved = 0; let heightRemoved = 0;
let messageContainer = ref.children[0]; const messageContainer = ref.children[0];
if (messageContainer) { if (messageContainer) {
for (let child of Array.from(messageContainer.children)) { for (const child of Array.from(messageContainer.children)) {
// If this child has a ulid. // If this child has a ulid.
if (child.id?.length === 26) { if (child.id?.length === 26) {
// Check whether it was removed. // Check whether it was removed.
@ -172,12 +176,11 @@ export class SingletonRenderer extends EventEmitter3 {
type: "ScrollTop", type: "ScrollTop",
y: ref.scrollTop - heightRemoved, y: ref.scrollTop - heightRemoved,
}; };
} else { }
return { return {
type: "ScrollToBottom", type: "ScrollToBottom",
}; };
} }
}
await this.currentRenderer.loadBottom(this, generateScroll); await this.currentRenderer.loadBottom(this, generateScroll);

20
src/lib/renderer/simple/SimpleRenderer.ts
View file

@ -8,10 +8,14 @@ export const SimpleRenderer: RendererRoutines = {
if (renderer.client!.websocket.connected) { if (renderer.client!.websocket.connected) {
if (nearby) if (nearby)
renderer renderer
.client!.channels.fetchMessagesWithUsers(id, { nearby, limit: 100 }, true) .client!.channels.fetchMessagesWithUsers(
id,
{ nearby, limit: 100 },
true,
)
.then(({ messages: data }) => { .then(({ messages: data }) => {
data.sort((a, b) => a._id.localeCompare(b._id)); data.sort((a, b) => a._id.localeCompare(b._id));
let messages = data.map((x) => mapMessage(x)); const messages = data.map((x) => mapMessage(x));
renderer.setState( renderer.setState(
id, id,
{ {
@ -28,7 +32,7 @@ export const SimpleRenderer: RendererRoutines = {
.client!.channels.fetchMessagesWithUsers(id, {}, true) .client!.channels.fetchMessagesWithUsers(id, {}, true)
.then(({ messages: data }) => { .then(({ messages: data }) => {
data.reverse(); data.reverse();
let messages = data.map((x) => mapMessage(x)); const messages = data.map((x) => mapMessage(x));
renderer.setState( renderer.setState(
id, id,
{ {
@ -72,11 +76,11 @@ export const SimpleRenderer: RendererRoutines = {
if (!channel) return; if (!channel) return;
if (renderer.state.type !== "RENDER") return; if (renderer.state.type !== "RENDER") return;
let messages = [...renderer.state.messages]; const messages = [...renderer.state.messages];
let index = messages.findIndex((x) => x._id === id); const index = messages.findIndex((x) => x._id === id);
if (index > -1) { if (index > -1) {
let message = { ...messages[index], ...mapMessage(patch) }; const message = { ...messages[index], ...mapMessage(patch) };
messages.splice(index, 1, message); messages.splice(index, 1, message);
renderer.setState( renderer.setState(
@ -94,8 +98,8 @@ export const SimpleRenderer: RendererRoutines = {
if (!channel) return; if (!channel) return;
if (renderer.state.type !== "RENDER") return; if (renderer.state.type !== "RENDER") return;
let messages = [...renderer.state.messages]; const messages = [...renderer.state.messages];
let index = messages.findIndex((x) => x._id === id); const index = messages.findIndex((x) => x._id === id);
if (index > -1) { if (index > -1) {
messages.splice(index, 1); messages.splice(index, 1);

2
src/lib/renderer/types.ts
View file

@ -8,7 +8,7 @@ export type ScrollState =
| { type: "Free" } | { type: "Free" }
| { type: "Bottom"; scrollingUntil?: number } | { type: "Bottom"; scrollingUntil?: number }
| { type: "ScrollToBottom" | "StayAtBottom"; smooth?: boolean } | { type: "ScrollToBottom" | "StayAtBottom"; smooth?: boolean }
| { type: "ScrollToView", id: string } | { type: "ScrollToView"; id: string }
| { type: "OffsetTop"; previousHeight: number } | { type: "OffsetTop"; previousHeight: number }
| { type: "ScrollTop"; y: number }; | { type: "ScrollTop"; y: number };

6
src/lib/vortex/Signaling.ts
View file

@ -117,10 +117,10 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
this.once("close", onClose); this.once("close", onClose);
const json = { const json = {
id: this.index, id: this.index,
type: type, type,
data, data,
}; };
ws.send(JSON.stringify(json) + "\n"); ws.send(`${JSON.stringify(json)}\n`);
this.index++; this.index++;
}); });
} }
@ -161,7 +161,7 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
type: ProduceType, type: ProduceType,
rtpParameters: RtpParameters, rtpParameters: RtpParameters,
): Promise<string> { ): Promise<string> {
let result = await this.sendRequest(WSCommandType.StartProduce, { const result = await this.sendRequest(WSCommandType.StartProduce, {
type, type,
rtpParameters, rtpParameters,
}); });

6
src/lib/vortex/VoiceClient.ts
View file

@ -172,7 +172,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
if (this.device === undefined || this.roomId === undefined) if (this.device === undefined || this.roomId === undefined)
throw new ReferenceError("Voice Client is in an invalid state"); throw new ReferenceError("Voice Client is in an invalid state");
const result = await this.signaling.authenticate(token, this.roomId); const result = await this.signaling.authenticate(token, this.roomId);
let [room] = await Promise.all([ const [room] = await Promise.all([
this.signaling.roomInfo(), this.signaling.roomInfo(),
this.device.load({ routerRtpCapabilities: result.rtpCapabilities }), this.device.load({ routerRtpCapabilities: result.rtpCapabilities }),
]); ]);
@ -229,7 +229,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
}); });
this.emit("ready"); this.emit("ready");
for (let user of this.participants) { for (const user of this.participants) {
if (user[1].audio && user[0] !== this.userId) if (user[1].audio && user[0] !== this.userId)
this.startConsume(user[0], "audio"); this.startConsume(user[0], "audio");
} }
@ -323,7 +323,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
await this.signaling.stopProduce(type); await this.signaling.stopProduce(type);
} catch (error) { } catch (error) {
if (error.error === WSErrorCode.ProducerNotFound) return; if (error.error === WSErrorCode.ProducerNotFound) return;
else throw error; throw error;
} }
} }
} }

13
src/pages/channels/Channel.tsx
View file

@ -10,10 +10,10 @@ import { dispatch, getState } from "../../redux";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks"; import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import AgeGate from "../../components/common/AgeGate";
import MessageBox from "../../components/common/messaging/MessageBox"; import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom"; import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator"; import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
import AgeGate from "../../components/common/AgeGate";
import MemberSidebar from "../../components/navigation/right/MemberSidebar"; import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader"; import ChannelHeader from "./ChannelHeader";
@ -43,9 +43,8 @@ export function Channel({ id }: { id: string }) {
if (channel.channel_type === "VoiceChannel") { if (channel.channel_type === "VoiceChannel") {
return <VoiceChannel channel={channel} />; return <VoiceChannel channel={channel} />;
} else {
return <TextChannel channel={channel} />;
} }
return <TextChannel channel={channel} />;
} }
const MEMBERS_SIDEBAR_KEY = "sidebar_members"; const MEMBERS_SIDEBAR_KEY = "sidebar_members";
@ -54,14 +53,16 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true, getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
); );
let id = channel._id; const id = channel._id;
return ( return (
<AgeGate <AgeGate
type="channel" type="channel"
channel={channel} channel={channel}
gated={(channel.channel_type === "TextChannel" || gated={
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") && channel.channel_type === "Group") &&
channel.name.includes("nsfw")}> channel.name.includes("nsfw")
}>
<ChannelHeader <ChannelHeader
channel={channel} channel={channel}
toggleSidebar={() => { toggleSidebar={() => {

4
src/pages/channels/ChannelHeader.tsx
View file

@ -93,11 +93,11 @@ export default function ChannelHeader({
return ( return (
<Header placement="primary"> <Header placement="primary">
{isTouchscreenDevice && {isTouchscreenDevice && (
<div className="menu"> <div className="menu">
<Menu size={27} /> <Menu size={27} />
</div> </div>
} )}
{icon} {icon}
<Info> <Info>
<span className="name">{name}</span> <span className="name">{name}</span>

10
src/pages/channels/actions/HeaderActions.tsx
View file

@ -3,7 +3,7 @@ import {
Cog, Cog,
PhoneCall, PhoneCall,
PhoneOutgoing, PhoneOutgoing,
Group Group,
} from "@styled-icons/boxicons-solid"; } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -64,11 +64,11 @@ export default function HeaderActions({
)} )}
<VoiceActions channel={channel} /> <VoiceActions channel={channel} />
{(channel.channel_type === "Group" || {(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && channel.channel_type === "TextChannel") && (
<IconButton onClick={toggleSidebar}> <IconButton onClick={toggleSidebar}>
<Group size={25} /> <Group size={25} />
</IconButton> </IconButton>
} )}
</> </>
); );
} }
@ -90,7 +90,7 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
<PhoneOutgoing size={22} /> <PhoneOutgoing size={22} />
</IconButton> </IconButton>
); );
} else { }
return ( return (
<IconButton <IconButton
onClick={() => { onClick={() => {
@ -101,11 +101,9 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
</IconButton> </IconButton>
); );
} }
} else {
return ( return (
<IconButton> <IconButton>
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" /> <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
</IconButton> </IconButton>
); );
}
} }

22
src/pages/channels/messaging/MessageArea.tsx
View file

@ -1,3 +1,4 @@
import { useHistory, useParams } from "react-router-dom";
import { animateScroll } from "react-scroll"; import { animateScroll } from "react-scroll";
import styled from "styled-components"; import styled from "styled-components";
import useResizeObserver from "use-resize-observer"; import useResizeObserver from "use-resize-observer";
@ -28,7 +29,6 @@ import Preloader from "../../../components/ui/Preloader";
import ConversationStart from "./ConversationStart"; import ConversationStart from "./ConversationStart";
import MessageRenderer from "./MessageRenderer"; import MessageRenderer from "./MessageRenderer";
import { useHistory, useParams } from "react-router-dom";
const Area = styled.div` const Area = styled.div`
height: 100%; height: 100%;
@ -100,8 +100,9 @@ export function MessageArea({ id }: Props) {
duration: scrollState.current.smooth ? 150 : 0, duration: scrollState.current.smooth ? 150 : 0,
}); });
} else if (scrollState.current.type === "ScrollToView") { } else if (scrollState.current.type === "ScrollToView") {
document.getElementById(scrollState.current.id) document
?.scrollIntoView({ block: 'center' }); .getElementById(scrollState.current.id)
?.scrollIntoView({ block: "center" });
setScrollState({ type: "Free" }); setScrollState({ type: "Free" });
} else if (scrollState.current.type === "OffsetTop") { } else if (scrollState.current.type === "OffsetTop") {
@ -147,8 +148,9 @@ export function MessageArea({ id }: Props) {
// ? Handle global jump to bottom, e.g. when editing last message in chat. // ? Handle global jump to bottom, e.g. when editing last message in chat.
useEffect(() => { useEffect(() => {
return internalSubscribe('MessageArea', 'jump_to_bottom', return internalSubscribe("MessageArea", "jump_to_bottom", () =>
() => setScrollState({ type: 'ScrollToBottom' })); setScrollState({ type: "ScrollToBottom" }),
);
}, []); }, []);
// ? Handle events from renderer. // ? Handle events from renderer.
@ -175,8 +177,8 @@ export function MessageArea({ id }: Props) {
setHighlight(message); setHighlight(message);
SingletonMessageRenderer.init(id, message); SingletonMessageRenderer.init(id, message);
let channel = client.channels.get(id); const channel = client.channels.get(id);
if (channel?.channel_type === 'TextChannel') { if (channel?.channel_type === "TextChannel") {
history.push(`/server/${channel.server}/channel/${id}`); history.push(`/server/${channel.server}/channel/${id}`);
} else { } else {
history.push(`/channel/${id}`); history.push(`/channel/${id}`);
@ -287,7 +289,11 @@ export function MessageArea({ id }: Props) {
</RequiresOnline> </RequiresOnline>
)} )}
{state.type === "RENDER" && ( {state.type === "RENDER" && (
<MessageRenderer id={id} state={state} highlight={highlight} /> <MessageRenderer
id={id}
state={state}
highlight={highlight}
/>
)} )}
{state.type === "EMPTY" && <ConversationStart id={id} />} {state.type === "EMPTY" && <ConversationStart id={id} />}
</div> </div>

2
src/pages/channels/messaging/MessageRenderer.tsx
View file

@ -61,7 +61,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
for (let i = state.messages.length - 1; i >= 0; i--) { for (let i = state.messages.length - 1; i >= 0; i--) {
if (state.messages[i].author === userId) { if (state.messages[i].author === userId) {
setEditing(state.messages[i]._id); setEditing(state.messages[i]._id);
internalEmit('MessageArea', 'jump_to_bottom'); internalEmit("MessageArea", "jump_to_bottom");
return; return;
} }
} }

11
src/pages/friends/Friend.tsx
View file

@ -42,10 +42,7 @@ export function Friend({ user }: Props) {
<> <>
<IconButton <IconButton
type="circle" type="circle"
className={classNames( className={classNames(styles.button, styles.success)}
styles.button,
styles.success,
)}
onClick={(ev) => onClick={(ev) =>
stopPropagation(ev, openDM(user._id).then(connect)) stopPropagation(ev, openDM(user._id).then(connect))
}> }>
@ -88,7 +85,11 @@ export function Friend({ user }: Props) {
actions.push( actions.push(
<IconButton <IconButton
type="circle" type="circle"
className={classNames(styles.button, styles.remove, styles.error)} className={classNames(
styles.button,
styles.remove,
styles.error,
)}
onClick={(ev) => onClick={(ev) =>
stopPropagation( stopPropagation(
ev, ev,

15
src/pages/home/Home.tsx
View file

@ -1,11 +1,11 @@
import { Home as HomeIcon } from "@styled-icons/boxicons-solid"; import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
import Button from "../../components/ui/Button";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import styles from "./Home.module.scss"; import styles from "./Home.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import wideSVG from "../../assets/wide.svg"; import wideSVG from "../../assets/wide.svg";
import Button from "../../components/ui/Button";
import Header from "../../components/ui/Header"; import Header from "../../components/ui/Header";
export default function Home() { export default function Home() {
@ -26,14 +26,13 @@ export default function Home() {
</Button> </Button>
</Link> </Link>
<Link to="/settings/feedback"> <Link to="/settings/feedback">
<Button contrast> <Button contrast>Give feedback</Button>
Give feedback
</Button>
</Link> </Link>
<a href="https://gitlab.insrt.uk/revolt" target="_blank"> <a
<Button contrast> href="https://gitlab.insrt.uk/revolt"
Source code target="_blank"
</Button> rel="noreferrer">
<Button contrast>Source code</Button>
</a> </a>
</div> </div>
</div> </div>

16
src/pages/invite/Invite.tsx
View file

@ -106,14 +106,22 @@ export default function Invite() {
setProcessing(true); setProcessing(true);
if (invite.type === "Server") { if (invite.type === "Server") {
if (client.servers.get(invite.server_id)) { if (
history.push(`/server/${invite.server_id}/channel/${invite.channel_id}`); client.servers.get(invite.server_id)
) {
history.push(
`/server/${invite.server_id}/channel/${invite.channel_id}`,
);
} }
} }
let result = await client.joinInvite(code); const result = await client.joinInvite(
code,
);
if (result.type === "Server") { if (result.type === "Server") {
history.push(`/server/${result.server._id}/channel/${result.channel._id}`); history.push(
`/server/${result.server._id}/channel/${result.channel._id}`,
);
} }
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));

15
src/pages/login/forms/Legal.tsx
View file

@ -4,15 +4,24 @@ import { Text } from "preact-i18n";
export function Legal() { export function Legal() {
return ( return (
<span className={styles.footer}> <span className={styles.footer}>
<a href="https://revolt.chat/about" target="_blank"> <a
href="https://revolt.chat/about"
target="_blank"
rel="noreferrer">
<Text id="general.about" /> <Text id="general.about" />
</a> </a>
&middot; &middot;
<a href="https://revolt.chat/terms" target="_blank"> <a
href="https://revolt.chat/terms"
target="_blank"
rel="noreferrer">
<Text id="general.tos" /> <Text id="general.tos" />
</a> </a>
&middot; &middot;
<a href="https://revolt.chat/privacy" target="_blank"> <a
href="https://revolt.chat/privacy"
target="_blank"
rel="noreferrer">
<Text id="general.privacy" /> <Text id="general.privacy" />
</a> </a>
</span> </span>

2
src/pages/login/forms/MailProvider.tsx
View file

@ -43,7 +43,7 @@ export function MailProvider({ email }: Props) {
return ( return (
<div className={styles.mailProvider}> <div className={styles.mailProvider}>
<a href={provider[1]} target="_blank"> <a href={provider[1]} target="_blank" rel="noreferrer">
<Button> <Button>
<Text <Text
id="login.open_mail_provider" id="login.open_mail_provider"

16
src/pages/settings/Settings.tsx
View file

@ -147,13 +147,19 @@ export default function Settings() {
switchPage={switchPage} switchPage={switchPage}
category="pages" category="pages"
custom={[ custom={[
<a href="https://gitlab.insrt.uk/revolt" target="_blank"> <a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<ButtonItem compact> <ButtonItem compact>
<Gitlab size={20} /> <Gitlab size={20} />
<Text id="app.settings.pages.source_code" /> <Text id="app.settings.pages.source_code" />
</ButtonItem> </ButtonItem>
</a>, </a>,
<a href="https://ko-fi.com/insertish" target="_blank"> <a
href="https://ko-fi.com/insertish"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact> <ButtonItem className={styles.donate} compact>
<Coffee size={20} /> <Coffee size={20} />
<Text id="app.settings.pages.donate.title" /> <Text id="app.settings.pages.donate.title" />
@ -172,7 +178,8 @@ export default function Settings() {
<span className={styles.revision}> <span className={styles.revision}>
<a <a
href={`${REPO_URL}/${GIT_REVISION}`} href={`${REPO_URL}/${GIT_REVISION}`}
target="_blank"> target="_blank"
rel="noreferrer">
{GIT_REVISION.substr(0, 7)} {GIT_REVISION.substr(0, 7)}
</a> </a>
{` `} {` `}
@ -182,7 +189,8 @@ export default function Settings() {
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}` ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
: undefined : undefined
} }
target="_blank"> target="_blank"
rel="noreferrer">
({GIT_BRANCH}) ({GIT_BRANCH})
</a> </a>
</span> </span>

5
src/pages/settings/channel/Overview.tsx
View file

@ -1,4 +1,5 @@
import { Channels } from "revolt.js/dist/api/objects"; import { Channels } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
@ -7,7 +8,7 @@ import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads"; import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import styled, { css } from "styled-components";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox"; import InputBox from "../../../components/ui/InputBox";
@ -45,7 +46,7 @@ export default function Overview({ channel }: Props) {
const [changed, setChanged] = useState(false); const [changed, setChanged] = useState(false);
function save() { function save() {
let changes: any = {}; const changes: any = {};
if (name !== channel.name) changes.name = name; if (name !== channel.name) changes.name = name;
if (description !== channel.description) if (description !== channel.description)
changes.description = description; changes.description = description;

8
src/pages/settings/channel/Permissions.tsx
View file

@ -33,11 +33,11 @@ export default function Permissions({ channel }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
type R = { name: string; permissions: number }; type R = { name: string; permissions: number };
let roles: { [key: string]: R } = {}; const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") { if (channel.channel_type !== "Group") {
const server = useServer(channel.server); const server = useServer(channel.server);
const a = server?.roles ?? {}; const a = server?.roles ?? {};
for (let b of Object.keys(a)) { for (const b of Object.keys(a)) {
roles[b] = { roles[b] = {
name: a[b].name, name: a[b].name,
permissions: a[b].permissions[1], permissions: a[b].permissions[1],
@ -73,7 +73,7 @@ export default function Permissions({ channel }: Props) {
<h2>select role</h2> <h2>select role</h2>
{selected} {selected}
{keys.map((id) => { {keys.map((id) => {
let role: R = id === "default" ? defaultRole : roles[id]; const role: R = id === "default" ? defaultRole : roles[id];
return ( return (
<Checkbox <Checkbox
@ -85,7 +85,7 @@ export default function Permissions({ channel }: Props) {
})} })}
<h2>channel per??issions</h2> <h2>channel per??issions</h2>
{Object.keys(ChannelPermission).map((perm) => { {Object.keys(ChannelPermission).map((perm) => {
let value = const value =
ChannelPermission[perm as keyof typeof ChannelPermission]; ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) { if (value & DEFAULT_PERMISSION_DM) {
return ( return (

5
src/pages/settings/panes/Account.tsx
View file

@ -118,7 +118,7 @@ export function Account() {
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "modify_account", id: "modify_account",
field: field, field,
}) })
} }
contrast> contrast>
@ -142,7 +142,8 @@ export function Account() {
Currently work in progress, see{" "} Currently work in progress, see{" "}
<a <a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2" href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
target="_blank"> target="_blank"
rel="noreferrer">
tracking issue here tracking issue here
</a> </a>
. .

56
src/pages/settings/panes/Appearance.tsx
View file

@ -1,4 +1,6 @@
// @ts-ignore // @ts-ignore
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import pSBC from "shade-blend-color"; import pSBC from "shade-blend-color";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
@ -26,6 +28,7 @@ import {
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection"; import CollapsibleSection from "../../../components/common/CollapsibleSection";
import Tooltip from "../../../components/common/Tooltip";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox"; import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches"; import ColourSwatches from "../../../components/ui/ColourSwatches";
@ -37,9 +40,6 @@ import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg"; import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg"; import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg"; import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import Tooltip from "../../../components/common/Tooltip";
interface Props { interface Props {
settings: Settings; settings: Settings;
@ -205,7 +205,8 @@ export function Component(props: Props) {
Mutant Remix{" "} Mutant Remix{" "}
<a <a
href="https://mutant.revolt.chat" href="https://mutant.revolt.chat"
target="_blank"> target="_blank"
rel="noreferrer">
(by Revolt) (by Revolt)
</a> </a>
</h4> </h4>
@ -247,23 +248,37 @@ export function Component(props: Props) {
id="settings_overrides" id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}> summary={<Text id="app.settings.pages.appearance.overrides" />}>
<div className={styles.actions}> <div className={styles.actions}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}> <Tooltip
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}> content={
<Reset size={22}/> <Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button
contrast
iconbutton
onClick={() => setTheme({ custom: {} })}>
<Reset size={22} />
</Button> </Button>
</Tooltip> </Tooltip>
<div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}> <div
<Tooltip content={<Text id="app.special.copy" />}> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */} className={styles.code}
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
{JSON.stringify(theme)} {JSON.stringify(theme)}
</Tooltip> </Tooltip>
</div> </div>
<Tooltip content={<Text id="app.settings.pages.appearance.import" />}> <Tooltip
content={
<Text id="app.settings.pages.appearance.import" />
}>
<Button <Button
contrast contrast
iconbutton iconbutton
onClick={async () => { onClick={async () => {
try { try {
const text = await navigator.clipboard.readText(); const text =
await navigator.clipboard.readText();
setOverride(JSON.parse(text)); setOverride(JSON.parse(text));
} catch (err) { } catch (err) {
openScreen({ openScreen({
@ -279,13 +294,11 @@ export function Component(props: Props) {
}); });
} }
}}> }}>
<Import size={22}/> <Import size={22} />
</Button> </Button>
</Tooltip> </Tooltip>
</div> </div>
<h3> <h3>App</h3>
App
</h3>
<div className={styles.overrides}> <div className={styles.overrides}>
{( {(
[ [
@ -315,7 +328,9 @@ export function Component(props: Props) {
"hover", "hover",
] as const ] as const
).map((x) => ( ).map((x) => (
<div className={styles.entry} key={x} <div
className={styles.entry}
key={x}
style={{ backgroundColor: theme[x] }}> style={{ backgroundColor: theme[x] }}>
<div className={styles.input}> <div className={styles.input}>
<input <input
@ -330,8 +345,13 @@ export function Component(props: Props) {
</div> </div>
<span>{x}</span> <span>{x}</span>
<div className={styles.override}> <div className={styles.override}>
<div className={styles.picker} <div
onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}> className={styles.picker}
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} /> <Pencil size={24} />
</div> </div>
<InputBox <InputBox

4
src/pages/settings/panes/Experiments.tsx
View file

@ -32,8 +32,8 @@ export function Component(props: Props) {
key, key,
}) })
} }
description={ EXPERIMENTS[key].description }> description={EXPERIMENTS[key].description}>
{ EXPERIMENTS[key].title } {EXPERIMENTS[key].title}
</Checkbox> </Checkbox>
))} ))}
{AVAILABLE_EXPERIMENTS.length === 0 && ( {AVAILABLE_EXPERIMENTS.length === 0 && (

3
src/pages/settings/panes/Languages.tsx
View file

@ -76,7 +76,8 @@ export function Component(props: Props) {
</span>{" "} </span>{" "}
<a <a
href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget" href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
target="_blank"> target="_blank"
rel="noreferrer">
<Text id="app.settings.tips.languages.b" /> <Text id="app.settings.tips.languages.b" />
</a> </a>
</Tip> </Tip>

5
src/pages/settings/panes/Notifications.tsx
View file

@ -59,7 +59,8 @@ export function Component({ options }: Props) {
} }
onChange={async (desktopEnabled) => { onChange={async (desktopEnabled) => {
if (desktopEnabled) { if (desktopEnabled) {
let permission = await Notification.requestPermission(); const permission =
await Notification.requestPermission();
if (permission !== "granted") { if (permission !== "granted") {
return openScreen({ return openScreen({
id: "error", id: "error",
@ -126,7 +127,7 @@ export function Component({ options }: Props) {
</h3> </h3>
{SOUNDS_ARRAY.map((key) => ( {SOUNDS_ARRAY.map((key) => (
<Checkbox <Checkbox
checked={enabledSounds[key] ? true : false} checked={!!enabledSounds[key]}
onChange={(enabled) => onChange={(enabled) =>
dispatch({ dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS", type: "SETTINGS_SET_NOTIFICATION_OPTIONS",

52
src/pages/settings/panes/Sessions.tsx
View file

@ -1,12 +1,18 @@
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
import { HelpCircle } from "@styled-icons/boxicons-regular"; import { HelpCircle } from "@styled-icons/boxicons-regular";
import {
Safari,
Firefoxbrowser,
Microsoftedge,
Linux,
Macos,
} from "@styled-icons/simple-icons";
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import styles from "./Panes.module.scss"; import styles from "./Panes.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { Safari, Firefoxbrowser, Microsoftedge, Linux, Macos } from "@styled-icons/simple-icons";
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { dayjs } from "../../../context/Locale"; import { dayjs } from "../../../context/Locale";
@ -95,7 +101,7 @@ export function Sessions() {
}); });
mapped.sort((a, b) => b.timestamp - a.timestamp); mapped.sort((a, b) => b.timestamp - a.timestamp);
let id = mapped.findIndex((x) => x.id === deviceId); const id = mapped.findIndex((x) => x.id === deviceId);
const render = [ const render = [
mapped[id], mapped[id],
@ -114,7 +120,9 @@ export function Sessions() {
<div <div
className={styles.entry} className={styles.entry}
data-active={session.id === deviceId} data-active={session.id === deviceId}
data-deleting={attemptingDelete.indexOf(session.id) > -1}> data-deleting={
attemptingDelete.indexOf(session.id) > -1
}>
{deviceId === session.id && ( {deviceId === session.id && (
<span className={styles.label}> <span className={styles.label}>
<Text id="app.settings.pages.sessions.this_device" />{" "} <Text id="app.settings.pages.sessions.this_device" />{" "}
@ -122,18 +130,25 @@ export function Sessions() {
)} )}
<div className={styles.session}> <div className={styles.session}>
<div className={styles.detail}> <div className={styles.detail}>
<svg width={42} height={42} <svg width={42} height={42} viewBox="0 0 32 32">
viewBox="0 0 32 32">
<foreignObject <foreignObject
x="0" x="0"
y="0" y="0"
width="32" width="32"
height="32" height="32"
mask={systemIcon ? "url(#session)": undefined}> mask={
systemIcon
? "url(#session)"
: undefined
}>
{getIcon(session)} {getIcon(session)}
</foreignObject> </foreignObject>
<foreignObject x="18" y="18" width="14" height="14"> <foreignObject
{ systemIcon } x="18"
y="18"
width="14"
height="14">
{systemIcon}
</foreignObject> </foreignObject>
</svg> </svg>
<div className={styles.info}> <div className={styles.info}>
@ -142,7 +157,8 @@ export function Sessions() {
className={styles.name} className={styles.name}
value={session.friendly_name} value={session.friendly_name}
autocomplete="off" autocomplete="off"
style={{ pointerEvents: 'none' }} /> style={{ pointerEvents: "none" }}
/>
<span className={styles.time}> <span className={styles.time}>
<Text <Text
id="app.settings.pages.sessions.created" id="app.settings.pages.sessions.created"
@ -173,35 +189,37 @@ export function Sessions() {
); );
}} }}
disabled={ disabled={
attemptingDelete.indexOf(session.id) > -1 attemptingDelete.indexOf(session.id) >
-1
}> }>
<Text id="app.settings.pages.logOut" /> <Text id="app.settings.pages.logOut" />
</Button> </Button>
)} )}
</div> </div>
</div> </div>
) );
})} })}
<Button error <Button
error
onClick={async () => { onClick={async () => {
// ! FIXME: add to rAuth // ! FIXME: add to rAuth
let del: string[] = []; const del: string[] = [];
render.forEach((session) => { render.forEach((session) => {
if (deviceId !== session.id) { if (deviceId !== session.id) {
del.push(session.id); del.push(session.id);
} }
}) });
setDelete(del); setDelete(del);
for (let id of del) { for (const id of del) {
await client.req( await client.req(
"DELETE", "DELETE",
`/auth/sessions/${id}` as "/auth/sessions", `/auth/sessions/${id}` as "/auth/sessions",
); );
} }
setSessions(sessions.filter(x => x.id === deviceId)); setSessions(sessions.filter((x) => x.id === deviceId));
}}> }}>
<Text id="app.settings.pages.sessions.logout" /> <Text id="app.settings.pages.sessions.logout" />
</Button> </Button>

4
src/pages/settings/server/Invites.tsx
View file

@ -46,8 +46,8 @@ export function Invites({ server }: Props) {
</div> </div>
{typeof invites === "undefined" && <Preloader type="ring" />} {typeof invites === "undefined" && <Preloader type="ring" />}
{invites?.map((invite) => { {invites?.map((invite) => {
let creator = users.find((x) => x?._id === invite.creator); const creator = users.find((x) => x?._id === invite.creator);
let channel = channels.find((x) => x?._id === invite.channel); const channel = channels.find((x) => x?._id === invite.channel);
return ( return (
<div <div

2
src/pages/settings/server/Overview.tsx
View file

@ -40,7 +40,7 @@ export function Overview({ server }: Props) {
const [changed, setChanged] = useState(false); const [changed, setChanged] = useState(false);
function save() { function save() {
let changes: Partial< const changes: Partial<
Pick<Servers.Server, "name" | "description" | "system_messages"> Pick<Servers.Server, "name" | "description" | "system_messages">
> = {}; > = {};
if (name !== server.name) changes.name = name; if (name !== server.name) changes.name = name;

7
src/pages/settings/server/Roles.tsx
View file

@ -88,7 +88,7 @@ export function Roles({ server }: Props) {
<Text id="app.settings.permissions.default_role" /> <Text id="app.settings.permissions.default_role" />
</ButtonItem> </ButtonItem>
); );
} else { }
return ( return (
<ButtonItem <ButtonItem
active={role === id} active={role === id}
@ -96,7 +96,6 @@ export function Roles({ server }: Props) {
{roles[id].name} {roles[id].name}
</ButtonItem> </ButtonItem>
); );
}
})} })}
</div> </div>
<div className={styles.permissions}> <div className={styles.permissions}>
@ -118,7 +117,7 @@ export function Roles({ server }: Props) {
</Overline> </Overline>
{Object.keys(ServerPermission).map((key) => { {Object.keys(ServerPermission).map((key) => {
if (key === "View") return; if (key === "View") return;
let value = const value =
ServerPermission[ ServerPermission[
key as keyof typeof ServerPermission key as keyof typeof ServerPermission
]; ];
@ -143,7 +142,7 @@ export function Roles({ server }: Props) {
</Overline> </Overline>
{Object.keys(ChannelPermission).map((key) => { {Object.keys(ChannelPermission).map((key) => {
if (key === "ManageChannel") return; if (key === "ManageChannel") return;
let value = const value =
ChannelPermission[ ChannelPermission[
key as keyof typeof ChannelPermission key as keyof typeof ChannelPermission
]; ];

2
src/redux/connector.tsx
View file

@ -11,6 +11,6 @@ export function connectState<T>(
mapKeys: (state: State, props: T) => any, mapKeys: (state: State, props: T) => any,
memoize?: boolean, memoize?: boolean,
): ConnectedComponent<(props: any) => h.JSX.Element | null, T> { ): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
let c = connect(mapKeys)(component); const c = connect(mapKeys)(component);
return memoize ? memo(c) : c; return memoize ? memo(c) : c;
} }

16
src/redux/reducers/experiments.ts
View file

@ -1,10 +1,12 @@
export type Experiments = 'search'; export type Experiments = "search";
export const AVAILABLE_EXPERIMENTS: Experiments[] = [ 'search' ]; export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
export const EXPERIMENTS: { [key in Experiments]: { title: string, description: string } } = { export const EXPERIMENTS: {
'search': { [key in Experiments]: { title: string; description: string };
title: 'Search', } = {
description: 'Allows you to search for messages in channels.' search: {
} title: "Search",
description: "Allows you to search for messages in channels.",
},
}; };
export interface ExperimentOptions { export interface ExperimentOptions {

2
src/revision.ts
View file

@ -1,3 +1,3 @@
export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit"; export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit";
export const GIT_REVISION = "__GIT_REVISION__"; export const GIT_REVISION = "__GIT_REVISION__";
export const GIT_BRANCH: string = "__GIT_BRANCH__"; export const GIT_BRANCH = "__GIT_BRANCH__";

32
src/sw.ts
View file

@ -26,13 +26,13 @@ const ENCODING_LEN = ENCODING.length;
const TIME_LEN = 10; const TIME_LEN = 10;
function decodeTime(id: string) { function decodeTime(id: string) {
var time = id const time = id
.substr(0, TIME_LEN) .substr(0, TIME_LEN)
.split("") .split("")
.reverse() .reverse()
.reduce(function (carry, char, index) { .reduce((carry, char, index) => {
var encodingIndex = ENCODING.indexOf(char); const encodingIndex = ENCODING.indexOf(char);
if (encodingIndex === -1) throw "invalid character found: " + char; if (encodingIndex === -1) throw `invalid character found: ${char}`;
return (carry += encodingIndex * Math.pow(ENCODING_LEN, index)); return (carry += encodingIndex * Math.pow(ENCODING_LEN, index));
}, 0); }, 0);
@ -43,9 +43,9 @@ function decodeTime(id: string) {
self.addEventListener("push", (event) => { self.addEventListener("push", (event) => {
async function process() { async function process() {
if (event.data === null) return; if (event.data === null) return;
let data: Message = event.data.json(); const data: Message = event.data.json();
let item = await localStorage.getItem("state"); const item = await localStorage.getItem("state");
if (!item) return; if (!item) return;
const state: State = JSON.parse(item); const state: State = JSON.parse(item);
@ -57,7 +57,7 @@ self.addEventListener("push", (event) => {
// Match RevoltClient.tsx#L55 // Match RevoltClient.tsx#L55
db = await openDB("state", 3, { db = await openDB("state", 3, {
upgrade(db) { upgrade(db) {
for (let store of [ for (const store of [
"channels", "channels",
"servers", "servers",
"users", "users",
@ -87,8 +87,8 @@ self.addEventListener("push", (event) => {
} }
} }
let channel = await get<Channel>("channels", data.channel); const channel = await get<Channel>("channels", data.channel);
let user = await get<User>("users", data.author); const user = await get<User>("users", data.author);
if (channel) { if (channel) {
const notifs = getNotificationState(state.notifications, channel); const notifs = getNotificationState(state.notifications, channel);
@ -96,10 +96,10 @@ self.addEventListener("push", (event) => {
} }
let title = `@${data.author}`; let title = `@${data.author}`;
let username = user?.username ?? data.author; const username = user?.username ?? data.author;
let image; let image;
if (data.attachments) { if (data.attachments) {
let attachment = data.attachments[0]; const attachment = data.attachments[0];
if (attachment.metadata.type === "Image") { if (attachment.metadata.type === "Image") {
image = `${autumn_url}/${attachment.tag}/${attachment._id}`; image = `${autumn_url}/${attachment.tag}/${attachment._id}`;
} }
@ -120,7 +120,7 @@ self.addEventListener("push", (event) => {
break; break;
case "TextChannel": case "TextChannel":
{ {
let server = await get<Server>("servers", channel.server); const server = await get<Server>("servers", channel.server);
title = `@${user?.username} (#${channel.name}, ${server?.name})`; title = `@${user?.username} (#${channel.name}, ${server?.name})`;
} }
break; break;
@ -150,16 +150,16 @@ self.addEventListener("push", (event) => {
// ? Open the app on notification click. // ? Open the app on notification click.
// https://stackoverflow.com/a/39457287 // https://stackoverflow.com/a/39457287
self.addEventListener("notificationclick", function (event) { self.addEventListener("notificationclick", (event) => {
let url = event.notification.data; const url = event.notification.data;
event.notification.close(); event.notification.close();
event.waitUntil( event.waitUntil(
self.clients self.clients
.matchAll({ includeUncontrolled: true, type: "window" }) .matchAll({ includeUncontrolled: true, type: "window" })
.then((windowClients) => { .then((windowClients) => {
// Check if there is already a window/tab open with the target URL // Check if there is already a window/tab open with the target URL
for (var i = 0; i < windowClients.length; i++) { for (let i = 0; i < windowClients.length; i++) {
var client = windowClients[i]; const client = windowClients[i];
// If so, just focus it. // If so, just focus it.
if (client.url === url && "focus" in client) { if (client.url === url && "focus" in client) {
return client.focus(); return client.focus();