cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-02-21 15:51:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use tabWidth 4 without actual tabs.

Browse source
This commit is contained in:
Paul 2021-07-05 11:25:20 +01:00
parent 7bd33d8d34
commit b5a11d5c8f
180 changed files with 16619 additions and 16622 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.prettierrc.js
View file

@ -1,6 +1,5 @@
module.exports = { module.exports = {
"tabWidth": 4, "tabWidth": 4,
"useTabs": true,
"trailingComma": "all", "trailingComma": "all",
"jsxBracketSameLine": true, "jsxBracketSameLine": true,
"importOrder": ["preact|classnames|.scss$", "/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"], "importOrder": ["preact|classnames|.scss$", "/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"],

3696
src/assets/emojis.ts
View file

File diff suppressed because it is too large Load diff

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

@ -4,26 +4,26 @@ import message from "./message.mp3";
import outbound from "./outbound.mp3"; import outbound from "./outbound.mp3";
const SoundMap: { [key in Sounds]: string } = { const SoundMap: { [key in Sounds]: string } = {
message, message,
outbound, outbound,
call_join, call_join,
call_leave, call_leave,
}; };
export type Sounds = "message" | "outbound" | "call_join" | "call_leave"; export type Sounds = "message" | "outbound" | "call_join" | "call_leave";
export const SOUNDS_ARRAY: Sounds[] = [ export const SOUNDS_ARRAY: Sounds[] = [
"message", "message",
"outbound", "outbound",
"call_join", "call_join",
"call_leave", "call_leave",
]; ];
export function playSound(sound: Sounds) { export function playSound(sound: Sounds) {
let file = SoundMap[sound]; let file = SoundMap[sound];
let el = new Audio(file); let el = new Audio(file);
try { try {
el.play(); el.play();
} catch (err) { } catch (err) {
console.error("Failed to play audio file", file, err); console.error("Failed to play audio file", file, err);
} }
} }

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

@ -12,464 +12,464 @@ import Emoji from "./Emoji";
import UserIcon from "./user/UserIcon"; import UserIcon from "./user/UserIcon";
export type AutoCompleteState = export type AutoCompleteState =
| { type: "none" } | { type: "none" }
| ({ selected: number; within: boolean } & ( | ({ selected: number; within: boolean } & (
| { | {
type: "emoji"; type: "emoji";
matches: string[]; matches: string[];
} }
| { | {
type: "user"; type: "user";
matches: User[]; matches: User[];
} }
| { | {
type: "channel"; type: "channel";
matches: Channels.TextChannel[]; matches: Channels.TextChannel[];
} }
)); ));
export type SearchClues = { export type SearchClues = {
users?: { type: "channel"; id: string } | { type: "all" }; users?: { type: "channel"; id: string } | { type: "all" };
channels?: { server: string }; channels?: { server: string };
}; };
export type AutoCompleteProps = { export type AutoCompleteProps = {
detached?: boolean; detached?: boolean;
state: AutoCompleteState; state: AutoCompleteState;
setState: StateUpdater<AutoCompleteState>; setState: StateUpdater<AutoCompleteState>;
onKeyUp: (ev: KeyboardEvent) => void; onKeyUp: (ev: KeyboardEvent) => void;
onKeyDown: (ev: KeyboardEvent) => boolean; onKeyDown: (ev: KeyboardEvent) => boolean;
onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void; onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
onClick: JSX.MouseEventHandler<HTMLButtonElement>; onClick: JSX.MouseEventHandler<HTMLButtonElement>;
onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>; onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>;
onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>; onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>;
}; };
export function useAutoComplete( export function useAutoComplete(
setValue: (v?: string) => void, setValue: (v?: string) => void,
searchClues?: SearchClues, searchClues?: SearchClues,
): AutoCompleteProps { ): AutoCompleteProps {
const [state, setState] = useState<AutoCompleteState>({ type: "none" }); const [state, setState] = useState<AutoCompleteState>({ type: "none" });
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const client = useContext(AppContext); const client = useContext(AppContext);
function findSearchString( function findSearchString(
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; let cursor = el.selectionStart;
let content = el.value.slice(0, cursor); let content = el.value.slice(0, cursor);
let valid = /\w/; let valid = /\w/;
let j = content.length - 1; let j = content.length - 1;
if (content[j] === "@") { if (content[j] === "@") {
return ["user", "", j]; return ["user", "", j];
} else if (content[j] === "#") { } else if (content[j] === "#") {
return ["channel", "", j]; return ["channel", "", j];
} }
while (j >= 0 && valid.test(content[j])) { while (j >= 0 && valid.test(content[j])) {
j--; j--;
} }
if (j === -1) return; if (j === -1) return;
let current = content[j]; let current = content[j];
if (current === ":" || current === "@" || current === "#") { if (current === ":" || current === "@" || current === "#") {
let search = content.slice(j + 1, content.length); let search = content.slice(j + 1, content.length);
if (search.length > 0) { if (search.length > 0) {
return [ return [
current === "#" current === "#"
? "channel" ? "channel"
: current === ":" : current === ":"
? "emoji" ? "emoji"
: "user", : "user",
search.toLowerCase(), search.toLowerCase(),
j + 1, j + 1,
]; ];
} }
} }
} }
} }
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); let result = findSearchString(el);
if (result) { if (result) {
let [type, search] = result; let [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) let 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 = let currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
type: "emoji", type: "emoji",
matches, matches,
selected: Math.min(currentPosition, matches.length - 1), selected: Math.min(currentPosition, matches.length - 1),
within: false, within: false,
}); });
return; return;
} }
} }
if (type === "user" && searchClues?.users) { if (type === "user" && searchClues?.users) {
let users: User[] = []; let users: User[] = [];
switch (searchClues.users.type) { switch (searchClues.users.type) {
case "all": case "all":
users = client.users.toArray(); users = client.users.toArray();
break; break;
case "channel": { case "channel": {
let channel = client.channels.get(searchClues.users.id); let channel = client.channels.get(searchClues.users.id);
switch (channel?.channel_type) { switch (channel?.channel_type) {
case "Group": case "Group":
case "DirectMessage": case "DirectMessage":
users = client.users users = client.users
.mapKeys(channel.recipients) .mapKeys(channel.recipients)
.filter( .filter(
(x) => typeof x !== "undefined", (x) => typeof x !== "undefined",
) as User[]; ) as User[];
break; break;
case "TextChannel": case "TextChannel":
const server = channel.server; const server = channel.server;
users = client.servers.members users = client.servers.members
.toArray() .toArray()
.filter( .filter(
(x) => x._id.substr(0, 26) === server, (x) => x._id.substr(0, 26) === server,
) )
.map((x) => .map((x) =>
client.users.get(x._id.substr(26)), client.users.get(x._id.substr(26)),
) )
.filter( .filter(
(x) => typeof x !== "undefined", (x) => typeof x !== "undefined",
) as User[]; ) as User[];
break; break;
default: default:
return; return;
} }
} }
} }
users = users.filter((x) => x._id !== SYSTEM_USER_ID); users = users.filter((x) => x._id !== SYSTEM_USER_ID);
let matches = ( let matches = (
search.length > 0 search.length > 0
? users.filter((user) => ? users.filter((user) =>
user.username.toLowerCase().match(regex), user.username.toLowerCase().match(regex),
) )
: users : users
) )
.splice(0, 5) .splice(0, 5)
.filter((x) => typeof x !== "undefined"); .filter((x) => typeof x !== "undefined");
if (matches.length > 0) { if (matches.length > 0) {
let currentPosition = let currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
type: "user", type: "user",
matches, matches,
selected: Math.min(currentPosition, matches.length - 1), selected: Math.min(currentPosition, matches.length - 1),
within: false, within: false,
}); });
return; return;
} }
} }
if (type === "channel" && searchClues?.channels) { if (type === "channel" && searchClues?.channels) {
let channels = client.servers let 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 = ( let matches = (
search.length > 0 search.length > 0
? channels.filter((channel) => ? channels.filter((channel) =>
channel.name.toLowerCase().match(regex), channel.name.toLowerCase().match(regex),
) )
: channels : channels
) )
.splice(0, 5) .splice(0, 5)
.filter((x) => typeof x !== "undefined"); .filter((x) => typeof x !== "undefined");
if (matches.length > 0) { if (matches.length > 0) {
let currentPosition = let currentPosition =
state.type !== "none" ? state.selected : 0; state.type !== "none" ? state.selected : 0;
setState({ setState({
type: "channel", type: "channel",
matches, matches,
selected: Math.min(currentPosition, matches.length - 1), selected: Math.min(currentPosition, matches.length - 1),
within: false, within: false,
}); });
return; return;
} }
} }
} }
if (state.type !== "none") { if (state.type !== "none") {
setState({ type: "none" }); setState({ type: "none" });
} }
} }
function selectCurrent(el: HTMLTextAreaElement) { function selectCurrent(el: HTMLTextAreaElement) {
if (state.type !== "none") { if (state.type !== "none") {
let result = findSearchString(el); let result = findSearchString(el);
if (result) { if (result) {
let [_type, search, index] = result; let [_type, search, index] = result;
let content = el.value.split(""); let content = el.value.split("");
if (state.type === "emoji") { if (state.type === "emoji") {
content.splice( content.splice(
index, index,
search.length, search.length,
state.matches[state.selected], state.matches[state.selected],
": ", ": ",
); );
} else if (state.type === "user") { } else if (state.type === "user") {
content.splice( content.splice(
index - 1, index - 1,
search.length + 1, search.length + 1,
"<@", "<@",
state.matches[state.selected]._id, state.matches[state.selected]._id,
"> ", "> ",
); );
} else { } else {
content.splice( content.splice(
index - 1, index - 1,
search.length + 1, search.length + 1,
"<#", "<#",
state.matches[state.selected]._id, state.matches[state.selected]._id,
"> ", "> ",
); );
} }
setValue(content.join("")); setValue(content.join(""));
} }
} }
} }
function onClick(ev: JSX.TargetedMouseEvent<HTMLButtonElement>) { function onClick(ev: JSX.TargetedMouseEvent<HTMLButtonElement>) {
ev.preventDefault(); ev.preventDefault();
selectCurrent(document.querySelector("#message")!); selectCurrent(document.querySelector("#message")!);
} }
function onKeyDown(e: KeyboardEvent) { function onKeyDown(e: KeyboardEvent) {
if (focused && state.type !== "none") { if (focused && state.type !== "none") {
if (e.key === "ArrowUp") { if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
if (state.selected > 0) { if (state.selected > 0) {
setState({ setState({
...state, ...state,
selected: state.selected - 1, selected: state.selected - 1,
}); });
} }
return true; return true;
} }
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
if (state.selected < state.matches.length - 1) { if (state.selected < state.matches.length - 1) {
setState({ setState({
...state, ...state,
selected: state.selected + 1, selected: state.selected + 1,
}); });
} }
return true; return true;
} }
if (e.key === "Enter" || e.key === "Tab") { if (e.key === "Enter" || e.key === "Tab") {
e.preventDefault(); e.preventDefault();
selectCurrent(e.currentTarget as HTMLTextAreaElement); selectCurrent(e.currentTarget as HTMLTextAreaElement);
return true; return true;
} }
} }
return false; return false;
} }
function onKeyUp(e: KeyboardEvent) { function onKeyUp(e: KeyboardEvent) {
if (e.currentTarget !== null) { if (e.currentTarget !== null) {
// @ts-expect-error // @ts-expect-error
onChange(e); onChange(e);
} }
} }
function onFocus(ev: JSX.TargetedFocusEvent<HTMLTextAreaElement>) { function onFocus(ev: JSX.TargetedFocusEvent<HTMLTextAreaElement>) {
setFocused(true); setFocused(true);
onChange(ev); onChange(ev);
} }
function onBlur() { function onBlur() {
if (state.type !== "none" && state.within) return; if (state.type !== "none" && state.within) return;
setFocused(false); setFocused(false);
} }
return { return {
state: focused ? state : { type: "none" }, state: focused ? state : { type: "none" },
setState, setState,
onClick, onClick,
onChange, onChange,
onKeyUp, onKeyUp,
onKeyDown, onKeyDown,
onFocus, onFocus,
onBlur, onBlur,
}; };
} }
const Base = styled.div<{ detached?: boolean }>` const Base = styled.div<{ detached?: boolean }>`
position: relative; position: relative;
> div { > div {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
position: absolute; position: absolute;
background: var(--primary-header); background: var(--primary-header);
} }
button { button {
gap: 8px; gap: 8px;
margin: 4px; margin: 4px;
padding: 6px; padding: 6px;
border: none; border: none;
display: flex; display: flex;
font-size: 1em; font-size: 1em;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
background: transparent; background: transparent;
color: var(--foreground); color: var(--foreground);
width: calc(100% - 12px); width: calc(100% - 12px);
span { span {
display: grid; display: grid;
place-items: center; place-items: center;
} }
&.active { &.active {
background: var(--primary-background); background: var(--primary-background);
} }
} }
${(props) => ${(props) =>
props.detached && props.detached &&
css` css`
bottom: 8px; bottom: 8px;
> div { > div {
border-radius: 4px; border-radius: 4px;
} }
`} `}
`; `;
export default function AutoComplete({ export default function AutoComplete({
detached, detached,
state, state,
setState, setState,
onClick, onClick,
}: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) { }: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) {
return ( return (
<Base detached={detached}> <Base detached={detached}>
<div> <div>
{state.type === "emoji" && {state.type === "emoji" &&
state.matches.map((match, i) => ( state.matches.map((match, i) => (
<button <button
className={i === state.selected ? "active" : ""} className={i === state.selected ? "active" : ""}
onMouseEnter={() => onMouseEnter={() =>
(i !== state.selected || !state.within) && (i !== state.selected || !state.within) &&
setState({ setState({
...state, ...state,
selected: i, selected: i,
within: true, within: true,
}) })
} }
onMouseLeave={() => onMouseLeave={() =>
state.within && state.within &&
setState({ setState({
...state, ...state,
within: false, within: false,
}) })
} }
onClick={onClick}> onClick={onClick}>
<Emoji <Emoji
emoji={ emoji={
(emojiDictionary as Record<string, string>)[ (emojiDictionary as Record<string, string>)[
match match
] ]
} }
size={20} size={20}
/> />
:{match}: :{match}:
</button> </button>
))} ))}
{state.type === "user" && {state.type === "user" &&
state.matches.map((match, i) => ( state.matches.map((match, i) => (
<button <button
className={i === state.selected ? "active" : ""} className={i === state.selected ? "active" : ""}
onMouseEnter={() => onMouseEnter={() =>
(i !== state.selected || !state.within) && (i !== state.selected || !state.within) &&
setState({ setState({
...state, ...state,
selected: i, selected: i,
within: true, within: true,
}) })
} }
onMouseLeave={() => onMouseLeave={() =>
state.within && state.within &&
setState({ setState({
...state, ...state,
within: false, within: false,
}) })
} }
onClick={onClick}> onClick={onClick}>
<UserIcon size={24} target={match} status={true} /> <UserIcon size={24} target={match} status={true} />
{match.username} {match.username}
</button> </button>
))} ))}
{state.type === "channel" && {state.type === "channel" &&
state.matches.map((match, i) => ( state.matches.map((match, i) => (
<button <button
className={i === state.selected ? "active" : ""} className={i === state.selected ? "active" : ""}
onMouseEnter={() => onMouseEnter={() =>
(i !== state.selected || !state.within) && (i !== state.selected || !state.within) &&
setState({ setState({
...state, ...state,
selected: i, selected: i,
within: true, within: true,
}) })
} }
onMouseLeave={() => onMouseLeave={() =>
state.within && state.within &&
setState({ setState({
...state, ...state,
within: false, within: false,
}) })
} }
onClick={onClick}> onClick={onClick}>
<ChannelIcon size={24} target={match} /> <ChannelIcon size={24} target={match} />
{match.name} {match.name}
</button> </button>
))} ))}
</div> </div>
</Base> </Base>
); );
} }

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

@ -9,57 +9,57 @@ import { ImageIconBase, IconBaseProps } from "./IconBase";
import fallback from "./assets/group.png"; import fallback from "./assets/group.png";
interface Props interface Props
extends IconBaseProps< extends IconBaseProps<
Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel
> { > {
isServerChannel?: boolean; isServerChannel?: boolean;
} }
export default function ChannelIcon( export default function ChannelIcon(
props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>, props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) { ) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { const {
size, size,
target, target,
attachment, attachment,
isServerChannel: server, isServerChannel: server,
animate, animate,
children, children,
as, as,
...imgProps ...imgProps
} = props; } = props;
const iconURL = client.generateFileURL( const iconURL = client.generateFileURL(
target?.icon ?? attachment, target?.icon ?? attachment,
{ max_side: 256 }, { max_side: 256 },
animate, animate,
); );
const isServerChannel = const isServerChannel =
server || server ||
(target && (target &&
(target.channel_type === "TextChannel" || (target.channel_type === "TextChannel" ||
target.channel_type === "VoiceChannel")); target.channel_type === "VoiceChannel"));
if (typeof iconURL === "undefined") { if (typeof iconURL === "undefined") {
if (isServerChannel) { if (isServerChannel) {
if (target?.channel_type === "VoiceChannel") { if (target?.channel_type === "VoiceChannel") {
return <VolumeFull size={size} />; return <VolumeFull size={size} />;
} else { } else {
return <Hash size={size} />; return <Hash size={size} />;
} }
} }
} }
return ( return (
// ! fixme: replace fallback with <picture /> + <source /> // ! fixme: replace fallback with <picture /> + <source />
<ImageIconBase <ImageIconBase
{...imgProps} {...imgProps}
width={size} width={size}
height={size} height={size}
aria-hidden="true" aria-hidden="true"
square={isServerChannel} square={isServerChannel}
src={iconURL ?? fallback} src={iconURL ?? fallback}
/> />
); );
} }

80
src/components/common/CollapsibleSection.tsx
View file

@ -8,52 +8,52 @@ import Details from "../ui/Details";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
interface Props { interface Props {
id: string; id: string;
defaultValue: boolean; defaultValue: boolean;
sticky?: boolean; sticky?: boolean;
large?: boolean; large?: boolean;
summary: Children; summary: Children;
children: Children; children: Children;
} }
export default function CollapsibleSection({ export default function CollapsibleSection({
id, id,
defaultValue, defaultValue,
summary, summary,
children, children,
...detailsProps ...detailsProps
}: Props) { }: Props) {
const state: State = store.getState(); const state: State = store.getState();
function setState(state: boolean) { function setState(state: boolean) {
if (state === defaultValue) { if (state === defaultValue) {
store.dispatch({ store.dispatch({
type: "SECTION_TOGGLE_UNSET", type: "SECTION_TOGGLE_UNSET",
id, id,
} as Action); } as Action);
} else { } else {
store.dispatch({ store.dispatch({
type: "SECTION_TOGGLE_SET", type: "SECTION_TOGGLE_SET",
id, id,
state, state,
} as Action); } as Action);
} }
} }
return ( return (
<Details <Details
open={state.sectionToggle[id] ?? defaultValue} open={state.sectionToggle[id] ?? defaultValue}
onToggle={(e) => setState(e.currentTarget.open)} onToggle={(e) => setState(e.currentTarget.open)}
{...detailsProps}> {...detailsProps}>
<summary> <summary>
<div class="padding"> <div class="padding">
<ChevronDown size={20} /> <ChevronDown size={20} />
{summary} {summary}
</div> </div>
</summary> </summary>
{children} {children}
</Details> </Details>
); );
} }

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

@ -4,29 +4,29 @@ var EMOJI_PACK = "mutant";
const REVISION = 3; const REVISION = 3;
export function setEmojiPack(pack: EmojiPacks) { export function setEmojiPack(pack: EmojiPacks) {
EMOJI_PACK = pack; EMOJI_PACK = pack;
} }
// Originally taken from Twemoji source code, // Originally taken from Twemoji source code,
// re-written by bree to be more readable. // re-written by bree to be more readable.
function codePoints(rune: string) { function codePoints(rune: string) {
const pairs = []; const pairs = [];
let low = 0; let low = 0;
let i = 0; let i = 0;
while (i < rune.length) { while (i < rune.length) {
const charCode = rune.charCodeAt(i++); const charCode = rune.charCodeAt(i++);
if (low) { if (low) {
pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00)); pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
low = 0; low = 0;
} else if (0xd800 <= charCode && charCode <= 0xdbff) { } else if (0xd800 <= charCode && charCode <= 0xdbff) {
low = charCode; low = charCode;
} else { } else {
pairs.push(charCode); pairs.push(charCode);
} }
} }
return pairs; return pairs;
} }
// Taken from Twemoji source code. // Taken from Twemoji source code.
@ -35,38 +35,38 @@ function codePoints(rune: string) {
const UFE0Fg = /\uFE0F/g; const UFE0Fg = /\uFE0F/g;
const U200D = String.fromCharCode(0x200d); const U200D = String.fromCharCode(0x200d);
function toCodePoint(rune: string) { function toCodePoint(rune: string) {
return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune) return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
.map((val) => val.toString(16)) .map((val) => val.toString(16))
.join("-"); .join("-");
} }
function parseEmoji(emoji: string) { function parseEmoji(emoji: string) {
let codepoint = toCodePoint(emoji); let 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}`;
} }
export default function Emoji({ export default function Emoji({
emoji, emoji,
size, size,
}: { }: {
emoji: string; emoji: string;
size?: number; size?: number;
}) { }) {
return ( return (
<img <img
alt={emoji} alt={emoji}
className="emoji" className="emoji"
draggable={false} draggable={false}
src={parseEmoji(emoji)} src={parseEmoji(emoji)}
style={ style={
size ? { width: `${size}px`, height: `${size}px` } : undefined size ? { width: `${size}px`, height: `${size}px` } : undefined
} }
/> />
); );
} }
export function generateEmoji(emoji: string) { export function generateEmoji(emoji: string) {
return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji( return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
emoji, emoji,
)}" />`; )}" />`;
} }

46
src/components/common/IconBase.tsx
View file

@ -2,40 +2,40 @@ import { Attachment } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
export interface IconBaseProps<T> { export interface IconBaseProps<T> {
target?: T; target?: T;
attachment?: Attachment; attachment?: Attachment;
size: number; size: number;
animate?: boolean; animate?: boolean;
} }
interface IconModifiers { interface IconModifiers {
square?: boolean; square?: boolean;
} }
export default styled.svg<IconModifiers>` export default styled.svg<IconModifiers>`
flex-shrink: 0; flex-shrink: 0;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
${(props) => ${(props) =>
!props.square && !props.square &&
css` css`
border-radius: 50%; border-radius: 50%;
`} `}
} }
`; `;
export const ImageIconBase = styled.img<IconModifiers>` export const ImageIconBase = styled.img<IconModifiers>`
flex-shrink: 0; flex-shrink: 0;
object-fit: cover; object-fit: cover;
${(props) => ${(props) =>
!props.square && !props.square &&
css` css`
border-radius: 50%; border-radius: 50%;
`} `}
`; `;

46
src/components/common/LocaleSelector.tsx
View file

@ -6,33 +6,33 @@ import { Language, Languages } from "../../context/Locale";
import ComboBox from "../ui/ComboBox"; import ComboBox from "../ui/ComboBox";
type Props = { type Props = {
locale: string; locale: string;
}; };
export function LocaleSelector(props: Props) { export function LocaleSelector(props: Props) {
return ( return (
<ComboBox <ComboBox
value={props.locale} value={props.locale}
onChange={(e) => onChange={(e) =>
dispatch({ dispatch({
type: "SET_LOCALE", type: "SET_LOCALE",
locale: e.currentTarget.value as Language, locale: e.currentTarget.value as Language,
}) })
}> }>
{Object.keys(Languages).map((x) => { {Object.keys(Languages).map((x) => {
const l = Languages[x as keyof typeof Languages]; const l = Languages[x as keyof typeof Languages];
return ( return (
<option value={x}> <option value={x}>
{l.emoji} {l.display} {l.emoji} {l.display}
</option> </option>
); );
})} })}
</ComboBox> </ComboBox>
); );
} }
export default connectState(LocaleSelector, (state) => { export default connectState(LocaleSelector, (state) => {
return { return {
locale: state.locale, locale: state.locale,
}; };
}); });

58
src/components/common/ServerHeader.tsx
View file

@ -10,40 +10,40 @@ import Header from "../ui/Header";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
interface Props { interface Props {
server: Server; server: Server;
ctx: HookContext; ctx: HookContext;
} }
const ServerName = styled.div` const ServerName = styled.div`
flex-grow: 1; flex-grow: 1;
`; `;
export default function ServerHeader({ server, ctx }: Props) { export default function ServerHeader({ server, ctx }: Props) {
const permissions = useServerPermission(server._id, ctx); const permissions = useServerPermission(server._id, ctx);
const bannerURL = ctx.client.servers.getBannerURL( const bannerURL = ctx.client.servers.getBannerURL(
server._id, server._id,
{ width: 480 }, { width: 480 },
true, true,
); );
return ( return (
<Header <Header
borders borders
placement="secondary" placement="secondary"
background={typeof bannerURL !== "undefined"} background={typeof bannerURL !== "undefined"}
style={{ style={{
background: bannerURL ? `url('${bannerURL}')` : undefined, background: bannerURL ? `url('${bannerURL}')` : undefined,
}}> }}>
<ServerName>{server.name}</ServerName> <ServerName>{server.name}</ServerName>
{(permissions & ServerPermission.ManageServer) > 0 && ( {(permissions & ServerPermission.ManageServer) > 0 && (
<div className="actions"> <div className="actions">
<Link to={`/server/${server._id}/settings`}> <Link to={`/server/${server._id}/settings`}>
<IconButton> <IconButton>
<Cog size={24} /> <Cog size={24} />
</IconButton> </IconButton>
</Link> </Link>
</div> </div>
)} )}
</Header> </Header>
); );
} }

90
src/components/common/ServerIcon.tsx
View file

@ -8,61 +8,61 @@ import { AppContext } from "../../context/revoltjs/RevoltClient";
import { IconBaseProps, ImageIconBase } from "./IconBase"; import { IconBaseProps, ImageIconBase } from "./IconBase";
interface Props extends IconBaseProps<Server> { interface Props extends IconBaseProps<Server> {
server_name?: string; server_name?: string;
} }
const ServerText = styled.div` const ServerText = styled.div`
display: grid; display: grid;
padding: 0.2em; padding: 0.2em;
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
place-items: center; place-items: center;
color: var(--foreground); color: var(--foreground);
background: var(--primary-background); background: var(--primary-background);
`; `;
const fallback = "/assets/group.png"; const fallback = "/assets/group.png";
export default function ServerIcon( export default function ServerIcon(
props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>, props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) { ) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { const {
target, target,
attachment, attachment,
size, size,
animate, animate,
server_name, server_name,
children, children,
as, as,
...imgProps ...imgProps
} = props; } = props;
const iconURL = client.generateFileURL( const iconURL = client.generateFileURL(
target?.icon ?? attachment, target?.icon ?? attachment,
{ max_side: 256 }, { max_side: 256 },
animate, animate,
); );
if (typeof iconURL === "undefined") { if (typeof iconURL === "undefined") {
const name = target?.name ?? server_name ?? ""; const name = target?.name ?? server_name ?? "";
return ( return (
<ServerText style={{ width: size, height: size }}> <ServerText style={{ width: size, height: size }}>
{name {name
.split(" ") .split(" ")
.map((x) => x[0]) .map((x) => x[0])
.filter((x) => typeof x !== "undefined")} .filter((x) => typeof x !== "undefined")}
</ServerText> </ServerText>
); );
} }
return ( return (
<ImageIconBase <ImageIconBase
{...imgProps} {...imgProps}
width={size} width={size}
height={size} height={size}
aria-hidden="true" aria-hidden="true"
src={iconURL} src={iconURL}
/> />
); );
} }

72
src/components/common/Tooltip.tsx
View file

@ -6,55 +6,55 @@ import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
type Props = Omit<TippyProps, "children"> & { type Props = Omit<TippyProps, "children"> & {
children: Children; children: Children;
content: Children; content: Children;
}; };
export default function Tooltip(props: Props) { export default function Tooltip(props: Props) {
const { children, content, ...tippyProps } = props; const { children, content, ...tippyProps } = props;
return ( return (
<Tippy content={content} {...tippyProps}> <Tippy content={content} {...tippyProps}>
{/* {/*
// @ts-expect-error */} // @ts-expect-error */}
<div>{children}</div> <div>{children}</div>
</Tippy> </Tippy>
); );
} }
const PermissionTooltipBase = styled.div` const PermissionTooltipBase = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
span { span {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: var(--secondary-foreground); color: var(--secondary-foreground);
font-size: 11px; font-size: 11px;
} }
code { code {
font-family: var(--monoscape-font); font-family: var(--monoscape-font);
} }
`; `;
export function PermissionTooltip( export function PermissionTooltip(
props: Omit<Props, "content"> & { permission: string }, props: Omit<Props, "content"> & { permission: string },
) { ) {
const { permission, ...tooltipProps } = props; const { permission, ...tooltipProps } = props;
return ( return (
<Tooltip <Tooltip
content={ content={
<PermissionTooltipBase> <PermissionTooltipBase>
<span> <span>
<Text id="app.permissions.required" /> <Text id="app.permissions.required" />
</span> </span>
<code>{permission}</code> <code>{permission}</code>
</PermissionTooltipBase> </PermissionTooltipBase>
} }
{...tooltipProps} {...tooltipProps}
/> />
); );
} }

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

@ -14,18 +14,18 @@ var pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true)); internalSubscribe("PWA", "update", () => (pendingUpdate = true));
export default function UpdateIndicator() { export default function UpdateIndicator() {
const [pending, setPending] = useState(pendingUpdate); const [pending, setPending] = useState(pendingUpdate);
useEffect(() => { useEffect(() => {
return internalSubscribe("PWA", "update", () => setPending(true)); return internalSubscribe("PWA", "update", () => setPending(true));
}); });
if (!pending) return null; if (!pending) return null;
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
return ( return (
<IconButton onClick={() => updateSW(true)}> <IconButton onClick={() => updateSW(true)}>
<Download size={22} color={theme.success} /> <Download size={22} color={theme.success} />
</IconButton> </IconButton>
); );
} }

196
src/components/common/messaging/Message.tsx
View file

@ -16,118 +16,118 @@ import Markdown from "../../markdown/Markdown";
import UserIcon from "../user/UserIcon"; import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort"; import { Username } from "../user/UserShort";
import MessageBase, { import MessageBase, {
MessageContent, MessageContent,
MessageDetail, MessageDetail,
MessageInfo, MessageInfo,
} from "./MessageBase"; } from "./MessageBase";
import Attachment from "./attachments/Attachment"; import Attachment from "./attachments/Attachment";
import { MessageReply } from "./attachments/MessageReply"; import { MessageReply } from "./attachments/MessageReply";
import Embed from "./embed/Embed"; import Embed from "./embed/Embed";
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
queued?: QueuedMessage; queued?: QueuedMessage;
message: MessageObject; message: MessageObject;
contrast?: boolean; contrast?: boolean;
content?: Children; content?: Children;
head?: boolean; head?: boolean;
} }
function Message({ function Message({
attachContext, attachContext,
message, message,
contrast, contrast,
content: replacement, content: replacement,
head: preferHead, head: preferHead,
queued, queued,
}: Props) { }: Props) {
// TODO: Can improve re-renders here by providing a list // TODO: Can improve re-renders here by providing a list
// TODO: of dependencies. We only need to update on u/avatar. // TODO: of dependencies. We only need to update on u/avatar.
const user = useUser(message.author); const user = useUser(message.author);
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const content = message.content as string; const content = message.content as string;
const head = preferHead || (message.replies && message.replies.length > 0); const head = preferHead || (message.replies && message.replies.length > 0);
// ! FIXME: tell fatal to make this type generic // ! FIXME: tell fatal to make this type generic
// bree: Fatal please... // bree: Fatal please...
const userContext = attachContext const userContext = attachContext
? (attachContextMenu("Menu", { ? (attachContextMenu("Menu", {
user: message.author, user: message.author,
contextualChannel: message.channel, contextualChannel: message.channel,
}) as any) }) as any)
: undefined; : undefined;
const openProfile = () => const openProfile = () =>
openScreen({ id: "profile", user_id: message.author }); openScreen({ id: "profile", user_id: message.author });
return ( return (
<div id={message._id}> <div id={message._id}>
{message.replies?.map((message_id, index) => ( {message.replies?.map((message_id, index) => (
<MessageReply <MessageReply
index={index} index={index}
id={message_id} id={message_id}
channel={message.channel} channel={message.channel}
/> />
))} ))}
<MessageBase <MessageBase
head={head && !(message.replies && message.replies.length > 0)} head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast} contrast={contrast}
sending={typeof queued !== "undefined"} sending={typeof queued !== "undefined"}
mention={message.mentions?.includes(client.user!._id)} mention={message.mentions?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"} failed={typeof queued?.error !== "undefined"}
onContextMenu={ onContextMenu={
attachContext attachContext
? attachContextMenu("Menu", { ? attachContextMenu("Menu", {
message, message,
contextualChannel: message.channel, contextualChannel: message.channel,
queued, queued,
}) })
: undefined : undefined
}> }>
<MessageInfo> <MessageInfo>
{head ? ( {head ? (
<UserIcon <UserIcon
target={user} target={user}
size={36} size={36}
onContextMenu={userContext} onContextMenu={userContext}
onClick={openProfile} onClick={openProfile}
/> />
) : ( ) : (
<MessageDetail message={message} position="left" /> <MessageDetail message={message} position="left" />
)} )}
</MessageInfo> </MessageInfo>
<MessageContent> <MessageContent>
{head && ( {head && (
<span className="detail"> <span className="detail">
<Username <Username
className="author" className="author"
user={user} user={user}
onContextMenu={userContext} onContextMenu={userContext}
onClick={openProfile} onClick={openProfile}
/> />
<MessageDetail message={message} position="top" /> <MessageDetail message={message} position="top" />
</span> </span>
)} )}
{replacement ?? <Markdown content={content} />} {replacement ?? <Markdown content={content} />}
{queued?.error && ( {queued?.error && (
<Overline type="error" error={queued.error} /> <Overline type="error" error={queued.error} />
)} )}
{message.attachments?.map((attachment, index) => ( {message.attachments?.map((attachment, index) => (
<Attachment <Attachment
key={index} key={index}
attachment={attachment} attachment={attachment}
hasContent={index > 0 || content.length > 0} hasContent={index > 0 || content.length > 0}
/> />
))} ))}
{message.embeds?.map((embed, index) => ( {message.embeds?.map((embed, index) => (
<Embed key={index} embed={embed} /> <Embed key={index} embed={embed} />
))} ))}
</MessageContent> </MessageContent>
</MessageBase> </MessageBase>
</div> </div>
); );
} }
export default memo(Message); export default memo(Message);

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

@ -9,204 +9,204 @@ import { MessageObject } from "../../../context/revoltjs/util";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
export interface BaseMessageProps { export interface BaseMessageProps {
head?: boolean; head?: boolean;
failed?: boolean; failed?: boolean;
mention?: boolean; mention?: boolean;
blocked?: boolean; blocked?: boolean;
sending?: boolean; sending?: boolean;
contrast?: boolean; contrast?: boolean;
} }
export default styled.div<BaseMessageProps>` export default styled.div<BaseMessageProps>`
display: flex; display: flex;
overflow-x: none; overflow-x: none;
padding: 0.125rem; padding: 0.125rem;
flex-direction: row; flex-direction: row;
padding-right: 16px; padding-right: 16px;
${(props) =>
props.contrast &&
css`
padding: 0.3rem;
border-radius: 4px;
background: var(--hover);
`}
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) => ${(props) =>
props.mention && props.contrast &&
css` css`
background: var(--mention); padding: 0.3rem;
`} border-radius: 4px;
background: var(--hover);
`}
${(props) => ${(props) =>
props.blocked && props.head &&
css` css`
filter: blur(4px); margin-top: 12px;
transition: 0.2s ease filter; `}
&:hover {
filter: none;
}
`}
${(props) => ${(props) =>
props.sending && props.mention &&
css` css`
opacity: 0.8; background: var(--mention);
color: var(--tertiary-foreground); `}
`}
${(props) => ${(props) =>
props.failed && props.blocked &&
css` css`
color: var(--error); filter: blur(4px);
`} transition: 0.2s ease filter;
&:hover {
filter: none;
}
`}
${(props) =>
props.sending &&
css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
${(props) =>
props.failed &&
css`
color: var(--error);
`}
.detail { .detail {
gap: 8px; gap: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.author { .author {
cursor: pointer; cursor: pointer;
font-weight: 600 !important; font-weight: 600 !important;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.copy { .copy {
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
&:hover { &:hover {
background: var(--hover); background: var(--hover);
time { time {
opacity: 1; opacity: 1;
} }
} }
`; `;
export const MessageInfo = styled.div` export const MessageInfo = styled.div`
width: 62px; width: 62px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding-top: 2px; padding-top: 2px;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.copyBracket { .copyBracket {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
} }
.copyTime { .copyTime {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
} }
svg { svg {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
} }
time { time {
opacity: 0; opacity: 0;
} }
time, time,
.edited { .edited {
margin-top: 1px; margin-top: 1px;
cursor: default; cursor: default;
display: inline; display: inline;
font-size: 10px; font-size: 10px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
time, time,
.edited > div { .edited > div {
&::selection { &::selection {
background-color: transparent; background-color: transparent;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
} }
`; `;
export const MessageContent = styled.div` export const MessageContent = styled.div`
min-width: 0; min-width: 0;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
// overflow: hidden; // overflow: hidden;
font-size: 0.875rem; font-size: 0.875rem;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
`; `;
export const DetailBase = styled.div` export const DetailBase = styled.div`
gap: 4px; gap: 4px;
font-size: 10px; font-size: 10px;
display: inline-flex; display: inline-flex;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
`; `;
export function MessageDetail({ export function MessageDetail({
message, message,
position, position,
}: { }: {
message: MessageObject; message: MessageObject;
position: "left" | "top"; position: "left" | "top";
}) { }) {
if (position === "left") { if (position === "left") {
if (message.edited) { if (message.edited) {
return ( return (
<> <>
<time className="copyTime"> <time className="copyTime">
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format("H:mm")} {dayjs(decodeTime(message._id)).format("H:mm")}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
<span className="edited"> <span className="edited">
<Tooltip content={dayjs(message.edited).format("LLLL")}> <Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" /> <Text id="app.main.channel.edited" />
</Tooltip> </Tooltip>
</span> </span>
</> </>
); );
} else { } else {
return ( return (
<> <>
<time> <time>
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format("H:mm")} {dayjs(decodeTime(message._id)).format("H:mm")}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
</> </>
); );
} }
} }
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")}>
<Text id="app.main.channel.edited" /> <Text id="app.main.channel.edited" />
</Tooltip> </Tooltip>
)} )}
</DetailBase> </DetailBase>
); );
} }

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

@ -16,8 +16,8 @@ import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { useTranslation } from "../../../lib/i18n"; import { useTranslation } from "../../../lib/i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { import {
SingletonMessageRenderer, SingletonMessageRenderer,
SMOOTH_SCROLL_ON_RECEIVE, SMOOTH_SCROLL_ON_RECEIVE,
} from "../../../lib/renderer/Singleton"; } from "../../../lib/renderer/Singleton";
import { dispatch } from "../../../redux"; import { dispatch } from "../../../redux";
@ -27,9 +27,9 @@ import { Reply } from "../../../redux/reducers/queue";
import { SoundContext } from "../../../context/Settings"; import { SoundContext } from "../../../context/Settings";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { import {
FileUploader, FileUploader,
grabFiles, grabFiles,
uploadFile, uploadFile,
} from "../../../context/revoltjs/FileUploads"; } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannelPermission } from "../../../context/revoltjs/hooks"; import { useChannelPermission } from "../../../context/revoltjs/hooks";
@ -43,454 +43,452 @@ import FilePreview from "./bars/FilePreview";
import ReplyBar from "./bars/ReplyBar"; import ReplyBar from "./bars/ReplyBar";
type Props = { type Props = {
channel: Channel; channel: Channel;
draft?: string; draft?: string;
}; };
export type UploadState = export type UploadState =
| { type: "none" } | { type: "none" }
| { type: "attached"; files: File[] } | { type: "attached"; files: File[] }
| { | {
type: "uploading"; type: "uploading";
files: File[]; files: File[];
percent: number; percent: number;
cancel: CancelTokenSource; cancel: CancelTokenSource;
} }
| { type: "sending"; files: File[] } | { type: "sending"; files: File[] }
| { type: "failed"; files: File[]; error: string }; | { type: "failed"; files: File[]; error: string };
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
padding: 0 12px; padding: 0 12px;
background: var(--message-box); background: var(--message-box);
textarea { textarea {
font-size: 0.875rem; font-size: 0.875rem;
background: transparent; background: transparent;
} }
`; `;
const Blocked = styled.div` const Blocked = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 0; padding: 14px 0;
user-select: none; user-select: none;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
svg { svg {
flex-shrink: 0; flex-shrink: 0;
margin-inline-end: 10px; margin-inline-end: 10px;
} }
`; `;
const Action = styled.div` const Action = styled.div`
display: grid; display: grid;
place-items: center; place-items: center;
`; `;
// ! FIXME: add to app config and load from app config // ! FIXME: add to app config and load from app config
export const CAN_UPLOAD_AT_ONCE = 5; export const CAN_UPLOAD_AT_ONCE = 5;
function MessageBox({ channel, draft }: Props) { function MessageBox({ channel, draft }: Props) {
const [uploadState, setUploadState] = useState<UploadState>({ const [uploadState, setUploadState] = useState<UploadState>({
type: "none", type: "none",
}); });
const [typing, setTyping] = useState<boolean | number>(false); const [typing, setTyping] = useState<boolean | number>(false);
const [replies, setReplies] = useState<Reply[]>([]); const [replies, setReplies] = useState<Reply[]>([]);
const playSound = useContext(SoundContext); const playSound = useContext(SoundContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext); const client = useContext(AppContext);
const translate = useTranslation(); const translate = useTranslation();
const permissions = useChannelPermission(channel._id); const permissions = useChannelPermission(channel._id);
if (!(permissions & ChannelPermission.SendMessage)) { if (!(permissions & ChannelPermission.SendMessage)) {
return ( return (
<Base> <Base>
<Blocked> <Blocked>
<PermissionTooltip <PermissionTooltip
permission="SendMessages" permission="SendMessages"
placement="top"> placement="top">
<ShieldX size={22} /> <ShieldX size={22} />
</PermissionTooltip> </PermissionTooltip>
<Text id="app.main.channel.misc.no_sending" /> <Text id="app.main.channel.misc.no_sending" />
</Blocked> </Blocked>
</Base> </Base>
); );
} }
function setMessage(content?: string) { function setMessage(content?: string) {
if (content) { if (content) {
dispatch({ dispatch({
type: "SET_DRAFT", type: "SET_DRAFT",
channel: channel._id, channel: channel._id,
content, content,
}); });
} else { } else {
dispatch({ dispatch({
type: "CLEAR_DRAFT", type: "CLEAR_DRAFT",
channel: channel._id, channel: channel._id,
}); });
} }
} }
useEffect(() => { useEffect(() => {
function append(content: string, action: "quote" | "mention") { function append(content: string, action: "quote" | "mention") {
const text = const text =
action === "quote" action === "quote"
? `${content ? `${content
.split("\n") .split("\n")
.map((x) => `> ${x}`) .map((x) => `> ${x}`)
.join("\n")}\n\n` .join("\n")}\n\n`
: `${content} `; : `${content} `;
if (!draft || draft.length === 0) { if (!draft || draft.length === 0) {
setMessage(text); setMessage(text);
} else { } else {
setMessage(`${draft}\n${text}`); setMessage(`${draft}\n${text}`);
} }
} }
return internalSubscribe("MessageBox", "append", append); return internalSubscribe("MessageBox", "append", append);
}, [draft]); }, [draft]);
async function send() { async function send() {
if (uploadState.type === "uploading" || uploadState.type === "sending") if (uploadState.type === "uploading" || uploadState.type === "sending")
return; return;
const content = draft?.trim() ?? ""; const content = draft?.trim() ?? "";
if (uploadState.type === "attached") return sendFile(content); if (uploadState.type === "attached") return sendFile(content);
if (content.length === 0) return; if (content.length === 0) return;
stopTyping(); stopTyping();
setMessage(); setMessage();
setReplies([]); setReplies([]);
playSound("outbound"); playSound("outbound");
const nonce = ulid(); const nonce = ulid();
dispatch({ dispatch({
type: "QUEUE_ADD", type: "QUEUE_ADD",
nonce, nonce,
channel: channel._id, channel: channel._id,
message: { message: {
_id: nonce, _id: nonce,
channel: channel._id, channel: channel._id,
author: client.user!._id, author: client.user!._id,
content, content,
replies, replies,
}, },
}); });
defer(() => defer(() =>
SingletonMessageRenderer.jumpToBottom( SingletonMessageRenderer.jumpToBottom(
channel._id, channel._id,
SMOOTH_SCROLL_ON_RECEIVE, SMOOTH_SCROLL_ON_RECEIVE,
), ),
); );
try { try {
await client.channels.sendMessage(channel._id, { await client.channels.sendMessage(channel._id, {
content, content,
nonce, nonce,
replies, replies,
}); });
} catch (error) { } catch (error) {
dispatch({ dispatch({
type: "QUEUE_FAIL", type: "QUEUE_FAIL",
error: takeError(error), error: takeError(error),
nonce, nonce,
}); });
} }
} }
async function sendFile(content: string) { async function sendFile(content: string) {
if (uploadState.type !== "attached") return; if (uploadState.type !== "attached") return;
let attachments: string[] = []; let attachments: string[] = [];
const cancel = Axios.CancelToken.source(); const cancel = Axios.CancelToken.source();
const files = uploadState.files; const files = uploadState.files;
stopTyping(); stopTyping();
setUploadState({ type: "uploading", files, percent: 0, cancel }); setUploadState({ type: "uploading", files, percent: 0, cancel });
try { try {
for (let i = 0; i < files.length && i < CAN_UPLOAD_AT_ONCE; i++) { for (let i = 0; i < files.length && i < CAN_UPLOAD_AT_ONCE; i++) {
const file = files[i]; const file = files[i];
attachments.push( attachments.push(
await uploadFile( await uploadFile(
client.configuration!.features.autumn.url, client.configuration!.features.autumn.url,
"attachments", "attachments",
file, file,
{ {
onUploadProgress: (e) => onUploadProgress: (e) =>
setUploadState({ setUploadState({
type: "uploading", type: "uploading",
files, files,
percent: Math.round( percent: Math.round(
(i * 100 + (100 * e.loaded) / e.total) / (i * 100 + (100 * e.loaded) / e.total) /
Math.min( Math.min(
files.length, files.length,
CAN_UPLOAD_AT_ONCE, CAN_UPLOAD_AT_ONCE,
), ),
), ),
cancel, cancel,
}), }),
cancelToken: cancel.token, cancelToken: cancel.token,
}, },
), ),
); );
} }
} catch (err) { } catch (err) {
if (err?.message === "cancel") { if (err?.message === "cancel") {
setUploadState({ setUploadState({
type: "attached", type: "attached",
files, files,
}); });
} else { } else {
setUploadState({ setUploadState({
type: "failed", type: "failed",
files, files,
error: takeError(err), error: takeError(err),
}); });
} }
return; return;
} }
setUploadState({ setUploadState({
type: "sending", type: "sending",
files, files,
}); });
const nonce = ulid(); const nonce = ulid();
try { try {
await client.channels.sendMessage(channel._id, { await client.channels.sendMessage(channel._id, {
content, content,
nonce, nonce,
replies, replies,
attachments, attachments,
}); });
} catch (err) { } catch (err) {
setUploadState({ setUploadState({
type: "failed", type: "failed",
files, files,
error: takeError(err), error: takeError(err),
}); });
return; return;
} }
setMessage(); setMessage();
setReplies([]); setReplies([]);
playSound("outbound"); playSound("outbound");
if (files.length > CAN_UPLOAD_AT_ONCE) { if (files.length > CAN_UPLOAD_AT_ONCE) {
setUploadState({ setUploadState({
type: "attached", type: "attached",
files: files.slice(CAN_UPLOAD_AT_ONCE), files: files.slice(CAN_UPLOAD_AT_ONCE),
}); });
} else { } else {
setUploadState({ type: "none" }); setUploadState({ type: "none" });
} }
} }
function startTyping() { function startTyping() {
if (typeof typing === "number" && +new Date() < typing) return; if (typeof typing === "number" && +new Date() < typing) return;
const ws = client.websocket; const ws = client.websocket;
if (ws.connected) { if (ws.connected) {
setTyping(+new Date() + 4000); setTyping(+new Date() + 4000);
ws.send({ ws.send({
type: "BeginTyping", type: "BeginTyping",
channel: channel._id, channel: channel._id,
}); });
} }
} }
function stopTyping(force?: boolean) { function stopTyping(force?: boolean) {
if (force || typing) { if (force || typing) {
const ws = client.websocket; const ws = client.websocket;
if (ws.connected) { if (ws.connected) {
setTyping(false); setTyping(false);
ws.send({ ws.send({
type: "EndTyping", type: "EndTyping",
channel: channel._id, channel: channel._id,
}); });
} }
} }
} }
const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [
channel._id, channel._id,
]); ]);
const { const {
onChange, onChange,
onKeyUp, onKeyUp,
onKeyDown, onKeyDown,
onFocus, onFocus,
onBlur, onBlur,
...autoCompleteProps ...autoCompleteProps
} = useAutoComplete(setMessage, { } = useAutoComplete(setMessage, {
users: { type: "channel", id: channel._id }, users: { type: "channel", id: channel._id },
channels: channels:
channel.channel_type === "TextChannel" channel.channel_type === "TextChannel"
? { server: channel.server } ? { server: channel.server }
: undefined, : undefined,
}); });
return ( return (
<> <>
<AutoComplete {...autoCompleteProps} /> <AutoComplete {...autoCompleteProps} />
<FilePreview <FilePreview
state={uploadState} state={uploadState}
addFile={() => addFile={() =>
uploadState.type === "attached" && uploadState.type === "attached" &&
grabFiles( grabFiles(
20_000_000, 20_000_000,
(files) => (files) =>
setUploadState({ setUploadState({
type: "attached", type: "attached",
files: [...uploadState.files, ...files], files: [...uploadState.files, ...files],
}), }),
() => () =>
openScreen({ id: "error", error: "FileTooLarge" }), openScreen({ id: "error", error: "FileTooLarge" }),
true, true,
) )
} }
removeFile={(index) => { removeFile={(index) => {
if (uploadState.type !== "attached") return; if (uploadState.type !== "attached") return;
if (uploadState.files.length === 1) { if (uploadState.files.length === 1) {
setUploadState({ type: "none" }); setUploadState({ type: "none" });
} else { } else {
setUploadState({ setUploadState({
type: "attached", type: "attached",
files: uploadState.files.filter( files: uploadState.files.filter(
(_, i) => index !== i, (_, i) => index !== i,
), ),
}); });
} }
}} }}
/> />
<ReplyBar <ReplyBar
channel={channel._id} channel={channel._id}
replies={replies} replies={replies}
setReplies={setReplies} setReplies={setReplies}
/> />
<Base> <Base>
{permissions & ChannelPermission.UploadFiles ? ( {permissions & ChannelPermission.UploadFiles ? (
<Action> <Action>
<FileUploader <FileUploader
size={24} size={24}
behaviour="multi" behaviour="multi"
style="attachment" style="attachment"
fileType="attachments" fileType="attachments"
maxFileSize={20_000_000} maxFileSize={20_000_000}
attached={uploadState.type !== "none"} attached={uploadState.type !== "none"}
uploading={ uploading={
uploadState.type === "uploading" || uploadState.type === "uploading" ||
uploadState.type === "sending" uploadState.type === "sending"
} }
remove={async () => remove={async () =>
setUploadState({ type: "none" }) setUploadState({ type: "none" })
} }
onChange={(files) => onChange={(files) =>
setUploadState({ type: "attached", files }) setUploadState({ type: "attached", files })
} }
cancel={() => cancel={() =>
uploadState.type === "uploading" && uploadState.type === "uploading" &&
uploadState.cancel.cancel("cancel") uploadState.cancel.cancel("cancel")
} }
append={(files) => { append={(files) => {
if (files.length === 0) return; if (files.length === 0) return;
if (uploadState.type === "none") { if (uploadState.type === "none") {
setUploadState({ type: "attached", files }); setUploadState({ type: "attached", files });
} else if (uploadState.type === "attached") { } else if (uploadState.type === "attached") {
setUploadState({ setUploadState({
type: "attached", type: "attached",
files: [...uploadState.files, ...files], files: [...uploadState.files, ...files],
}); });
} }
}} }}
/> />
</Action> </Action>
) : undefined} ) : undefined}
<TextAreaAutoSize <TextAreaAutoSize
autoFocus autoFocus
hideBorder hideBorder
maxRows={5} maxRows={5}
padding={14} padding={14}
id="message" id="message"
value={draft ?? ""} value={draft ?? ""}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
onKeyDown={(e) => { onKeyDown={(e) => {
if (onKeyDown(e)) return; if (onKeyDown(e)) return;
if ( if (
e.key === "ArrowUp" && e.key === "ArrowUp" &&
(!draft || draft.length === 0) (!draft || draft.length === 0)
) { ) {
e.preventDefault(); e.preventDefault();
internalEmit("MessageRenderer", "edit_last"); internalEmit("MessageRenderer", "edit_last");
return; return;
} }
if ( if (
!e.shiftKey && !e.shiftKey &&
e.key === "Enter" && e.key === "Enter" &&
!isTouchscreenDevice !isTouchscreenDevice
) { ) {
e.preventDefault(); e.preventDefault();
return send(); return send();
} }
debouncedStopTyping(true); debouncedStopTyping(true);
}} }}
placeholder={ placeholder={
channel.channel_type === "DirectMessage" channel.channel_type === "DirectMessage"
? translate("app.main.channel.message_who", { ? translate("app.main.channel.message_who", {
person: client.users.get( person: client.users.get(
client.channels.getRecipient( client.channels.getRecipient(channel._id),
channel._id, )?.username,
), })
)?.username, : channel.channel_type === "SavedMessages"
}) ? translate("app.main.channel.message_saved")
: channel.channel_type === "SavedMessages" : translate("app.main.channel.message_where", {
? translate("app.main.channel.message_saved") channel_name: channel.name,
: translate("app.main.channel.message_where", { })
channel_name: channel.name, }
}) disabled={
} uploadState.type === "uploading" ||
disabled={ uploadState.type === "sending"
uploadState.type === "uploading" || }
uploadState.type === "sending" onChange={(e) => {
} setMessage(e.currentTarget.value);
onChange={(e) => { startTyping();
setMessage(e.currentTarget.value); onChange(e);
startTyping(); }}
onChange(e); onFocus={onFocus}
}} onBlur={onBlur}
onFocus={onFocus} />
onBlur={onBlur} {isTouchscreenDevice && (
/> <Action>
{isTouchscreenDevice && ( <IconButton onClick={send}>
<Action> <Send size={20} />
<IconButton onClick={send}> </IconButton>
<Send size={20} /> </Action>
</IconButton> )}
</Action> </Base>
)} </>
</Base> );
</>
);
} }
export default connectState<Omit<Props, "dispatch" | "draft">>( export default connectState<Omit<Props, "dispatch" | "draft">>(
MessageBox, MessageBox,
(state, { channel }) => { (state, { channel }) => {
return { return {
draft: state.drafts[channel._id], draft: state.drafts[channel._id],
}; };
}, },
true, true,
); );

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

@ -12,149 +12,149 @@ import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase"; import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
const SystemContent = styled.div` const SystemContent = styled.div`
gap: 4px; gap: 4px;
display: flex; display: flex;
padding: 2px 0; padding: 2px 0;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
`; `;
type SystemMessageParsed = type SystemMessageParsed =
| { type: "text"; content: string } | { type: "text"; content: string }
| { type: "user_added"; user: User; by: User } | { type: "user_added"; user: User; by: User }
| { type: "user_remove"; user: User; by: User } | { type: "user_remove"; user: User; by: User }
| { type: "user_joined"; user: User } | { type: "user_joined"; user: User }
| { type: "user_left"; user: User } | { type: "user_left"; user: User }
| { type: "user_kicked"; user: User } | { type: "user_kicked"; user: User }
| { type: "user_banned"; user: User } | { type: "user_banned"; user: User }
| { type: "channel_renamed"; name: string; by: User } | { type: "channel_renamed"; name: string; by: User }
| { type: "channel_description_changed"; by: User } | { type: "channel_description_changed"; by: User }
| { type: "channel_icon_changed"; by: User }; | { type: "channel_icon_changed"; by: User };
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: MessageObject;
} }
export function SystemMessage({ attachContext, message }: Props) { export function SystemMessage({ attachContext, message }: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
let data: SystemMessageParsed; let data: SystemMessageParsed;
let content = message.content; let content = message.content;
if (typeof content === "object") { if (typeof content === "object") {
switch (content.type) { switch (content.type) {
case "text": case "text":
data = content; data = content;
break; break;
case "user_added": case "user_added":
case "user_remove": case "user_remove":
data = { data = {
type: content.type, type: content.type,
user: useUser(content.id, ctx) as User, user: useUser(content.id, ctx) as User,
by: useUser(content.by, ctx) as User, by: useUser(content.by, ctx) as User,
}; };
break; break;
case "user_joined": case "user_joined":
case "user_left": case "user_left":
case "user_kicked": case "user_kicked":
case "user_banned": case "user_banned":
data = { data = {
type: content.type, type: content.type,
user: useUser(content.id, ctx) as User, user: useUser(content.id, ctx) as User,
}; };
break; break;
case "channel_renamed": case "channel_renamed":
data = { data = {
type: "channel_renamed", type: "channel_renamed",
name: content.name, name: content.name,
by: useUser(content.by, ctx) as User, by: useUser(content.by, ctx) as User,
}; };
break; break;
case "channel_description_changed": case "channel_description_changed":
case "channel_icon_changed": case "channel_icon_changed":
data = { data = {
type: content.type, type: content.type,
by: useUser(content.by, ctx) as User, by: useUser(content.by, ctx) as User,
}; };
break; break;
default: default:
data = { type: "text", content: JSON.stringify(content) }; data = { type: "text", content: JSON.stringify(content) };
} }
} else { } else {
data = { type: "text", content }; data = { type: "text", content };
} }
let children; let children;
switch (data.type) { switch (data.type) {
case "text": case "text":
children = <span>{data.content}</span>; children = <span>{data.content}</span>;
break; break;
case "user_added": case "user_added":
case "user_remove": case "user_remove":
children = ( children = (
<TextReact <TextReact
id={`app.main.channel.system.${ id={`app.main.channel.system.${
data.type === "user_added" ? "added_by" : "removed_by" data.type === "user_added" ? "added_by" : "removed_by"
}`} }`}
fields={{ fields={{
user: <UserShort user={data.user} />, user: <UserShort user={data.user} />,
other_user: <UserShort user={data.by} />, other_user: <UserShort user={data.by} />,
}} }}
/> />
); );
break; break;
case "user_joined": case "user_joined":
case "user_left": case "user_left":
case "user_kicked": case "user_kicked":
case "user_banned": case "user_banned":
children = ( children = (
<TextReact <TextReact
id={`app.main.channel.system.${data.type}`} id={`app.main.channel.system.${data.type}`}
fields={{ fields={{
user: <UserShort user={data.user} />, user: <UserShort user={data.user} />,
}} }}
/> />
); );
break; break;
case "channel_renamed": case "channel_renamed":
children = ( children = (
<TextReact <TextReact
id={`app.main.channel.system.channel_renamed`} id={`app.main.channel.system.channel_renamed`}
fields={{ fields={{
user: <UserShort user={data.by} />, user: <UserShort user={data.by} />,
name: <b>{data.name}</b>, name: <b>{data.name}</b>,
}} }}
/> />
); );
break; break;
case "channel_description_changed": case "channel_description_changed":
case "channel_icon_changed": case "channel_icon_changed":
children = ( children = (
<TextReact <TextReact
id={`app.main.channel.system.${data.type}`} id={`app.main.channel.system.${data.type}`}
fields={{ fields={{
user: <UserShort user={data.by} />, user: <UserShort user={data.by} />,
}} }}
/> />
); );
break; break;
} }
return ( return (
<MessageBase <MessageBase
onContextMenu={ onContextMenu={
attachContext attachContext
? attachContextMenu("Menu", { ? attachContextMenu("Menu", {
message, message,
contextualChannel: message.channel, contextualChannel: message.channel,
}) })
: undefined : undefined
}> }>
<MessageInfo> <MessageInfo>
<MessageDetail message={message} position="left" /> <MessageDetail message={message} position="left" />
</MessageInfo> </MessageInfo>
<SystemContent>{children}</SystemContent> <SystemContent>{children}</SystemContent>
</MessageBase> </MessageBase>
); );
} }

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

@ -13,121 +13,121 @@ import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile"; import TextFile from "./TextFile";
interface Props { interface Props {
attachment: AttachmentRJS; attachment: AttachmentRJS;
hasContent: boolean; hasContent: boolean;
} }
const MAX_ATTACHMENT_WIDTH = 480; const MAX_ATTACHMENT_WIDTH = 480;
export default function Attachment({ attachment, hasContent }: Props) { export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const url = client.generateFileURL( const url = client.generateFileURL(
attachment, attachment,
{ width: MAX_ATTACHMENT_WIDTH * 1.5 }, { width: MAX_ATTACHMENT_WIDTH * 1.5 },
true, true,
); );
switch (metadata.type) { switch (metadata.type) {
case "Image": { case "Image": {
return ( return (
<div <div
className={styles.container} className={styles.container}
onClick={() => spoiler && setSpoiler(false)}> onClick={() => spoiler && setSpoiler(false)}>
{spoiler && ( {spoiler && (
<div className={styles.overflow}> <div className={styles.overflow}>
<span> <span>
<Text id="app.main.channel.misc.spoiler_attachment" /> <Text id="app.main.channel.misc.spoiler_attachment" />
</span> </span>
</div> </div>
)} )}
<img <img
src={url} src={url}
alt={filename} alt={filename}
width={metadata.width} width={metadata.width}
height={metadata.height} height={metadata.height}
data-spoiler={spoiler} data-spoiler={spoiler}
data-has-content={hasContent} data-has-content={hasContent}
className={classNames( className={classNames(
styles.attachment, styles.attachment,
styles.image, styles.image,
loaded && styles.loaded, loaded && styles.loaded,
)} )}
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoad={() => setLoaded(true)} onLoad={() => setLoaded(true)}
/> />
</div> </div>
); );
} }
case "Audio": { case "Audio": {
return ( return (
<div <div
className={classNames(styles.attachment, styles.audio)} className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}> data-has-content={hasContent}>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
<audio src={url} controls /> <audio src={url} controls />
</div> </div>
); );
} }
case "Video": { case "Video": {
return ( return (
<div <div
className={styles.container} className={styles.container}
onClick={() => spoiler && setSpoiler(false)}> onClick={() => spoiler && setSpoiler(false)}>
{spoiler && ( {spoiler && (
<div className={styles.overflow}> <div className={styles.overflow}>
<span> <span>
<Text id="app.main.channel.misc.spoiler_attachment" /> <Text id="app.main.channel.misc.spoiler_attachment" />
</span> </span>
</div> </div>
)} )}
<div <div
data-spoiler={spoiler} data-spoiler={spoiler}
data-has-content={hasContent} data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}> className={classNames(styles.attachment, styles.video)}>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
<video <video
src={url} src={url}
width={metadata.width} width={metadata.width}
height={metadata.height} height={metadata.height}
className={classNames(loaded && styles.loaded)} className={classNames(loaded && styles.loaded)}
controls controls
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoadedMetadata={() => setLoaded(true)} onLoadedMetadata={() => setLoaded(true)}
/> />
</div> </div>
</div> </div>
); );
} }
case "Text": { case "Text": {
return ( return (
<div <div
className={classNames(styles.attachment, styles.text)} className={classNames(styles.attachment, styles.text)}
data-has-content={hasContent}> data-has-content={hasContent}>
<TextFile attachment={attachment} /> <TextFile attachment={attachment} />
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</div> </div>
); );
} }
default: { default: {
return ( return (
<div <div
className={classNames(styles.attachment, styles.file)} className={classNames(styles.attachment, styles.file)}
data-has-content={hasContent}> data-has-content={hasContent}>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</div> </div>
); );
} }
} }
} }

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

@ -1,9 +1,9 @@
import { import {
Download, Download,
LinkExternal, LinkExternal,
File, File,
Headphone, Headphone,
Video, Video,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt.js/dist/api/objects";
@ -18,98 +18,98 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import IconButton from "../../../ui/IconButton"; import IconButton from "../../../ui/IconButton";
interface Props { interface Props {
attachment: Attachment; attachment: Attachment;
} }
export default function AttachmentActions({ attachment }: Props) { export default function AttachmentActions({ attachment }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { filename, metadata, size } = attachment; const { filename, metadata, size } = attachment;
const url = client.generateFileURL(attachment)!; const url = client.generateFileURL(attachment)!;
const open_url = `${url}/${filename}`; const open_url = `${url}/${filename}`;
const download_url = url.replace("attachments", "attachments/download"); const download_url = url.replace("attachments", "attachments/download");
const filesize = determineFileSize(size); const filesize = determineFileSize(size);
switch (metadata.type) { switch (metadata.type) {
case "Image": case "Image":
return ( return (
<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}>
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
); );
case "Audio": case "Audio":
return ( return (
<div className={classNames(styles.actions, styles.audioAction)}> <div className={classNames(styles.actions, styles.audioAction)}>
<Headphone size={24} className={styles.iconType} /> <Headphone size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span> <span className={styles.filesize}>{filesize}</span>
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
); );
case "Video": case "Video":
return ( return (
<div className={classNames(styles.actions, styles.videoAction)}> <div className={classNames(styles.actions, styles.videoAction)}>
<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">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
); );
default: default:
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<File size={24} className={styles.iconType} /> <File size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span> <span className={styles.filesize}>{filesize}</span>
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
); );
} }
} }

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

@ -11,83 +11,83 @@ import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
interface Props { interface Props {
channel: string; channel: string;
index: number; index: number;
id: string; id: string;
} }
export const ReplyBase = styled.div<{ export const ReplyBase = styled.div<{
head?: boolean; head?: boolean;
fail?: boolean; fail?: boolean;
preview?: boolean; preview?: boolean;
}>` }>`
gap: 4px; gap: 4px;
display: flex; display: flex;
font-size: 0.8em; font-size: 0.8em;
margin-left: 30px; margin-left: 30px;
user-select: none; user-select: none;
margin-bottom: 4px; margin-bottom: 4px;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
svg:first-child { svg:first-child {
flex-shrink: 0; flex-shrink: 0;
transform: scaleX(-1); transform: scaleX(-1);
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
${(props) =>
props.fail &&
css`
color: var(--tertiary-foreground);
`}
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) => ${(props) =>
props.preview && props.fail &&
css` css`
margin-left: 0; color: var(--tertiary-foreground);
`} `}
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) =>
props.preview &&
css`
margin-left: 0;
`}
`; `;
export function MessageReply({ index, channel, id }: Props) { 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 = view.messages.find((x) => x._id === id); const message = view.messages.find((x) => x._id === id);
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
<Reply size={16} /> <Reply size={16} />
<span> <span>
<Text id="app.main.channel.misc.failed_load" /> <Text id="app.main.channel.misc.failed_load" />
</span> </span>
</ReplyBase> </ReplyBase>
); );
} }
const user = useUser(message.author); const user = useUser(message.author);
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} /> <Reply size={16} />
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
{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, " ")}
/> />
</ReplyBase> </ReplyBase>
); );
} }

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

@ -6,67 +6,67 @@ import { useContext, useEffect, useState } from "preact/hooks";
import RequiresOnline from "../../../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
import { import {
AppContext, AppContext,
StatusContext, StatusContext,
} from "../../../../context/revoltjs/RevoltClient"; } from "../../../../context/revoltjs/RevoltClient";
import Preloader from "../../../ui/Preloader"; import Preloader from "../../../ui/Preloader";
interface Props { interface Props {
attachment: Attachment; attachment: Attachment;
} }
const fileCache: { [key: string]: string } = {}; const fileCache: { [key: string]: string } = {};
export default function TextFile({ attachment }: Props) { export default function TextFile({ attachment }: Props) {
const [content, setContent] = useState<undefined | string>(undefined); const [content, setContent] = useState<undefined | string>(undefined);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const status = useContext(StatusContext); const status = useContext(StatusContext);
const client = useContext(AppContext); const client = useContext(AppContext);
const url = client.generateFileURL(attachment)!; const url = client.generateFileURL(attachment)!;
useEffect(() => { useEffect(() => {
if (typeof content !== "undefined") return; if (typeof content !== "undefined") return;
if (loading) return; if (loading) return;
setLoading(true); setLoading(true);
let cached = fileCache[attachment._id]; let cached = fileCache[attachment._id];
if (cached) { if (cached) {
setContent(cached); setContent(cached);
setLoading(false); setLoading(false);
} else { } else {
axios axios
.get(url) .get(url)
.then((res) => { .then((res) => {
setContent(res.data); setContent(res.data);
fileCache[attachment._id] = res.data; fileCache[attachment._id] = res.data;
setLoading(false); setLoading(false);
}) })
.catch(() => { .catch(() => {
console.error( console.error(
"Failed to load text file. [", "Failed to load text file. [",
attachment._id, attachment._id,
"]", "]",
); );
setLoading(false); setLoading(false);
}); });
} }
}, [content, loading, status]); }, [content, loading, status]);
return ( return (
<div <div
className={styles.textContent} className={styles.textContent}
data-loading={typeof content === "undefined"}> data-loading={typeof content === "undefined"}>
{content ? ( {content ? (
<pre> <pre>
<code>{content}</code> <code>{content}</code>
</pre> </pre>
) : ( ) : (
<RequiresOnline> <RequiresOnline>
<Preloader type="ring" /> <Preloader type="ring" />
</RequiresOnline> </RequiresOnline>
)} )}
</div> </div>
); );
} }

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

@ -9,225 +9,225 @@ import { determineFileSize } from "../../../../lib/fileSize";
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox"; import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
interface Props { interface Props {
state: UploadState; state: UploadState;
addFile: () => void; addFile: () => void;
removeFile: (index: number) => void; removeFile: (index: number) => void;
} }
const Container = styled.div` const Container = styled.div`
gap: 4px; gap: 4px;
padding: 8px; padding: 8px;
display: flex; display: flex;
user-select: none; user-select: none;
flex-direction: column; flex-direction: column;
background: var(--message-box); background: var(--message-box);
`; `;
const Carousel = styled.div` const Carousel = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
overflow-x: scroll; overflow-x: scroll;
flex-direction: row; flex-direction: row;
`; `;
const Entry = styled.div` const Entry = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.fade { &.fade {
opacity: 0.4; opacity: 0.4;
} }
span.fn { span.fn {
margin: auto; margin: auto;
font-size: 0.8em; font-size: 0.8em;
overflow: hidden; overflow: hidden;
max-width: 180px; max-width: 180px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--secondary-foreground); color: var(--secondary-foreground);
} }
span.size { span.size {
font-size: 0.6em; font-size: 0.6em;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
text-align: center; text-align: center;
} }
`; `;
const Description = styled.div` const Description = styled.div`
gap: 4px; gap: 4px;
display: flex; display: flex;
font-size: 0.9em; font-size: 0.9em;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
`; `;
const Divider = styled.div` const Divider = styled.div`
width: 4px; width: 4px;
height: 130px; height: 130px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: 4px;
background: var(--tertiary-background); background: var(--tertiary-background);
`; `;
const EmptyEntry = styled.div` const EmptyEntry = styled.div`
width: 100px; width: 100px;
height: 100px; height: 100px;
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
place-items: center; place-items: center;
background: var(--primary-background); background: var(--primary-background);
transition: 0.1s ease background-color; transition: 0.1s ease background-color;
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }
`; `;
const PreviewBox = styled.div` const PreviewBox = styled.div`
display: grid; display: grid;
grid-template: "main" 100px / minmax(100px, 1fr); grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center; justify-items: center;
background: var(--primary-background); background: var(--primary-background);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
.icon, .icon,
.overlay { .overlay {
grid-area: main; grid-area: main;
} }
.icon { .icon {
height: 100px; height: 100px;
width: 100%; width: 100%;
margin-bottom: 4px; margin-bottom: 4px;
object-fit: contain; object-fit: contain;
} }
.overlay { .overlay {
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: 0.1s ease opacity; transition: 0.1s ease opacity;
} }
&:hover { &:hover {
.overlay { .overlay {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
} }
} }
`; `;
function FileEntry({ function FileEntry({
file, file,
remove, remove,
index, index,
}: { }: {
file: File; file: File;
remove?: () => void; remove?: () => void;
index: number; index: number;
}) { }) {
if (!file.type.startsWith("image/")) if (!file.type.startsWith("image/"))
return ( return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}> <PreviewBox onClick={remove}>
<EmptyEntry className="icon"> <EmptyEntry className="icon">
<File size={36} /> <File size={36} />
</EmptyEntry> </EmptyEntry>
<div class="overlay"> <div class="overlay">
<XCircle size={36} /> <XCircle size={36} />
</div> </div>
</PreviewBox> </PreviewBox>
<span class="fn">{file.name}</span> <span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span> <span class="size">{determineFileSize(file.size)}</span>
</Entry> </Entry>
); );
const [url, setURL] = useState(""); const [url, setURL] = useState("");
useEffect(() => { useEffect(() => {
let url: string = URL.createObjectURL(file); let url: string = URL.createObjectURL(file);
setURL(url); setURL(url);
return () => URL.revokeObjectURL(url); return () => URL.revokeObjectURL(url);
}, [file]); }, [file]);
return ( return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}> <PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} /> <img class="icon" src={url} alt={file.name} />
<div class="overlay"> <div class="overlay">
<XCircle size={36} /> <XCircle size={36} />
</div> </div>
</PreviewBox> </PreviewBox>
<span class="fn">{file.name}</span> <span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span> <span class="size">{determineFileSize(file.size)}</span>
</Entry> </Entry>
); );
} }
export default function FilePreview({ state, addFile, removeFile }: Props) { export default function FilePreview({ state, addFile, removeFile }: Props) {
if (state.type === "none") return null; if (state.type === "none") return null;
return ( return (
<Container> <Container>
<Carousel> <Carousel>
{state.files.map((file, index) => ( {state.files.map((file, index) => (
<> <>
{index === CAN_UPLOAD_AT_ONCE && <Divider />} {index === CAN_UPLOAD_AT_ONCE && <Divider />}
<FileEntry <FileEntry
index={index} index={index}
file={file} file={file}
key={file.name} key={file.name}
remove={ remove={
state.type === "attached" state.type === "attached"
? () => removeFile(index) ? () => removeFile(index)
: undefined : undefined
} }
/> />
</> </>
))} ))}
{state.type === "attached" && ( {state.type === "attached" && (
<EmptyEntry onClick={addFile}> <EmptyEntry onClick={addFile}>
<Plus size={48} /> <Plus size={48} />
</EmptyEntry> </EmptyEntry>
)} )}
</Carousel> </Carousel>
{state.type === "uploading" && ( {state.type === "uploading" && (
<Description> <Description>
<Share size={24} /> <Share size={24} />
<Text id="app.main.channel.uploading_file" /> ( <Text id="app.main.channel.uploading_file" /> (
{state.percent}%) {state.percent}%)
</Description> </Description>
)} )}
{state.type === "sending" && ( {state.type === "sending" && (
<Description> <Description>
<Share size={24} /> <Share size={24} />
Sending... Sending...
</Description> </Description>
)} )}
{state.type === "failed" && ( {state.type === "failed" && (
<Description> <Description>
<X size={24} /> <X size={24} />
<Text id={`error.${state.error}`} /> <Text id={`error.${state.error}`} />
</Description> </Description>
)} )}
</Container> </Container>
); );
} }

92
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -4,61 +4,61 @@ import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { import {
SingletonMessageRenderer, SingletonMessageRenderer,
useRenderState, useRenderState,
} from "../../../../lib/renderer/Singleton"; } from "../../../../lib/renderer/Singleton";
const Bar = styled.div` const Bar = styled.div`
z-index: 10; z-index: 10;
position: relative; position: relative;
> div { > div {
top: -26px; top: -26px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 4px 8px; padding: 4px 8px;
user-select: none; user-select: none;
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
justify-content: space-between; justify-content: space-between;
transition: color ease-in-out 0.08s; transition: color ease-in-out 0.08s;
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
&:hover { &:hover {
color: var(--primary-text); color: var(--primary-text);
} }
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
} }
`; `;
export default function JumpToBottom({ id }: { id: string }) { export default function JumpToBottom({ id }: { id: string }) {
const view = useRenderState(id); const view = useRenderState(id);
if (!view || view.type !== "RENDER" || view.atBottom) return null; if (!view || view.type !== "RENDER" || view.atBottom) return null;
return ( return (
<Bar> <Bar>
<div <div
onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}> onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
<div> <div>
<Text id="app.main.channel.misc.viewing_old" /> <Text id="app.main.channel.misc.viewing_old" />
</div> </div>
<div> <div>
<Text id="app.main.channel.misc.jump_present" />{" "} <Text id="app.main.channel.misc.jump_present" />{" "}
<DownArrow size={18} /> <DownArrow size={18} />
</div> </div>
</div> </div>
</Bar> </Bar>
); );
} }

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

@ -1,8 +1,8 @@
import { import {
At, At,
Reply as ReplyIcon, Reply as ReplyIcon,
File, File,
XCircle, XCircle,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
@ -23,119 +23,119 @@ import UserShort from "../../user/UserShort";
import { ReplyBase } from "../attachments/MessageReply"; import { ReplyBase } from "../attachments/MessageReply";
interface Props { interface Props {
channel: string; channel: string;
replies: Reply[]; replies: Reply[];
setReplies: StateUpdater<Reply[]>; setReplies: StateUpdater<Reply[]>;
} }
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
padding: 0 22px; padding: 0 22px;
user-select: none; user-select: none;
align-items: center; align-items: center;
background: var(--message-box); background: var(--message-box);
div { div {
flex-grow: 1; flex-grow: 1;
} }
.actions { .actions {
gap: 12px; gap: 12px;
display: flex; display: flex;
} }
.toggle { .toggle {
gap: 4px; gap: 4px;
display: flex; display: flex;
font-size: 0.7em; font-size: 0.7em;
align-items: center; align-items: center;
} }
`; `;
// ! FIXME: Move to global config // ! FIXME: Move to global config
const MAX_REPLIES = 5; const MAX_REPLIES = 5;
export default function ReplyBar({ channel, replies, setReplies }: Props) { export default function ReplyBar({ channel, replies, setReplies }: Props) {
useEffect(() => { useEffect(() => {
return internalSubscribe( return internalSubscribe(
"ReplyBar", "ReplyBar",
"add", "add",
(id) => (id) =>
replies.length < MAX_REPLIES && replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) && !replies.find((x) => x.id === id) &&
setReplies([...replies, { id, mention: false }]), setReplies([...replies, { id, mention: false }]),
); );
}, [replies]); }, [replies]);
const view = useRenderState(channel); const view = useRenderState(channel);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id); const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id)); const messages = view.messages.filter((x) => ids.includes(x._id));
const users = useUsers(messages.map((x) => x.author)); const users = useUsers(messages.map((x) => x.author));
return ( return (
<div> <div>
{replies.map((reply, index) => { {replies.map((reply, index) => {
let message = messages.find((x) => reply.id === x._id); let 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
// -> which then fetches any unknown messages // -> which then fetches any unknown messages
if (!message) if (!message)
return ( return (
<span> <span>
<Text id="app.main.channel.misc.failed_load" /> <Text id="app.main.channel.misc.failed_load" />
</span> </span>
); );
let user = users.find((x) => message!.author === x?._id); let user = users.find((x) => message!.author === x?._id);
if (!user) return; if (!user) return;
return ( return (
<Base key={reply.id}> <Base key={reply.id}>
<ReplyBase preview> <ReplyBase preview>
<ReplyIcon size={22} /> <ReplyIcon size={22} />
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
{message.attachments && {message.attachments &&
message.attachments.length > 0 && ( message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace( content={(message.content as string).replace(
/\n/g, /\n/g,
" ", " ",
)} )}
/> />
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton
onClick={() => onClick={() =>
setReplies( setReplies(
replies.map((_, i) => replies.map((_, i) =>
i === index i === index
? { ..._, mention: !_.mention } ? { ..._, mention: !_.mention }
: _, : _,
), ),
) )
}> }>
<span class="toggle"> <span class="toggle">
<At size={16} />{" "} <At size={16} />{" "}
{reply.mention ? "ON" : "OFF"} {reply.mention ? "ON" : "OFF"}
</span> </span>
</IconButton> </IconButton>
<IconButton <IconButton
onClick={() => onClick={() =>
setReplies( setReplies(
replies.filter((_, i) => i !== index), replies.filter((_, i) => i !== index),
) )
}> }>
<XCircle size={16} /> <XCircle size={16} />
</IconButton> </IconButton>
</span> </span>
</Base> </Base>
); );
})} })}
</div> </div>
); );
} }

176
src/components/common/messaging/bars/TypingIndicator.tsx
View file

@ -11,111 +11,111 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { useUsers } from "../../../../context/revoltjs/hooks"; import { useUsers } from "../../../../context/revoltjs/hooks";
interface Props { interface Props {
typing?: TypingUser[]; typing?: TypingUser[];
} }
const Base = styled.div` const Base = styled.div`
position: relative; position: relative;
> div { > div {
height: 24px; height: 24px;
margin-top: -24px; margin-top: -24px;
position: absolute; position: absolute;
gap: 8px; gap: 8px;
display: flex; display: flex;
padding: 0 10px; padding: 0 10px;
user-select: none; user-select: none;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
width: calc(100% - 3px); width: calc(100% - 3px);
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
} }
.avatars { .avatars {
display: flex; display: flex;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
object-fit: cover; object-fit: cover;
border-radius: 50%; border-radius: 50%;
&:not(:first-child) { &:not(:first-child) {
margin-left: -4px; margin-left: -4px;
} }
} }
} }
.usernames { .usernames {
min-width: 0; min-width: 0;
font-size: 13px; font-size: 13px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
`; `;
export function TypingIndicator({ typing }: Props) { export function TypingIndicator({ typing }: Props) {
if (typing && typing.length > 0) { if (typing && typing.length > 0) {
const client = useContext(AppContext); const client = useContext(AppContext);
const users = useUsers(typing.map((x) => x.id)).filter( const users = useUsers(typing.map((x) => x.id)).filter(
(x) => typeof x !== "undefined", (x) => typeof x !== "undefined",
) as User[]; ) as User[];
users.sort((a, b) => users.sort((a, b) =>
a._id.toUpperCase().localeCompare(b._id.toUpperCase()), a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
); );
let text; let text;
if (users.length >= 5) { if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />; text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) { } else if (users.length > 1) {
const usersCopy = [...users]; const usersCopy = [...users];
text = ( text = (
<Text <Text
id="app.main.channel.typing.multiple" id="app.main.channel.typing.multiple"
fields={{ fields={{
user: usersCopy.pop()?.username, user: usersCopy.pop()?.username,
userlist: usersCopy.map((x) => x.username).join(", "), userlist: usersCopy.map((x) => x.username).join(", "),
}} }}
/> />
); );
} else { } else {
text = ( text = (
<Text <Text
id="app.main.channel.typing.single" id="app.main.channel.typing.single"
fields={{ user: users[0].username }} fields={{ user: users[0].username }}
/> />
); );
} }
return ( return (
<Base> <Base>
<div> <div>
<div className="avatars"> <div className="avatars">
{users.map((user) => ( {users.map((user) => (
<img <img
src={client.users.getAvatarURL( src={client.users.getAvatarURL(
user._id, user._id,
{ max_side: 256 }, { max_side: 256 },
true, true,
)} )}
/> />
))} ))}
</div> </div>
<div className="usernames">{text}</div> <div className="usernames">{text}</div>
</div> </div>
</Base> </Base>
); );
} }
return null; return null;
} }
export default connectState<{ id: string }>(TypingIndicator, (state, props) => { export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
return { return {
typing: state.typing && state.typing[props.id], typing: state.typing && state.typing[props.id],
}; };
}); });

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

@ -10,7 +10,7 @@ import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/Me
import EmbedMedia from "./EmbedMedia"; import EmbedMedia from "./EmbedMedia";
interface Props { interface Props {
embed: EmbedRJS; embed: EmbedRJS;
} }
const MAX_EMBED_WIDTH = 480; const MAX_EMBED_WIDTH = 480;
@ -19,149 +19,149 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150; const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) { export default function Embed({ embed }: Props) {
// ! FIXME: temp code // ! 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();
const maxWidth = Math.min( const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING, useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH, MAX_EMBED_WIDTH,
); );
function calculateSize( function calculateSize(
w: number, w: number,
h: number, h: number,
): { width: number; height: number } { ): { width: number; height: number } {
let limitingWidth = Math.min(maxWidth, w); let limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h); let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH. // Calculate smallest possible WxH.
let width = Math.min(limitingWidth, limitingHeight * (w / h)); let width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(limitingHeight, limitingWidth * (h / w)); let height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height }; return { width, height };
} }
switch (embed.type) { switch (embed.type) {
case "Website": { case "Website": {
// Determine special embed size. // Determine special embed size.
let mw, mh; let mw, mh;
let largeMedia = let 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) {
case "YouTube": case "YouTube":
case "Bandcamp": { case "Bandcamp": {
mw = embed.video?.width ?? 1280; mw = embed.video?.width ?? 1280;
mh = embed.video?.height ?? 720; mh = embed.video?.height ?? 720;
break; break;
} }
case "Twitch": { case "Twitch": {
mw = 1280; mw = 1280;
mh = 720; mh = 720;
break; break;
} }
default: { default: {
if (embed.image?.size === "Preview") { if (embed.image?.size === "Preview") {
mw = MAX_EMBED_WIDTH; mw = MAX_EMBED_WIDTH;
mh = Math.min( mh = Math.min(
embed.image.height ?? 0, embed.image.height ?? 0,
MAX_PREVIEW_SIZE, MAX_PREVIEW_SIZE,
); );
} else { } else {
mw = embed.image?.width ?? MAX_EMBED_WIDTH; mw = embed.image?.width ?? MAX_EMBED_WIDTH;
mh = embed.image?.height ?? 0; mh = embed.image?.height ?? 0;
} }
} }
} }
let { width, height } = calculateSize(mw, mh); let { width, height } = calculateSize(mw, mh);
return ( return (
<div <div
className={classNames(styles.embed, styles.website)} className={classNames(styles.embed, styles.website)}
style={{ style={{
borderInlineStartColor: borderInlineStartColor:
embed.color ?? "var(--tertiary-background)", embed.color ?? "var(--tertiary-background)",
width: width + CONTAINER_PADDING, width: width + CONTAINER_PADDING,
}}> }}>
<div> <div>
{embed.site_name && ( {embed.site_name && (
<div className={styles.siteinfo}> <div className={styles.siteinfo}>
{embed.icon_url && ( {embed.icon_url && (
<img <img
className={styles.favicon} className={styles.favicon}
src={proxyImage(embed.icon_url)} src={proxyImage(embed.icon_url)}
draggable={false} draggable={false}
onError={(e) => onError={(e) =>
(e.currentTarget.style.display = (e.currentTarget.style.display =
"none") "none")
} }
/> />
)} )}
<div className={styles.site}> <div className={styles.site}>
{embed.site_name}{" "} {embed.site_name}{" "}
</div> </div>
</div> </div>
)} )}
{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/} {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
{embed.title && ( {embed.title && (
<span> <span>
<a <a
href={embed.url} href={embed.url}
target={"_blank"} target={"_blank"}
className={styles.title}> className={styles.title}>
{embed.title} {embed.title}
</a> </a>
</span> </span>
)} )}
{embed.description && ( {embed.description && (
<div className={styles.description}> <div className={styles.description}>
{embed.description} {embed.description}
</div> </div>
)} )}
{largeMedia && ( {largeMedia && (
<EmbedMedia embed={embed} height={height} /> <EmbedMedia embed={embed} height={height} />
)} )}
</div> </div>
{!largeMedia && ( {!largeMedia && (
<div> <div>
<EmbedMedia <EmbedMedia
embed={embed} embed={embed}
width={ width={
height * height *
((embed.image?.width ?? 0) / ((embed.image?.width ?? 0) /
(embed.image?.height ?? 0)) (embed.image?.height ?? 0))
} }
height={height} height={height}
/> />
</div> </div>
)} )}
</div> </div>
); );
} }
case "Image": { case "Image": {
return ( return (
<img <img
className={classNames(styles.embed, styles.image)} className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)} style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)} src={proxyImage(embed.url)}
type="text/html" type="text/html"
frameBorder="0" frameBorder="0"
onClick={() => openScreen({ id: "image_viewer", embed })} onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank") ev.button === 1 && window.open(embed.url, "_blank")
} }
/> />
); );
} }
default: default:
return null; return null;
} }
} }

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

@ -5,96 +5,96 @@ import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
interface Props { interface Props {
embed: Embed; embed: Embed;
width?: number; width?: number;
height: number; height: number;
} }
export default function EmbedMedia({ embed, width, height }: Props) { 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;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
switch (embed.special?.type) { switch (embed.special?.type) {
case "YouTube": case "YouTube":
return ( return (
<iframe <iframe
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`} src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen allowFullScreen
style={{ height }} style={{ height }}
/> />
); );
case "Twitch": case "Twitch":
return ( return (
<iframe <iframe
src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${ src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
embed.special.id embed.special.id
}&parent=${window.location.hostname}&autoplay=false`} }&parent=${window.location.hostname}&autoplay=false`}
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
scrolling="no" scrolling="no"
style={{ height }} style={{ height }}
/> />
); );
case "Spotify": case "Spotify":
return ( return (
<iframe <iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`} src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
allowTransparency allowTransparency
style={{ height }} style={{ height }}
/> />
); );
case "Soundcloud": case "Soundcloud":
return ( return (
<iframe <iframe
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent( src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
embed.url!, embed.url!,
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`} )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0" frameBorder="0"
scrolling="no" scrolling="no"
style={{ height }} style={{ height }}
/> />
); );
case "Bandcamp": { case "Bandcamp": {
return ( return (
<iframe <iframe
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${ src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
embed.special.id embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`} }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless seamless
style={{ height }} style={{ height }}
/> />
); );
} }
default: { default: {
if (embed.image) { if (embed.image) {
let url = embed.image.url; let url = embed.image.url;
return ( return (
<img <img
className={styles.image} className={styles.image}
src={proxyImage(url)} src={proxyImage(url)}
style={{ width, height }} style={{ width, height }}
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "image_viewer", id: "image_viewer",
embed: embed.image, embed: embed.image,
}) })
} }
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
/> />
); );
} }
} }
} }
return null; return null;
} }

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

@ -6,25 +6,25 @@ import styles from "./Embed.module.scss";
import IconButton from "../../../ui/IconButton"; import IconButton from "../../../ui/IconButton";
interface Props { interface Props {
embed: EmbedImage; embed: EmbedImage;
} }
export default function EmbedMediaActions({ embed }: Props) { export default function EmbedMediaActions({ embed }: Props) {
const filename = embed.url.split("/").pop(); const filename = embed.url.split("/").pop();
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<div className={styles.info}> <div className={styles.info}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{embed.width + "x" + embed.height} {embed.width + "x" + embed.height}
</span> </span>
</div> </div>
<a href={embed.url} target="_blank"> <a href={embed.url} target="_blank">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
); );
} }

12
src/components/common/user/UserCheckbox.tsx
View file

@ -7,10 +7,10 @@ import UserIcon from "./UserIcon";
type UserProps = Omit<CheckboxProps, "children"> & { user: User }; type UserProps = Omit<CheckboxProps, "children"> & { user: User };
export default function UserCheckbox({ user, ...props }: UserProps) { export default function UserCheckbox({ user, ...props }: UserProps) {
return ( return (
<Checkbox {...props}> <Checkbox {...props}>
<UserIcon target={user} size={32} /> <UserIcon target={user} size={32} />
{user.username} {user.username}
</Checkbox> </Checkbox>
); );
} }

104
src/components/common/user/UserHeader.tsx
View file

@ -19,66 +19,66 @@ import UserIcon from "./UserIcon";
import UserStatus from "./UserStatus"; import UserStatus from "./UserStatus";
const HeaderBase = styled.div` const HeaderBase = styled.div`
gap: 0; gap: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
* { * {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.username { .username {
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.status { .status {
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
margin-top: -2px; margin-top: -2px;
} }
`; `;
interface Props { interface Props {
user: User; user: User;
} }
export default function UserHeader({ user }: Props) { export default function UserHeader({ user }: Props) {
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
return ( return (
<Header borders placement="secondary"> <Header borders placement="secondary">
<HeaderBase> <HeaderBase>
<Localizer> <Localizer>
<Tooltip content={<Text id="app.special.copy_username" />}> <Tooltip content={<Text id="app.special.copy_username" />}>
<span <span
className="username" className="username"
onClick={() => writeClipboard(user.username)}> onClick={() => writeClipboard(user.username)}>
@{user.username} @{user.username}
</span> </span>
</Tooltip> </Tooltip>
</Localizer> </Localizer>
<span <span
className="status" className="status"
onClick={() => openContextMenu("Status")}> onClick={() => openContextMenu("Status")}>
<UserStatus user={user} /> <UserStatus user={user} />
</span> </span>
</HeaderBase> </HeaderBase>
{!isTouchscreenDevice && ( {!isTouchscreenDevice && (
<div className="actions"> <div className="actions">
<Link to="/settings"> <Link to="/settings">
<IconButton> <IconButton>
<Cog size={24} /> <Cog size={24} />
</IconButton> </IconButton>
</Link> </Link>
</div> </div>
)} )}
</Header> </Header>
); );
} }

144
src/components/common/user/UserIcon.tsx
View file

@ -13,92 +13,92 @@ import fallback from "../assets/user.png";
type VoiceStatus = "muted"; type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> { interface Props extends IconBaseProps<User> {
mask?: string; mask?: string;
status?: boolean; status?: boolean;
voice?: VoiceStatus; voice?: VoiceStatus;
} }
export function useStatusColour(user?: User) { export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
return user?.online && user?.status?.presence !== Users.Presence.Invisible return user?.online && user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle ? user?.status?.presence === Users.Presence.Idle
? theme["status-away"] ? theme["status-away"]
: user?.status?.presence === Users.Presence.Busy : user?.status?.presence === Users.Presence.Busy
? theme["status-busy"] ? theme["status-busy"]
: theme["status-online"] : theme["status-online"]
: theme["status-invisible"]; : theme["status-invisible"];
} }
const VoiceIndicator = styled.div<{ status: VoiceStatus }>` const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
svg { svg {
stroke: white; stroke: white;
} }
${(props) => ${(props) =>
props.status === "muted" && props.status === "muted" &&
css` css`
background: var(--error); background: var(--error);
`} `}
`; `;
export default function UserIcon( export default function UserIcon(
props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>, props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
) { ) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { const {
target, target,
attachment, attachment,
size, size,
voice, voice,
status, status,
animate, animate,
mask, mask,
children, children,
as, as,
...svgProps ...svgProps
} = props; } = props;
const iconURL = const iconURL =
client.generateFileURL( client.generateFileURL(
target?.avatar ?? attachment, target?.avatar ?? attachment,
{ max_side: 256 }, { max_side: 256 },
animate, animate,
) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback); ) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
return ( return (
<IconBase <IconBase
{...svgProps} {...svgProps}
width={size} width={size}
height={size} height={size}
aria-hidden="true" aria-hidden="true"
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={mask ?? (status ? "url(#user)" : undefined)}> mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} />} {<img src={iconURL} draggable={false} />}
</foreignObject> </foreignObject>
{props.status && ( {props.status && (
<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} /> <circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
)} )}
{props.voice && ( {props.voice && (
<foreignObject x="22" y="22" width="10" height="10"> <foreignObject x="22" y="22" width="10" height="10">
<VoiceIndicator status={props.voice}> <VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicrophoneOff size={6} />} {props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator> </VoiceIndicator>
</foreignObject> </foreignObject>
)} )}
</IconBase> </IconBase>
); );
} }

34
src/components/common/user/UserShort.tsx
View file

@ -5,27 +5,27 @@ import { Text } from "preact-i18n";
import UserIcon from "./UserIcon"; import UserIcon from "./UserIcon";
export function Username({ export function Username({
user, user,
...otherProps ...otherProps
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) { }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
return ( return (
<span {...otherProps}> <span {...otherProps}>
{user?.username ?? <Text id="app.main.channel.unknown_user" />} {user?.username ?? <Text id="app.main.channel.unknown_user" />}
</span> </span>
); );
} }
export default function UserShort({ export default function UserShort({
user, user,
size, size,
}: { }: {
user?: User; user?: User;
size?: number; size?: number;
}) { }) {
return ( return (
<> <>
<UserIcon size={size ?? 24} target={user} /> <UserIcon size={size ?? 24} target={user} />
<Username user={user} /> <Username user={user} />
</> </>
); );
} }

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

@ -4,29 +4,29 @@ import { Users } from "revolt.js/dist/api/objects";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
interface Props { interface Props {
user: User; user: User;
} }
export default function UserStatus({ user }: Props) { export default function UserStatus({ user }: Props) {
if (user.online) { if (user.online) {
if (user.status?.text) { if (user.status?.text) {
return <>{user.status?.text}</>; return <>{user.status?.text}</>;
} }
if (user.status?.presence === Users.Presence.Busy) { if (user.status?.presence === Users.Presence.Busy) {
return <Text id="app.status.busy" />; return <Text id="app.status.busy" />;
} }
if (user.status?.presence === Users.Presence.Idle) { if (user.status?.presence === Users.Presence.Idle) {
return <Text id="app.status.idle" />; return <Text id="app.status.idle" />;
} }
if (user.status?.presence === Users.Presence.Invisible) { if (user.status?.presence === Users.Presence.Invisible) {
return <Text id="app.status.offline" />; return <Text id="app.status.offline" />;
} }
return <Text id="app.status.online" />; return <Text id="app.status.online" />;
} }
return <Text id="app.status.offline" />; return <Text id="app.status.offline" />;
} }

16
src/components/markdown/Markdown.tsx
View file

@ -3,15 +3,15 @@ import { Suspense, lazy } from "preact/compat";
const Renderer = lazy(() => import("./Renderer")); const Renderer = lazy(() => import("./Renderer"));
export interface MarkdownProps { export interface MarkdownProps {
content?: string; content?: string;
disallowBigEmoji?: boolean; disallowBigEmoji?: boolean;
} }
export default function Markdown(props: MarkdownProps) { export default function Markdown(props: MarkdownProps) {
return ( return (
// @ts-expect-error // @ts-expect-error
<Suspense fallback={props.content}> <Suspense fallback={props.content}>
<Renderer {...props} /> <Renderer {...props} />
</Suspense> </Suspense>
); );
} }

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

@ -26,167 +26,167 @@ import { MarkdownProps } from "./Markdown";
// TODO: global.d.ts file for defining globals // TODO: global.d.ts file for defining globals
declare global { declare global {
interface Window { interface Window {
copycode: (element: HTMLDivElement) => void; copycode: (element: HTMLDivElement) => void;
} }
} }
// Handler for code block copy. // Handler for code block copy.
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]; let code = element.parentElement?.parentElement?.children[1];
if (code) { if (code) {
navigator.clipboard.writeText(code.textContent?.trim() ?? ""); navigator.clipboard.writeText(code.textContent?.trim() ?? "");
} }
} catch (e) {} } catch (e) {}
}; };
} }
export const md: MarkdownIt = MarkdownIt({ export const md: MarkdownIt = MarkdownIt({
breaks: true, breaks: true,
linkify: true, linkify: true,
highlight: (str, lang) => { highlight: (str, lang) => {
let v = Prism.languages[lang]; let v = Prism.languages[lang];
if (v) { if (v) {
let out = Prism.highlight(str, v, lang); let out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`; return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
} }
return `<pre class="code"><code>${md.utils.escapeHtml( return `<pre class="code"><code>${md.utils.escapeHtml(
str, str,
)}</code></pre>`; )}</code></pre>`;
}, },
}) })
.disable("image") .disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary }) .use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers) .use(MarkdownSpoilers)
.use(MarkdownSup) .use(MarkdownSup)
.use(MarkdownSub) .use(MarkdownSub)
.use(MarkdownKatex, { .use(MarkdownKatex, {
throwOnError: false, throwOnError: false,
maxExpand: 0, maxExpand: 0,
}); });
// ? Force links to open _blank. // ? Force links to open _blank.
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer // From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender = const defaultRender =
md.renderer.rules.link_open || md.renderer.rules.link_open ||
function (tokens, idx, options, _env, self) { function (tokens, idx, options, _env, self) {
return self.renderToken(tokens, idx, options); return self.renderToken(tokens, idx, options);
}; };
// TODO: global.d.ts file for defining globals // TODO: global.d.ts file for defining globals
declare global { declare global {
interface Window { interface Window {
internalHandleURL: (element: HTMLAnchorElement) => void; internalHandleURL: (element: HTMLAnchorElement) => void;
} }
} }
// Handler for internal links, pushes events to React using magic. // Handler for internal links, pushes events to React using magic.
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.internalHandleURL = function (element: HTMLAnchorElement) { window.internalHandleURL = function (element: HTMLAnchorElement) {
const url = new URL(element.href, location.href); const url = new URL(element.href, location.href);
const pathname = url.pathname; const pathname = url.pathname;
if (pathname.startsWith("/@")) { if (pathname.startsWith("/@")) {
internalEmit("Intermediate", "openProfile", pathname.substr(2)); internalEmit("Intermediate", "openProfile", pathname.substr(2));
} else { } else {
internalEmit("Intermediate", "navigate", pathname); internalEmit("Intermediate", "navigate", pathname);
} }
}; };
} }
md.renderer.rules.link_open = function (tokens, idx, options, env, self) { md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
let internal; let internal;
const hIndex = tokens[idx].attrIndex("href"); const hIndex = tokens[idx].attrIndex("href");
if (hIndex >= 0) { if (hIndex >= 0) {
try { try {
// For internal links, we should use our own handler to use react-router history. // For internal links, we should use our own handler to use react-router history.
// @ts-ignore // @ts-ignore
const href = tokens[idx].attrs[hIndex][1]; const href = tokens[idx].attrs[hIndex][1];
const url = new URL(href, location.href); const url = new URL(href, location.href);
if (url.hostname === location.hostname) { if (url.hostname === location.hostname) {
internal = true; internal = true;
// I'm sorry. // I'm sorry.
tokens[idx].attrPush([ tokens[idx].attrPush([
"onclick", "onclick",
"internalHandleURL(this); return false", "internalHandleURL(this); return false",
]); ]);
if (url.pathname.startsWith("/@")) { if (url.pathname.startsWith("/@")) {
tokens[idx].attrPush(["data-type", "mention"]); tokens[idx].attrPush(["data-type", "mention"]);
} }
} }
} catch (err) { } catch (err) {
// Ignore the error, treat as normal link. // Ignore the error, treat as normal link.
} }
} }
if (!internal) { if (!internal) {
// Add target=_blank for external links. // Add target=_blank for external links.
const aIndex = tokens[idx].attrIndex("target"); const aIndex = tokens[idx].attrIndex("target");
if (aIndex < 0) { if (aIndex < 0) {
tokens[idx].attrPush(["target", "_blank"]); tokens[idx].attrPush(["target", "_blank"]);
} else { } else {
try { try {
// @ts-ignore // @ts-ignore
tokens[idx].attrs[aIndex][1] = "_blank"; tokens[idx].attrs[aIndex][1] = "_blank";
} catch (_) {} } catch (_) {}
} }
} }
return defaultRender(tokens, idx, options, env, self); return defaultRender(tokens, idx, options, env, self);
}; };
md.renderer.rules.emoji = function (token, idx) { md.renderer.rules.emoji = function (token, idx) {
return generateEmoji(token[idx].content); return generateEmoji(token[idx].content);
}; };
const RE_TWEMOJI = /:(\w+):/g; const RE_TWEMOJI = /:(\w+):/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext); const client = useContext(AppContext);
if (typeof content === "undefined") return null; if (typeof content === "undefined") return null;
if (content.length === 0) return null; if (content.length === 0) return null;
// 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( let newContent = content.replace(
RE_MENTIONS, RE_MENTIONS,
(sub: string, ...args: any[]) => { (sub: string, ...args: any[]) => {
const id = args[0], const id = args[0],
user = client.users.get(id); user = client.users.get(id);
if (user) { if (user) {
return `[@${user.username}](/@${id})`; return `[@${user.username}](/@${id})`;
} }
return sub; return sub;
}, },
); );
const useLargeEmojis = disallowBigEmoji const useLargeEmojis = disallowBigEmoji
? false ? false
: content.replace(RE_TWEMOJI, "").trim().length === 0; : content.replace(RE_TWEMOJI, "").trim().length === 0;
return ( return (
<span <span
className={styles.markdown} className={styles.markdown}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: md.render(newContent), __html: md.render(newContent),
}} }}
data-large-emojis={useLargeEmojis} data-large-emojis={useLargeEmojis}
onClick={(ev) => { onClick={(ev) => {
if (ev.target) { if (ev.target) {
let element = ev.currentTarget; let element = ev.currentTarget;
if (element.classList.contains("spoiler")) { if (element.classList.contains("spoiler")) {
element.classList.add("shown"); element.classList.add("shown");
} }
} }
}} }}
/> />
); );
} }

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

@ -13,84 +13,84 @@ import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
const NavigationBase = styled.div` const NavigationBase = styled.div`
z-index: 100; z-index: 100;
height: 50px; height: 50px;
display: flex; display: flex;
background: var(--secondary-background); background: var(--secondary-background);
`; `;
const Button = styled.a<{ active: boolean }>` const Button = styled.a<{ active: boolean }>`
flex: 1; flex: 1;
> a, > a,
> div, > div,
> a > div { > a > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
${(props) => ${(props) =>
props.active && props.active &&
css` css`
background: var(--hover); background: var(--hover);
`} `}
`; `;
interface Props { interface Props {
lastOpened: LastOpened; lastOpened: LastOpened;
} }
export function BottomNavigation({ lastOpened }: Props) { export function BottomNavigation({ lastOpened }: Props) {
const user = useSelf(); const user = useSelf();
const history = useHistory(); const history = useHistory();
const path = useLocation().pathname; const path = useLocation().pathname;
const channel_id = lastOpened["home"]; const channel_id = lastOpened["home"];
const friendsActive = path.startsWith("/friends"); const friendsActive = path.startsWith("/friends");
const settingsActive = path.startsWith("/settings"); const settingsActive = path.startsWith("/settings");
const homeActive = !(friendsActive || settingsActive); const homeActive = !(friendsActive || settingsActive);
return ( return (
<NavigationBase> <NavigationBase>
<Button active={homeActive}> <Button active={homeActive}>
<IconButton <IconButton
onClick={() => { onClick={() => {
if (settingsActive) { if (settingsActive) {
if (history.length > 0) { if (history.length > 0) {
history.goBack(); history.goBack();
} }
} }
if (channel_id) { if (channel_id) {
history.push(`/channel/${channel_id}`); history.push(`/channel/${channel_id}`);
} else { } else {
history.push("/"); history.push("/");
} }
}}> }}>
<Message size={24} /> <Message size={24} />
</IconButton> </IconButton>
</Button> </Button>
<Button active={friendsActive}> <Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends"> <ConditionalLink active={friendsActive} to="/friends">
<IconButton> <IconButton>
<Group size={25} /> <Group size={25} />
</IconButton> </IconButton>
</ConditionalLink> </ConditionalLink>
</Button> </Button>
<Button active={settingsActive}> <Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings"> <ConditionalLink active={settingsActive} to="/settings">
<IconButton> <IconButton>
<UserIcon target={user} size={26} status={true} /> <UserIcon target={user} size={26} status={true} />
</IconButton> </IconButton>
</ConditionalLink> </ConditionalLink>
</Button> </Button>
</NavigationBase> </NavigationBase>
); );
} }
export default connectState(BottomNavigation, (state) => { export default connectState(BottomNavigation, (state) => {
return { return {
lastOpened: state.lastOpened, lastOpened: state.lastOpened,
}; };
}); });

46
src/components/navigation/LeftSidebar.tsx
View file

@ -6,27 +6,27 @@ import ServerListSidebar from "./left/ServerListSidebar";
import ServerSidebar from "./left/ServerSidebar"; import ServerSidebar from "./left/ServerSidebar";
export default function LeftSidebar() { export default function LeftSidebar() {
return ( return (
<SidebarBase> <SidebarBase>
<Switch> <Switch>
<Route path="/settings" /> <Route path="/settings" />
<Route path="/server/:server/channel/:channel"> <Route path="/server/:server/channel/:channel">
<ServerListSidebar /> <ServerListSidebar />
<ServerSidebar /> <ServerSidebar />
</Route> </Route>
<Route path="/server/:server"> <Route path="/server/:server">
<ServerListSidebar /> <ServerListSidebar />
<ServerSidebar /> <ServerSidebar />
</Route> </Route>
<Route path="/channel/:channel"> <Route path="/channel/:channel">
<ServerListSidebar /> <ServerListSidebar />
<HomeSidebar /> <HomeSidebar />
</Route> </Route>
<Route path="/"> <Route path="/">
<ServerListSidebar /> <ServerListSidebar />
<HomeSidebar /> <HomeSidebar />
</Route> </Route>
</Switch> </Switch>
</SidebarBase> </SidebarBase>
); );
} }

24
src/components/navigation/RightSidebar.tsx
View file

@ -4,16 +4,16 @@ import SidebarBase from "./SidebarBase";
import MemberSidebar from "./right/MemberSidebar"; import MemberSidebar from "./right/MemberSidebar";
export default function RightSidebar() { export default function RightSidebar() {
return ( return (
<SidebarBase> <SidebarBase>
<Switch> <Switch>
<Route path="/server/:server/channel/:channel"> <Route path="/server/:server/channel/:channel">
<MemberSidebar /> <MemberSidebar />
</Route> </Route>
<Route path="/channel/:channel"> <Route path="/channel/:channel">
<MemberSidebar /> <MemberSidebar />
</Route> </Route>
</Switch> </Switch>
</SidebarBase> </SidebarBase>
); );
} }

48
src/components/navigation/SidebarBase.tsx
View file

@ -3,36 +3,36 @@ import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export default styled.div` export default styled.div`
height: 100%; height: 100%;
display: flex; display: flex;
user-select: none; user-select: none;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
`; `;
export const GenericSidebarBase = styled.div<{ padding?: boolean }>` export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
height: 100%; height: 100%;
width: 240px; width: 240px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-end-start-radius: 8px; border-end-start-radius: 8px;
${(props) => ${(props) =>
props.padding && props.padding &&
isTouchscreenDevice && isTouchscreenDevice &&
css` css`
padding-bottom: 50px; padding-bottom: 50px;
`} `}
`; `;
export const GenericSidebarList = styled.div` export const GenericSidebarList = styled.div`
padding: 6px; padding: 6px;
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
> img { > img {
width: 100%; width: 100%;
} }
`; `;

352
src/components/navigation/items/ButtonItem.tsx
View file

@ -20,204 +20,204 @@ import IconButton from "../../ui/IconButton";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
type CommonProps = Omit< type CommonProps = Omit<
JSX.HTMLAttributes<HTMLDivElement>, JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" "children" | "as"
> & { > & {
active?: boolean; active?: boolean;
alert?: "unread" | "mention"; alert?: "unread" | "mention";
alertCount?: number; alertCount?: number;
}; };
type UserProps = CommonProps & { type UserProps = CommonProps & {
user: Users.User; user: Users.User;
context?: Channels.Channel; context?: Channels.Channel;
channel?: Channels.DirectMessageChannel; channel?: Channels.DirectMessageChannel;
}; };
export function UserButton(props: UserProps) { export function UserButton(props: UserProps) {
const { active, alert, alertCount, user, context, channel, ...divProps } = const { active, alert, alertCount, user, context, channel, ...divProps } =
props; props;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
return ( return (
<div <div
{...divProps} {...divProps}
className={classNames(styles.item, styles.user)} className={classNames(styles.item, styles.user)}
data-active={active} data-active={active}
data-alert={typeof alert === "string"} data-alert={typeof alert === "string"}
data-online={ data-online={
typeof channel !== "undefined" || typeof channel !== "undefined" ||
(user.online && (user.online &&
user.status?.presence !== Users.Presence.Invisible) user.status?.presence !== Users.Presence.Invisible)
} }
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {
user: user._id, user: user._id,
channel: channel?._id, channel: channel?._id,
unread: alert, unread: alert,
contextualChannel: context?._id, contextualChannel: context?._id,
})}> })}>
<UserIcon <UserIcon
className={styles.avatar} className={styles.avatar}
target={user} target={user}
size={32} size={32}
status status
/> />
<div className={styles.name}> <div className={styles.name}>
<div>{user.username}</div> <div>{user.username}</div>
{ {
<div className={styles.subText}> <div className={styles.subText}>
{channel?.last_message && alert ? ( {channel?.last_message && alert ? (
channel.last_message.short channel.last_message.short
) : ( ) : (
<UserStatus user={user} /> <UserStatus user={user} />
)} )}
</div> </div>
} }
</div> </div>
<div className={styles.button}> <div className={styles.button}>
{context?.channel_type === "Group" && {context?.channel_type === "Group" &&
context.owner === user._id && ( context.owner === user._id && (
<Localizer> <Localizer>
<Tooltip <Tooltip
content={<Text id="app.main.groups.owner" />}> content={<Text id="app.main.groups.owner" />}>
<Crown size={20} /> <Crown size={20} />
</Tooltip> </Tooltip>
</Localizer> </Localizer>
)} )}
{alert && ( {alert && (
<div className={styles.alert} data-style={alert}> <div className={styles.alert} data-style={alert}>
{alertCount} {alertCount}
</div> </div>
)} )}
{!isTouchscreenDevice && channel && ( {!isTouchscreenDevice && channel && (
<IconButton <IconButton
className={styles.icon} className={styles.icon}
onClick={(e) => onClick={(e) =>
stopPropagation(e) && stopPropagation(e) &&
openScreen({ openScreen({
id: "special_prompt", id: "special_prompt",
type: "close_dm", type: "close_dm",
target: channel, target: channel,
}) })
}> }>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
)} )}
</div> </div>
</div> </div>
); );
} }
type ChannelProps = CommonProps & { type ChannelProps = CommonProps & {
channel: Channels.Channel & { unread?: string }; channel: Channels.Channel & { unread?: string };
user?: Users.User; user?: Users.User;
compact?: boolean; compact?: boolean;
}; };
export function ChannelButton(props: ChannelProps) { export function ChannelButton(props: ChannelProps) {
const { active, alert, alertCount, channel, user, compact, ...divProps } = const { active, alert, alertCount, channel, user, compact, ...divProps } =
props; props;
if (channel.channel_type === "SavedMessages") throw "Invalid channel type."; if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
if (channel.channel_type === "DirectMessage") { if (channel.channel_type === "DirectMessage") {
if (typeof user === "undefined") throw "No user provided."; if (typeof user === "undefined") throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />; return <UserButton {...{ active, alert, channel, user }} />;
} }
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
return ( return (
<div <div
{...divProps} {...divProps}
data-active={active} data-active={active}
data-alert={typeof alert === "string"} data-alert={typeof alert === "string"}
aria-label={{}} /*FIXME: ADD ARIA LABEL*/ aria-label={{}} /*FIXME: ADD ARIA LABEL*/
className={classNames(styles.item, { [styles.compact]: compact })} className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {
channel: channel._id, channel: channel._id,
unread: typeof channel.unread !== "undefined", unread: typeof channel.unread !== "undefined",
})}> })}>
<ChannelIcon <ChannelIcon
className={styles.avatar} className={styles.avatar}
target={channel} target={channel}
size={compact ? 24 : 32} size={compact ? 24 : 32}
/> />
<div className={styles.name}> <div className={styles.name}>
<div>{channel.name}</div> <div>{channel.name}</div>
{channel.channel_type === "Group" && ( {channel.channel_type === "Group" && (
<div className={styles.subText}> <div className={styles.subText}>
{channel.last_message && alert ? ( {channel.last_message && alert ? (
channel.last_message.short channel.last_message.short
) : ( ) : (
<Text <Text
id="quantities.members" id="quantities.members"
plural={channel.recipients.length} plural={channel.recipients.length}
fields={{ count: channel.recipients.length }} fields={{ count: channel.recipients.length }}
/> />
)} )}
</div> </div>
)} )}
</div> </div>
<div className={styles.button}> <div className={styles.button}>
{alert && ( {alert && (
<div className={styles.alert} data-style={alert}> <div className={styles.alert} data-style={alert}>
{alertCount} {alertCount}
</div> </div>
)} )}
{!isTouchscreenDevice && channel.channel_type === "Group" && ( {!isTouchscreenDevice && channel.channel_type === "Group" && (
<IconButton <IconButton
className={styles.icon} className={styles.icon}
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "special_prompt", id: "special_prompt",
type: "leave_group", type: "leave_group",
target: channel, target: channel,
}) })
}> }>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
)} )}
</div> </div>
</div> </div>
); );
} }
type ButtonProps = CommonProps & { type ButtonProps = CommonProps & {
onClick?: () => void; onClick?: () => void;
children?: Children; children?: Children;
className?: string; className?: string;
compact?: boolean; compact?: boolean;
}; };
export default function ButtonItem(props: ButtonProps) { export default function ButtonItem(props: ButtonProps) {
const { const {
active, active,
alert, alert,
alertCount, alertCount,
onClick, onClick,
className, className,
children, children,
compact, compact,
...divProps ...divProps
} = props; } = props;
return ( return (
<div <div
{...divProps} {...divProps}
className={classNames( className={classNames(
styles.item, styles.item,
{ [styles.compact]: compact, [styles.normal]: !compact }, { [styles.compact]: compact, [styles.normal]: !compact },
className, className,
)} )}
onClick={onClick} onClick={onClick}
data-active={active} data-active={active}
data-alert={typeof alert === "string"}> data-alert={typeof alert === "string"}>
<div className={styles.content}>{children}</div> <div className={styles.content}>{children}</div>
{alert && ( {alert && (
<div className={styles.alert} data-style={alert}> <div className={styles.alert} data-style={alert}>
{alertCount} {alertCount}
</div> </div>
)} )}
</div> </div>
); );
} }

58
src/components/navigation/items/ConnectionStatus.tsx
View file

@ -2,39 +2,39 @@ import { Text } from "preact-i18n";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { import {
ClientStatus, ClientStatus,
StatusContext, StatusContext,
} from "../../../context/revoltjs/RevoltClient"; } from "../../../context/revoltjs/RevoltClient";
import Banner from "../../ui/Banner"; import Banner from "../../ui/Banner";
export default function ConnectionStatus() { export default function ConnectionStatus() {
const status = useContext(StatusContext); const status = useContext(StatusContext);
if (status === ClientStatus.OFFLINE) { if (status === ClientStatus.OFFLINE) {
return ( return (
<Banner> <Banner>
<Text id="app.special.status.offline" /> <Text id="app.special.status.offline" />
</Banner> </Banner>
); );
} else if (status === ClientStatus.DISCONNECTED) { } else if (status === ClientStatus.DISCONNECTED) {
return ( return (
<Banner> <Banner>
<Text id="app.special.status.disconnected" /> <Text id="app.special.status.disconnected" />
</Banner> </Banner>
); );
} else if (status === ClientStatus.CONNECTING) { } else if (status === ClientStatus.CONNECTING) {
return ( return (
<Banner> <Banner>
<Text id="app.special.status.connecting" /> <Text id="app.special.status.connecting" />
</Banner> </Banner>
); );
} else if (status === ClientStatus.RECONNECTING) { } else if (status === ClientStatus.RECONNECTING) {
return ( return (
<Banner> <Banner>
<Text id="app.special.status.reconnecting" /> <Text id="app.special.status.reconnecting" />
</Banner> </Banner>
); );
} }
return null; return null;
} }

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

@ -1,8 +1,8 @@
import { import {
Home, Home,
UserDetail, UserDetail,
Wrench, Wrench,
Notepad, Notepad,
} from "@styled-icons/boxicons-solid"; } from "@styled-icons/boxicons-solid";
import { Link, Redirect, useLocation, useParams } from "react-router-dom"; import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { Channels } from "revolt.js/dist/api/objects"; import { Channels } from "revolt.js/dist/api/objects";
@ -22,9 +22,9 @@ import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { import {
useDMs, useDMs,
useForceUpdate, useForceUpdate,
useUsers, useUsers,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import UserHeader from "../../common/user/UserHeader"; import UserHeader from "../../common/user/UserHeader";
@ -37,157 +37,157 @@ import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus"; import ConnectionStatus from "../items/ConnectionStatus";
type Props = { type Props = {
unreads: Unreads; unreads: Unreads;
}; };
function HomeSidebar(props: Props) { function HomeSidebar(props: Props) {
const { pathname } = useLocation(); const { pathname } = useLocation();
const client = useContext(AppContext); const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>(); const { channel } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const channels = useDMs(ctx); const channels = useDMs(ctx);
const obj = channels.find((x) => x?._id === channel); const obj = channels.find((x) => x?._id === channel);
if (channel && !obj) return <Redirect to="/" />; if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj }); if (obj) useUnreads({ ...props, channel: obj });
useEffect(() => { useEffect(() => {
if (!channel) return; if (!channel) return;
dispatch({ dispatch({
type: "LAST_OPENED_SET", type: "LAST_OPENED_SET",
parent: "home", parent: "home",
child: channel, child: channel,
}); });
}, [channel]); }, [channel]);
const channelsArr = channels const channelsArr = channels
.filter((x) => x.channel_type !== "SavedMessages") .filter((x) => x.channel_type !== "SavedMessages")
.map((x) => mapChannelWithUnread(x, props.unreads)); .map((x) => mapChannelWithUnread(x, props.unreads));
const users = useUsers( const users = useUsers(
( (
channelsArr as ( channelsArr as (
| Channels.DirectMessageChannel | Channels.DirectMessageChannel
| Channels.GroupChannel | Channels.GroupChannel
)[] )[]
).reduce((prev: any, cur) => [...prev, ...cur.recipients], []), ).reduce((prev: any, cur) => [...prev, ...cur.recipients], []),
ctx, ctx,
); );
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp)); channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return ( return (
<GenericSidebarBase padding> <GenericSidebarBase padding>
<UserHeader user={client.user!} /> <UserHeader user={client.user!} />
<ConnectionStatus /> <ConnectionStatus />
<GenericSidebarList> <GenericSidebarList>
{!isTouchscreenDevice && ( {!isTouchscreenDevice && (
<> <>
<ConditionalLink active={pathname === "/"} to="/"> <ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}> <ButtonItem active={pathname === "/"}>
<Home size={20} /> <Home size={20} />
<span> <span>
<Text id="app.navigation.tabs.home" /> <Text id="app.navigation.tabs.home" />
</span> </span>
</ButtonItem> </ButtonItem>
</ConditionalLink> </ConditionalLink>
<ConditionalLink <ConditionalLink
active={pathname === "/friends"} active={pathname === "/friends"}
to="/friends"> to="/friends">
<ButtonItem <ButtonItem
active={pathname === "/friends"} active={pathname === "/friends"}
alert={ alert={
typeof users.find( typeof users.find(
(user) => (user) =>
user?.relationship === user?.relationship ===
UsersNS.Relationship.Incoming, UsersNS.Relationship.Incoming,
) !== "undefined" ) !== "undefined"
? "unread" ? "unread"
: undefined : undefined
}> }>
<UserDetail size={20} /> <UserDetail size={20} />
<span> <span>
<Text id="app.navigation.tabs.friends" /> <Text id="app.navigation.tabs.friends" />
</span> </span>
</ButtonItem> </ButtonItem>
</ConditionalLink> </ConditionalLink>
</> </>
)} )}
<ConditionalLink <ConditionalLink
active={obj?.channel_type === "SavedMessages"} active={obj?.channel_type === "SavedMessages"}
to="/open/saved"> to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}> <ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Notepad size={20} /> <Notepad size={20} />
<span> <span>
<Text id="app.navigation.tabs.saved" /> <Text id="app.navigation.tabs.saved" />
</span> </span>
</ButtonItem> </ButtonItem>
</ConditionalLink> </ConditionalLink>
{import.meta.env.DEV && ( {import.meta.env.DEV && (
<Link to="/dev"> <Link to="/dev">
<ButtonItem active={pathname === "/dev"}> <ButtonItem active={pathname === "/dev"}>
<Wrench size={20} /> <Wrench size={20} />
<span> <span>
<Text id="app.navigation.tabs.dev" /> <Text id="app.navigation.tabs.dev" />
</span> </span>
</ButtonItem> </ButtonItem>
</Link> </Link>
)} )}
<Category <Category
text={<Text id="app.main.categories.conversations" />} text={<Text id="app.main.categories.conversations" />}
action={() => action={() =>
openScreen({ openScreen({
id: "special_input", id: "special_input",
type: "create_group", type: "create_group",
}) })
} }
/> />
{channelsArr.length === 0 && <img src={placeholderSVG} />} {channelsArr.length === 0 && <img src={placeholderSVG} />}
{channelsArr.map((x) => { {channelsArr.map((x) => {
let user; let user;
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); let recipient = client.channels.getRecipient(x._id);
user = users.find((x) => x?._id === recipient); user = users.find((x) => x?._id === recipient);
if (!user) { if (!user) {
console.warn( console.warn(
`Skipped DM ${x._id} because user was missing.`, `Skipped DM ${x._id} because user was missing.`,
); );
return null; return null;
} }
} }
return ( return (
<ConditionalLink <ConditionalLink
active={x._id === channel} active={x._id === channel}
to={`/channel/${x._id}`}> to={`/channel/${x._id}`}>
<ChannelButton <ChannelButton
user={user} user={user}
channel={x} channel={x}
alert={x.unread} alert={x.unread}
alertCount={x.alertCount} alertCount={x.alertCount}
active={x._id === channel} active={x._id === channel}
/> />
</ConditionalLink> </ConditionalLink>
); );
})} })}
<PaintCounter /> <PaintCounter />
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
} }
export default connectState( export default connectState(
HomeSidebar, HomeSidebar,
(state) => { (state) => {
return { return {
unreads: state.unreads, unreads: state.unreads,
}; };
}, },
true, true,
); );

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

@ -15,10 +15,10 @@ import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { import {
useChannels, useChannels,
useForceUpdate, useForceUpdate,
useSelf, useSelf,
useServers, useServers,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import ServerIcon from "../../common/ServerIcon"; import ServerIcon from "../../common/ServerIcon";
@ -31,268 +31,268 @@ import { mapChannelWithUnread } from "./common";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
function Icon({ function Icon({
children, children,
unread, unread,
size, size,
}: { }: {
children: Children; children: Children;
unread?: "mention" | "unread"; unread?: "mention" | "unread";
size: number; size: number;
}) { }) {
return ( return (
<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32"> <svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
<use href="#serverIndicator" /> <use href="#serverIndicator" />
<foreignObject <foreignObject
x="0" x="0"
y="0" y="0"
width="32" width="32"
height="32" height="32"
mask={unread ? "url(#server)" : undefined}> mask={unread ? "url(#server)" : undefined}>
{children} {children}
</foreignObject> </foreignObject>
{unread === "unread" && ( {unread === "unread" && (
<circle cx="27" cy="5" r="5" fill={"white"} /> <circle cx="27" cy="5" r="5" fill={"white"} />
)} )}
{unread === "mention" && ( {unread === "mention" && (
<circle cx="27" cy="5" r="5" fill={"red"} /> <circle cx="27" cy="5" r="5" fill={"red"} />
)} )}
</svg> </svg>
); );
} }
const ServersBase = styled.div` const ServersBase = styled.div`
width: 56px; width: 56px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
${isTouchscreenDevice && ${isTouchscreenDevice &&
css` css`
padding-bottom: 50px; padding-bottom: 50px;
`} `}
`; `;
const ServerList = styled.div` const ServerList = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 48px; padding-bottom: 48px;
flex-direction: column; flex-direction: column;
// border-right: 2px solid var(--accent); // border-right: 2px solid var(--accent);
scrollbar-width: none; scrollbar-width: none;
> :first-child > svg { > :first-child > svg {
margin: 6px 0 6px 4px; margin: 6px 0 6px 4px;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0px; width: 0px;
} }
`; `;
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
height: 58px; height: 58px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
> * { > * {
// outline: 1px solid red; // outline: 1px solid red;
} }
> div { > div {
width: 46px; width: 46px;
height: 46px; height: 46px;
display: grid; display: grid;
place-items: center; place-items: center;
border-start-start-radius: 50%; border-start-start-radius: 50%;
border-end-start-radius: 50%; border-end-start-radius: 50%;
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
${(props) => ${(props) =>
props.active && props.active &&
css` css`
background: var(--sidebar-active); background: var(--sidebar-active);
&:active { &:active {
transform: none; transform: none;
} }
`} `}
} }
span { span {
width: 6px; width: 6px;
height: 46px; height: 46px;
${(props) => ${(props) =>
props.active && props.active &&
css` css`
background-color: var(--sidebar-active); background-color: var(--sidebar-active);
&::before, &::before,
&::after { &::after {
// outline: 1px solid blue; // outline: 1px solid blue;
} }
&::before, &::before,
&::after { &::after {
content: ""; content: "";
display: block; display: block;
position: relative; position: relative;
width: 31px; width: 31px;
height: 72px; height: 72px;
margin-top: -72px; margin-top: -72px;
margin-left: -25px; margin-left: -25px;
z-index: -1; z-index: -1;
background-color: var(--background); background-color: var(--background);
border-bottom-right-radius: 32px; border-bottom-right-radius: 32px;
box-shadow: 0 32px 0 0 var(--sidebar-active); box-shadow: 0 32px 0 0 var(--sidebar-active);
} }
&::after { &::after {
transform: scaleY(-1) translateY(-118px); transform: scaleY(-1) translateY(-118px);
} }
`} `}
} }
${(props) => ${(props) =>
(!props.active || props.home) && (!props.active || props.home) &&
css` css`
cursor: pointer; cursor: pointer;
`} `}
`; `;
interface Props { interface Props {
unreads: Unreads; unreads: Unreads;
lastOpened: LastOpened; lastOpened: LastOpened;
} }
export function ServerListSidebar({ unreads, lastOpened }: Props) { export function ServerListSidebar({ unreads, lastOpened }: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const self = useSelf(ctx); const self = useSelf(ctx);
const activeServers = useServers(undefined, ctx) as Servers.Server[]; const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[]).map((x) => const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
mapChannelWithUnread(x, unreads), mapChannelWithUnread(x, unreads),
); );
const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id); const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
const servers = activeServers.map((server) => { const servers = activeServers.map((server) => {
let alertCount = 0; let alertCount = 0;
for (let id of server.channels) { for (let id of server.channels) {
let channel = channels.find((x) => x._id === id); let channel = channels.find((x) => x._id === id);
if (channel?.alertCount) { if (channel?.alertCount) {
alertCount += channel.alertCount; alertCount += channel.alertCount;
} }
} }
return { return {
...server, ...server,
unread: (typeof server.channels.find((x) => unread: (typeof server.channels.find((x) =>
unreadChannels.includes(x), unreadChannels.includes(x),
) !== "undefined" ) !== "undefined"
? alertCount > 0 ? alertCount > 0
? "mention" ? "mention"
: "unread" : "unread"
: undefined) as "mention" | "unread" | undefined, : undefined) as "mention" | "unread" | undefined,
alertCount, alertCount,
}; };
}); });
const path = useLocation().pathname; const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>(); const { server: server_id } = useParams<{ server?: string }>();
const server = servers.find((x) => x!._id == server_id); const server = servers.find((x) => x!._id == server_id);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
let homeUnread: "mention" | "unread" | undefined; let homeUnread: "mention" | "unread" | undefined;
let alertCount = 0; let alertCount = 0;
for (let x of channels) { for (let 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") &&
x.unread x.unread
) { ) {
homeUnread = "unread"; homeUnread = "unread";
alertCount += x.alertCount ?? 0; alertCount += x.alertCount ?? 0;
} }
} }
if (alertCount > 0) homeUnread = "mention"; if (alertCount > 0) homeUnread = "mention";
const homeActive = const homeActive =
typeof server === "undefined" && !path.startsWith("/invite"); typeof server === "undefined" && !path.startsWith("/invite");
return ( return (
<ServersBase> <ServersBase>
<ServerList> <ServerList>
<ConditionalLink <ConditionalLink
active={homeActive} active={homeActive}
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}> to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<ServerEntry home active={homeActive}> <ServerEntry home active={homeActive}>
<div <div
onContextMenu={attachContextMenu("Status")} onContextMenu={attachContextMenu("Status")}
onClick={() => onClick={() =>
homeActive && openContextMenu("Status") homeActive && openContextMenu("Status")
}> }>
<Icon size={42} unread={homeUnread}> <Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status /> <UserIcon target={self} size={32} status />
</Icon> </Icon>
</div> </div>
<span /> <span />
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
<LineDivider /> <LineDivider />
{servers.map((entry) => { {servers.map((entry) => {
const active = entry!._id === server?._id; const active = entry!._id === server?._id;
const id = lastOpened[entry!._id]; const id = lastOpened[entry!._id];
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", {
server: entry!._id, server: entry!._id,
})}> })}>
<Tooltip content={entry.name} placement="right"> <Tooltip content={entry.name} placement="right">
<Icon size={42} unread={entry.unread}> <Icon size={42} unread={entry.unread}>
<ServerIcon size={32} target={entry} /> <ServerIcon size={32} target={entry} />
</Icon> </Icon>
</Tooltip> </Tooltip>
<span /> <span />
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
); );
})} })}
<IconButton <IconButton
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "special_input", id: "special_input",
type: "create_server", type: "create_server",
}) })
}> }>
<Plus size={36} /> <Plus size={36} />
</IconButton> </IconButton>
<PaintCounter small /> <PaintCounter small />
</ServerList> </ServerList>
</ServersBase> </ServersBase>
); );
} }
export default connectState(ServerListSidebar, (state) => { export default connectState(ServerListSidebar, (state) => {
return { return {
unreads: state.unreads, unreads: state.unreads,
lastOpened: state.lastOpened, lastOpened: state.lastOpened,
}; };
}); });

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

@ -13,9 +13,9 @@ import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads"; import { Unreads } from "../../../redux/reducers/unreads";
import { import {
useChannels, useChannels,
useForceUpdate, useForceUpdate,
useServer, useServer,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import CollapsibleSection from "../../common/CollapsibleSection"; import CollapsibleSection from "../../common/CollapsibleSection";
@ -27,124 +27,124 @@ import { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus"; import ConnectionStatus from "../items/ConnectionStatus";
interface Props { interface Props {
unreads: Unreads; unreads: Unreads;
} }
const ServerBase = styled.div` const ServerBase = styled.div`
height: 100%; height: 100%;
width: 240px; width: 240px;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
background: var(--secondary-background); background: var(--secondary-background);
border-start-start-radius: 8px; border-start-start-radius: 8px;
border-end-start-radius: 8px; border-end-start-radius: 8px;
overflow: hidden; overflow: hidden;
`; `;
const ServerList = styled.div` const ServerList = styled.div`
padding: 6px; padding: 6px;
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
> svg { > svg {
width: 100%; width: 100%;
} }
`; `;
function ServerSidebar(props: Props) { function ServerSidebar(props: Props) {
const { server: server_id, channel: channel_id } = const { server: server_id, channel: channel_id } =
useParams<{ server?: string; channel?: string }>(); useParams<{ server?: string; channel?: string }>();
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const server = useServer(server_id, ctx); const server = useServer(server_id, ctx);
if (!server) return <Redirect to="/" />; if (!server) return <Redirect to="/" />;
const channels = ( const channels = (
useChannels(server.channels, ctx).filter( useChannels(server.channels, ctx).filter(
(entry) => typeof entry !== "undefined", (entry) => typeof entry !== "undefined",
) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[] ) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
).map((x) => mapChannelWithUnread(x, props.unreads)); ).map((x) => mapChannelWithUnread(x, props.unreads));
const channel = channels.find((x) => x?._id === channel_id); const channel = channels.find((x) => x?._id === channel_id);
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />; if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
if (channel) useUnreads({ ...props, channel }, ctx); if (channel) useUnreads({ ...props, channel }, ctx);
useEffect(() => { useEffect(() => {
if (!channel_id) return; if (!channel_id) return;
dispatch({ dispatch({
type: "LAST_OPENED_SET", type: "LAST_OPENED_SET",
parent: server_id!, parent: server_id!,
child: channel_id!, child: channel_id!,
}); });
}, [channel_id]); }, [channel_id]);
let uncategorised = new Set(server.channels); let uncategorised = new Set(server.channels);
let elements = []; let 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);
if (!entry) return; if (!entry) return;
const active = channel?._id === entry._id; const active = channel?._id === entry._id;
return ( return (
<ConditionalLink <ConditionalLink
key={entry._id} key={entry._id}
active={active} active={active}
to={`/server/${server!._id}/channel/${entry._id}`}> to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton <ChannelButton
channel={entry} channel={entry}
active={active} active={active}
alert={entry.unread} alert={entry.unread}
compact compact
/> />
</ConditionalLink> </ConditionalLink>
); );
} }
if (server.categories) { if (server.categories) {
for (let category of server.categories) { for (let category of server.categories) {
let channels = []; let channels = [];
for (let id of category.channels) { for (let id of category.channels) {
uncategorised.delete(id); uncategorised.delete(id);
channels.push(addChannel(id)); channels.push(addChannel(id));
} }
elements.push( elements.push(
<CollapsibleSection <CollapsibleSection
id={`category_${category.id}`} id={`category_${category.id}`}
defaultValue defaultValue
summary={<Category text={category.title} />}> summary={<Category text={category.title} />}>
{channels} {channels}
</CollapsibleSection>, </CollapsibleSection>,
); );
} }
} }
for (let id of Array.from(uncategorised).reverse()) { for (let id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id)); elements.unshift(addChannel(id));
} }
return ( return (
<ServerBase> <ServerBase>
<ServerHeader server={server} ctx={ctx} /> <ServerHeader server={server} ctx={ctx} />
<ConnectionStatus /> <ConnectionStatus />
<ServerList <ServerList
onContextMenu={attachContextMenu("Menu", { onContextMenu={attachContextMenu("Menu", {
server_list: server._id, server_list: server._id,
})}> })}>
{elements} {elements}
</ServerList> </ServerList>
<PaintCounter small /> <PaintCounter small />
</ServerBase> </ServerBase>
); );
} }
export default connectState(ServerSidebar, (state) => { export default connectState(ServerSidebar, (state) => {
return { return {
unreads: state.unreads, unreads: state.unreads,
}; };
}); });

156
src/components/navigation/left/common.ts
View file

@ -8,96 +8,96 @@ import { Unreads } from "../../../redux/reducers/unreads";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks"; import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = { type UnreadProps = {
channel: Channel; channel: Channel;
unreads: Unreads; unreads: Unreads;
}; };
export function useUnreads( export function useUnreads(
{ channel, unreads }: UnreadProps, { channel, unreads }: UnreadProps,
context?: HookContext, context?: HookContext,
) { ) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
useLayoutEffect(() => { useLayoutEffect(() => {
function checkUnread(target?: Channel) { function checkUnread(target?: Channel) {
if (!target) return; if (!target) return;
if (target._id !== channel._id) return; if (target._id !== channel._id) return;
if ( if (
target.channel_type === "SavedMessages" || target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel" target.channel_type === "VoiceChannel"
) )
return; return;
const unread = unreads[channel._id]?.last_id; const unread = unreads[channel._id]?.last_id;
if (target.last_message) { if (target.last_message) {
const message = const message =
typeof target.last_message === "string" typeof target.last_message === "string"
? target.last_message ? target.last_message
: target.last_message._id; : target.last_message._id;
if (!unread || (unread && message.localeCompare(unread) > 0)) { if (!unread || (unread && message.localeCompare(unread) > 0)) {
dispatch({ dispatch({
type: "UNREADS_MARK_READ", type: "UNREADS_MARK_READ",
channel: channel._id, channel: channel._id,
message, message,
}); });
ctx.client.req( ctx.client.req(
"PUT", "PUT",
`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id", `/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
); );
} }
} }
} }
checkUnread(channel); checkUnread(channel);
ctx.client.channels.addListener("mutation", checkUnread); ctx.client.channels.addListener("mutation", checkUnread);
return () => return () =>
ctx.client.channels.removeListener("mutation", checkUnread); ctx.client.channels.removeListener("mutation", checkUnread);
}, [channel, unreads]); }, [channel, unreads]);
} }
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) { export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
let last_message_id; let last_message_id;
if ( if (
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
channel.channel_type === "Group" channel.channel_type === "Group"
) { ) {
last_message_id = channel.last_message?._id; last_message_id = channel.last_message?._id;
} else if (channel.channel_type === "TextChannel") { } else if (channel.channel_type === "TextChannel") {
last_message_id = channel.last_message; last_message_id = channel.last_message;
} else { } else {
return { return {
...channel, ...channel,
unread: undefined, unread: undefined,
alertCount: undefined, alertCount: undefined,
timestamp: channel._id, timestamp: channel._id,
}; };
} }
let unread: "mention" | "unread" | undefined; let unread: "mention" | "unread" | undefined;
let alertCount: undefined | number; let alertCount: undefined | number;
if (last_message_id && unreads) { if (last_message_id && unreads) {
const u = unreads[channel._id]; const u = unreads[channel._id];
if (u) { if (u) {
if (u.mentions && u.mentions.length > 0) { if (u.mentions && u.mentions.length > 0) {
alertCount = u.mentions.length; alertCount = u.mentions.length;
unread = "mention"; unread = "mention";
} else if ( } else if (
u.last_id && u.last_id &&
last_message_id.localeCompare(u.last_id) > 0 last_message_id.localeCompare(u.last_id) > 0
) { ) {
unread = "unread"; unread = "unread";
} }
} else { } else {
unread = "unread"; unread = "unread";
} }
} }
return { return {
...channel, ...channel,
timestamp: last_message_id ?? channel._id, timestamp: last_message_id ?? channel._id,
unread, unread,
alertCount, alertCount,
}; };
} }

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

@ -1,40 +1,40 @@
import { useRenderState } from "../../../lib/renderer/Singleton"; import { useRenderState } from "../../../lib/renderer/Singleton";
interface Props { interface Props {
id: string; id: string;
} }
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); let view = useRenderState(id);
if (!view) return null; if (!view) return null;
return ( return (
<span style={{ display: "block", padding: "12px 10px 0 10px" }}> <span style={{ display: "block", padding: "12px 10px 0 10px" }}>
<span <span
style={{ style={{
display: "block", display: "block",
fontSize: "12px", fontSize: "12px",
textTransform: "uppercase", textTransform: "uppercase",
fontWeight: "600", fontWeight: "600",
}}> }}>
Channel Info Channel Info
</span> </span>
<p style={{ fontSize: "10px", userSelect: "text" }}> <p style={{ fontSize: "10px", userSelect: "text" }}>
State: <b>{view.type}</b> <br /> State: <b>{view.type}</b> <br />
{view.type === "RENDER" && view.messages.length > 0 && ( {view.type === "RENDER" && view.messages.length > 0 && (
<> <>
Start: <b>{view.messages[0]._id}</b> <br /> Start: <b>{view.messages[0]._id}</b> <br />
End:{" "} End:{" "}
<b> <b>
{view.messages[view.messages.length - 1]._id} {view.messages[view.messages.length - 1]._id}
</b>{" "} </b>{" "}
<br /> <br />
At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br /> At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b> At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
</> </>
)} )}
</p> </p>
</span> </span>
); );
} }

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

@ -8,15 +8,15 @@ import { useContext, useEffect, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { import {
AppContext, AppContext,
ClientStatus, ClientStatus,
StatusContext, StatusContext,
} from "../../../context/revoltjs/RevoltClient"; } from "../../../context/revoltjs/RevoltClient";
import { import {
HookContext, HookContext,
useChannel, useChannel,
useForceUpdate, useForceUpdate,
useUsers, useUsers,
} from "../../../context/revoltjs/hooks"; } from "../../../context/revoltjs/hooks";
import Category from "../../ui/Category"; import Category from "../../ui/Category";
@ -28,35 +28,35 @@ import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo"; import { ChannelDebugInfo } from "./ChannelDebugInfo";
interface Props { interface Props {
ctx: HookContext; ctx: HookContext;
} }
export default function MemberSidebar(props: { channel?: Channels.Channel }) { export default function MemberSidebar(props: { channel?: Channels.Channel }) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const { channel: cid } = useParams<{ channel: string }>(); const { channel: cid } = useParams<{ channel: string }>();
const channel = props.channel ?? useChannel(cid, ctx); const channel = props.channel ?? useChannel(cid, ctx);
switch (channel?.channel_type) { switch (channel?.channel_type) {
case "Group": case "Group":
return <GroupMemberSidebar channel={channel} ctx={ctx} />; return <GroupMemberSidebar channel={channel} ctx={ctx} />;
case "TextChannel": case "TextChannel":
return <ServerMemberSidebar channel={channel} ctx={ctx} />; return <ServerMemberSidebar channel={channel} ctx={ctx} />;
default: default:
return null; return null;
} }
} }
export function GroupMemberSidebar({ export function GroupMemberSidebar({
channel, channel,
ctx, ctx,
}: 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 let 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[];
/*const voice = useContext(VoiceContext); /*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id; const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = []; let voiceParticipants: User[] = [];
@ -71,32 +71,32 @@ export function GroupMemberSidebar({
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username)); voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/ }*/
members.sort((a, b) => { members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code // ! FIXME: should probably rewrite all this code
let l = let l =
+( +(
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? (a.online && a.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let r = let 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; let n = r - l;
if (n !== 0) { if (n !== 0) {
return n; return n;
} }
return a.username.localeCompare(b.username); return a.username.localeCompare(b.username);
}); });
return ( return (
<GenericSidebarBase> <GenericSidebarBase>
<GenericSidebarList> <GenericSidebarList>
<ChannelDebugInfo id={channel._id} /> <ChannelDebugInfo id={channel._id} />
{/*voiceActive && voiceParticipants.length !== 0 && ( {/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment> <Fragment>
<Category <Category
type="members" type="members"
@ -121,146 +121,146 @@ export function GroupMemberSidebar({
)} )}
</Fragment> </Fragment>
)*/} )*/}
{!((members.length === 0) /*&& voiceActive*/) && ( {!((members.length === 0) /*&& voiceActive*/) && (
<Category <Category
variant="uniform" variant="uniform"
text={ text={
<span> <span>
<Text id="app.main.categories.members" /> —{" "} <Text id="app.main.categories.members" /> —{" "}
{channel.recipients.length} {channel.recipients.length}
</span> </span>
} }
/> />
)} )}
{members.length === 0 && ( {members.length === 0 && (
/*!voiceActive &&*/ <img src={placeholderSVG} /> /*!voiceActive &&*/ <img src={placeholderSVG} />
)} )}
{members.map( {members.map(
(user) => (user) =>
user && ( user && (
<UserButton <UserButton
key={user._id} key={user._id}
user={user} user={user}
context={channel} context={channel}
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "profile", id: "profile",
user_id: user._id, user_id: user._id,
}) })
} }
/> />
), ),
)} )}
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
} }
export function ServerMemberSidebar({ export function ServerMemberSidebar({
channel, channel,
ctx, ctx,
}: Props & { channel: Channels.TextChannel }) { }: Props & { channel: Channels.TextChannel }) {
const [members, setMembers] = useState<Servers.Member[] | undefined>( const [members, setMembers] = useState<Servers.Member[] | undefined>(
undefined, undefined,
); );
const users = useUsers(members?.map((x) => x._id.user) ?? []).filter( const users = useUsers(members?.map((x) => x._id.user) ?? []).filter(
(x) => typeof x !== "undefined", (x) => typeof x !== "undefined",
ctx, ctx,
) as Users.User[]; ) as Users.User[];
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const status = useContext(StatusContext); const status = useContext(StatusContext);
const client = useContext(AppContext); const client = useContext(AppContext);
useEffect(() => { useEffect(() => {
if (status === ClientStatus.ONLINE && typeof members === "undefined") { if (status === ClientStatus.ONLINE && typeof members === "undefined") {
client.servers.members client.servers.members
.fetchMembers(channel.server) .fetchMembers(channel.server)
.then((members) => setMembers(members)); .then((members) => setMembers(members));
} }
}, [status]); }, [status]);
// ! FIXME: temporary code // ! FIXME: temporary code
useEffect(() => { useEffect(() => {
function onPacket(packet: ClientboundNotification) { function onPacket(packet: ClientboundNotification) {
if (!members) return; if (!members) return;
if (packet.type === "ServerMemberJoin") { if (packet.type === "ServerMemberJoin") {
if (packet.id !== channel.server) return; if (packet.id !== channel.server) return;
setMembers([ setMembers([
...members, ...members,
{ _id: { server: packet.id, user: packet.user } }, { _id: { server: packet.id, user: packet.user } },
]); ]);
} else if (packet.type === "ServerMemberLeave") { } else if (packet.type === "ServerMemberLeave") {
if (packet.id !== channel.server) return; if (packet.id !== channel.server) return;
setMembers( setMembers(
members.filter( members.filter(
(x) => (x) =>
!( !(
x._id.user === packet.user && x._id.user === packet.user &&
x._id.server === packet.id x._id.server === packet.id
), ),
), ),
); );
} }
} }
client.addListener("packet", onPacket); client.addListener("packet", onPacket);
return () => client.removeListener("packet", onPacket); return () => client.removeListener("packet", onPacket);
}, [members]); }, [members]);
// 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 = let l =
+( +(
(a.online && a.status?.presence !== Users.Presence.Invisible) ?? (a.online && a.status?.presence !== Users.Presence.Invisible) ??
false false
) | 0; ) | 0;
let r = let 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; let n = r - l;
if (n !== 0) { if (n !== 0) {
return n; return n;
} }
return a.username.localeCompare(b.username); return a.username.localeCompare(b.username);
}); });
return ( return (
<GenericSidebarBase> <GenericSidebarBase>
<GenericSidebarList> <GenericSidebarList>
<ChannelDebugInfo id={channel._id} /> <ChannelDebugInfo id={channel._id} />
<Category <Category
variant="uniform" variant="uniform"
text={ text={
<span> <span>
<Text id="app.main.categories.members" /> —{" "} <Text id="app.main.categories.members" /> —{" "}
{users.length} {users.length}
</span> </span>
} }
/> />
{!members && <Preloader type="ring" />} {!members && <Preloader type="ring" />}
{members && users.length === 0 && <img src={placeholderSVG} />} {members && users.length === 0 && <img src={placeholderSVG} />}
{users.map( {users.map(
(user) => (user) =>
user && ( user && (
<UserButton <UserButton
key={user._id} key={user._id}
user={user} user={user}
context={channel} context={channel}
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "profile", id: "profile",
user_id: user._id, user_id: user._id,
}) })
} }
/> />
), ),
)} )}
</GenericSidebarList> </GenericSidebarList>
</GenericSidebarBase> </GenericSidebarBase>
); );
} }

10
src/components/ui/Banner.tsx
View file

@ -1,10 +1,10 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: var(--accent); color: var(--accent);
background: var(--primary-background); background: var(--primary-background);
`; `;

102
src/components/ui/Button.tsx
View file

@ -1,71 +1,71 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
readonly contrast?: boolean; readonly contrast?: boolean;
readonly error?: boolean; readonly error?: boolean;
} }
export default styled.button<Props>` export default styled.button<Props>`
z-index: 1; z-index: 1;
padding: 8px; padding: 8px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-family: inherit; font-family: inherit;
transition: 0.2s ease opacity; transition: 0.2s ease opacity;
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
background: var(--primary-background); background: var(--primary-background);
color: var(--foreground); color: var(--foreground);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
border: none; border: none;
&:hover { &:hover {
background: var(--secondary-header); background: var(--secondary-header);
} }
&:disabled { &:disabled {
background: var(--primary-background); background: var(--primary-background);
} }
&:active { &:active {
background: var(--secondary-background); background: var(--secondary-background);
} }
${(props) => ${(props) =>
props.contrast && props.contrast &&
css` css`
padding: 4px 8px; padding: 4px 8px;
background: var(--secondary-header); background: var(--secondary-header);
&:hover { &:hover {
background: var(--primary-header); background: var(--primary-header);
} }
&:disabled { &:disabled {
background: var(--secondary-header); background: var(--secondary-header);
} }
&:active { &:active {
background: var(--secondary-background); background: var(--secondary-background);
} }
`} `}
${(props) => ${(props) =>
props.error && props.error &&
css` css`
color: white; color: white;
background: var(--error); background: var(--error);
&:hover { &:hover {
filter: brightness(1.2); filter: brightness(1.2);
background: var(--error); background: var(--error);
} }
&:disabled { &:disabled {
background: var(--error); background: var(--error);
} }
`} `}
`; `;

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

@ -4,52 +4,52 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
const CategoryBase = styled.div<Pick<Props, "variant">>` const CategoryBase = styled.div<Pick<Props, "variant">>`
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
margin-top: 4px; margin-top: 4px;
padding: 6px 0; padding: 6px 0;
margin-bottom: 4px; margin-bottom: 4px;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
svg { svg {
cursor: pointer; cursor: pointer;
} }
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
} }
${(props) => ${(props) =>
props.variant === "uniform" && props.variant === "uniform" &&
css` css`
padding-top: 6px; padding-top: 6px;
`} `}
`; `;
type Props = Omit< type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>, JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "action" "children" | "as" | "action"
> & { > & {
text: Children; text: Children;
action?: () => void; action?: () => void;
variant?: "default" | "uniform"; variant?: "default" | "uniform";
}; };
export default function Category(props: Props) { export default function Category(props: Props) {
let { text, action, ...otherProps } = props; let { text, action, ...otherProps } = props;
return ( return (
<CategoryBase {...otherProps}> <CategoryBase {...otherProps}>
{text} {text}
{action && <Plus size={16} onClick={action} />} {action && <Plus size={16} onClick={action} />}
</CategoryBase> </CategoryBase>
); );
} }

156
src/components/ui/Checkbox.tsx
View file

@ -4,105 +4,105 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
const CheckboxBase = styled.label` const CheckboxBase = styled.label`
margin-top: 20px; margin-top: 20px;
gap: 4px; gap: 4px;
z-index: 1; z-index: 1;
display: flex; display: flex;
border-radius: 4px; border-radius: 4px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
user-select: none; user-select: none;
transition: 0.2s ease all; transition: 0.2s ease all;
input { input {
display: none; display: none;
} }
&:hover { &:hover {
.check { .check {
background: var(--background); background: var(--background);
} }
} }
&[disabled] { &[disabled] {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
&:hover { &:hover {
background: unset; background: unset;
} }
} }
`; `;
const CheckboxContent = styled.span` const CheckboxContent = styled.span`
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
flex-direction: column; flex-direction: column;
`; `;
const CheckboxDescription = styled.span` const CheckboxDescription = styled.span`
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
color: var(--secondary-foreground); color: var(--secondary-foreground);
`; `;
const Checkmark = styled.div<{ checked: boolean }>` const Checkmark = styled.div<{ checked: boolean }>`
margin: 4px; margin: 4px;
width: 24px; width: 24px;
height: 24px; height: 24px;
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: 4px;
place-items: center; place-items: center;
transition: 0.2s ease all; transition: 0.2s ease all;
background: var(--secondary-background); background: var(--secondary-background);
svg { svg {
color: var(--secondary-background); color: var(--secondary-background);
} }
${(props) => ${(props) =>
props.checked && props.checked &&
css` css`
background: var(--accent) !important; background: var(--accent) !important;
`} `}
`; `;
export interface CheckboxProps { export interface CheckboxProps {
checked: boolean; checked: boolean;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
children: Children; children: Children;
description?: Children; description?: Children;
onChange: (state: boolean) => void; onChange: (state: boolean) => void;
} }
export default function Checkbox(props: CheckboxProps) { export default function Checkbox(props: CheckboxProps) {
return ( return (
<CheckboxBase disabled={props.disabled} className={props.className}> <CheckboxBase disabled={props.disabled} className={props.className}>
<CheckboxContent> <CheckboxContent>
<span>{props.children}</span> <span>{props.children}</span>
{props.description && ( {props.description && (
<CheckboxDescription> <CheckboxDescription>
{props.description} {props.description}
</CheckboxDescription> </CheckboxDescription>
)} )}
</CheckboxContent> </CheckboxContent>
<input <input
type="checkbox" type="checkbox"
checked={props.checked} checked={props.checked}
onChange={() => onChange={() =>
!props.disabled && props.onChange(!props.checked) !props.disabled && props.onChange(!props.checked)
} }
/> />
<Checkmark checked={props.checked} className="check"> <Checkmark checked={props.checked} className="check">
<Check size={20} /> <Check size={20} />
</Checkmark> </Checkmark>
</CheckboxBase> </CheckboxBase>
); );
} }

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

@ -5,123 +5,123 @@ import styled, { css } from "styled-components";
import { useRef } from "preact/hooks"; import { useRef } from "preact/hooks";
interface Props { interface Props {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
} }
const presets = [ const presets = [
[ [
"#7B68EE", "#7B68EE",
"#3498DB", "#3498DB",
"#1ABC9C", "#1ABC9C",
"#F1C40F", "#F1C40F",
"#FF7F50", "#FF7F50",
"#FD6671", "#FD6671",
"#E91E63", "#E91E63",
"#D468EE", "#D468EE",
], ],
[ [
"#594CAD", "#594CAD",
"#206694", "#206694",
"#11806A", "#11806A",
"#C27C0E", "#C27C0E",
"#CD5B45", "#CD5B45",
"#FF424F", "#FF424F",
"#AD1457", "#AD1457",
"#954AA8", "#954AA8",
], ],
]; ];
const SwatchesBase = styled.div` const SwatchesBase = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
input { input {
opacity: 0; opacity: 0;
margin-top: 44px; margin-top: 44px;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
} }
`; `;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>` const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
background-color: ${(props) => props.colour}; background-color: ${(props) => props.colour};
display: grid; display: grid;
place-items: center; place-items: center;
&:hover { &:hover {
border: 3px solid var(--foreground); border: 3px solid var(--foreground);
transition: border ease-in-out 0.07s; transition: border ease-in-out 0.07s;
} }
svg { svg {
color: white; color: white;
} }
${(props) => ${(props) =>
props.type === "small" props.type === "small"
? css` ? css`
width: 30px; width: 30px;
height: 30px; height: 30px;
svg { svg {
/*stroke-width: 2;*/ /*stroke-width: 2;*/
} }
` `
: css` : css`
width: 68px; width: 68px;
height: 68px; height: 68px;
`} `}
`; `;
const Rows = styled.div` const Rows = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> div { > div {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
`; `;
export default function ColourSwatches({ value, onChange }: Props) { export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>(); const ref = useRef<HTMLInputElement>();
return ( return (
<SwatchesBase> <SwatchesBase>
<Swatch <Swatch
colour={value} colour={value}
type="large" type="large"
onClick={() => ref.current.click()}> onClick={() => ref.current.click()}>
<Palette size={32} /> <Palette size={32} />
</Swatch> </Swatch>
<input <input
type="color" type="color"
value={value} value={value}
ref={ref} ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)} onChange={(ev) => onChange(ev.currentTarget.value)}
/> />
<Rows> <Rows>
{presets.map((row, i) => ( {presets.map((row, i) => (
<div key={i}> <div key={i}>
{row.map((swatch, i) => ( {row.map((swatch, i) => (
<Swatch <Swatch
colour={swatch} colour={swatch}
type="small" type="small"
key={i} key={i}
onClick={() => onChange(swatch)}> onClick={() => onChange(swatch)}>
{swatch === value && <Check size={18} />} {swatch === value && <Check size={18} />}
</Swatch> </Swatch>
))} ))}
</div> </div>
))} ))}
</Rows> </Rows>
</SwatchesBase> </SwatchesBase>
); );
} }

30
src/components/ui/ComboBox.tsx
View file

@ -1,20 +1,20 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.select` export default styled.select`
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: 6px;
font-family: inherit; font-family: inherit;
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
font-size: 0.875rem; font-size: 0.875rem;
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
&:focus { &:focus {
box-shadow: 0 0 0 2pt var(--accent); box-shadow: 0 0 0 2pt var(--accent);
} }
`; `;

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

@ -2,47 +2,47 @@ import dayjs from "dayjs";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
const Base = styled.div<{ unread?: boolean }>` const Base = styled.div<{ unread?: boolean }>`
height: 0; height: 0;
display: flex; display: flex;
user-select: none; user-select: none;
align-items: center; align-items: center;
margin: 17px 12px 5px; margin: 17px 12px 5px;
border-top: thin solid var(--tertiary-foreground); border-top: thin solid var(--tertiary-foreground);
time { time {
margin-top: -2px; margin-top: -2px;
font-size: 0.6875rem; font-size: 0.6875rem;
line-height: 0.6875rem; line-height: 0.6875rem;
padding: 2px 5px 2px 0; padding: 2px 5px 2px 0;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
background: var(--primary-background); background: var(--primary-background);
} }
${(props) => ${(props) =>
props.unread && props.unread &&
css` css`
border-top: thin solid var(--accent); border-top: thin solid var(--accent);
`} `}
`; `;
const Unread = styled.div` const Unread = styled.div`
background: var(--accent); background: var(--accent);
color: white; color: white;
padding: 5px 8px; padding: 5px 8px;
border-radius: 60px; border-radius: 60px;
font-weight: 600; font-weight: 600;
`; `;
interface Props { interface Props {
date: Date; date: Date;
unread?: boolean; unread?: boolean;
} }
export default function DateDivider(props: Props) { export default function DateDivider(props: Props) {
return ( return (
<Base unread={props.unread}> <Base unread={props.unread}>
{props.unread && <Unread>NEW</Unread>} {props.unread && <Unread>NEW</Unread>}
<time>{dayjs(props.date).format("LL")}</time> <time>{dayjs(props.date).format("LL")}</time>
</Base> </Base>
); );
} }

118
src/components/ui/Details.tsx
View file

@ -1,74 +1,74 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
export default styled.details<{ sticky?: boolean; large?: boolean }>` export default styled.details<{ sticky?: boolean; large?: boolean }>`
summary { summary {
${(props) => ${(props) =>
props.sticky && props.sticky &&
css` css`
top: -1px; top: -1px;
z-index: 10; z-index: 10;
position: sticky; position: sticky;
`} `}
${(props) => ${(props) =>
props.large && props.large &&
css` css`
/*padding: 5px 0;*/ /*padding: 5px 0;*/
background: var(--primary-background); background: var(--primary-background);
color: var(--secondary-foreground); color: var(--secondary-foreground);
.padding { .padding {
/*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/ /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px 0; padding: 5px 0;
margin: 0.8em 0px 0.4em; margin: 0.8em 0px 0.4em;
cursor: pointer; cursor: pointer;
} }
`} `}
outline: none; outline: none;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
align-items: center; align-items: center;
transition: 0.2s opacity; transition: 0.2s opacity;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
&::marker, &::marker,
&::-webkit-details-marker { &::-webkit-details-marker {
display: none; display: none;
} }
.title { .title {
flex-grow: 1; flex-grow: 1;
margin-top: 1px; margin-top: 1px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.padding { .padding {
display: flex; display: flex;
align-items: center; align-items: center;
> svg { > svg {
flex-shrink: 0; flex-shrink: 0;
margin-inline-end: 4px; margin-inline-end: 4px;
transition: 0.2s ease transform; transition: 0.2s ease transform;
} }
} }
} }
&:not([open]) { &:not([open]) {
summary { summary {
opacity: 0.7; opacity: 0.7;
} }
summary svg { summary svg {
transform: rotateZ(-90deg); transform: rotateZ(-90deg);
} }
} }
`; `;

84
src/components/ui/Header.tsx
View file

@ -1,57 +1,57 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
borders?: boolean; borders?: boolean;
background?: boolean; background?: boolean;
placement: "primary" | "secondary"; placement: "primary" | "secondary";
} }
export default styled.div<Props>` export default styled.div<Props>`
gap: 6px; gap: 6px;
height: 48px; height: 48px;
flex: 0 auto; flex: 0 auto;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 0 16px; padding: 0 16px;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
align-items: center; align-items: center;
background-size: cover !important; background-size: cover !important;
background-position: center !important; background-position: center !important;
background-color: var(--primary-header); background-color: var(--primary-header);
svg { svg {
flex-shrink: 0; flex-shrink: 0;
} }
/*@media only screen and (max-width: 768px) { /*@media only screen and (max-width: 768px) {
padding: 0 12px; padding: 0 12px;
}*/ }*/
@media (pointer: coarse) { @media (pointer: coarse) {
height: 56px; height: 56px;
} }
${(props) =>
props.background &&
css`
height: 120px !important;
align-items: flex-end;
text-shadow: 0px 0px 1px black;
`}
${(props) =>
props.placement === "secondary" &&
css`
background-color: var(--secondary-header);
padding: 14px;
`}
${(props) => ${(props) =>
props.borders && props.background &&
css` css`
border-start-start-radius: 8px; height: 120px !important;
`} align-items: flex-end;
text-shadow: 0px 0px 1px black;
`}
${(props) =>
props.placement === "secondary" &&
css`
background-color: var(--secondary-header);
padding: 14px;
`}
${(props) =>
props.borders &&
css`
border-start-start-radius: 8px;
`}
`; `;

60
src/components/ui/IconButton.tsx
View file

@ -1,46 +1,46 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
type?: "default" | "circle"; type?: "default" | "circle";
} }
const normal = `var(--secondary-foreground)`; const normal = `var(--secondary-foreground)`;
const hover = `var(--foreground)`; const hover = `var(--foreground)`;
export default styled.div<Props>` export default styled.div<Props>`
z-index: 1; z-index: 1;
display: grid; display: grid;
cursor: pointer; cursor: pointer;
place-items: center; place-items: center;
transition: 0.1s ease background-color; transition: 0.1s ease background-color;
fill: ${normal}; fill: ${normal};
color: ${normal}; color: ${normal};
/*stroke: ${normal};*/ /*stroke: ${normal};*/
a { a {
color: ${normal}; color: ${normal};
} }
&:hover { &:hover {
fill: ${hover}; fill: ${hover};
color: ${hover}; color: ${hover};
/*stroke: ${hover};*/ /*stroke: ${hover};*/
a { a {
color: ${hover}; color: ${hover};
} }
} }
${(props) => ${(props) =>
props.type === "circle" && props.type === "circle" &&
css` css`
padding: 4px; padding: 4px;
border-radius: 50%; border-radius: 50%;
background-color: var(--secondary-header); background-color: var(--secondary-header);
&:hover { &:hover {
background-color: var(--primary-header); background-color: var(--primary-header);
} }
`} `}
`; `;

52
src/components/ui/InputBox.tsx
View file

@ -1,39 +1,39 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
interface Props { interface Props {
readonly contrast?: boolean; readonly contrast?: boolean;
} }
export default styled.input<Props>` export default styled.input<Props>`
z-index: 1; z-index: 1;
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: 6px;
font-family: inherit; font-family: inherit;
color: var(--foreground); color: var(--foreground);
background: var(--primary-background); background: var(--primary-background);
transition: 0.2s ease background-color; transition: 0.2s ease background-color;
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out; transition: outline-color 0.2s ease-in-out;
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }
&:focus { &:focus {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
} }
${(props) => ${(props) =>
props.contrast && props.contrast &&
css` css`
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
&:hover { &:hover {
background: var(--hover); background: var(--hover);
} }
`} `}
`; `;

10
src/components/ui/LineDivider.tsx
View file

@ -1,9 +1,9 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.div` export default styled.div`
height: 0px; height: 0px;
opacity: 0.6; opacity: 0.6;
flex-shrink: 0; flex-shrink: 0;
margin: 8px 10px; margin: 8px 10px;
border-top: 1px solid var(--tertiary-foreground); border-top: 1px solid var(--tertiary-foreground);
`; `;

36
src/components/ui/Masks.tsx
View file

@ -1,22 +1,22 @@
// This file must be imported and used at least once for SVG masks. // This file must be imported and used at least once for SVG masks.
export default function Masks() { export default function Masks() {
return ( return (
<svg width={0} height={0} style={{ position: "fixed" }}> <svg width={0} height={0} style={{ position: "fixed" }}>
<defs> <defs>
<mask id="server"> <mask id="server">
<rect x="0" y="0" width="32" height="32" fill="white" /> <rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="5" r="7" fill={"black"} /> <circle cx="27" cy="5" r="7" fill={"black"} />
</mask> </mask>
<mask id="user"> <mask id="user">
<rect x="0" y="0" width="32" height="32" fill="white" /> <rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="27" cy="27" r="7" fill={"black"} /> <circle cx="27" cy="27" r="7" fill={"black"} />
</mask> </mask>
<mask id="overlap"> <mask id="overlap">
<rect x="0" y="0" width="32" height="32" fill="white" /> <rect x="0" y="0" width="32" height="32" fill="white" />
<circle cx="32" cy="16" r="18" fill={"black"} /> <circle cx="32" cy="16" r="18" fill={"black"} />
</mask> </mask>
</defs> </defs>
</svg> </svg>
); );
} }

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

@ -19,181 +19,181 @@ const zoomIn = keyframes`
`; `;
const ModalBase = styled.div` const ModalBase = styled.div`
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 9999; z-index: 9999;
position: fixed; position: fixed;
max-height: 100%; max-height: 100%;
user-select: none; user-select: none;
animation-name: ${open}; animation-name: ${open};
animation-duration: 0.2s; animation-duration: 0.2s;
display: grid; display: grid;
overflow-y: auto; overflow-y: auto;
place-items: center; place-items: center;
color: var(--foreground); color: var(--foreground);
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
`; `;
const ModalContainer = styled.div` const ModalContainer = styled.div`
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
animation-name: ${zoomIn}; animation-name: ${zoomIn};
animation-duration: 0.25s; animation-duration: 0.25s;
animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1); animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
`; `;
const ModalContent = styled.div< const ModalContent = styled.div<
{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean } { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>` >`
border-radius: 8px; border-radius: 8px;
text-overflow: ellipsis; text-overflow: ellipsis;
h3 { h3 {
margin-top: 0; margin-top: 0;
} }
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
${(props) =>
!props.noBackground &&
css`
background: var(--secondary-header);
`}
${(props) =>
props.padding &&
css`
padding: 1.5em;
`}
${(props) => ${(props) =>
props.attachment && !props.noBackground &&
css` css`
border-radius: 8px 8px 0 0; background: var(--secondary-header);
`} `}
${(props) => ${(props) =>
props.border && props.padding &&
css` css`
border-radius: 10px; padding: 1.5em;
border: 2px solid var(--secondary-background); `}
`}
${(props) =>
props.attachment &&
css`
border-radius: 8px 8px 0 0;
`}
${(props) =>
props.border &&
css`
border-radius: 10px;
border: 2px solid var(--secondary-background);
`}
`; `;
const ModalActions = styled.div` const ModalActions = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
padding: 1em 1.5em; padding: 1em 1.5em;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
background: var(--secondary-background); background: var(--secondary-background);
`; `;
export interface Action { export interface Action {
text: Children; text: Children;
onClick: () => void; onClick: () => void;
confirmation?: boolean; confirmation?: boolean;
contrast?: boolean; contrast?: boolean;
error?: boolean; error?: boolean;
} }
interface Props { interface Props {
children?: Children; children?: Children;
title?: Children; title?: Children;
disallowClosing?: boolean; disallowClosing?: boolean;
noBackground?: boolean; noBackground?: boolean;
dontModal?: boolean; dontModal?: boolean;
padding?: boolean; padding?: boolean;
onClose: () => void; onClose: () => void;
actions?: Action[]; actions?: Action[];
disabled?: boolean; disabled?: boolean;
border?: boolean; border?: boolean;
visible: boolean; visible: boolean;
} }
export default function Modal(props: Props) { export default function Modal(props: Props) {
if (!props.visible) return null; if (!props.visible) return null;
let content = ( let content = (
<ModalContent <ModalContent
attachment={!!props.actions} attachment={!!props.actions}
noBackground={props.noBackground} noBackground={props.noBackground}
border={props.border} border={props.border}
padding={props.padding ?? !props.dontModal}> padding={props.padding ?? !props.dontModal}>
{props.title && <h3>{props.title}</h3>} {props.title && <h3>{props.title}</h3>}
{props.children} {props.children}
</ModalContent> </ModalContent>
); );
if (props.dontModal) { if (props.dontModal) {
return content; return content;
} }
useEffect(() => { useEffect(() => {
if (props.disallowClosing) return; if (props.disallowClosing) return;
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
if (e.key === "Escape") { if (e.key === "Escape") {
props.onClose(); props.onClose();
} }
} }
document.body.addEventListener("keydown", keyDown); document.body.addEventListener("keydown", keyDown);
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( let confirmationAction = props.actions?.find(
(action) => action.confirmation, (action) => action.confirmation,
); );
useEffect(() => { useEffect(() => {
if (!confirmationAction) return; if (!confirmationAction) return;
// ! FIXME: this may be done better if we // ! FIXME: this may be done better if we
// ! can focus the button although that // ! can focus the button although that
// ! doesn't seem to work... // ! doesn't seem to work...
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
if (e.key === "Enter") { if (e.key === "Enter") {
confirmationAction!.onClick(); confirmationAction!.onClick();
} }
} }
document.body.addEventListener("keydown", keyDown); document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown); return () => document.body.removeEventListener("keydown", keyDown);
}, [confirmationAction]); }, [confirmationAction]);
return createPortal( return createPortal(
<ModalBase <ModalBase
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}
{props.actions && ( {props.actions && (
<ModalActions> <ModalActions>
{props.actions.map((x) => ( {props.actions.map((x) => (
<Button <Button
contrast={x.contrast ?? true} contrast={x.contrast ?? true}
error={x.error ?? false} error={x.error ?? false}
onClick={x.onClick} onClick={x.onClick}
disabled={props.disabled}> disabled={props.disabled}>
{x.text} {x.text}
</Button> </Button>
))} ))}
</ModalActions> </ModalActions>
)} )}
</ModalContainer> </ModalContainer>
</ModalBase>, </ModalBase>,
document.body, document.body,
); );
} }

96
src/components/ui/Overline.tsx
View file

@ -5,60 +5,60 @@ import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & { type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string; error?: string;
block?: boolean; block?: boolean;
spaced?: boolean; spaced?: boolean;
children?: Children; children?: Children;
type?: "default" | "subtle" | "error"; type?: "default" | "subtle" | "error";
}; };
const OverlineBase = styled.div<Omit<Props, "children" | "error">>` const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline; display: inline;
margin: 0.4em 0; margin: 0.4em 0;
${(props) =>
props.spaced &&
css`
margin-top: 0.8em;
`}
font-size: 14px;
font-weight: 600;
color: var(--foreground);
text-transform: uppercase;
${(props) =>
props.type === "subtle" &&
css`
font-size: 12px;
color: var(--secondary-foreground);
`}
${(props) =>
props.type === "error" &&
css`
font-size: 12px;
font-weight: 400;
color: var(--error);
`}
${(props) => ${(props) =>
props.block && props.spaced &&
css` css`
display: block; margin-top: 0.8em;
`} `}
font-size: 14px;
font-weight: 600;
color: var(--foreground);
text-transform: uppercase;
${(props) =>
props.type === "subtle" &&
css`
font-size: 12px;
color: var(--secondary-foreground);
`}
${(props) =>
props.type === "error" &&
css`
font-size: 12px;
font-weight: 400;
color: var(--error);
`}
${(props) =>
props.block &&
css`
display: block;
`}
`; `;
export default function Overline(props: Props) { export default function Overline(props: Props) {
return ( return (
<OverlineBase {...props}> <OverlineBase {...props}>
{props.children} {props.children}
{props.children && props.error && <> &middot; </>} {props.children && props.error && <> &middot; </>}
{props.error && ( {props.error && (
<Overline type="error"> <Overline type="error">
<Text id={`error.${props.error}`}>{props.error}</Text> <Text id={`error.${props.error}`}>{props.error}</Text>
</Overline> </Overline>
)} )}
</OverlineBase> </OverlineBase>
); );
} }

124
src/components/ui/Preloader.tsx
View file

@ -21,83 +21,83 @@ const prRing = keyframes`
`; `;
const PreloaderBase = styled.div` const PreloaderBase = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
.spinner { .spinner {
width: 58px; width: 58px;
display: flex; display: flex;
text-align: center; text-align: center;
margin: 100px auto 0; margin: 100px auto 0;
justify-content: space-between; justify-content: space-between;
} }
.spinner > div { .spinner > div {
width: 14px; width: 14px;
height: 14px; height: 14px;
background-color: var(--tertiary-foreground); background-color: var(--tertiary-foreground);
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
animation: ${skSpinner} 1.4s infinite ease-in-out both; animation: ${skSpinner} 1.4s infinite ease-in-out both;
} }
.spinner div:nth-child(1) { .spinner div:nth-child(1) {
animation-delay: -0.32s; animation-delay: -0.32s;
} }
.spinner div:nth-child(2) { .spinner div:nth-child(2) {
animation-delay: -0.16s; animation-delay: -0.16s;
} }
.ring { .ring {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 48px; width: 48px;
height: 52px; height: 52px;
} }
.ring div { .ring div {
width: 32px; width: 32px;
margin: 8px; margin: 8px;
height: 32px; height: 32px;
display: block; display: block;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid #fff; border: 2px solid #fff;
animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent; border-color: #fff transparent transparent transparent;
} }
.ring div:nth-child(1) { .ring div:nth-child(1) {
animation-delay: -0.45s; animation-delay: -0.45s;
} }
.ring div:nth-child(2) { .ring div:nth-child(2) {
animation-delay: -0.3s; animation-delay: -0.3s;
} }
.ring div:nth-child(3) { .ring div:nth-child(3) {
animation-delay: -0.15s; animation-delay: -0.15s;
} }
`; `;
interface Props { interface Props {
type: "spinner" | "ring"; type: "spinner" | "ring";
} }
export default function Preloader({ type }: Props) { export default function Preloader({ type }: Props) {
return ( return (
<PreloaderBase> <PreloaderBase>
<div class={type}> <div class={type}>
<div /> <div />
<div /> <div />
<div /> <div />
</div> </div>
</PreloaderBase> </PreloaderBase>
); );
} }

162
src/components/ui/Radio.tsx
View file

@ -4,108 +4,108 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
interface Props { interface Props {
children: Children; children: Children;
description?: Children; description?: Children;
checked: boolean; checked: boolean;
disabled?: boolean; disabled?: boolean;
onSelect: () => void; onSelect: () => void;
} }
interface BaseProps { interface BaseProps {
selected: boolean; selected: boolean;
} }
const RadioBase = styled.label<BaseProps>` const RadioBase = styled.label<BaseProps>`
gap: 4px; gap: 4px;
z-index: 1; z-index: 1;
padding: 4px; padding: 4px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
border-radius: 4px; border-radius: 4px;
transition: 0.2s ease all; transition: 0.2s ease all;
&:hover { &:hover {
background: var(--hover); background: var(--hover);
} }
> input { > input {
display: none; display: none;
} }
> div { > div {
margin: 4px; margin: 4px;
width: 24px; width: 24px;
height: 24px; height: 24px;
display: grid; display: grid;
border-radius: 50%; border-radius: 50%;
place-items: center; place-items: center;
background: var(--foreground); background: var(--foreground);
svg { svg {
color: var(--foreground); color: var(--foreground);
/*stroke-width: 2;*/ /*stroke-width: 2;*/
} }
} }
${(props) => ${(props) =>
props.selected && props.selected &&
css` css`
color: white; color: white;
cursor: default; cursor: default;
background: var(--accent); background: var(--accent);
> div { > div {
background: white; background: white;
} }
> div svg { > div svg {
color: var(--accent); color: var(--accent);
} }
&:hover { &:hover {
background: var(--accent); background: var(--accent);
} }
`} `}
`; `;
const RadioDescription = styled.span<BaseProps>` const RadioDescription = styled.span<BaseProps>`
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
color: var(--secondary-foreground); color: var(--secondary-foreground);
${(props) => ${(props) =>
props.selected && props.selected &&
css` css`
color: white; color: white;
`} `}
`; `;
export default function Radio(props: Props) { export default function Radio(props: Props) {
return ( return (
<RadioBase <RadioBase
selected={props.checked} selected={props.checked}
disabled={props.disabled} disabled={props.disabled}
onClick={() => onClick={() =>
!props.disabled && props.onSelect && props.onSelect() !props.disabled && props.onSelect && props.onSelect()
}> }>
<div> <div>
<Circle size={12} /> <Circle size={12} />
</div> </div>
<input type="radio" checked={props.checked} /> <input type="radio" checked={props.checked} />
<span> <span>
<span>{props.children}</span> <span>{props.children}</span>
{props.description && ( {props.description && (
<RadioDescription selected={props.checked}> <RadioDescription selected={props.checked}>
{props.description} {props.description}
</RadioDescription> </RadioDescription>
)} )}
</span> </span>
</RadioBase> </RadioBase>
); );
} }

78
src/components/ui/TextArea.tsx
View file

@ -1,10 +1,10 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
export interface TextAreaProps { export interface TextAreaProps {
code?: boolean; code?: boolean;
padding?: number; padding?: number;
lineHeight?: number; lineHeight?: number;
hideBorder?: boolean; hideBorder?: boolean;
} }
export const TEXT_AREA_BORDER_WIDTH = 2; export const TEXT_AREA_BORDER_WIDTH = 2;
@ -12,46 +12,46 @@ export const DEFAULT_TEXT_AREA_PADDING = 16;
export const DEFAULT_LINE_HEIGHT = 20; export const DEFAULT_LINE_HEIGHT = 20;
export default styled.textarea<TextAreaProps>` export default styled.textarea<TextAreaProps>`
width: 100%; width: 100%;
resize: none; resize: none;
display: block; display: block;
color: var(--foreground); color: var(--foreground);
background: var(--secondary-background); background: var(--secondary-background);
padding: ${(props) => props.padding ?? DEFAULT_TEXT_AREA_PADDING}px; padding: ${(props) => props.padding ?? DEFAULT_TEXT_AREA_PADDING}px;
line-height: ${(props) => props.lineHeight ?? DEFAULT_LINE_HEIGHT}px; line-height: ${(props) => props.lineHeight ?? DEFAULT_LINE_HEIGHT}px;
${(props) => ${(props) =>
props.hideBorder && props.hideBorder &&
css` css`
border: none; border: none;
`} `}
${(props) => ${(props) =>
!props.hideBorder && !props.hideBorder &&
css` css`
border-radius: 4px; border-radius: 4px;
transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out;
border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent; border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
`} `}
&:focus { &:focus {
outline: none; outline: none;
${(props) => ${(props) =>
!props.hideBorder && !props.hideBorder &&
css` css`
border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent); border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
`} `}
} }
${(props) => ${(props) =>
props.code props.code
? css` ? css`
font-family: var(--monoscape-font-font), monospace; font-family: var(--monoscape-font-font), monospace;
` `
: css` : css`
font-family: inherit; font-family: inherit;
`} `}
font-variant-ligatures: var(--ligatures); font-variant-ligatures: var(--ligatures);
`; `;

96
src/components/ui/Tip.tsx
View file

@ -4,66 +4,66 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
interface Props { interface Props {
warning?: boolean; warning?: boolean;
error?: boolean; error?: boolean;
} }
export const Separator = styled.div<Props>` export const Separator = styled.div<Props>`
height: 1px; height: 1px;
width: calc(100% - 10px); width: calc(100% - 10px);
background: var(--secondary-header); background: var(--secondary-header);
margin: 18px auto; margin: 18px auto;
`; `;
export const TipBase = styled.div<Props>` export const TipBase = styled.div<Props>`
display: flex; display: flex;
padding: 12px; padding: 12px;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
border-radius: 7px; border-radius: 7px;
background: var(--primary-header); background: var(--primary-header);
border: 2px solid var(--secondary-header); border: 2px solid var(--secondary-header);
a { a {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
svg { svg {
flex-shrink: 0; flex-shrink: 0;
margin-inline-end: 10px; margin-inline-end: 10px;
} }
${(props) => ${(props) =>
props.warning && props.warning &&
css` css`
color: var(--warning); color: var(--warning);
border: 2px solid var(--warning); border: 2px solid var(--warning);
background: var(--secondary-header); background: var(--secondary-header);
`} `}
${(props) => ${(props) =>
props.error && props.error &&
css` css`
color: var(--error); color: var(--error);
border: 2px solid var(--error); border: 2px solid var(--error);
background: var(--secondary-header); background: var(--secondary-header);
`} `}
`; `;
export default function Tip(props: Props & { children: Children }) { export default function Tip(props: Props & { children: Children }) {
const { children, ...tipProps } = props; const { children, ...tipProps } = props;
return ( return (
<> <>
<Separator /> <Separator />
<TipBase {...tipProps}> <TipBase {...tipProps}>
<InfoCircle size={20} /> <InfoCircle size={20} />
<span>{props.children}</span> <span>{props.children}</span>
</TipBase> </TipBase>
</> </>
); );
} }

334
src/context/Locale.tsx
View file

@ -16,202 +16,202 @@ dayjs.extend(format);
dayjs.extend(update); dayjs.extend(update);
export enum Language { export enum Language {
ENGLISH = "en", ENGLISH = "en",
ARABIC = "ar", ARABIC = "ar",
AZERBAIJANI = "az", AZERBAIJANI = "az",
CZECH = "cs", CZECH = "cs",
GERMAN = "de", GERMAN = "de",
SPANISH = "es", SPANISH = "es",
FINNISH = "fi", FINNISH = "fi",
FRENCH = "fr", FRENCH = "fr",
HINDI = "hi", HINDI = "hi",
CROATIAN = "hr", CROATIAN = "hr",
HUNGARIAN = "hu", HUNGARIAN = "hu",
INDONESIAN = "id", INDONESIAN = "id",
LITHUANIAN = "lt", LITHUANIAN = "lt",
MACEDONIAN = "mk", MACEDONIAN = "mk",
DUTCH = "nl", DUTCH = "nl",
POLISH = "pl", POLISH = "pl",
PORTUGUESE_BRAZIL = "pt_BR", PORTUGUESE_BRAZIL = "pt_BR",
ROMANIAN = "ro", ROMANIAN = "ro",
RUSSIAN = "ru", RUSSIAN = "ru",
SERBIAN = "sr", SERBIAN = "sr",
SWEDISH = "sv", SWEDISH = "sv",
TURKISH = "tr", TURKISH = "tr",
UKRANIAN = "uk", UKRANIAN = "uk",
CHINESE_SIMPLIFIED = "zh_Hans", CHINESE_SIMPLIFIED = "zh_Hans",
OWO = "owo", OWO = "owo",
PIRATE = "pr", PIRATE = "pr",
BOTTOM = "bottom", BOTTOM = "bottom",
PIGLATIN = "piglatin", PIGLATIN = "piglatin",
} }
export interface LanguageEntry { export interface LanguageEntry {
display: string; display: string;
emoji: string; emoji: string;
i18n: string; i18n: string;
dayjs?: string; dayjs?: string;
rtl?: boolean; rtl?: boolean;
alt?: boolean; alt?: boolean;
} }
export const Languages: { [key in Language]: LanguageEntry } = { export const Languages: { [key in Language]: LanguageEntry } = {
en: { en: {
display: "English (Traditional)", display: "English (Traditional)",
emoji: "🇬🇧", emoji: "🇬🇧",
i18n: "en", i18n: "en",
dayjs: "en-gb", dayjs: "en-gb",
}, },
ar: { display: "عربي", emoji: "🇸🇦", i18n: "ar", rtl: true }, ar: { display: "عربي", emoji: "🇸🇦", i18n: "ar", rtl: true },
az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" }, az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" }, cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" }, de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
es: { display: "Español", emoji: "🇪🇸", i18n: "es" }, es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" }, fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" }, fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" }, hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" }, hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" }, hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" }, id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" }, lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" }, mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" }, nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
pl: { display: "Polski", emoji: "🇵🇱", i18n: "pl" }, pl: { display: "Polski", emoji: "🇵🇱", i18n: "pl" },
pt_BR: { pt_BR: {
display: "Português (do Brasil)", display: "Português (do Brasil)",
emoji: "🇧🇷", emoji: "🇧🇷",
i18n: "pt_BR", i18n: "pt_BR",
dayjs: "pt-br", dayjs: "pt-br",
}, },
ro: { display: "Română", emoji: "🇷🇴", i18n: "ro" }, ro: { display: "Română", emoji: "🇷🇴", i18n: "ro" },
ru: { display: "Русский", emoji: "🇷🇺", i18n: "ru" }, ru: { display: "Русский", emoji: "🇷🇺", i18n: "ru" },
sr: { display: "Српски", emoji: "🇷🇸", i18n: "sr" }, sr: { display: "Српски", emoji: "🇷🇸", i18n: "sr" },
sv: { display: "Svenska", emoji: "🇸🇪", i18n: "sv" }, sv: { display: "Svenska", emoji: "🇸🇪", i18n: "sv" },
tr: { display: "Türkçe", emoji: "🇹🇷", i18n: "tr" }, tr: { display: "Türkçe", emoji: "🇹🇷", i18n: "tr" },
uk: { display: "Українська", emoji: "🇺🇦", i18n: "uk" }, uk: { display: "Українська", emoji: "🇺🇦", i18n: "uk" },
zh_Hans: { zh_Hans: {
display: "中文 (简体)", display: "中文 (简体)",
emoji: "🇨🇳", emoji: "🇨🇳",
i18n: "zh_Hans", i18n: "zh_Hans",
dayjs: "zh", dayjs: "zh",
}, },
owo: { owo: {
display: "OwO", display: "OwO",
emoji: "🐱", emoji: "🐱",
i18n: "owo", i18n: "owo",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, alt: true,
}, },
pr: { pr: {
display: "Pirate", display: "Pirate",
emoji: "🏴‍☠️", emoji: "🏴‍☠️",
i18n: "pr", i18n: "pr",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, alt: true,
}, },
bottom: { bottom: {
display: "Bottom", display: "Bottom",
emoji: "🥺", emoji: "🥺",
i18n: "bottom", i18n: "bottom",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, alt: true,
}, },
piglatin: { piglatin: {
display: "Pig Latin", display: "Pig Latin",
emoji: "🐖", emoji: "🐖",
i18n: "piglatin", i18n: "piglatin",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, alt: true,
}, },
}; };
interface Props { interface Props {
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
locale: Language; locale: Language;
} }
function Locale({ children, locale }: Props) { function Locale({ children, locale }: Props) {
// TODO: create and use LanguageDefinition type here // TODO: create and use LanguageDefinition type here
const [defns, setDefinition] = const [defns, setDefinition] =
useState<Record<string, unknown>>(definition); useState<Record<string, unknown>>(definition);
const lang = Languages[locale]; const lang = Languages[locale];
// TODO: clean this up and use the built in Intl API // TODO: clean this up and use the built in Intl API
function transformLanguage(source: { [key: string]: any }) { function transformLanguage(source: { [key: string]: any }) {
const obj = defaultsDeep(source, definition); const obj = defaultsDeep(source, definition);
const dayjs = obj.dayjs; const dayjs = obj.dayjs;
const defaults = dayjs.defaults; const defaults = dayjs.defaults;
const twelvehour = defaults?.twelvehour === "yes" || true; const twelvehour = defaults?.twelvehour === "yes" || true;
const separator: "/" | "-" | "." = defaults?.date_separator ?? "/"; const separator: "/" | "-" | "." = defaults?.date_separator ?? "/";
const date: "traditional" | "simplified" | "ISO8601" = const date: "traditional" | "simplified" | "ISO8601" =
defaults?.date_format ?? "traditional"; defaults?.date_format ?? "traditional";
const DATE_FORMATS = { const DATE_FORMATS = {
traditional: `DD${separator}MM${separator}YYYY`, traditional: `DD${separator}MM${separator}YYYY`,
simplified: `MM${separator}DD${separator}YYYY`, simplified: `MM${separator}DD${separator}YYYY`,
ISO8601: "YYYY-MM-DD", ISO8601: "YYYY-MM-DD",
}; };
dayjs["sameElse"] = DATE_FORMATS[date]; dayjs["sameElse"] = DATE_FORMATS[date];
Object.keys(dayjs) Object.keys(dayjs)
.filter((k) => k !== "defaults") .filter((k) => k !== "defaults")
.forEach( .forEach(
(k) => (k) =>
(dayjs[k] = dayjs[k].replace( (dayjs[k] = dayjs[k].replace(
/{{time}}/g, /{{time}}/g,
twelvehour ? "LT" : "HH:mm", twelvehour ? "LT" : "HH:mm",
)), )),
); );
return obj; return obj;
} }
useEffect(() => { useEffect(() => {
if (locale === "en") { if (locale === "en") {
const defn = transformLanguage(definition); const defn = transformLanguage(definition);
setDefinition(defn); setDefinition(defn);
dayjs.locale("en"); dayjs.locale("en");
dayjs.updateLocale("en", { calendar: defn.dayjs }); dayjs.updateLocale("en", { calendar: defn.dayjs });
return; return;
} }
import(`../../external/lang/${lang.i18n}.json`).then( import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => { async (lang_file) => {
const defn = transformLanguage(lang_file.default); const defn = transformLanguage(lang_file.default);
const target = lang.dayjs ?? lang.i18n; const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import( const dayjs_locale = await import(
`../../node_modules/dayjs/esm/locale/${target}.js` `../../node_modules/dayjs/esm/locale/${target}.js`
); );
if (defn.dayjs) { if (defn.dayjs) {
dayjs.updateLocale(target, { calendar: defn.dayjs }); dayjs.updateLocale(target, { calendar: defn.dayjs });
} }
dayjs.locale(dayjs_locale.default); dayjs.locale(dayjs_locale.default);
setDefinition(defn); setDefinition(defn);
}, },
); );
}, [locale, lang]); }, [locale, lang]);
useEffect(() => { useEffect(() => {
document.body.style.direction = lang.rtl ? "rtl" : ""; document.body.style.direction = lang.rtl ? "rtl" : "";
}, [lang.rtl]); }, [lang.rtl]);
return <IntlProvider definition={defns}>{children}</IntlProvider>; return <IntlProvider definition={defns}>{children}</IntlProvider>;
} }
export default connectState<Omit<Props, "locale">>( export default connectState<Omit<Props, "locale">>(
Locale, Locale,
(state) => { (state) => {
return { return {
locale: state.locale, locale: state.locale,
}; };
}, },
true, true,
); );

58
src/context/Settings.tsx
View file

@ -13,9 +13,9 @@ import { useMemo } from "preact/hooks";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import { import {
DEFAULT_SOUNDS, DEFAULT_SOUNDS,
Settings, Settings,
SoundOptions, SoundOptions,
} from "../redux/reducers/settings"; } from "../redux/reducers/settings";
import { playSound, Sounds } from "../assets/sounds/Audio"; import { playSound, Sounds } from "../assets/sounds/Audio";
@ -25,37 +25,37 @@ export const SettingsContext = createContext<Settings>({});
export const SoundContext = createContext<(sound: Sounds) => void>(null!); export const SoundContext = createContext<(sound: Sounds) => void>(null!);
interface Props { interface Props {
children?: Children; children?: Children;
settings: Settings; settings: Settings;
} }
function SettingsProvider({ settings, children }: Props) { function SettingsProvider({ settings, children }: Props) {
const play = useMemo(() => { const play = useMemo(() => {
const enabled: SoundOptions = defaultsDeep( const enabled: SoundOptions = defaultsDeep(
settings.notification?.sounds ?? {}, settings.notification?.sounds ?? {},
DEFAULT_SOUNDS, DEFAULT_SOUNDS,
); );
return (sound: Sounds) => { return (sound: Sounds) => {
if (enabled[sound]) { if (enabled[sound]) {
playSound(sound); playSound(sound);
} }
}; };
}, [settings.notification]); }, [settings.notification]);
return ( return (
<SettingsContext.Provider value={settings}> <SettingsContext.Provider value={settings}>
<SoundContext.Provider value={play}> <SoundContext.Provider value={play}>
{children} {children}
</SoundContext.Provider> </SoundContext.Provider>
</SettingsContext.Provider> </SettingsContext.Provider>
); );
} }
export default connectState<Omit<Props, "settings">>( export default connectState<Omit<Props, "settings">>(
SettingsProvider, SettingsProvider,
(state) => { (state) => {
return { return {
settings: state.settings, settings: state.settings,
}; };
}, },
); );

578
src/context/Theme.tsx
View file

@ -11,209 +11,209 @@ import { connectState } from "../redux/connector";
import { Children } from "../types/Preact"; import { Children } from "../types/Preact";
export type Variables = export type Variables =
| "accent" | "accent"
| "background" | "background"
| "foreground" | "foreground"
| "block" | "block"
| "message-box" | "message-box"
| "mention" | "mention"
| "success" | "success"
| "warning" | "warning"
| "error" | "error"
| "hover" | "hover"
| "scrollbar-thumb" | "scrollbar-thumb"
| "scrollbar-track" | "scrollbar-track"
| "primary-background" | "primary-background"
| "primary-header" | "primary-header"
| "secondary-background" | "secondary-background"
| "secondary-foreground" | "secondary-foreground"
| "secondary-header" | "secondary-header"
| "tertiary-background" | "tertiary-background"
| "tertiary-foreground" | "tertiary-foreground"
| "status-online" | "status-online"
| "status-away" | "status-away"
| "status-busy" | "status-busy"
| "status-streaming" | "status-streaming"
| "status-invisible"; | "status-invisible";
// While this isn't used, it'd be good to keep this up to date as a reference or for future use // While this isn't used, it'd be good to keep this up to date as a reference or for future use
export type HiddenVariables = export type HiddenVariables =
| "font" | "font"
| "ligatures" | "ligatures"
| "app-height" | "app-height"
| "sidebar-active" | "sidebar-active"
| "monospace-font"; | "monospace-font";
export type Fonts = export type Fonts =
| "Open Sans" | "Open Sans"
| "Inter" | "Inter"
| "Atkinson Hyperlegible" | "Atkinson Hyperlegible"
| "Roboto" | "Roboto"
| "Noto Sans" | "Noto Sans"
| "Lato" | "Lato"
| "Bree Serif" | "Bree Serif"
| "Montserrat" | "Montserrat"
| "Poppins" | "Poppins"
| "Raleway" | "Raleway"
| "Ubuntu" | "Ubuntu"
| "Comic Neue"; | "Comic Neue";
export type MonoscapeFonts = export type MonoscapeFonts =
| "Fira Code" | "Fira Code"
| "Roboto Mono" | "Roboto Mono"
| "Source Code Pro" | "Source Code Pro"
| "Space Mono" | "Space Mono"
| "Ubuntu Mono"; | "Ubuntu Mono";
export type Theme = { export type Theme = {
[variable in Variables]: string; [variable in Variables]: string;
} & { } & {
light?: boolean; light?: boolean;
font?: Fonts; font?: Fonts;
css?: string; css?: string;
monoscapeFont?: MonoscapeFonts; monoscapeFont?: MonoscapeFonts;
}; };
export interface ThemeOptions { export interface ThemeOptions {
preset?: string; preset?: string;
ligatures?: boolean; ligatures?: boolean;
custom?: Partial<Theme>; custom?: Partial<Theme>;
} }
// import aaa from "@fontsource/open-sans/300.css?raw"; // import aaa from "@fontsource/open-sans/300.css?raw";
// console.info(aaa); // console.info(aaa);
export const FONTS: Record<Fonts, { name: string; load: () => void }> = { export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
"Open Sans": { "Open Sans": {
name: "Open Sans", name: "Open Sans",
load: async () => { load: async () => {
await import("@fontsource/open-sans/300.css"); await import("@fontsource/open-sans/300.css");
await import("@fontsource/open-sans/400.css"); await import("@fontsource/open-sans/400.css");
await import("@fontsource/open-sans/600.css"); await import("@fontsource/open-sans/600.css");
await import("@fontsource/open-sans/700.css"); await import("@fontsource/open-sans/700.css");
await import("@fontsource/open-sans/400-italic.css"); await import("@fontsource/open-sans/400-italic.css");
}, },
}, },
Inter: { Inter: {
name: "Inter", name: "Inter",
load: async () => { load: async () => {
await import("@fontsource/inter/300.css"); await import("@fontsource/inter/300.css");
await import("@fontsource/inter/400.css"); await import("@fontsource/inter/400.css");
await import("@fontsource/inter/600.css"); await import("@fontsource/inter/600.css");
await import("@fontsource/inter/700.css"); await import("@fontsource/inter/700.css");
}, },
}, },
"Atkinson Hyperlegible": { "Atkinson Hyperlegible": {
name: "Atkinson Hyperlegible", name: "Atkinson Hyperlegible",
load: async () => { load: async () => {
await import("@fontsource/atkinson-hyperlegible/400.css"); await import("@fontsource/atkinson-hyperlegible/400.css");
await import("@fontsource/atkinson-hyperlegible/700.css"); await import("@fontsource/atkinson-hyperlegible/700.css");
await import("@fontsource/atkinson-hyperlegible/400-italic.css"); await import("@fontsource/atkinson-hyperlegible/400-italic.css");
}, },
}, },
Roboto: { Roboto: {
name: "Roboto", name: "Roboto",
load: async () => { load: async () => {
await import("@fontsource/roboto/400.css"); await import("@fontsource/roboto/400.css");
await import("@fontsource/roboto/700.css"); await import("@fontsource/roboto/700.css");
await import("@fontsource/roboto/400-italic.css"); await import("@fontsource/roboto/400-italic.css");
}, },
}, },
"Noto Sans": { "Noto Sans": {
name: "Noto Sans", name: "Noto Sans",
load: async () => { load: async () => {
await import("@fontsource/noto-sans/400.css"); await import("@fontsource/noto-sans/400.css");
await import("@fontsource/noto-sans/700.css"); await import("@fontsource/noto-sans/700.css");
await import("@fontsource/noto-sans/400-italic.css"); await import("@fontsource/noto-sans/400-italic.css");
}, },
}, },
"Bree Serif": { "Bree Serif": {
name: "Bree Serif", name: "Bree Serif",
load: () => import("@fontsource/bree-serif/400.css"), load: () => import("@fontsource/bree-serif/400.css"),
}, },
Lato: { Lato: {
name: "Lato", name: "Lato",
load: async () => { load: async () => {
await import("@fontsource/lato/300.css"); await import("@fontsource/lato/300.css");
await import("@fontsource/lato/400.css"); await import("@fontsource/lato/400.css");
await import("@fontsource/lato/700.css"); await import("@fontsource/lato/700.css");
await import("@fontsource/lato/400-italic.css"); await import("@fontsource/lato/400-italic.css");
}, },
}, },
Montserrat: { Montserrat: {
name: "Montserrat", name: "Montserrat",
load: async () => { load: async () => {
await import("@fontsource/montserrat/300.css"); await import("@fontsource/montserrat/300.css");
await import("@fontsource/montserrat/400.css"); await import("@fontsource/montserrat/400.css");
await import("@fontsource/montserrat/600.css"); await import("@fontsource/montserrat/600.css");
await import("@fontsource/montserrat/700.css"); await import("@fontsource/montserrat/700.css");
await import("@fontsource/montserrat/400-italic.css"); await import("@fontsource/montserrat/400-italic.css");
}, },
}, },
Poppins: { Poppins: {
name: "Poppins", name: "Poppins",
load: async () => { load: async () => {
await import("@fontsource/poppins/300.css"); await import("@fontsource/poppins/300.css");
await import("@fontsource/poppins/400.css"); await import("@fontsource/poppins/400.css");
await import("@fontsource/poppins/600.css"); await import("@fontsource/poppins/600.css");
await import("@fontsource/poppins/700.css"); await import("@fontsource/poppins/700.css");
await import("@fontsource/poppins/400-italic.css"); await import("@fontsource/poppins/400-italic.css");
}, },
}, },
Raleway: { Raleway: {
name: "Raleway", name: "Raleway",
load: async () => { load: async () => {
await import("@fontsource/raleway/300.css"); await import("@fontsource/raleway/300.css");
await import("@fontsource/raleway/400.css"); await import("@fontsource/raleway/400.css");
await import("@fontsource/raleway/600.css"); await import("@fontsource/raleway/600.css");
await import("@fontsource/raleway/700.css"); await import("@fontsource/raleway/700.css");
await import("@fontsource/raleway/400-italic.css"); await import("@fontsource/raleway/400-italic.css");
}, },
}, },
Ubuntu: { Ubuntu: {
name: "Ubuntu", name: "Ubuntu",
load: async () => { load: async () => {
await import("@fontsource/ubuntu/300.css"); await import("@fontsource/ubuntu/300.css");
await import("@fontsource/ubuntu/400.css"); await import("@fontsource/ubuntu/400.css");
await import("@fontsource/ubuntu/500.css"); await import("@fontsource/ubuntu/500.css");
await import("@fontsource/ubuntu/700.css"); await import("@fontsource/ubuntu/700.css");
await import("@fontsource/ubuntu/400-italic.css"); await import("@fontsource/ubuntu/400-italic.css");
}, },
}, },
"Comic Neue": { "Comic Neue": {
name: "Comic Neue", name: "Comic Neue",
load: async () => { load: async () => {
await import("@fontsource/comic-neue/300.css"); await import("@fontsource/comic-neue/300.css");
await import("@fontsource/comic-neue/400.css"); await import("@fontsource/comic-neue/400.css");
await import("@fontsource/comic-neue/700.css"); await import("@fontsource/comic-neue/700.css");
await import("@fontsource/comic-neue/400-italic.css"); await import("@fontsource/comic-neue/400-italic.css");
}, },
}, },
}; };
export const MONOSCAPE_FONTS: Record< export const MONOSCAPE_FONTS: Record<
MonoscapeFonts, MonoscapeFonts,
{ name: string; load: () => void } { name: string; load: () => void }
> = { > = {
"Fira Code": { "Fira Code": {
name: "Fira Code", name: "Fira Code",
load: () => import("@fontsource/fira-code/400.css"), load: () => import("@fontsource/fira-code/400.css"),
}, },
"Roboto Mono": { "Roboto Mono": {
name: "Roboto Mono", name: "Roboto Mono",
load: () => import("@fontsource/roboto-mono/400.css"), load: () => import("@fontsource/roboto-mono/400.css"),
}, },
"Source Code Pro": { "Source Code Pro": {
name: "Source Code Pro", name: "Source Code Pro",
load: () => import("@fontsource/source-code-pro/400.css"), load: () => import("@fontsource/source-code-pro/400.css"),
}, },
"Space Mono": { "Space Mono": {
name: "Space Mono", name: "Space Mono",
load: () => import("@fontsource/space-mono/400.css"), load: () => import("@fontsource/space-mono/400.css"),
}, },
"Ubuntu Mono": { "Ubuntu Mono": {
name: "Ubuntu Mono", name: "Ubuntu Mono",
load: () => import("@fontsource/ubuntu-mono/400.css"), load: () => import("@fontsource/ubuntu-mono/400.css"),
}, },
}; };
export const FONT_KEYS = Object.keys(FONTS).sort(); export const FONT_KEYS = Object.keys(FONTS).sort();
@ -224,70 +224,70 @@ export const DEFAULT_MONO_FONT = "Fira Code";
// Generated from https://gitlab.insrt.uk/revolt/community/themes // Generated from https://gitlab.insrt.uk/revolt/community/themes
export const PRESETS: Record<string, Theme> = { export const PRESETS: Record<string, Theme> = {
light: { light: {
light: true, light: true,
accent: "#FD6671", accent: "#FD6671",
background: "#F6F6F6", background: "#F6F6F6",
foreground: "#101010", foreground: "#101010",
block: "#414141", block: "#414141",
"message-box": "#F1F1F1", "message-box": "#F1F1F1",
mention: "rgba(251, 255, 0, 0.40)", mention: "rgba(251, 255, 0, 0.40)",
success: "#65E572", success: "#65E572",
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#F06464",
hover: "rgba(0, 0, 0, 0.2)", hover: "rgba(0, 0, 0, 0.2)",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
"primary-background": "#FFFFFF", "primary-background": "#FFFFFF",
"primary-header": "#F1F1F1", "primary-header": "#F1F1F1",
"secondary-background": "#F1F1F1", "secondary-background": "#F1F1F1",
"secondary-foreground": "#888888", "secondary-foreground": "#888888",
"secondary-header": "#F1F1F1", "secondary-header": "#F1F1F1",
"tertiary-background": "#4D4D4D", "tertiary-background": "#4D4D4D",
"tertiary-foreground": "#646464", "tertiary-foreground": "#646464",
"status-online": "#3ABF7E", "status-online": "#3ABF7E",
"status-away": "#F39F00", "status-away": "#F39F00",
"status-busy": "#F84848", "status-busy": "#F84848",
"status-streaming": "#977EFF", "status-streaming": "#977EFF",
"status-invisible": "#A5A5A5", "status-invisible": "#A5A5A5",
}, },
dark: { dark: {
light: false, light: false,
accent: "#FD6671", accent: "#FD6671",
background: "#191919", background: "#191919",
foreground: "#F6F6F6", foreground: "#F6F6F6",
block: "#2D2D2D", block: "#2D2D2D",
"message-box": "#363636", "message-box": "#363636",
mention: "rgba(251, 255, 0, 0.06)", mention: "rgba(251, 255, 0, 0.06)",
success: "#65E572", success: "#65E572",
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#F06464",
hover: "rgba(0, 0, 0, 0.1)", hover: "rgba(0, 0, 0, 0.1)",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
"primary-background": "#242424", "primary-background": "#242424",
"primary-header": "#363636", "primary-header": "#363636",
"secondary-background": "#1E1E1E", "secondary-background": "#1E1E1E",
"secondary-foreground": "#C8C8C8", "secondary-foreground": "#C8C8C8",
"secondary-header": "#2D2D2D", "secondary-header": "#2D2D2D",
"tertiary-background": "#4D4D4D", "tertiary-background": "#4D4D4D",
"tertiary-foreground": "#848484", "tertiary-foreground": "#848484",
"status-online": "#3ABF7E", "status-online": "#3ABF7E",
"status-away": "#F39F00", "status-away": "#F39F00",
"status-busy": "#F84848", "status-busy": "#F84848",
"status-streaming": "#977EFF", "status-streaming": "#977EFF",
"status-invisible": "#A5A5A5", "status-invisible": "#A5A5A5",
}, },
}; };
const keys = Object.keys(PRESETS.dark); const keys = Object.keys(PRESETS.dark);
const GlobalTheme = createGlobalStyle<{ theme: Theme }>` const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
:root { :root {
${(props) => ${(props) =>
(Object.keys(props.theme) as Variables[]).map((key) => { (Object.keys(props.theme) as Variables[]).map((key) => {
if (!keys.includes(key)) return; if (!keys.includes(key)) return;
return `--${key}: ${props.theme[key]};`; return `--${key}: ${props.theme[key]};`;
})} })}
} }
`; `;
@ -295,66 +295,66 @@ const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
export const ThemeContext = createContext<Theme>(PRESETS["dark"]); export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
interface Props { interface Props {
children: Children; children: Children;
options?: ThemeOptions; options?: ThemeOptions;
} }
function Theme({ children, options }: Props) { function Theme({ children, options }: Props) {
const theme: Theme = { const theme: Theme = {
...PRESETS["dark"], ...PRESETS["dark"],
...PRESETS[options?.preset ?? ""], ...PRESETS[options?.preset ?? ""],
...options?.custom, ...options?.custom,
}; };
const root = document.documentElement.style; const root = document.documentElement.style;
useEffect(() => { useEffect(() => {
const font = theme.font ?? DEFAULT_FONT; const font = theme.font ?? DEFAULT_FONT;
root.setProperty("--font", `"${font}"`); root.setProperty("--font", `"${font}"`);
FONTS[font].load(); FONTS[font].load();
}, [theme.font]); }, [theme.font]);
useEffect(() => { useEffect(() => {
const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT; const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT;
root.setProperty("--monoscape-font", `"${font}"`); root.setProperty("--monoscape-font", `"${font}"`);
MONOSCAPE_FONTS[font].load(); MONOSCAPE_FONTS[font].load();
}, [theme.monoscapeFont]); }, [theme.monoscapeFont]);
useEffect(() => { useEffect(() => {
root.setProperty("--ligatures", options?.ligatures ? "normal" : "none"); root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
}, [options?.ligatures]); }, [options?.ligatures]);
useEffect(() => { useEffect(() => {
const resize = () => const resize = () =>
root.setProperty("--app-height", `${window.innerHeight}px`); root.setProperty("--app-height", `${window.innerHeight}px`);
resize(); resize();
window.addEventListener("resize", resize); window.addEventListener("resize", resize);
return () => window.removeEventListener("resize", resize); return () => window.removeEventListener("resize", resize);
}, []); }, []);
return ( return (
<ThemeContext.Provider value={theme}> <ThemeContext.Provider value={theme}>
<Helmet> <Helmet>
<meta <meta
name="theme-color" name="theme-color"
content={ content={
isTouchscreenDevice isTouchscreenDevice
? theme["primary-header"] ? theme["primary-header"]
: theme["background"] : theme["background"]
} }
/> />
</Helmet> </Helmet>
<GlobalTheme theme={theme} /> <GlobalTheme theme={theme} />
{theme.css && ( {theme.css && (
<style dangerouslySetInnerHTML={{ __html: theme.css }} /> <style dangerouslySetInnerHTML={{ __html: theme.css }} />
)} )}
{children} {children}
</ThemeContext.Provider> </ThemeContext.Provider>
); );
} }
export default connectState<{ children: Children }>(Theme, (state) => { export default connectState<{ children: Children }>(Theme, (state) => {
return { return {
options: state.settings.theme, options: state.settings.theme,
}; };
}); });

310
src/context/Voice.tsx
View file

@ -10,29 +10,29 @@ import { AppContext } from "./revoltjs/RevoltClient";
import { useForceUpdate } from "./revoltjs/hooks"; import { useForceUpdate } from "./revoltjs/hooks";
export enum VoiceStatus { export enum VoiceStatus {
LOADING = 0, LOADING = 0,
UNAVAILABLE, UNAVAILABLE,
ERRORED, ERRORED,
READY = 3, READY = 3,
CONNECTING = 4, CONNECTING = 4,
AUTHENTICATING, AUTHENTICATING,
RTC_CONNECTING, RTC_CONNECTING,
CONNECTED, CONNECTED,
// RECONNECTING // RECONNECTING
} }
export interface VoiceOperations { export interface VoiceOperations {
connect: (channelId: string) => Promise<void>; connect: (channelId: string) => Promise<void>;
disconnect: () => void; disconnect: () => void;
isProducing: (type: ProduceType) => boolean; isProducing: (type: ProduceType) => boolean;
startProducing: (type: ProduceType) => Promise<void>; startProducing: (type: ProduceType) => Promise<void>;
stopProducing: (type: ProduceType) => Promise<void> | undefined; stopProducing: (type: ProduceType) => Promise<void> | undefined;
} }
export interface VoiceState { export interface VoiceState {
roomId?: string; roomId?: string;
status: VoiceStatus; status: VoiceStatus;
participants?: Readonly<Map<string, VoiceUser>>; participants?: Readonly<Map<string, VoiceUser>>;
} }
// They should be present from first render. - insert's words // They should be present from first render. - insert's words
@ -40,168 +40,168 @@ export const VoiceContext = createContext<VoiceState>(null!);
export const VoiceOperationsContext = createContext<VoiceOperations>(null!); export const VoiceOperationsContext = createContext<VoiceOperations>(null!);
type Props = { type Props = {
children: Children; children: Children;
}; };
export default function Voice({ children }: Props) { export default function Voice({ children }: Props) {
const revoltClient = useContext(AppContext); const revoltClient = useContext(AppContext);
const [client, setClient] = useState<VoiceClient | undefined>(undefined); const [client, setClient] = useState<VoiceClient | undefined>(undefined);
const [state, setState] = useState<VoiceState>({ const [state, setState] = useState<VoiceState>({
status: VoiceStatus.LOADING, status: VoiceStatus.LOADING,
participants: new Map(), participants: new Map(),
}); });
function setStatus(status: VoiceStatus, roomId?: string) { function setStatus(status: VoiceStatus, roomId?: string) {
setState({ setState({
status, status,
roomId: roomId ?? client?.roomId, roomId: roomId ?? client?.roomId,
participants: client?.participants ?? new Map(), participants: client?.participants ?? new Map(),
}); });
} }
useEffect(() => { useEffect(() => {
import("../lib/vortex/VoiceClient") import("../lib/vortex/VoiceClient")
.then(({ default: VoiceClient }) => { .then(({ default: VoiceClient }) => {
const client = new VoiceClient(); const client = new VoiceClient();
setClient(client); setClient(client);
if (!client?.supported()) { if (!client?.supported()) {
setStatus(VoiceStatus.UNAVAILABLE); setStatus(VoiceStatus.UNAVAILABLE);
} else { } else {
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
} }
}) })
.catch((err) => { .catch((err) => {
console.error("Failed to load voice library!", err); console.error("Failed to load voice library!", err);
setStatus(VoiceStatus.UNAVAILABLE); setStatus(VoiceStatus.UNAVAILABLE);
}); });
}, []); }, []);
const isConnecting = useRef(false); const isConnecting = useRef(false);
const operations: VoiceOperations = useMemo(() => { const operations: VoiceOperations = useMemo(() => {
return { return {
connect: async (channelId) => { connect: async (channelId) => {
if (!client?.supported()) throw new Error("RTC is unavailable"); if (!client?.supported()) throw new Error("RTC is unavailable");
isConnecting.current = true; isConnecting.current = true;
setStatus(VoiceStatus.CONNECTING, channelId); setStatus(VoiceStatus.CONNECTING, channelId);
try { try {
const call = await revoltClient.channels.joinCall( const call = await revoltClient.channels.joinCall(
channelId, channelId,
); );
if (!isConnecting.current) { if (!isConnecting.current) {
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
return; return;
} }
// ! FIXME: use configuration to check if voso is enabled // ! FIXME: use configuration to check if voso is enabled
// await client.connect("wss://voso.revolt.chat/ws"); // await client.connect("wss://voso.revolt.chat/ws");
await client.connect( await client.connect(
"wss://voso.revolt.chat/ws", "wss://voso.revolt.chat/ws",
channelId, channelId,
); );
setStatus(VoiceStatus.AUTHENTICATING); setStatus(VoiceStatus.AUTHENTICATING);
await client.authenticate(call.token); await client.authenticate(call.token);
setStatus(VoiceStatus.RTC_CONNECTING); setStatus(VoiceStatus.RTC_CONNECTING);
await client.initializeTransports(); await client.initializeTransports();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
return; return;
} }
setStatus(VoiceStatus.CONNECTED); setStatus(VoiceStatus.CONNECTED);
isConnecting.current = false; isConnecting.current = false;
}, },
disconnect: () => { disconnect: () => {
if (!client?.supported()) throw new Error("RTC is unavailable"); if (!client?.supported()) throw new Error("RTC is unavailable");
// if (status <= VoiceStatus.READY) return; // if (status <= VoiceStatus.READY) return;
// this will not update in this context // this will not update in this context
isConnecting.current = false; isConnecting.current = false;
client.disconnect(); client.disconnect();
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
}, },
isProducing: (type: ProduceType) => { isProducing: (type: ProduceType) => {
switch (type) { switch (type) {
case "audio": case "audio":
return client?.audioProducer !== undefined; return client?.audioProducer !== undefined;
} }
}, },
startProducing: async (type: ProduceType) => { startProducing: async (type: ProduceType) => {
switch (type) { switch (type) {
case "audio": { case "audio": {
if (client?.audioProducer !== undefined) if (client?.audioProducer !== undefined)
return console.log("No audio producer."); // ! FIXME: let the user know return console.log("No audio producer."); // ! FIXME: let the user know
if (navigator.mediaDevices === undefined) if (navigator.mediaDevices === undefined)
return console.log("No media devices."); // ! FIXME: let the user know return console.log("No media devices."); // ! FIXME: let the user know
const mediaStream = const mediaStream =
await navigator.mediaDevices.getUserMedia({ await navigator.mediaDevices.getUserMedia({
audio: true, audio: true,
}); });
await client?.startProduce( await client?.startProduce(
mediaStream.getAudioTracks()[0], mediaStream.getAudioTracks()[0],
"audio", "audio",
); );
return; return;
} }
} }
}, },
stopProducing: (type: ProduceType) => { stopProducing: (type: ProduceType) => {
return client?.stopProduce(type); return client?.stopProduce(type);
}, },
}; };
}, [client]); }, [client]);
const { forceUpdate } = useForceUpdate(); const { forceUpdate } = useForceUpdate();
const playSound = useContext(SoundContext); const playSound = useContext(SoundContext);
useEffect(() => { useEffect(() => {
if (!client?.supported()) return; if (!client?.supported()) return;
// ! FIXME: message for fatal: // ! FIXME: message for fatal:
// ! get rid of these force updates // ! get rid of these force updates
// ! handle it through state or smth // ! handle it through state or smth
client.on("startProduce", forceUpdate); client.on("startProduce", forceUpdate);
client.on("stopProduce", forceUpdate); client.on("stopProduce", forceUpdate);
client.on("userJoined", () => { client.on("userJoined", () => {
playSound("call_join"); playSound("call_join");
forceUpdate(); forceUpdate();
}); });
client.on("userLeft", () => { client.on("userLeft", () => {
playSound("call_leave"); playSound("call_leave");
forceUpdate(); forceUpdate();
}); });
client.on("userStartProduce", forceUpdate); client.on("userStartProduce", forceUpdate);
client.on("userStopProduce", forceUpdate); client.on("userStopProduce", forceUpdate);
client.on("close", forceUpdate); client.on("close", forceUpdate);
return () => { return () => {
client.removeListener("startProduce", forceUpdate); client.removeListener("startProduce", forceUpdate);
client.removeListener("stopProduce", forceUpdate); client.removeListener("stopProduce", forceUpdate);
client.removeListener("userJoined", forceUpdate); client.removeListener("userJoined", forceUpdate);
client.removeListener("userLeft", forceUpdate); client.removeListener("userLeft", forceUpdate);
client.removeListener("userStartProduce", forceUpdate); client.removeListener("userStartProduce", forceUpdate);
client.removeListener("userStopProduce", forceUpdate); client.removeListener("userStopProduce", forceUpdate);
client.removeListener("close", forceUpdate); client.removeListener("close", forceUpdate);
}; };
}, [client, state]); }, [client, state]);
return ( return (
<VoiceContext.Provider value={state}> <VoiceContext.Provider value={state}>
<VoiceOperationsContext.Provider value={operations}> <VoiceOperationsContext.Provider value={operations}>
{children} {children}
</VoiceOperationsContext.Provider> </VoiceOperationsContext.Provider>
</VoiceContext.Provider> </VoiceContext.Provider>
); );
} }

34
src/context/index.tsx
View file

@ -11,21 +11,21 @@ import Intermediate from "./intermediate/Intermediate";
import Client from "./revoltjs/RevoltClient"; import Client from "./revoltjs/RevoltClient";
export default function Context({ children }: { children: Children }) { export default function Context({ children }: { children: Children }) {
return ( return (
<Router> <Router>
<State> <State>
<Theme> <Theme>
<Settings> <Settings>
<Locale> <Locale>
<Intermediate> <Intermediate>
<Client> <Client>
<Voice>{children}</Voice> <Voice>{children}</Voice>
</Client> </Client>
</Intermediate> </Intermediate>
</Locale> </Locale>
</Settings> </Settings>
</Theme> </Theme>
</State> </State>
</Router> </Router>
); );
} }

278
src/context/intermediate/Intermediate.tsx
View file

@ -1,11 +1,11 @@
import { Prompt } from "react-router"; import { Prompt } from "react-router";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { import {
Attachment, Attachment,
Channels, Channels,
EmbedImage, EmbedImage,
Servers, Servers,
Users, Users,
} from "revolt.js/dist/api/objects"; } from "revolt.js/dist/api/objects";
import { createContext } from "preact"; import { createContext } from "preact";
@ -19,161 +19,161 @@ import { Children } from "../../types/Preact";
import Modals from "./Modals"; import Modals from "./Modals";
export type Screen = export type Screen =
| { id: "none" } | { id: "none" }
// Modals // Modals
| { id: "signed_out" } | { id: "signed_out" }
| { id: "error"; error: string } | { id: "error"; error: string }
| { id: "clipboard"; text: string } | { id: "clipboard"; text: string }
| { | {
id: "_prompt"; id: "_prompt";
question: Children; question: Children;
content?: Children; content?: Children;
actions: Action[]; actions: Action[];
} }
| ({ id: "special_prompt" } & ( | ({ id: "special_prompt" } & (
| { type: "leave_group"; target: Channels.GroupChannel } | { type: "leave_group"; target: Channels.GroupChannel }
| { type: "close_dm"; target: Channels.DirectMessageChannel } | { type: "close_dm"; target: Channels.DirectMessageChannel }
| { type: "leave_server"; target: Servers.Server } | { type: "leave_server"; target: Servers.Server }
| { type: "delete_server"; target: Servers.Server } | { type: "delete_server"; target: Servers.Server }
| { type: "delete_channel"; target: Channels.TextChannel } | { type: "delete_channel"; target: Channels.TextChannel }
| { type: "delete_message"; target: Channels.Message } | { type: "delete_message"; target: Channels.Message }
| { | {
type: "create_invite"; type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel; target: Channels.TextChannel | Channels.GroupChannel;
} }
| { type: "kick_member"; target: Servers.Server; user: string } | { type: "kick_member"; target: Servers.Server; user: string }
| { type: "ban_member"; target: Servers.Server; user: string } | { type: "ban_member"; target: Servers.Server; user: string }
| { type: "unfriend_user"; target: Users.User } | { type: "unfriend_user"; target: Users.User }
| { type: "block_user"; target: Users.User } | { type: "block_user"; target: Users.User }
| { type: "create_channel"; target: Servers.Server } | { type: "create_channel"; target: Servers.Server }
)) ))
| ({ id: "special_input" } & ( | ({ id: "special_input" } & (
| { | {
type: type:
| "create_group" | "create_group"
| "create_server" | "create_server"
| "set_custom_status" | "set_custom_status"
| "add_friend"; | "add_friend";
} }
| { | {
type: "create_role"; type: "create_role";
server: string; server: string;
callback: (id: string) => void; callback: (id: string) => void;
} }
)) ))
| { | {
id: "_input"; id: "_input";
question: Children; question: Children;
field: Children; field: Children;
defaultValue?: string; defaultValue?: string;
callback: (value: string) => Promise<void>; callback: (value: string) => Promise<void>;
} }
| { | {
id: "onboarding"; id: "onboarding";
callback: ( callback: (
username: string, username: string,
loginAfterSuccess?: true, loginAfterSuccess?: true,
) => Promise<void>; ) => Promise<void>;
} }
// Pop-overs // Pop-overs
| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage } | { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
| { id: "modify_account"; field: "username" | "email" | "password" } | { id: "modify_account"; field: "username" | "email" | "password" }
| { id: "profile"; user_id: string } | { id: "profile"; user_id: string }
| { id: "channel_info"; channel_id: string } | { id: "channel_info"; channel_id: string }
| { id: "pending_requests"; users: string[] } | { id: "pending_requests"; users: string[] }
| { | {
id: "user_picker"; id: "user_picker";
omit?: string[]; omit?: string[];
callback: (users: string[]) => Promise<void>; callback: (users: string[]) => Promise<void>;
}; };
export const IntermediateContext = createContext({ export const IntermediateContext = createContext({
screen: { id: "none" } as Screen, screen: { id: "none" } as Screen,
focusTaken: false, focusTaken: false,
}); });
export const IntermediateActionsContext = createContext({ export const IntermediateActionsContext = createContext({
openScreen: (screen: Screen) => {}, openScreen: (screen: Screen) => {},
writeClipboard: (text: string) => {}, writeClipboard: (text: string) => {},
}); });
interface Props { interface Props {
children: Children; children: Children;
} }
export default function Intermediate(props: Props) { export default function Intermediate(props: Props) {
const [screen, openScreen] = useState<Screen>({ id: "none" }); const [screen, openScreen] = useState<Screen>({ id: "none" });
const history = useHistory(); const history = useHistory();
const value = { const value = {
screen, screen,
focusTaken: screen.id !== "none", focusTaken: screen.id !== "none",
}; };
const actions = useMemo(() => { const actions = useMemo(() => {
return { return {
openScreen: (screen: Screen) => openScreen(screen), openScreen: (screen: Screen) => openScreen(screen),
writeClipboard: (text: string) => { writeClipboard: (text: string) => {
if (navigator.clipboard) { if (navigator.clipboard) {
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text);
} else { } else {
actions.openScreen({ id: "clipboard", text }); actions.openScreen({ id: "clipboard", text });
} }
}, },
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
const openProfile = (user_id: string) => const openProfile = (user_id: string) =>
openScreen({ id: "profile", user_id }); openScreen({ id: "profile", user_id });
const navigate = (path: string) => history.push(path); const navigate = (path: string) => history.push(path);
const subs = [ const subs = [
internalSubscribe("Intermediate", "openProfile", openProfile), internalSubscribe("Intermediate", "openProfile", openProfile),
internalSubscribe("Intermediate", "navigate", navigate), internalSubscribe("Intermediate", "navigate", navigate),
]; ];
return () => subs.map((unsub) => unsub()); return () => subs.map((unsub) => unsub());
}, []); }, []);
return ( return (
<IntermediateContext.Provider value={value}> <IntermediateContext.Provider value={value}>
<IntermediateActionsContext.Provider value={actions}> <IntermediateActionsContext.Provider value={actions}>
{screen.id !== "onboarding" && props.children} {screen.id !== "onboarding" && props.children}
<Modals <Modals
{...value} {...value}
{...actions} {...actions}
key={ key={
screen.id screen.id
} /** By specifying a key, we reset state whenever switching screen. */ } /** By specifying a key, we reset state whenever switching screen. */
/> />
<Prompt <Prompt
when={[ when={[
"modify_account", "modify_account",
"special_prompt", "special_prompt",
"special_input", "special_input",
"image_viewer", "image_viewer",
"profile", "profile",
"channel_info", "channel_info",
"pending_requests", "pending_requests",
"user_picker", "user_picker",
].includes(screen.id)} ].includes(screen.id)}
message={(_, action) => { message={(_, action) => {
if (action === "POP") { if (action === "POP") {
openScreen({ id: "none" }); openScreen({ id: "none" });
setTimeout(() => history.push(history.location), 0); setTimeout(() => history.push(history.location), 0);
return false; return false;
} }
return true; return true;
}} }}
/> />
</IntermediateActionsContext.Provider> </IntermediateActionsContext.Provider>
</IntermediateContext.Provider> </IntermediateContext.Provider>
); );
} }
export const useIntermediate = () => useContext(IntermediateActionsContext); export const useIntermediate = () => useContext(IntermediateActionsContext);

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

@ -7,27 +7,27 @@ import { PromptModal } from "./modals/Prompt";
import { SignedOutModal } from "./modals/SignedOut"; import { SignedOutModal } from "./modals/SignedOut";
export interface Props { export interface Props {
screen: Screen; screen: Screen;
openScreen: (id: any) => void; openScreen: (id: any) => void;
} }
export default function Modals({ screen, openScreen }: Props) { export default function Modals({ screen, openScreen }: Props) {
const onClose = () => openScreen({ id: "none" }); const onClose = () => openScreen({ id: "none" });
switch (screen.id) { switch (screen.id) {
case "_prompt": case "_prompt":
return <PromptModal onClose={onClose} {...screen} />; return <PromptModal onClose={onClose} {...screen} />;
case "_input": case "_input":
return <InputModal onClose={onClose} {...screen} />; return <InputModal onClose={onClose} {...screen} />;
case "error": case "error":
return <ErrorModal onClose={onClose} {...screen} />; return <ErrorModal onClose={onClose} {...screen} />;
case "signed_out": case "signed_out":
return <SignedOutModal onClose={onClose} {...screen} />; return <SignedOutModal onClose={onClose} {...screen} />;
case "clipboard": case "clipboard":
return <ClipboardModal onClose={onClose} {...screen} />; return <ClipboardModal onClose={onClose} {...screen} />;
case "onboarding": case "onboarding":
return <OnboardingModal onClose={onClose} {...screen} />; return <OnboardingModal onClose={onClose} {...screen} />;
} }
return null; return null;
} }

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

@ -11,29 +11,29 @@ import { UserPicker } from "./popovers/UserPicker";
import { UserProfile } from "./popovers/UserProfile"; import { UserProfile } from "./popovers/UserProfile";
export default function Popovers() { export default function Popovers() {
const { screen } = useContext(IntermediateContext); const { screen } = useContext(IntermediateContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const onClose = () => openScreen({ id: "none" }); const onClose = () => openScreen({ id: "none" });
switch (screen.id) { switch (screen.id) {
case "profile": case "profile":
return <UserProfile {...screen} onClose={onClose} />; return <UserProfile {...screen} onClose={onClose} />;
case "user_picker": case "user_picker":
return <UserPicker {...screen} onClose={onClose} />; return <UserPicker {...screen} onClose={onClose} />;
case "image_viewer": case "image_viewer":
return <ImageViewer {...screen} onClose={onClose} />; return <ImageViewer {...screen} onClose={onClose} />;
case "channel_info": case "channel_info":
return <ChannelInfo {...screen} onClose={onClose} />; return <ChannelInfo {...screen} onClose={onClose} />;
case "pending_requests": case "pending_requests":
return <PendingRequests {...screen} onClose={onClose} />; return <PendingRequests {...screen} onClose={onClose} />;
case "modify_account": case "modify_account":
return <ModifyAccountModal onClose={onClose} {...screen} />; return <ModifyAccountModal onClose={onClose} {...screen} />;
case "special_prompt": case "special_prompt":
return <SpecialPromptModal onClose={onClose} {...screen} />; return <SpecialPromptModal onClose={onClose} {...screen} />;
case "special_input": case "special_input":
return <SpecialInputModal onClose={onClose} {...screen} />; return <SpecialInputModal onClose={onClose} {...screen} />;
} }
return null; return null;
} }

46
src/context/intermediate/modals/Clipboard.tsx
View file

@ -3,30 +3,30 @@ import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
text: string; text: string;
} }
export function ClipboardModal({ onClose, text }: Props) { export function ClipboardModal({ onClose, text }: Props) {
return ( return (
<Modal <Modal
visible={true} visible={true}
onClose={onClose} onClose={onClose}
title={<Text id="app.special.modals.clipboard.unavailable" />} title={<Text id="app.special.modals.clipboard.unavailable" />}
actions={[ actions={[
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.close" />, text: <Text id="app.special.modals.actions.close" />,
}, },
]}> ]}>
{location.protocol !== "https:" && ( {location.protocol !== "https:" && (
<p> <p>
<Text id="app.special.modals.clipboard.https" /> <Text id="app.special.modals.clipboard.https" />
</p> </p>
)} )}
<Text id="app.special.modals.clipboard.copy" />{" "} <Text id="app.special.modals.clipboard.copy" />{" "}
<code style={{ userSelect: "all" }}>{text}</code> <code style={{ userSelect: "all" }}>{text}</code>
</Modal> </Modal>
); );
} }

42
src/context/intermediate/modals/Error.tsx
View file

@ -3,28 +3,28 @@ import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
error: string; error: string;
} }
export function ErrorModal({ onClose, error }: Props) { export function ErrorModal({ onClose, error }: Props) {
return ( return (
<Modal <Modal
visible={true} visible={true}
onClose={() => false} onClose={() => false}
title={<Text id="app.special.modals.error" />} title={<Text id="app.special.modals.error" />}
actions={[ actions={[
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, text: <Text id="app.special.modals.actions.ok" />,
}, },
{ {
onClick: () => location.reload(), onClick: () => location.reload(),
text: <Text id="app.special.modals.actions.reload" />, text: <Text id="app.special.modals.actions.reload" />,
}, },
]}> ]}>
<Text id={`error.${error}`}>{error}</Text> <Text id={`error.${error}`}>{error}</Text>
</Modal> </Modal>
); );
} }

292
src/context/intermediate/modals/Input.tsx
View file

@ -13,164 +13,164 @@ import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util"; import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
question: Children; question: Children;
field?: Children; field?: Children;
defaultValue?: string; defaultValue?: string;
callback: (value: string) => Promise<void>; callback: (value: string) => Promise<void>;
} }
export function InputModal({ export function InputModal({
onClose, onClose,
question, question,
field, field,
defaultValue, defaultValue,
callback, callback,
}: Props) { }: Props) {
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [value, setValue] = useState(defaultValue ?? ""); const [value, setValue] = useState(defaultValue ?? "");
const [error, setError] = useState<undefined | string>(undefined); const [error, setError] = useState<undefined | string>(undefined);
return ( return (
<Modal <Modal
visible={true} visible={true}
title={question} title={question}
disabled={processing} disabled={processing}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, text: <Text id="app.special.modals.actions.ok" />,
onClick: () => { onClick: () => {
setProcessing(true); setProcessing(true);
callback(value) callback(value)
.then(onClose) .then(onClose)
.catch((err) => { .catch((err) => {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
}); });
}, },
}, },
{ {
text: <Text id="app.special.modals.actions.cancel" />, text: <Text id="app.special.modals.actions.cancel" />,
onClick: onClose, onClick: onClose,
}, },
]} ]}
onClose={onClose}> onClose={onClose}>
<form> <form>
{field ? ( {field ? (
<Overline error={error} block> <Overline error={error} block>
{field} {field}
</Overline> </Overline>
) : ( ) : (
error && <Overline error={error} type="error" block /> error && <Overline error={error} type="error" block />
)} )}
<InputBox <InputBox
value={value} value={value}
onChange={(e) => setValue(e.currentTarget.value)} onChange={(e) => setValue(e.currentTarget.value)}
/> />
</form> </form>
</Modal> </Modal>
); );
} }
type SpecialProps = { onClose: () => void } & ( type SpecialProps = { onClose: () => void } & (
| { | {
type: type:
| "create_group" | "create_group"
| "create_server" | "create_server"
| "set_custom_status" | "set_custom_status"
| "add_friend"; | "add_friend";
} }
| { type: "create_role"; server: string; callback: (id: string) => void } | { type: "create_role"; server: string; callback: (id: string) => void }
); );
export function SpecialInputModal(props: SpecialProps) { export function SpecialInputModal(props: SpecialProps) {
const history = useHistory(); const history = useHistory();
const client = useContext(AppContext); const client = useContext(AppContext);
const { onClose } = props; const { onClose } = props;
switch (props.type) { switch (props.type) {
case "create_group": { case "create_group": {
return ( return (
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={<Text id="app.main.groups.create" />} question={<Text id="app.main.groups.create" />}
field={<Text id="app.main.groups.name" />} field={<Text id="app.main.groups.name" />}
callback={async (name) => { callback={async (name) => {
const group = await client.channels.createGroup({ const group = await client.channels.createGroup({
name, name,
nonce: ulid(), nonce: ulid(),
users: [], users: [],
}); });
history.push(`/channel/${group._id}`); history.push(`/channel/${group._id}`);
}} }}
/> />
); );
} }
case "create_server": { case "create_server": {
return ( return (
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={<Text id="app.main.servers.create" />} question={<Text id="app.main.servers.create" />}
field={<Text id="app.main.servers.name" />} field={<Text id="app.main.servers.name" />}
callback={async (name) => { callback={async (name) => {
const server = await client.servers.createServer({ const server = await client.servers.createServer({
name, name,
nonce: ulid(), nonce: ulid(),
}); });
history.push(`/server/${server._id}`); history.push(`/server/${server._id}`);
}} }}
/> />
); );
} }
case "create_role": { case "create_role": {
return ( return (
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={ question={
<Text id="app.settings.permissions.create_role" /> <Text id="app.settings.permissions.create_role" />
} }
field={<Text id="app.settings.permissions.role_name" />} field={<Text id="app.settings.permissions.role_name" />}
callback={async (name) => { callback={async (name) => {
const role = await client.servers.createRole( const role = await client.servers.createRole(
props.server, props.server,
name, name,
); );
props.callback(role.id); props.callback(role.id);
}} }}
/> />
); );
} }
case "set_custom_status": { case "set_custom_status": {
return ( return (
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={<Text id="app.context_menu.set_custom_status" />} question={<Text id="app.context_menu.set_custom_status" />}
field={<Text id="app.context_menu.custom_status" />} field={<Text id="app.context_menu.custom_status" />}
defaultValue={client.user?.status?.text} defaultValue={client.user?.status?.text}
callback={(text) => callback={(text) =>
client.users.editUser({ client.users.editUser({
status: { status: {
...client.user?.status, ...client.user?.status,
text: text.trim().length > 0 ? text : undefined, text: text.trim().length > 0 ? text : undefined,
}, },
}) })
} }
/> />
); );
} }
case "add_friend": { case "add_friend": {
return ( return (
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={"Add Friend"} question={"Add Friend"}
callback={(username) => client.users.addFriend(username)} callback={(username) => client.users.addFriend(username)}
/> />
); );
} }
default: default:
return null; return null;
} }
} }

110
src/context/intermediate/modals/Onboarding.tsx
View file

@ -12,67 +12,67 @@ import FormField from "../../../pages/login/FormField";
import { takeError } from "../../revoltjs/util"; import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
callback: (username: string, loginAfterSuccess?: true) => Promise<void>; callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
} }
interface FormInputs { interface FormInputs {
username: string; username: string;
} }
export function OnboardingModal({ onClose, callback }: Props) { export function OnboardingModal({ onClose, callback }: Props) {
const { handleSubmit, register } = useForm<FormInputs>(); const { handleSubmit, register } = useForm<FormInputs>();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const onSubmit: SubmitHandler<FormInputs> = ({ username }) => { const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
setLoading(true); setLoading(true);
callback(username, true) callback(username, true)
.then(onClose) .then(onClose)
.catch((err: any) => { .catch((err: any) => {
setError(takeError(err)); setError(takeError(err));
setLoading(false); setLoading(false);
}); });
}; };
return ( return (
<div className={styles.onboarding}> <div className={styles.onboarding}>
<div className={styles.header}> <div className={styles.header}>
<h1> <h1>
<Text id="app.special.modals.onboarding.welcome" /> <Text id="app.special.modals.onboarding.welcome" />
<img src={wideSVG} /> <img src={wideSVG} />
</h1> </h1>
</div> </div>
<div className={styles.form}> <div className={styles.form}>
{loading ? ( {loading ? (
<Preloader type="spinner" /> <Preloader type="spinner" />
) : ( ) : (
<> <>
<p> <p>
<Text id="app.special.modals.onboarding.pick" /> <Text id="app.special.modals.onboarding.pick" />
</p> </p>
<form <form
onSubmit={ onSubmit={
handleSubmit( handleSubmit(
onSubmit, onSubmit,
) as JSX.GenericEventHandler<HTMLFormElement> ) as JSX.GenericEventHandler<HTMLFormElement>
}> }>
<div> <div>
<FormField <FormField
type="username" type="username"
register={register} register={register}
showOverline showOverline
error={error} error={error}
/> />
</div> </div>
<Button type="submit"> <Button type="submit">
<Text id="app.special.modals.actions.continue" /> <Text id="app.special.modals.actions.continue" />
</Button> </Button>
</form> </form>
</> </>
)} )}
</div> </div>
<div /> <div />
</div> </div>
); );
} }

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

@ -21,453 +21,453 @@ import { mapMessage, takeError } from "../../revoltjs/util";
import { useIntermediate } from "../Intermediate"; import { useIntermediate } from "../Intermediate";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
question: Children; question: Children;
content?: Children; content?: Children;
disabled?: boolean; disabled?: boolean;
actions: Action[]; actions: Action[];
error?: string; error?: string;
} }
export function PromptModal({ export function PromptModal({
onClose, onClose,
question, question,
content, content,
actions, actions,
disabled, disabled,
error, error,
}: Props) { }: Props) {
return ( return (
<Modal <Modal
visible={true} visible={true}
title={question} title={question}
actions={actions} actions={actions}
onClose={onClose} onClose={onClose}
disabled={disabled}> disabled={disabled}>
{error && <Overline error={error} type="error" />} {error && <Overline error={error} type="error" />}
{content} {content}
</Modal> </Modal>
); );
} }
type SpecialProps = { onClose: () => void } & ( type SpecialProps = { onClose: () => void } & (
| { type: "leave_group"; target: Channels.GroupChannel } | { type: "leave_group"; target: Channels.GroupChannel }
| { type: "close_dm"; target: Channels.DirectMessageChannel } | { type: "close_dm"; target: Channels.DirectMessageChannel }
| { type: "leave_server"; target: Servers.Server } | { type: "leave_server"; target: Servers.Server }
| { type: "delete_server"; target: Servers.Server } | { type: "delete_server"; target: Servers.Server }
| { type: "delete_channel"; target: Channels.TextChannel } | { type: "delete_channel"; target: Channels.TextChannel }
| { type: "delete_message"; target: Channels.Message } | { type: "delete_message"; target: Channels.Message }
| { | {
type: "create_invite"; type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel; target: Channels.TextChannel | Channels.GroupChannel;
} }
| { type: "kick_member"; target: Servers.Server; user: string } | { type: "kick_member"; target: Servers.Server; user: string }
| { type: "ban_member"; target: Servers.Server; user: string } | { type: "ban_member"; target: Servers.Server; user: string }
| { type: "unfriend_user"; target: Users.User } | { type: "unfriend_user"; target: Users.User }
| { type: "block_user"; target: Users.User } | { type: "block_user"; target: Users.User }
| { type: "create_channel"; target: Servers.Server } | { type: "create_channel"; target: Servers.Server }
); );
export function SpecialPromptModal(props: SpecialProps) { export function SpecialPromptModal(props: SpecialProps) {
const client = useContext(AppContext); const client = useContext(AppContext);
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [error, setError] = useState<undefined | string>(undefined); const [error, setError] = useState<undefined | string>(undefined);
const { onClose } = props; const { onClose } = props;
switch (props.type) { switch (props.type) {
case "leave_group": case "leave_group":
case "close_dm": case "close_dm":
case "leave_server": case "leave_server":
case "delete_server": case "delete_server":
case "delete_channel": case "delete_channel":
case "unfriend_user": case "unfriend_user":
case "block_user": { case "block_user": {
const EVENTS = { const EVENTS = {
close_dm: ["confirm_close_dm", "close"], close_dm: ["confirm_close_dm", "close"],
delete_server: ["confirm_delete", "delete"], delete_server: ["confirm_delete", "delete"],
delete_channel: ["confirm_delete", "delete"], delete_channel: ["confirm_delete", "delete"],
leave_group: ["confirm_leave", "leave"], leave_group: ["confirm_leave", "leave"],
leave_server: ["confirm_leave", "leave"], leave_server: ["confirm_leave", "leave"],
unfriend_user: ["unfriend_user", "remove"], unfriend_user: ["unfriend_user", "remove"],
block_user: ["block_user", "block"], block_user: ["block_user", "block"],
}; };
let event = EVENTS[props.type]; let event = EVENTS[props.type];
let name; let name;
switch (props.type) { switch (props.type) {
case "unfriend_user": case "unfriend_user":
case "block_user": case "block_user":
name = props.target.username; name = props.target.username;
break; break;
case "close_dm": case "close_dm":
name = client.users.get( name = client.users.get(
client.channels.getRecipient(props.target._id), client.channels.getRecipient(props.target._id),
)?.username; )?.username;
break; break;
default: default:
name = props.target.name; name = props.target.name;
} }
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={ question={
<Text <Text
id={`app.special.modals.prompt.${event[0]}`} id={`app.special.modals.prompt.${event[0]}`}
fields={{ name }} fields={{ name }}
/> />
} }
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( text: (
<Text <Text
id={`app.special.modals.actions.${event[1]}`} id={`app.special.modals.actions.${event[1]}`}
/> />
), ),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
switch (props.type) { switch (props.type) {
case "unfriend_user": case "unfriend_user":
await client.users.removeFriend( await client.users.removeFriend(
props.target._id, props.target._id,
); );
break; break;
case "block_user": case "block_user":
await client.users.blockUser( await client.users.blockUser(
props.target._id, props.target._id,
); );
break; break;
case "leave_group": case "leave_group":
case "close_dm": case "close_dm":
case "delete_channel": case "delete_channel":
await client.channels.delete( await client.channels.delete(
props.target._id, props.target._id,
); );
break; break;
case "leave_server": case "leave_server":
case "delete_server": case "delete_server":
await client.servers.delete( await client.servers.delete(
props.target._id, props.target._id,
); );
break; break;
} }
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}, },
}, },
{ {
text: ( text: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
}, },
]} ]}
content={ content={
<TextReact <TextReact
id={`app.special.modals.prompt.${event[0]}_long`} id={`app.special.modals.prompt.${event[0]}_long`}
fields={{ name: <b>{name}</b> }} fields={{ name: <b>{name}</b> }}
/> />
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
case "delete_message": { case "delete_message": {
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={"app.context_menu.delete_message"} />} question={<Text id={"app.context_menu.delete_message"} />}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( text: (
<Text id="app.special.modals.actions.delete" /> <Text id="app.special.modals.actions.delete" />
), ),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.channels.deleteMessage( await client.channels.deleteMessage(
props.target.channel, props.target.channel,
props.target._id, props.target._id,
); );
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}, },
}, },
{ {
text: ( text: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
}, },
]} ]}
content={ content={
<> <>
<Text <Text
id={`app.special.modals.prompt.confirm_delete_message_long`} id={`app.special.modals.prompt.confirm_delete_message_long`}
/> />
<Message <Message
message={mapMessage(props.target)} message={mapMessage(props.target)}
head={true} head={true}
contrast contrast
/> />
</> </>
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
case "create_invite": { case "create_invite": {
const [code, setCode] = useState("abcdef"); const [code, setCode] = useState("abcdef");
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
useEffect(() => { useEffect(() => {
setProcessing(true); setProcessing(true);
client.channels client.channels
.createInvite(props.target._id) .createInvite(props.target._id)
.then((code) => setCode(code)) .then((code) => setCode(code))
.catch((err) => setError(takeError(err))) .catch((err) => setError(takeError(err)))
.finally(() => setProcessing(false)); .finally(() => setProcessing(false));
}, []); }, []);
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={`app.context_menu.create_invite`} />} question={<Text id={`app.context_menu.create_invite`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, text: <Text id="app.special.modals.actions.ok" />,
confirmation: true, confirmation: true,
onClick: onClose, onClick: onClose,
}, },
{ {
text: <Text id="app.context_menu.copy_link" />, text: <Text id="app.context_menu.copy_link" />,
onClick: () => onClick: () =>
writeClipboard( writeClipboard(
`${window.location.protocol}//${window.location.host}/invite/${code}`, `${window.location.protocol}//${window.location.host}/invite/${code}`,
), ),
}, },
]} ]}
content={ content={
processing ? ( processing ? (
<Text id="app.special.modals.prompt.create_invite_generate" /> <Text id="app.special.modals.prompt.create_invite_generate" />
) : ( ) : (
<div className={styles.invite}> <div className={styles.invite}>
<Text id="app.special.modals.prompt.create_invite_created" /> <Text id="app.special.modals.prompt.create_invite_created" />
<code>{code}</code> <code>{code}</code>
</div> </div>
) )
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
case "kick_member": { case "kick_member": {
const user = client.users.get(props.user); const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={`app.context_menu.kick_member`} />} question={<Text id={`app.context_menu.kick_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.kick" />, text: <Text id="app.special.modals.actions.kick" />,
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.members.kickMember( await client.servers.members.kickMember(
props.target._id, props.target._id,
props.user, props.user,
); );
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}, },
}, },
{ {
text: ( text: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
}, },
]} ]}
content={ content={
<div className={styles.column}> <div className={styles.column}>
<UserIcon target={user} size={64} /> <UserIcon target={user} size={64} />
<Text <Text
id="app.special.modals.prompt.confirm_kick" id="app.special.modals.prompt.confirm_kick"
fields={{ name: user?.username }} fields={{ name: user?.username }}
/> />
</div> </div>
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
case "ban_member": { case "ban_member": {
const [reason, setReason] = useState<string | undefined>(undefined); const [reason, setReason] = useState<string | undefined>(undefined);
const user = client.users.get(props.user); const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={`app.context_menu.ban_member`} />} question={<Text id={`app.context_menu.ban_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ban" />, text: <Text id="app.special.modals.actions.ban" />,
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.banUser( await client.servers.banUser(
props.target._id, props.target._id,
props.user, props.user,
{ reason }, { reason },
); );
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}, },
}, },
{ {
text: ( text: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
}, },
]} ]}
content={ content={
<div className={styles.column}> <div className={styles.column}>
<UserIcon target={user} size={64} /> <UserIcon target={user} size={64} />
<Text <Text
id="app.special.modals.prompt.confirm_ban" id="app.special.modals.prompt.confirm_ban"
fields={{ name: user?.username }} fields={{ name: user?.username }}
/> />
<Overline> <Overline>
<Text id="app.special.modals.prompt.confirm_ban_reason" /> <Text id="app.special.modals.prompt.confirm_ban_reason" />
</Overline> </Overline>
<InputBox <InputBox
value={reason ?? ""} value={reason ?? ""}
onChange={(e) => onChange={(e) =>
setReason(e.currentTarget.value) setReason(e.currentTarget.value)
} }
/> />
</div> </div>
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
case "create_channel": { case "create_channel": {
const [name, setName] = useState(""); const [name, setName] = useState("");
const [type, setType] = useState<"Text" | "Voice">("Text"); const [type, setType] = useState<"Text" | "Voice">("Text");
const history = useHistory(); const history = useHistory();
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id="app.context_menu.create_channel" />} question={<Text id="app.context_menu.create_channel" />}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
text: ( text: (
<Text id="app.special.modals.actions.create" /> <Text id="app.special.modals.actions.create" />
), ),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
const channel = const channel =
await client.servers.createChannel( await client.servers.createChannel(
props.target._id, props.target._id,
{ {
type, type,
name, name,
nonce: ulid(), nonce: ulid(),
}, },
); );
history.push( history.push(
`/server/${props.target._id}/channel/${channel._id}`, `/server/${props.target._id}/channel/${channel._id}`,
); );
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}, },
}, },
{ {
text: ( text: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
}, },
]} ]}
content={ content={
<> <>
<Overline block type="subtle"> <Overline block type="subtle">
<Text id="app.main.servers.channel_type" /> <Text id="app.main.servers.channel_type" />
</Overline> </Overline>
<Radio <Radio
checked={type === "Text"} checked={type === "Text"}
onSelect={() => setType("Text")}> onSelect={() => setType("Text")}>
<Text id="app.main.servers.text_channel" /> <Text id="app.main.servers.text_channel" />
</Radio> </Radio>
<Radio <Radio
checked={type === "Voice"} checked={type === "Voice"}
onSelect={() => setType("Voice")}> onSelect={() => setType("Voice")}>
<Text id="app.main.servers.voice_channel" /> <Text id="app.main.servers.voice_channel" />
</Radio> </Radio>
<Overline block type="subtle"> <Overline block type="subtle">
<Text id="app.main.servers.channel_name" /> <Text id="app.main.servers.channel_name" />
</Overline> </Overline>
<InputBox <InputBox
value={name} value={name}
onChange={(e) => setName(e.currentTarget.value)} onChange={(e) => setName(e.currentTarget.value)}
/> />
</> </>
} }
disabled={processing} disabled={processing}
error={error} error={error}
/> />
); );
} }
default: default:
return null; return null;
} }
} }

30
src/context/intermediate/modals/SignedOut.tsx
View file

@ -3,22 +3,22 @@ import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
} }
export function SignedOutModal({ onClose }: Props) { export function SignedOutModal({ onClose }: Props) {
return ( return (
<Modal <Modal
visible={true} visible={true}
onClose={onClose} onClose={onClose}
title={<Text id="app.special.modals.signed_out" />} title={<Text id="app.special.modals.signed_out" />}
actions={[ actions={[
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, text: <Text id="app.special.modals.actions.ok" />,
}, },
]} ]}
/> />
); );
} }

54
src/context/intermediate/popovers/ChannelInfo.tsx
View file

@ -9,36 +9,36 @@ import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
import { getChannelName } from "../../revoltjs/util"; import { getChannelName } from "../../revoltjs/util";
interface Props { interface Props {
channel_id: string; channel_id: string;
onClose: () => void; onClose: () => void;
} }
export function ChannelInfo({ channel_id, onClose }: Props) { export function ChannelInfo({ channel_id, onClose }: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const channel = useChannel(channel_id, ctx); const channel = useChannel(channel_id, ctx);
if (!channel) return null; if (!channel) return null;
if ( if (
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
channel.channel_type === "SavedMessages" channel.channel_type === "SavedMessages"
) { ) {
onClose(); onClose();
return null; return null;
} }
return ( return (
<Modal visible={true} onClose={onClose}> <Modal visible={true} onClose={onClose}>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.header}> <div className={styles.header}>
<h1>{getChannelName(ctx.client, channel, true)}</h1> <h1>{getChannelName(ctx.client, channel, true)}</h1>
<div onClick={onClose}> <div onClick={onClose}>
<X size={36} /> <X size={36} />
</div> </div>
</div> </div>
<p> <p>
<Markdown content={channel.description} /> <Markdown content={channel.description} />
</p> </p>
</div> </div>
</Modal> </Modal>
); );
} }

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

@ -10,37 +10,37 @@ import Modal from "../../../components/ui/Modal";
import { AppContext } from "../../revoltjs/RevoltClient"; import { AppContext } from "../../revoltjs/RevoltClient";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
embed?: EmbedImage; embed?: EmbedImage;
attachment?: Attachment; attachment?: Attachment;
} }
export function ImageViewer({ attachment, embed, onClose }: Props) { 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") return null; if (attachment && attachment.metadata.type !== "Image") return null;
const client = useContext(AppContext); const client = useContext(AppContext);
return ( return (
<Modal visible={true} onClose={onClose} noBackground> <Modal visible={true} onClose={onClose} noBackground>
<div className={styles.viewer}> <div className={styles.viewer}>
{attachment && ( {attachment && (
<> <>
<img src={client.generateFileURL(attachment)} /> <img src={client.generateFileURL(attachment)} />
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</> </>
)} )}
{embed && ( {embed && (
<> <>
<img src={proxyImage(embed.url)} /> <img src={proxyImage(embed.url)} />
<EmbedMediaActions embed={embed} /> <EmbedMediaActions embed={embed} />
</> </>
)} )}
</div> </div>
</Modal> </Modal>
); );
} }

222
src/context/intermediate/popovers/ModifyAccount.tsx
View file

@ -11,124 +11,124 @@ import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util"; import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
field: "username" | "email" | "password"; field: "username" | "email" | "password";
} }
interface FormInputs { interface FormInputs {
password: string; password: string;
new_email: string; new_email: string;
new_username: string; new_username: string;
new_password: string; new_password: string;
// TODO: figure out if this is correct or not // TODO: figure out if this is correct or not
// it wasn't in the types before this was typed but the element itself was there // it wasn't in the types before this was typed but the element itself was there
current_password?: string; current_password?: string;
} }
export function ModifyAccountModal({ onClose, field }: Props) { export function ModifyAccountModal({ onClose, field }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { handleSubmit, register, errors } = useForm<FormInputs>(); const { handleSubmit, register, errors } = useForm<FormInputs>();
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const onSubmit: SubmitHandler<FormInputs> = async ({ const onSubmit: SubmitHandler<FormInputs> = async ({
password, password,
new_username, new_username,
new_email, new_email,
new_password, new_password,
}) => { }) => {
try { try {
if (field === "email") { if (field === "email") {
await client.req("POST", "/auth/change/email", { await client.req("POST", "/auth/change/email", {
password, password,
new_email, new_email,
}); });
onClose(); onClose();
} else if (field === "password") { } else if (field === "password") {
await client.req("POST", "/auth/change/password", { await client.req("POST", "/auth/change/password", {
password, password,
new_password, new_password,
}); });
onClose(); onClose();
} else if (field === "username") { } else if (field === "username") {
await client.req("PATCH", "/users/id/username", { await client.req("PATCH", "/users/id/username", {
username: new_username, username: new_username,
password, password,
}); });
onClose(); onClose();
} }
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
} }
}; };
return ( return (
<Modal <Modal
visible={true} visible={true}
onClose={onClose} onClose={onClose}
title={<Text id={`app.special.modals.account.change.${field}`} />} title={<Text id={`app.special.modals.account.change.${field}`} />}
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
onClick: handleSubmit(onSubmit), onClick: handleSubmit(onSubmit),
text: text:
field === "email" ? ( field === "email" ? (
<Text id="app.special.modals.actions.send_email" /> <Text id="app.special.modals.actions.send_email" />
) : ( ) : (
<Text id="app.special.modals.actions.update" /> <Text id="app.special.modals.actions.update" />
), ),
}, },
{ {
onClick: onClose, onClick: onClose,
text: <Text id="app.special.modals.actions.close" />, text: <Text id="app.special.modals.actions.close" />,
}, },
]}> ]}>
{/* Preact / React typing incompatabilities */} {/* Preact / React typing incompatabilities */}
<form <form
onSubmit={ onSubmit={
handleSubmit( handleSubmit(
onSubmit, onSubmit,
) as JSX.GenericEventHandler<HTMLFormElement> ) as JSX.GenericEventHandler<HTMLFormElement>
}> }>
{field === "email" && ( {field === "email" && (
<FormField <FormField
type="email" type="email"
name="new_email" name="new_email"
register={register} register={register}
showOverline showOverline
error={errors.new_email?.message} error={errors.new_email?.message}
/> />
)} )}
{field === "password" && ( {field === "password" && (
<FormField <FormField
type="password" type="password"
name="new_password" name="new_password"
register={register} register={register}
showOverline showOverline
error={errors.new_password?.message} error={errors.new_password?.message}
/> />
)} )}
{field === "username" && ( {field === "username" && (
<FormField <FormField
type="username" type="username"
name="new_username" name="new_username"
register={register} register={register}
showOverline showOverline
error={errors.new_username?.message} error={errors.new_username?.message}
/> />
)} )}
<FormField <FormField
type="current_password" type="current_password"
register={register} register={register}
showOverline showOverline
error={errors.current_password?.message} error={errors.current_password?.message}
/> />
{error && ( {error && (
<Overline type="error" error={error}> <Overline type="error" error={error}>
<Text id="app.special.modals.account.failed" /> <Text id="app.special.modals.account.failed" />
</Overline> </Overline>
)} )}
</form> </form>
</Modal> </Modal>
); );
} }

34
src/context/intermediate/popovers/PendingRequests.tsx
View file

@ -7,25 +7,25 @@ import { Friend } from "../../../pages/friends/Friend";
import { useUsers } from "../../revoltjs/hooks"; import { useUsers } from "../../revoltjs/hooks";
interface Props { interface Props {
users: string[]; users: string[];
onClose: () => void; onClose: () => void;
} }
export function PendingRequests({ users: ids, onClose }: Props) { export function PendingRequests({ users: ids, onClose }: Props) {
const users = useUsers(ids); const users = useUsers(ids);
return ( return (
<Modal <Modal
visible={true} visible={true}
title={<Text id="app.special.friends.pending" />} title={<Text id="app.special.friends.pending" />}
onClose={onClose}> onClose={onClose}>
<div className={styles.list}> <div className={styles.list}>
{users {users
.filter((x) => typeof x !== "undefined") .filter((x) => typeof x !== "undefined")
.map((x) => ( .map((x) => (
<Friend user={x!} key={x!._id} /> <Friend user={x!} key={x!._id} />
))} ))}
</div> </div>
</Modal> </Modal>
); );
} }

100
src/context/intermediate/popovers/UserPicker.tsx
View file

@ -10,59 +10,59 @@ import Modal from "../../../components/ui/Modal";
import { useUsers } from "../../revoltjs/hooks"; import { useUsers } from "../../revoltjs/hooks";
interface Props { interface Props {
omit?: string[]; omit?: string[];
onClose: () => void; onClose: () => void;
callback: (users: string[]) => Promise<void>; callback: (users: string[]) => Promise<void>;
} }
export function UserPicker(props: Props) { export function UserPicker(props: Props) {
const [selected, setSelected] = useState<string[]>([]); const [selected, setSelected] = useState<string[]>([]);
const omit = [...(props.omit || []), "00000000000000000000000000"]; const omit = [...(props.omit || []), "00000000000000000000000000"];
const users = useUsers(); const users = useUsers();
return ( return (
<Modal <Modal
visible={true} visible={true}
title={<Text id="app.special.popovers.user_picker.select" />} title={<Text id="app.special.popovers.user_picker.select" />}
onClose={props.onClose} onClose={props.onClose}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, text: <Text id="app.special.modals.actions.ok" />,
onClick: () => props.callback(selected).then(props.onClose), onClick: () => props.callback(selected).then(props.onClose),
}, },
]}> ]}>
<div className={styles.list}> <div className={styles.list}>
{( {(
users.filter( users.filter(
(x) => (x) =>
x && x &&
x.relationship === Users.Relationship.Friend && x.relationship === Users.Relationship.Friend &&
!omit.includes(x._id), !omit.includes(x._id),
) as User[] ) as User[]
) )
.map((x) => { .map((x) => {
return { return {
...x, ...x,
selected: selected.includes(x._id), selected: selected.includes(x._id),
}; };
}) })
.map((x) => ( .map((x) => (
<UserCheckbox <UserCheckbox
user={x} user={x}
checked={x.selected} checked={x.selected}
onChange={(v) => { onChange={(v) => {
if (v) { if (v) {
setSelected([...selected, x._id]); setSelected([...selected, x._id]);
} else { } else {
setSelected( setSelected(
selected.filter((y) => y !== x._id), selected.filter((y) => y !== x._id),
); );
} }
}} }}
/> />
))} ))}
</div> </div>
</Modal> </Modal>
); );
} }

626
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -1,9 +1,9 @@
import { import {
Envelope, Envelope,
Edit, Edit,
UserPlus, UserPlus,
Shield, Shield,
Money, Money,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
@ -25,338 +25,338 @@ import Preloader from "../../../components/ui/Preloader";
import Markdown from "../../../components/markdown/Markdown"; import Markdown from "../../../components/markdown/Markdown";
import { import {
AppContext, AppContext,
ClientStatus, ClientStatus,
StatusContext, StatusContext,
} from "../../revoltjs/RevoltClient"; } from "../../revoltjs/RevoltClient";
import { import {
useChannels, useChannels,
useForceUpdate, useForceUpdate,
useUserPermission, useUserPermission,
useUsers, useUsers,
} from "../../revoltjs/hooks"; } from "../../revoltjs/hooks";
import { useIntermediate } from "../Intermediate"; import { useIntermediate } from "../Intermediate";
interface Props { interface Props {
user_id: string; user_id: string;
dummy?: boolean; dummy?: boolean;
onClose: () => void; onClose: () => void;
dummyProfile?: Users.Profile; dummyProfile?: Users.Profile;
} }
enum Badges { enum Badges {
Developer = 1, Developer = 1,
Translator = 2, Translator = 2,
Supporter = 4, Supporter = 4,
ResponsibleDisclosure = 8, ResponsibleDisclosure = 8,
EarlyAdopter = 256, EarlyAdopter = 256,
} }
export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) { export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
const { openScreen, writeClipboard } = useIntermediate(); const { openScreen, writeClipboard } = useIntermediate();
const [profile, setProfile] = useState<undefined | null | Users.Profile>( const [profile, setProfile] = useState<undefined | null | Users.Profile>(
undefined, undefined,
); );
const [mutual, setMutual] = useState< const [mutual, setMutual] = useState<
undefined | null | Route<"GET", "/users/id/mutual">["response"] undefined | null | Route<"GET", "/users/id/mutual">["response"]
>(undefined); >(undefined);
const history = useHistory(); const history = useHistory();
const client = useContext(AppContext); const client = useContext(AppContext);
const status = useContext(StatusContext); const status = useContext(StatusContext);
const [tab, setTab] = useState("profile"); const [tab, setTab] = useState("profile");
const ctx = useForceUpdate(); const ctx = useForceUpdate();
const all_users = useUsers(undefined, ctx); const all_users = useUsers(undefined, ctx);
const channels = useChannels(undefined, ctx); const channels = useChannels(undefined, ctx);
const user = all_users.find((x) => x!._id === user_id); const user = all_users.find((x) => x!._id === user_id);
const users = mutual?.users const users = mutual?.users
? all_users.filter((x) => mutual.users.includes(x!._id)) ? all_users.filter((x) => mutual.users.includes(x!._id))
: undefined; : undefined;
if (!user) { if (!user) {
useEffect(onClose, []); useEffect(onClose, []);
return null; return null;
} }
const permissions = useUserPermission(user!._id, ctx); const permissions = useUserPermission(user!._id, ctx);
useLayoutEffect(() => { useLayoutEffect(() => {
if (!user_id) return; if (!user_id) return;
if (typeof profile !== "undefined") setProfile(undefined); if (typeof profile !== "undefined") setProfile(undefined);
if (typeof mutual !== "undefined") setMutual(undefined); if (typeof mutual !== "undefined") setMutual(undefined);
}, [user_id]); }, [user_id]);
if (dummy) { if (dummy) {
useLayoutEffect(() => { useLayoutEffect(() => {
setProfile(dummyProfile); setProfile(dummyProfile);
}, [dummyProfile]); }, [dummyProfile]);
} }
useEffect(() => { useEffect(() => {
if (dummy) return; if (dummy) return;
if (status === ClientStatus.ONLINE && typeof mutual === "undefined") { if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
setMutual(null); setMutual(null);
client.users.fetchMutual(user_id).then((data) => setMutual(data)); client.users.fetchMutual(user_id).then((data) => setMutual(data));
} }
}, [mutual, status]); }, [mutual, status]);
useEffect(() => { useEffect(() => {
if (dummy) return; if (dummy) return;
if (status === ClientStatus.ONLINE && typeof profile === "undefined") { if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
setProfile(null); setProfile(null);
if (permissions & UserPermission.ViewProfile) { if (permissions & UserPermission.ViewProfile) {
client.users client.users
.fetchProfile(user_id) .fetchProfile(user_id)
.then((data) => setProfile(data)) .then((data) => setProfile(data))
.catch(() => {}); .catch(() => {});
} }
} }
}, [profile, status]); }, [profile, status]);
const mutualGroups = channels.filter( const mutualGroups = channels.filter(
(channel) => (channel) =>
channel?.channel_type === "Group" && channel?.channel_type === "Group" &&
channel.recipients.includes(user_id), channel.recipients.includes(user_id),
); );
const backgroundURL = const backgroundURL =
profile && profile &&
client.users.getBackgroundURL(profile, { width: 1000 }, true); client.users.getBackgroundURL(profile, { width: 1000 }, true);
const badges = const badges =
(user.badges ?? 0) | (user.badges ?? 0) |
(decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0); (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
return ( return (
<Modal <Modal
visible visible
border={dummy} border={dummy}
padding={false} padding={false}
onClose={onClose} onClose={onClose}
dontModal={dummy}> dontModal={dummy}>
<div <div
className={styles.header} className={styles.header}
data-force={profile?.background ? "light" : undefined} data-force={profile?.background ? "light" : undefined}
style={{ style={{
backgroundImage: backgroundImage:
backgroundURL && backgroundURL &&
`linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`, `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
}}> }}>
<div className={styles.profile}> <div className={styles.profile}>
<UserIcon size={80} target={user} status /> <UserIcon size={80} target={user} status />
<div className={styles.details}> <div className={styles.details}>
<Localizer> <Localizer>
<span <span
className={styles.username} className={styles.username}
onClick={() => writeClipboard(user.username)}> onClick={() => writeClipboard(user.username)}>
@{user.username} @{user.username}
</span> </span>
</Localizer> </Localizer>
{user.status?.text && ( {user.status?.text && (
<span className={styles.status}> <span className={styles.status}>
<UserStatus user={user} /> <UserStatus user={user} />
</span> </span>
)} )}
</div> </div>
{user.relationship === Users.Relationship.Friend && ( {user.relationship === Users.Relationship.Friend && (
<Localizer> <Localizer>
<Tooltip <Tooltip
content={ content={
<Text id="app.context_menu.message_user" /> <Text id="app.context_menu.message_user" />
}> }>
<IconButton <IconButton
onClick={() => { onClick={() => {
onClose(); onClose();
history.push(`/open/${user_id}`); history.push(`/open/${user_id}`);
}}> }}>
<Envelope size={30} /> <Envelope size={30} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Localizer> </Localizer>
)} )}
{user.relationship === Users.Relationship.User && ( {user.relationship === Users.Relationship.User && (
<IconButton <IconButton
onClick={() => { onClick={() => {
onClose(); onClose();
if (dummy) return; if (dummy) return;
history.push(`/settings/profile`); history.push(`/settings/profile`);
}}> }}>
<Edit size={28} /> <Edit size={28} />
</IconButton> </IconButton>
)} )}
{(user.relationship === Users.Relationship.Incoming || {(user.relationship === Users.Relationship.Incoming ||
user.relationship === Users.Relationship.None) && ( user.relationship === Users.Relationship.None) && (
<IconButton <IconButton
onClick={() => onClick={() =>
client.users.addFriend(user.username) client.users.addFriend(user.username)
}> }>
<UserPlus size={28} /> <UserPlus size={28} />
</IconButton> </IconButton>
)} )}
</div> </div>
<div className={styles.tabs}> <div className={styles.tabs}>
<div <div
data-active={tab === "profile"} data-active={tab === "profile"}
onClick={() => setTab("profile")}> onClick={() => setTab("profile")}>
<Text id="app.special.popovers.user_profile.profile" /> <Text id="app.special.popovers.user_profile.profile" />
</div> </div>
{user.relationship !== Users.Relationship.User && ( {user.relationship !== Users.Relationship.User && (
<> <>
<div <div
data-active={tab === "friends"} data-active={tab === "friends"}
onClick={() => setTab("friends")}> onClick={() => setTab("friends")}>
<Text id="app.special.popovers.user_profile.mutual_friends" /> <Text id="app.special.popovers.user_profile.mutual_friends" />
</div> </div>
<div <div
data-active={tab === "groups"} data-active={tab === "groups"}
onClick={() => setTab("groups")}> onClick={() => setTab("groups")}>
<Text id="app.special.popovers.user_profile.mutual_groups" /> <Text id="app.special.popovers.user_profile.mutual_groups" />
</div> </div>
</> </>
)} )}
</div> </div>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
{tab === "profile" && ( {tab === "profile" && (
<div> <div>
{!(profile?.content || badges > 0) && ( {!(profile?.content || badges > 0) && (
<div className={styles.empty}> <div className={styles.empty}>
<Text id="app.special.popovers.user_profile.empty" /> <Text id="app.special.popovers.user_profile.empty" />
</div> </div>
)} )}
{badges > 0 && ( {badges > 0 && (
<div className={styles.category}> <div className={styles.category}>
<Text id="app.special.popovers.user_profile.sub.badges" /> <Text id="app.special.popovers.user_profile.sub.badges" />
</div> </div>
)} )}
{badges > 0 && ( {badges > 0 && (
<div className={styles.badges}> <div className={styles.badges}>
<Localizer> <Localizer>
{badges & Badges.Developer ? ( {badges & Badges.Developer ? (
<Tooltip <Tooltip
content={ content={
<Text id="app.navigation.tabs.dev" /> <Text id="app.navigation.tabs.dev" />
}> }>
<img src="/assets/badges/developer.svg" /> <img src="/assets/badges/developer.svg" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>
)} )}
{badges & Badges.Translator ? ( {badges & Badges.Translator ? (
<Tooltip <Tooltip
content={ content={
<Text id="app.special.popovers.user_profile.badges.translator" /> <Text id="app.special.popovers.user_profile.badges.translator" />
}> }>
<img src="/assets/badges/translator.svg" /> <img src="/assets/badges/translator.svg" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>
)} )}
{badges & Badges.EarlyAdopter ? ( {badges & Badges.EarlyAdopter ? (
<Tooltip <Tooltip
content={ content={
<Text id="app.special.popovers.user_profile.badges.early_adopter" /> <Text id="app.special.popovers.user_profile.badges.early_adopter" />
}> }>
<img src="/assets/badges/early_adopter.svg" /> <img src="/assets/badges/early_adopter.svg" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>
)} )}
{badges & Badges.Supporter ? ( {badges & Badges.Supporter ? (
<Tooltip <Tooltip
content={ content={
<Text id="app.special.popovers.user_profile.badges.supporter" /> <Text id="app.special.popovers.user_profile.badges.supporter" />
}> }>
<Money size={32} color="#efab44" /> <Money size={32} color="#efab44" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>
)} )}
{badges & Badges.ResponsibleDisclosure ? ( {badges & Badges.ResponsibleDisclosure ? (
<Tooltip <Tooltip
content={ content={
<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" /> <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
}> }>
<Shield size={32} color="gray" /> <Shield size={32} color="gray" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>
)} )}
</Localizer> </Localizer>
</div> </div>
)} )}
{profile?.content && ( {profile?.content && (
<div className={styles.category}> <div className={styles.category}>
<Text id="app.special.popovers.user_profile.sub.information" /> <Text id="app.special.popovers.user_profile.sub.information" />
</div> </div>
)} )}
<Markdown content={profile?.content} /> <Markdown content={profile?.content} />
{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/} {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
</div> </div>
)} )}
{tab === "friends" && {tab === "friends" &&
(users ? ( (users ? (
<div className={styles.entries}> <div className={styles.entries}>
{users.length === 0 ? ( {users.length === 0 ? (
<div className={styles.empty}> <div className={styles.empty}>
<Text id="app.special.popovers.user_profile.no_users" /> <Text id="app.special.popovers.user_profile.no_users" />
</div> </div>
) : ( ) : (
users.map( users.map(
(x) => (x) =>
x && ( x && (
<div <div
onClick={() => onClick={() =>
openScreen({ openScreen({
id: "profile", id: "profile",
user_id: x._id, user_id: x._id,
}) })
} }
className={styles.entry} className={styles.entry}
key={x._id}> key={x._id}>
<UserIcon <UserIcon
size={32} size={32}
target={x} target={x}
/> />
<span>{x.username}</span> <span>{x.username}</span>
</div> </div>
), ),
) )
)} )}
</div> </div>
) : ( ) : (
<Preloader type="ring" /> <Preloader type="ring" />
))} ))}
{tab === "groups" && ( {tab === "groups" && (
<div className={styles.entries}> <div className={styles.entries}>
{mutualGroups.length === 0 ? ( {mutualGroups.length === 0 ? (
<div className={styles.empty}> <div className={styles.empty}>
<Text id="app.special.popovers.user_profile.no_groups" /> <Text id="app.special.popovers.user_profile.no_groups" />
</div> </div>
) : ( ) : (
mutualGroups.map( mutualGroups.map(
(x) => (x) =>
x?.channel_type === "Group" && ( x?.channel_type === "Group" && (
<Link to={`/channel/${x._id}`}> <Link to={`/channel/${x._id}`}>
<div <div
className={styles.entry} className={styles.entry}
key={x._id}> key={x._id}>
<ChannelIcon <ChannelIcon
target={x} target={x}
size={32} size={32}
/> />
<span>{x.name}</span> <span>{x.name}</span>
</div> </div>
</Link> </Link>
), ),
) )
)} )}
</div> </div>
)} )}
</div> </div>
</Modal> </Modal>
); );
} }

18
src/context/revoltjs/CheckAuth.tsx
View file

@ -6,18 +6,18 @@ import { Children } from "../../types/Preact";
import { OperationsContext } from "./RevoltClient"; import { OperationsContext } from "./RevoltClient";
interface Props { interface Props {
auth?: boolean; auth?: boolean;
children: Children; children: Children;
} }
export const CheckAuth = (props: Props) => { export const CheckAuth = (props: Props) => {
const operations = useContext(OperationsContext); const operations = useContext(OperationsContext);
if (props.auth && !operations.ready()) { if (props.auth && !operations.ready()) {
return <Redirect to="/login" />; return <Redirect to="/login" />;
} else if (!props.auth && operations.ready()) { } else if (!props.auth && operations.ready()) {
return <Redirect to="/" />; return <Redirect to="/" />;
} }
return <>{props.children}</>; return <>{props.children}</>;
}; };

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

@ -17,276 +17,276 @@ import { AppContext } from "./RevoltClient";
import { takeError } from "./util"; import { takeError } from "./util";
type Props = { type Props = {
maxFileSize: number; maxFileSize: number;
remove: () => Promise<void>; remove: () => Promise<void>;
fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners"; fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
} & ( } & (
| { behaviour: "ask"; onChange: (file: File) => void } | { behaviour: "ask"; onChange: (file: File) => void }
| { behaviour: "upload"; onUpload: (id: string) => Promise<void> } | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
| { | {
behaviour: "multi"; behaviour: "multi";
onChange: (files: File[]) => void; onChange: (files: File[]) => void;
append?: (files: File[]) => void; append?: (files: File[]) => void;
} }
) & ) &
( (
| { | {
style: "icon" | "banner"; style: "icon" | "banner";
defaultPreview?: string; defaultPreview?: string;
previewURL?: string; previewURL?: string;
width?: number; width?: number;
height?: number; height?: number;
} }
| { | {
style: "attachment"; style: "attachment";
attached: boolean; attached: boolean;
uploading: boolean; uploading: boolean;
cancel: () => void; cancel: () => void;
size?: number; size?: number;
} }
); );
export async function uploadFile( export async function uploadFile(
autumnURL: string, autumnURL: string,
tag: string, tag: string,
file: File, file: File,
config?: AxiosRequestConfig, config?: AxiosRequestConfig,
) { ) {
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",
}, },
...config, ...config,
}); });
return res.data.id; return res.data.id;
} }
export function grabFiles( export function grabFiles(
maxFileSize: number, maxFileSize: number,
cb: (files: File[]) => void, cb: (files: File[]) => void,
tooLarge: () => void, tooLarge: () => void,
multiple?: boolean, multiple?: boolean,
) { ) {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
input.multiple = multiple ?? false; input.multiple = multiple ?? false;
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 (let file of files) {
if (file.size > maxFileSize) { if (file.size > maxFileSize) {
return tooLarge(); return tooLarge();
} }
} }
cb(Array.from(files)); cb(Array.from(files));
}; };
input.click(); input.click();
} }
export function FileUploader(props: Props) { export function FileUploader(props: Props) {
const { fileType, maxFileSize, remove } = props; const { fileType, maxFileSize, remove } = props;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext); const client = useContext(AppContext);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
function onClick() { function onClick() {
if (uploading) return; if (uploading) return;
grabFiles( grabFiles(
maxFileSize, maxFileSize,
async (files) => { async (files) => {
setUploading(true); setUploading(true);
try { try {
if (props.behaviour === "multi") { if (props.behaviour === "multi") {
props.onChange(files); props.onChange(files);
} else if (props.behaviour === "ask") { } else if (props.behaviour === "ask") {
props.onChange(files[0]); props.onChange(files[0]);
} else { } else {
await props.onUpload( await props.onUpload(
await uploadFile( await uploadFile(
client.configuration!.features.autumn.url, client.configuration!.features.autumn.url,
fileType, fileType,
files[0], files[0],
), ),
); );
} }
} catch (err) { } catch (err) {
return openScreen({ id: "error", error: takeError(err) }); return openScreen({ id: "error", error: takeError(err) });
} finally { } finally {
setUploading(false); setUploading(false);
} }
}, },
() => openScreen({ id: "error", error: "FileTooLarge" }), () => openScreen({ id: "error", error: "FileTooLarge" }),
props.behaviour === "multi", props.behaviour === "multi",
); );
} }
function removeOrUpload() { function removeOrUpload() {
if (uploading) return; if (uploading) return;
if (props.style === "attachment") { if (props.style === "attachment") {
if (props.attached) { if (props.attached) {
props.remove(); props.remove();
} 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(() => {
// File pasting. // File pasting.
function paste(e: ClipboardEvent) { function paste(e: ClipboardEvent) {
const items = e.clipboardData?.items; const items = e.clipboardData?.items;
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 = []; let 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();
if (blob) { if (blob) {
if (blob.size > props.maxFileSize) { if (blob.size > props.maxFileSize) {
openScreen({ openScreen({
id: "error", id: "error",
error: "FileTooLarge", error: "FileTooLarge",
}); });
} }
files.push(blob); files.push(blob);
} }
} }
} }
props.append(files); props.append(files);
} }
// Let the browser know we can drop files. // Let the browser know we can drop files.
function dragover(e: DragEvent) { function dragover(e: DragEvent) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
if (e.dataTransfer) e.dataTransfer.dropEffect = "copy"; if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
} }
// File dropping. // File dropping.
function drop(e: DragEvent) { function drop(e: DragEvent) {
e.preventDefault(); e.preventDefault();
if (props.behaviour !== "multi" || !props.append) return; if (props.behaviour !== "multi" || !props.append) return;
const dropped = e.dataTransfer?.files; const dropped = e.dataTransfer?.files;
if (dropped) { if (dropped) {
let files = []; let 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" });
} }
files.push(item); files.push(item);
} }
props.append(files); props.append(files);
} }
} }
document.addEventListener("paste", paste); document.addEventListener("paste", paste);
document.addEventListener("dragover", dragover); document.addEventListener("dragover", dragover);
document.addEventListener("drop", drop); document.addEventListener("drop", drop);
return () => { return () => {
document.removeEventListener("paste", paste); document.removeEventListener("paste", paste);
document.removeEventListener("dragover", dragover); document.removeEventListener("dragover", dragover);
document.removeEventListener("drop", drop); document.removeEventListener("drop", drop);
}; };
}, [props.append]); }, [props.append]);
} }
if (props.style === "icon" || props.style === "banner") { if (props.style === "icon" || props.style === "banner") {
const { style, previewURL, defaultPreview, width, height } = props; const { style, previewURL, defaultPreview, width, height } = props;
return ( return (
<div <div
className={classNames(styles.uploader, { className={classNames(styles.uploader, {
[styles.icon]: style === "icon", [styles.icon]: style === "icon",
[styles.banner]: style === "banner", [styles.banner]: style === "banner",
})} })}
data-uploading={uploading}> data-uploading={uploading}>
<div <div
className={styles.image} className={styles.image}
style={{ style={{
backgroundImage: backgroundImage:
style === "icon" style === "icon"
? `url('${previewURL ?? defaultPreview}')` ? `url('${previewURL ?? defaultPreview}')`
: previewURL : previewURL
? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
: "black", : "black",
width, width,
height, height,
}} }}
onClick={onClick}> onClick={onClick}>
{uploading ? ( {uploading ? (
<div className={styles.uploading}> <div className={styles.uploading}>
<Preloader type="ring" /> <Preloader type="ring" />
</div> </div>
) : ( ) : (
<div className={styles.edit}> <div className={styles.edit}>
<Pencil size={30} /> <Pencil size={30} />
</div> </div>
)} )}
</div> </div>
<div className={styles.modify}> <div className={styles.modify}>
<span onClick={removeOrUpload}> <span onClick={removeOrUpload}>
{uploading ? ( {uploading ? (
<Text id="app.main.channel.uploading_file" /> <Text id="app.main.channel.uploading_file" />
) : props.previewURL ? ( ) : props.previewURL ? (
<Text id="app.settings.actions.remove" /> <Text id="app.settings.actions.remove" />
) : ( ) : (
<Text id="app.settings.actions.upload" /> <Text id="app.settings.actions.upload" />
)} )}
</span> </span>
<span className={styles.small}> <span className={styles.small}>
<Text <Text
id="app.settings.actions.max_filesize" id="app.settings.actions.max_filesize"
fields={{ fields={{
filesize: determineFileSize(maxFileSize), filesize: determineFileSize(maxFileSize),
}} }}
/> />
</span> </span>
</div> </div>
</div> </div>
); );
} else if (props.style === "attachment") { } else if (props.style === "attachment") {
const { attached, uploading, cancel, size } = props; const { attached, uploading, cancel, size } = props;
return ( return (
<IconButton <IconButton
onClick={() => { onClick={() => {
if (uploading) return cancel(); if (uploading) return cancel();
if (attached) return remove(); if (attached) return remove();
onClick(); onClick();
}}> }}>
{uploading ? ( {uploading ? (
<XCircle size={size} /> <XCircle size={size} />
) : attached ? ( ) : attached ? (
<X size={size} /> <X size={size} />
) : ( ) : (
<Plus size={size} /> <Plus size={size} />
)} )}
</IconButton> </IconButton>
); );
} }
return null; return null;
} }

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

@ -9,9 +9,9 @@ import { useTranslation } from "../../lib/i18n";
import { connectState } from "../../redux/connector"; import { connectState } from "../../redux/connector";
import { import {
getNotificationState, getNotificationState,
Notifications, Notifications,
shouldNotify, shouldNotify,
} from "../../redux/reducers/notifications"; } from "../../redux/reducers/notifications";
import { NotificationOptions } from "../../redux/reducers/settings"; import { NotificationOptions } from "../../redux/reducers/settings";
@ -19,268 +19,268 @@ import { SoundContext } from "../Settings";
import { AppContext } from "./RevoltClient"; import { AppContext } from "./RevoltClient";
interface Props { interface Props {
options?: NotificationOptions; options?: NotificationOptions;
notifs: Notifications; notifs: Notifications;
} }
const notifications: { [key: string]: Notification } = {}; const notifications: { [key: string]: Notification } = {};
async function createNotification( async function createNotification(
title: string, title: string,
options: globalThis.NotificationOptions, options: globalThis.NotificationOptions,
) { ) {
try { try {
return new Notification(title, options); return new Notification(title, options);
} catch (err) { } catch (err) {
let sw = await navigator.serviceWorker.getRegistration(); let sw = await navigator.serviceWorker.getRegistration();
sw?.showNotification(title, options); sw?.showNotification(title, options);
} }
} }
function Notifier({ options, notifs }: Props) { function Notifier({ options, notifs }: Props) {
const translate = useTranslation(); const translate = useTranslation();
const showNotification = options?.desktopEnabled ?? false; const showNotification = options?.desktopEnabled ?? false;
const client = useContext(AppContext); const client = useContext(AppContext);
const { guild: guild_id, channel: channel_id } = useParams<{ const { guild: guild_id, channel: channel_id } = useParams<{
guild: string; guild: string;
channel: string; channel: string;
}>(); }>();
const history = useHistory(); const history = useHistory();
const playSound = useContext(SoundContext); const playSound = useContext(SoundContext);
async function message(msg: Message) { async function message(msg: Message) {
if (msg.author === client.user!._id) return; if (msg.author === client.user!._id) return;
if (msg.channel === channel_id && document.hasFocus()) return; if (msg.channel === channel_id && document.hasFocus()) return;
if (client.user!.status?.presence === Users.Presence.Busy) return; if (client.user!.status?.presence === Users.Presence.Busy) return;
const channel = client.channels.get(msg.channel); const channel = client.channels.get(msg.channel);
const author = client.users.get(msg.author); const author = client.users.get(msg.author);
if (!channel) return; if (!channel) return;
if (author?.relationship === Users.Relationship.Blocked) return; if (author?.relationship === Users.Relationship.Blocked) return;
const notifState = getNotificationState(notifs, channel); const notifState = getNotificationState(notifs, channel);
if (!shouldNotify(notifState, msg, client.user!._id)) return; if (!shouldNotify(notifState, msg, client.user!._id)) return;
playSound("message"); playSound("message");
if (!showNotification) return; if (!showNotification) return;
let title; let title;
switch (channel.channel_type) { switch (channel.channel_type) {
case "SavedMessages": case "SavedMessages":
return; return;
case "DirectMessage": case "DirectMessage":
title = `@${author?.username}`; title = `@${author?.username}`;
break; break;
case "Group": case "Group":
if (author?._id === SYSTEM_USER_ID) { if (author?._id === SYSTEM_USER_ID) {
title = channel.name; title = channel.name;
} else { } else {
title = `@${author?.username} - ${channel.name}`; title = `@${author?.username} - ${channel.name}`;
} }
break; break;
case "TextChannel": case "TextChannel":
const server = client.servers.get(channel.server); const server = client.servers.get(channel.server);
title = `@${author?.username} (#${channel.name}, ${server?.name})`; title = `@${author?.username} (#${channel.name}, ${server?.name})`;
break; break;
default: default:
title = msg.channel; title = msg.channel;
break; break;
} }
let image; let image;
if (msg.attachments) { if (msg.attachments) {
let imageAttachment = msg.attachments.find( let imageAttachment = msg.attachments.find(
(x) => x.metadata.type === "Image", (x) => x.metadata.type === "Image",
); );
if (imageAttachment) { if (imageAttachment) {
image = client.generateFileURL(imageAttachment, { image = client.generateFileURL(imageAttachment, {
max_side: 720, max_side: 720,
}); });
} }
} }
let body, icon; let body, icon;
if (typeof msg.content === "string") { if (typeof msg.content === "string") {
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; let users = client.users;
switch (msg.content.type) { switch (msg.content.type) {
case "user_added": case "user_added":
case "user_remove": case "user_remove":
body = translate( body = translate(
`app.main.channel.system.${ `app.main.channel.system.${
msg.content.type === "user_added" msg.content.type === "user_added"
? "added_by" ? "added_by"
: "removed_by" : "removed_by"
}`, }`,
{ {
user: users.get(msg.content.id)?.username, user: users.get(msg.content.id)?.username,
other_user: users.get(msg.content.by)?.username, other_user: users.get(msg.content.by)?.username,
}, },
); );
icon = client.users.getAvatarURL(msg.content.id, { icon = client.users.getAvatarURL(msg.content.id, {
max_side: 256, max_side: 256,
}); });
break; break;
case "user_joined": case "user_joined":
case "user_left": case "user_left":
case "user_kicked": case "user_kicked":
case "user_banned": case "user_banned":
body = translate( body = translate(
`app.main.channel.system.${msg.content.type}`, `app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.id)?.username }, { user: users.get(msg.content.id)?.username },
); );
icon = client.users.getAvatarURL(msg.content.id, { icon = client.users.getAvatarURL(msg.content.id, {
max_side: 256, max_side: 256,
}); });
break; break;
case "channel_renamed": case "channel_renamed":
body = translate( body = translate(
`app.main.channel.system.channel_renamed`, `app.main.channel.system.channel_renamed`,
{ {
user: users.get(msg.content.by)?.username, user: users.get(msg.content.by)?.username,
name: msg.content.name, name: msg.content.name,
}, },
); );
icon = client.users.getAvatarURL(msg.content.by, { icon = client.users.getAvatarURL(msg.content.by, {
max_side: 256, max_side: 256,
}); });
break; break;
case "channel_description_changed": case "channel_description_changed":
case "channel_icon_changed": case "channel_icon_changed":
body = translate( body = translate(
`app.main.channel.system.${msg.content.type}`, `app.main.channel.system.${msg.content.type}`,
{ user: users.get(msg.content.by)?.username }, { user: users.get(msg.content.by)?.username },
); );
icon = client.users.getAvatarURL(msg.content.by, { icon = client.users.getAvatarURL(msg.content.by, {
max_side: 256, max_side: 256,
}); });
break; break;
} }
} }
let notif = await createNotification(title, { let notif = await createNotification(title, {
icon, icon,
image, image,
body, body,
timestamp: decodeTime(msg._id), timestamp: decodeTime(msg._id),
tag: msg.channel, tag: msg.channel,
badge: "/assets/icons/android-chrome-512x512.png", badge: "/assets/icons/android-chrome-512x512.png",
silent: true, silent: true,
}); });
if (notif) { if (notif) {
notif.addEventListener("click", () => { notif.addEventListener("click", () => {
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); let channel = client.channels.get(id);
if (channel) { if (channel) {
if (channel.channel_type === "TextChannel") { if (channel.channel_type === "TextChannel") {
history.push( history.push(
`/server/${channel.server}/channel/${id}`, `/server/${channel.server}/channel/${id}`,
); );
} else { } else {
history.push(`/channel/${id}`); history.push(`/channel/${id}`);
} }
} }
} }
}); });
notifications[msg.channel] = notif; notifications[msg.channel] = notif;
notif.addEventListener( notif.addEventListener(
"close", "close",
() => delete notifications[msg.channel], () => delete notifications[msg.channel],
); );
} }
} }
async function relationship(user: User, property: string) { async function relationship(user: User, property: string) {
if (client.user?.status?.presence === Users.Presence.Busy) return; if (client.user?.status?.presence === Users.Presence.Busy) return;
if (property !== "relationship") return; if (property !== "relationship") return;
if (!showNotification) return; if (!showNotification) return;
let event; let event;
switch (user.relationship) { switch (user.relationship) {
case Users.Relationship.Incoming: case Users.Relationship.Incoming:
event = translate("notifications.sent_request", { event = translate("notifications.sent_request", {
person: user.username, person: user.username,
}); });
break; break;
case Users.Relationship.Friend: case Users.Relationship.Friend:
event = translate("notifications.now_friends", { event = translate("notifications.now_friends", {
person: user.username, person: user.username,
}); });
break; break;
default: default:
return; return;
} }
let notif = await createNotification(event, { let 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(),
}); });
notif?.addEventListener("click", () => { notif?.addEventListener("click", () => {
history.push(`/friends`); history.push(`/friends`);
}); });
} }
useEffect(() => { useEffect(() => {
client.addListener("message", message); client.addListener("message", message);
client.users.addListener("mutation", relationship); client.users.addListener("mutation", relationship);
return () => { return () => {
client.removeListener("message", message); client.removeListener("message", message);
client.users.removeListener("mutation", relationship); client.users.removeListener("mutation", relationship);
}; };
}, [client, playSound, guild_id, channel_id, showNotification, notifs]); }, [client, playSound, guild_id, channel_id, showNotification, notifs]);
useEffect(() => { useEffect(() => {
function visChange() { function visChange() {
if (document.visibilityState === "visible") { if (document.visibilityState === "visible") {
if (notifications[channel_id]) { if (notifications[channel_id]) {
notifications[channel_id].close(); notifications[channel_id].close();
} }
} }
} }
visChange(); visChange();
document.addEventListener("visibilitychange", visChange); document.addEventListener("visibilitychange", visChange);
return () => return () =>
document.removeEventListener("visibilitychange", visChange); document.removeEventListener("visibilitychange", visChange);
}, [guild_id, channel_id]); }, [guild_id, channel_id]);
return null; return null;
} }
const NotifierComponent = connectState( const NotifierComponent = connectState(
Notifier, Notifier,
(state) => { (state) => {
return { return {
options: state.settings.notification, options: state.settings.notification,
notifs: state.notifications, notifs: state.notifications,
}; };
}, },
true, true,
); );
export default function NotificationsComponent() { export default function NotificationsComponent() {
return ( return (
<Switch> <Switch>
<Route path="/server/:server/channel/:channel"> <Route path="/server/:server/channel/:channel">
<NotifierComponent /> <NotifierComponent />
</Route> </Route>
<Route path="/channel/:channel"> <Route path="/channel/:channel">
<NotifierComponent /> <NotifierComponent />
</Route> </Route>
<Route path="/"> <Route path="/">
<NotifierComponent /> <NotifierComponent />
</Route> </Route>
</Switch> </Switch>
); );
} }

50
src/context/revoltjs/RequiresOnline.tsx
View file

@ -10,38 +10,38 @@ import { Children } from "../../types/Preact";
import { ClientStatus, StatusContext } from "./RevoltClient"; import { ClientStatus, StatusContext } from "./RevoltClient";
interface Props { interface Props {
children: Children; children: Children;
} }
const Base = styled.div` const Base = styled.div`
gap: 16px; gap: 16px;
padding: 1em; padding: 1em;
display: flex; display: flex;
user-select: none; user-select: none;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
background: var(--secondary-header); background: var(--secondary-header);
> div { > div {
font-size: 18px; font-size: 18px;
} }
`; `;
export default function RequiresOnline(props: Props) { export default function RequiresOnline(props: Props) {
const status = useContext(StatusContext); const status = useContext(StatusContext);
if (status === ClientStatus.CONNECTING) return <Preloader type="ring" />; if (status === ClientStatus.CONNECTING) return <Preloader type="ring" />;
if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY) if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY)
return ( return (
<Base> <Base>
<WifiOff size={16} /> <WifiOff size={16} />
<div> <div>
<Text id="app.special.requires_online" /> <Text id="app.special.requires_online" />
</div> </div>
</Base> </Base>
); );
return <>{props.children}</>; return <>{props.children}</>;
} }

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

@ -20,23 +20,23 @@ import { registerEvents, setReconnectDisallowed } from "./events";
import { takeError } from "./util"; import { takeError } from "./util";
export enum ClientStatus { export enum ClientStatus {
INIT, INIT,
LOADING, LOADING,
READY, READY,
OFFLINE, OFFLINE,
DISCONNECTED, DISCONNECTED,
CONNECTING, CONNECTING,
RECONNECTING, RECONNECTING,
ONLINE, ONLINE,
} }
export interface ClientOperations { export interface ClientOperations {
login: (data: Route<"POST", "/auth/login">["data"]) => Promise<void>; login: (data: Route<"POST", "/auth/login">["data"]) => Promise<void>;
logout: (shouldRequest?: boolean) => Promise<void>; logout: (shouldRequest?: boolean) => Promise<void>;
loggedIn: () => boolean; loggedIn: () => boolean;
ready: () => boolean; ready: () => boolean;
openDM: (user_id: string) => Promise<string>; openDM: (user_id: string) => Promise<string>;
} }
// By the time they are used, they should all be initialized. // By the time they are used, they should all be initialized.
@ -47,195 +47,195 @@ export const StatusContext = createContext<ClientStatus>(null!);
export const OperationsContext = createContext<ClientOperations>(null!); export const OperationsContext = createContext<ClientOperations>(null!);
type Props = { type Props = {
auth: AuthState; auth: AuthState;
children: Children; children: Children;
}; };
function Context({ auth, children }: Props) { function Context({ auth, children }: Props) {
const history = useHistory(); const history = useHistory();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const [status, setStatus] = useState(ClientStatus.INIT); const [status, setStatus] = useState(ClientStatus.INIT);
const [client, setClient] = useState<Client>( const [client, setClient] = useState<Client>(
undefined as unknown as Client, undefined as unknown as Client,
); );
useEffect(() => { useEffect(() => {
(async () => { (async () => {
let db; let db;
try { try {
// 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 (let store of [
"channels", "channels",
"servers", "servers",
"users", "users",
"members", "members",
]) { ]) {
db.createObjectStore(store, { db.createObjectStore(store, {
keyPath: "_id", keyPath: "_id",
}); });
} }
}, },
}); });
} catch (err) { } catch (err) {
console.error( console.error(
"Failed to open IndexedDB store, continuing without.", "Failed to open IndexedDB store, continuing without.",
); );
} }
const client = new Client({ const client = new Client({
autoReconnect: false, autoReconnect: false,
apiURL: import.meta.env.VITE_API_URL, apiURL: import.meta.env.VITE_API_URL,
debug: import.meta.env.DEV, debug: import.meta.env.DEV,
db, db,
}); });
setClient(client); setClient(client);
SingletonMessageRenderer.subscribe(client); SingletonMessageRenderer.subscribe(client);
setStatus(ClientStatus.LOADING); setStatus(ClientStatus.LOADING);
})(); })();
}, []); }, []);
if (status === ClientStatus.INIT) return null; if (status === ClientStatus.INIT) return null;
const operations: ClientOperations = useMemo(() => { const operations: ClientOperations = useMemo(() => {
return { return {
login: async (data) => { login: async (data) => {
setReconnectDisallowed(true); setReconnectDisallowed(true);
try { try {
const onboarding = await client.login(data); const onboarding = await client.login(data);
setReconnectDisallowed(false); setReconnectDisallowed(false);
const login = () => const login = () =>
dispatch({ dispatch({
type: "LOGIN", type: "LOGIN",
session: client.session!, // This [null assertion] is ok, we should have a session by now. - insert's words session: client.session!, // This [null assertion] is ok, we should have a session by now. - insert's words
}); });
if (onboarding) { if (onboarding) {
openScreen({ openScreen({
id: "onboarding", id: "onboarding",
callback: (username: string) => callback: (username: string) =>
onboarding(username, true).then(login), onboarding(username, true).then(login),
}); });
} else { } else {
login(); login();
} }
} catch (err) { } catch (err) {
setReconnectDisallowed(false); setReconnectDisallowed(false);
throw err; throw err;
} }
}, },
logout: async (shouldRequest) => { logout: async (shouldRequest) => {
dispatch({ type: "LOGOUT" }); dispatch({ type: "LOGOUT" });
client.reset(); client.reset();
dispatch({ type: "RESET" }); dispatch({ type: "RESET" });
openScreen({ id: "none" }); openScreen({ id: "none" });
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
client.websocket.disconnect(); client.websocket.disconnect();
if (shouldRequest) { if (shouldRequest) {
try { try {
await client.logout(); await client.logout();
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
} }
}, },
loggedIn: () => typeof auth.active !== "undefined", loggedIn: () => typeof auth.active !== "undefined",
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); let channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`); history.push(`/channel/${channel!._id}`);
return channel!._id; return channel!._id;
}, },
}; };
}, [client, auth.active]); }, [client, auth.active]);
useEffect( useEffect(
() => registerEvents({ operations }, setStatus, client), () => registerEvents({ operations }, setStatus, client),
[client], [client],
); );
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if (client.db) { if (client.db) {
await client.restore(); await client.restore();
} }
if (auth.active) { if (auth.active) {
dispatch({ type: "QUEUE_FAIL_ALL" }); dispatch({ type: "QUEUE_FAIL_ALL" });
const active = auth.accounts[auth.active]; const active = auth.accounts[auth.active];
client.user = client.users.get(active.session.user_id); client.user = client.users.get(active.session.user_id);
if (!navigator.onLine) { if (!navigator.onLine) {
return setStatus(ClientStatus.OFFLINE); return setStatus(ClientStatus.OFFLINE);
} }
if (operations.ready()) setStatus(ClientStatus.CONNECTING); if (operations.ready()) setStatus(ClientStatus.CONNECTING);
if (navigator.onLine) { if (navigator.onLine) {
await client await client
.fetchConfiguration() .fetchConfiguration()
.catch(() => .catch(() =>
console.error("Failed to connect to API server."), console.error("Failed to connect to API server."),
); );
} }
try { try {
await client.fetchConfiguration(); await client.fetchConfiguration();
const callback = await client.useExistingSession( const callback = await client.useExistingSession(
active.session, active.session,
); );
if (callback) { if (callback) {
openScreen({ id: "onboarding", callback }); openScreen({ id: "onboarding", callback });
} }
} catch (err) { } catch (err) {
setStatus(ClientStatus.DISCONNECTED); setStatus(ClientStatus.DISCONNECTED);
const error = takeError(err); const error = takeError(err);
if (error === "Forbidden" || error === "Unauthorized") { if (error === "Forbidden" || error === "Unauthorized") {
operations.logout(true); operations.logout(true);
openScreen({ id: "signed_out" }); openScreen({ id: "signed_out" });
} else { } else {
openScreen({ id: "error", error }); openScreen({ id: "error", error });
} }
} }
} else { } else {
try { try {
await client.fetchConfiguration(); await client.fetchConfiguration();
} catch (err) { } catch (err) {
console.error("Failed to connect to API server."); console.error("Failed to connect to API server.");
} }
setStatus(ClientStatus.READY); setStatus(ClientStatus.READY);
} }
})(); })();
}, []); }, []);
if (status === ClientStatus.LOADING) { if (status === ClientStatus.LOADING) {
return <Preloader type="spinner" />; return <Preloader type="spinner" />;
} }
return ( return (
<AppContext.Provider value={client}> <AppContext.Provider value={client}>
<StatusContext.Provider value={status}> <StatusContext.Provider value={status}>
<OperationsContext.Provider value={operations}> <OperationsContext.Provider value={operations}>
{children} {children}
</OperationsContext.Provider> </OperationsContext.Provider>
</StatusContext.Provider> </StatusContext.Provider>
</AppContext.Provider> </AppContext.Provider>
); );
} }
export default connectState<{ children: Children }>(Context, (state) => { export default connectState<{ children: Children }>(Context, (state) => {
return { return {
auth: state.auth, auth: state.auth,
sync: state.sync, sync: state.sync,
}; };
}); });

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

@ -13,64 +13,64 @@ import { Typing } from "../../redux/reducers/typing";
import { AppContext } from "./RevoltClient"; import { AppContext } from "./RevoltClient";
type Props = { type Props = {
messages: QueuedMessage[]; messages: QueuedMessage[];
typing: Typing; typing: Typing;
}; };
function StateMonitor(props: Props) { function StateMonitor(props: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
useEffect(() => { useEffect(() => {
dispatch({ dispatch({
type: "QUEUE_DROP_ALL", type: "QUEUE_DROP_ALL",
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
function add(msg: Message) { function add(msg: Message) {
if (!msg.nonce) return; if (!msg.nonce) return;
if (!props.messages.find((x) => x.id === msg.nonce)) return; if (!props.messages.find((x) => x.id === msg.nonce)) return;
dispatch({ dispatch({
type: "QUEUE_REMOVE", type: "QUEUE_REMOVE",
nonce: msg.nonce, nonce: msg.nonce,
}); });
} }
client.addListener("message", add); client.addListener("message", add);
return () => client.removeListener("message", add); return () => client.removeListener("message", add);
}, [props.messages]); }, [props.messages]);
useEffect(() => { useEffect(() => {
function removeOld() { function removeOld() {
if (!props.typing) return; if (!props.typing) return;
for (let channel of Object.keys(props.typing)) { for (let channel of Object.keys(props.typing)) {
let users = props.typing[channel]; let users = props.typing[channel];
for (let user of users) { for (let user of users) {
if (+new Date() > user.started + 5000) { if (+new Date() > user.started + 5000) {
dispatch({ dispatch({
type: "TYPING_STOP", type: "TYPING_STOP",
channel, channel,
user: user.id, user: user.id,
}); });
} }
} }
} }
} }
removeOld(); removeOld();
let interval = setInterval(removeOld, 1000); let interval = setInterval(removeOld, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [props.typing]); }, [props.typing]);
return null; return null;
} }
export default connectState(StateMonitor, (state) => { export default connectState(StateMonitor, (state) => {
return { return {
messages: [...state.queue], messages: [...state.queue],
typing: state.typing, typing: state.typing,
}; };
}); });

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

@ -12,135 +12,135 @@ import { connectState } from "../../redux/connector";
import { Notifications } from "../../redux/reducers/notifications"; import { Notifications } from "../../redux/reducers/notifications";
import { Settings } from "../../redux/reducers/settings"; import { Settings } from "../../redux/reducers/settings";
import { import {
DEFAULT_ENABLED_SYNC, DEFAULT_ENABLED_SYNC,
SyncData, SyncData,
SyncKeys, SyncKeys,
SyncOptions, SyncOptions,
} from "../../redux/reducers/sync"; } from "../../redux/reducers/sync";
import { Language } from "../Locale"; import { Language } from "../Locale";
import { AppContext, ClientStatus, StatusContext } from "./RevoltClient"; import { AppContext, ClientStatus, StatusContext } from "./RevoltClient";
type Props = { type Props = {
settings: Settings; settings: Settings;
locale: Language; locale: Language;
sync: SyncOptions; sync: SyncOptions;
notifications: Notifications; notifications: Notifications;
}; };
var lastValues: { [key in SyncKeys]?: any } = {}; var 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]] } = {}; let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
for (let key of Object.keys(packet)) { for (let key of Object.keys(packet)) {
let [timestamp, obj] = packet[key]; let [timestamp, obj] = packet[key];
if (timestamp < (revision ?? {})[key] ?? 0) { if (timestamp < (revision ?? {})[key] ?? 0) {
continue; continue;
} }
let object; let object;
if (obj[0] === "{") { if (obj[0] === "{") {
object = JSON.parse(obj); object = JSON.parse(obj);
} else { } else {
object = obj; object = obj;
} }
lastValues[key as SyncKeys] = object; lastValues[key as SyncKeys] = object;
update[key as SyncKeys] = [timestamp, object]; update[key as SyncKeys] = [timestamp, object];
} }
return update; return update;
} }
function SyncManager(props: Props) { function SyncManager(props: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const status = useContext(StatusContext); const status = useContext(StatusContext);
useEffect(() => { useEffect(() => {
if (status === ClientStatus.ONLINE) { if (status === ClientStatus.ONLINE) {
client client
.syncFetchSettings( .syncFetchSettings(
DEFAULT_ENABLED_SYNC.filter( DEFAULT_ENABLED_SYNC.filter(
(x) => !props.sync?.disabled?.includes(x), (x) => !props.sync?.disabled?.includes(x),
), ),
) )
.then((data) => { .then((data) => {
dispatch({ dispatch({
type: "SYNC_UPDATE", type: "SYNC_UPDATE",
update: mapSync(data), update: mapSync(data),
}); });
}); });
client client
.syncFetchUnreads() .syncFetchUnreads()
.then((unreads) => dispatch({ type: "UNREADS_SET", unreads })); .then((unreads) => dispatch({ type: "UNREADS_SET", unreads }));
} }
}, [status]); }, [status]);
function syncChange(key: SyncKeys, data: any) { function syncChange(key: SyncKeys, data: any) {
let timestamp = +new Date(); let timestamp = +new Date();
dispatch({ dispatch({
type: "SYNC_SET_REVISION", type: "SYNC_SET_REVISION",
key, key,
timestamp, timestamp,
}); });
client.syncSetSettings( client.syncSetSettings(
{ {
[key]: data, [key]: data,
}, },
timestamp, timestamp,
); );
} }
let disabled = props.sync.disabled ?? []; let disabled = props.sync.disabled ?? [];
for (let [key, object] of [ for (let [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],
["notifications", props.notifications], ["notifications", props.notifications],
] as [SyncKeys, any][]) { ] as [SyncKeys, any][]) {
useEffect(() => { useEffect(() => {
if (disabled.indexOf(key) === -1) { if (disabled.indexOf(key) === -1) {
if (typeof lastValues[key] !== "undefined") { if (typeof lastValues[key] !== "undefined") {
if (!isEqual(lastValues[key], object)) { if (!isEqual(lastValues[key], object)) {
syncChange(key, object); syncChange(key, object);
} }
} }
} }
lastValues[key] = object; lastValues[key] = object;
}, [disabled, object]); }, [disabled, object]);
} }
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]] } = let update: { [key in SyncKeys]?: [number, SyncData[key]] } =
mapSync(packet.update, props.sync.revision); mapSync(packet.update, props.sync.revision);
dispatch({ dispatch({
type: "SYNC_UPDATE", type: "SYNC_UPDATE",
update, update,
}); });
} }
} }
client.addListener("packet", onPacket); client.addListener("packet", onPacket);
return () => client.removeListener("packet", onPacket); return () => client.removeListener("packet", onPacket);
}, [disabled, props.sync]); }, [disabled, props.sync]);
return null; return null;
} }
export default connectState(SyncManager, (state) => { export default connectState(SyncManager, (state) => {
return { return {
settings: state.settings, settings: state.settings,
locale: state.locale, locale: state.locale,
sync: state.sync, sync: state.sync,
notifications: state.notifications, notifications: state.notifications,
}; };
}); });

242
src/context/revoltjs/events.ts
View file

@ -11,145 +11,145 @@ export var preventReconnect = false;
let preventUntil = 0; let preventUntil = 0;
export function setReconnectDisallowed(allowed: boolean) { export function setReconnectDisallowed(allowed: boolean) {
preventReconnect = allowed; preventReconnect = allowed;
} }
export function registerEvents( export function registerEvents(
{ operations }: { operations: ClientOperations }, { operations }: { operations: ClientOperations },
setStatus: StateUpdater<ClientStatus>, setStatus: StateUpdater<ClientStatus>,
client: Client, client: Client,
) { ) {
function attemptReconnect() { function attemptReconnect() {
if (preventReconnect) return; if (preventReconnect) return;
function reconnect() { function reconnect() {
preventUntil = +new Date() + 2000; preventUntil = +new Date() + 2000;
client.websocket.connect().catch((err) => console.error(err)); client.websocket.connect().catch((err) => console.error(err));
} }
if (+new Date() > preventUntil) { if (+new Date() > preventUntil) {
setTimeout(reconnect, 2000); setTimeout(reconnect, 2000);
} else { } else {
reconnect(); reconnect();
} }
} }
let listeners: Record<string, (...args: any[]) => void> = { let listeners: Record<string, (...args: any[]) => void> = {
connecting: () => connecting: () =>
operations.ready() && setStatus(ClientStatus.CONNECTING), operations.ready() && setStatus(ClientStatus.CONNECTING),
dropped: () => { dropped: () => {
if (operations.ready()) { if (operations.ready()) {
setStatus(ClientStatus.DISCONNECTED); setStatus(ClientStatus.DISCONNECTED);
attemptReconnect(); attemptReconnect();
} }
}, },
packet: (packet: ClientboundNotification) => { packet: (packet: ClientboundNotification) => {
switch (packet.type) { switch (packet.type) {
case "ChannelStartTyping": { case "ChannelStartTyping": {
if (packet.user === client.user?._id) return; if (packet.user === client.user?._id) return;
dispatch({ dispatch({
type: "TYPING_START", type: "TYPING_START",
channel: packet.id, channel: packet.id,
user: packet.user, user: packet.user,
}); });
break; break;
} }
case "ChannelStopTyping": { case "ChannelStopTyping": {
if (packet.user === client.user?._id) return; if (packet.user === client.user?._id) return;
dispatch({ dispatch({
type: "TYPING_STOP", type: "TYPING_STOP",
channel: packet.id, channel: packet.id,
user: packet.user, user: packet.user,
}); });
break; break;
} }
case "ChannelAck": { case "ChannelAck": {
dispatch({ dispatch({
type: "UNREADS_MARK_READ", type: "UNREADS_MARK_READ",
channel: packet.id, channel: packet.id,
message: packet.message_id, message: packet.message_id,
}); });
break; break;
} }
} }
}, },
message: (message: Message) => { message: (message: Message) => {
if (message.mentions?.includes(client.user!._id)) { if (message.mentions?.includes(client.user!._id)) {
dispatch({ dispatch({
type: "UNREADS_MENTION", type: "UNREADS_MENTION",
channel: message.channel, channel: message.channel,
message: message._id, message: message._id,
}); });
} }
}, },
ready: () => setStatus(ClientStatus.ONLINE), ready: () => setStatus(ClientStatus.ONLINE),
}; };
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
listeners = new Proxy(listeners, { listeners = new Proxy(listeners, {
get: get:
(target, listener, receiver) => (target, listener, receiver) =>
(...args: unknown[]) => { (...args: unknown[]) => {
console.debug(`Calling ${listener.toString()} with`, args); console.debug(`Calling ${listener.toString()} with`, args);
Reflect.get(target, listener)(...args); Reflect.get(target, listener)(...args);
}, },
}); });
} }
// TODO: clean this a bit and properly handle types // TODO: clean this a bit and properly handle types
for (const listener in listeners) { for (const listener in listeners) {
client.addListener(listener, listeners[listener]); client.addListener(listener, listeners[listener]);
} }
function logMutation(target: string, key: string) { function logMutation(target: string, key: string) {
console.log("(o) Object mutated", target, "\nChanged:", key); console.log("(o) Object mutated", target, "\nChanged:", key);
} }
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
client.users.addListener("mutation", logMutation); client.users.addListener("mutation", logMutation);
client.servers.addListener("mutation", logMutation); client.servers.addListener("mutation", logMutation);
client.channels.addListener("mutation", logMutation); client.channels.addListener("mutation", logMutation);
client.servers.members.addListener("mutation", logMutation); client.servers.members.addListener("mutation", logMutation);
} }
const online = () => { const online = () => {
if (operations.ready()) { if (operations.ready()) {
setStatus(ClientStatus.RECONNECTING); setStatus(ClientStatus.RECONNECTING);
setReconnectDisallowed(false); setReconnectDisallowed(false);
attemptReconnect(); attemptReconnect();
} }
}; };
const offline = () => { const offline = () => {
if (operations.ready()) { if (operations.ready()) {
setReconnectDisallowed(true); setReconnectDisallowed(true);
client.websocket.disconnect(); client.websocket.disconnect();
setStatus(ClientStatus.OFFLINE); setStatus(ClientStatus.OFFLINE);
} }
}; };
window.addEventListener("online", online); window.addEventListener("online", online);
window.addEventListener("offline", offline); window.addEventListener("offline", offline);
return () => { return () => {
for (const listener in listeners) { for (const listener in listeners) {
client.removeListener( client.removeListener(
listener, listener,
listeners[listener as keyof typeof listeners], listeners[listener as keyof typeof listeners],
); );
} }
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
client.users.removeListener("mutation", logMutation); client.users.removeListener("mutation", logMutation);
client.servers.removeListener("mutation", logMutation); client.servers.removeListener("mutation", logMutation);
client.channels.removeListener("mutation", logMutation); client.channels.removeListener("mutation", logMutation);
client.servers.members.removeListener("mutation", logMutation); client.servers.members.removeListener("mutation", logMutation);
} }
window.removeEventListener("online", online); window.removeEventListener("online", online);
window.removeEventListener("offline", offline); window.removeEventListener("offline", offline);
}; };
} }

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

@ -7,226 +7,226 @@ import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "./RevoltClient"; import { AppContext } from "./RevoltClient";
export interface HookContext { export interface HookContext {
client: Client; client: Client;
forceUpdate: () => void; forceUpdate: () => void;
} }
export function useForceUpdate(context?: HookContext): HookContext { export function useForceUpdate(context?: HookContext): HookContext {
const client = useContext(AppContext); const client = useContext(AppContext);
if (context) return context; if (context) return context;
const H = useState(0); const H = useState(0);
var updateState: (_: number) => void; var updateState: (_: number) => void;
if (Array.isArray(H)) { if (Array.isArray(H)) {
let [, u] = H; let [, u] = H;
updateState = u; updateState = u;
} else { } else {
console.warn("Failed to construct using useState."); console.warn("Failed to construct using useState.");
updateState = () => {}; updateState = () => {};
} }
return { client, forceUpdate: () => updateState(Math.random()) }; return { client, forceUpdate: () => updateState(Math.random()) };
} }
// TODO: utils.d.ts maybe? // TODO: utils.d.ts maybe?
type PickProperties<T, U> = Pick< type PickProperties<T, U> = Pick<
T, T,
{ {
[K in keyof T]: T[K] extends U ? K : never; [K in keyof T]: T[K] extends U ? K : never;
}[keyof T] }[keyof T]
>; >;
// The keys in Client that are an object // The keys in Client that are an object
// for some reason undefined keeps appearing despite there being no reason to so it's filtered out // for some reason undefined keeps appearing despite there being no reason to so it's filtered out
type ClientCollectionKey = Exclude< type ClientCollectionKey = Exclude<
keyof PickProperties<Client, Collection<any>>, keyof PickProperties<Client, Collection<any>>,
undefined undefined
>; >;
function useObject( function useObject(
type: ClientCollectionKey, type: ClientCollectionKey,
id?: string | string[], id?: string | string[],
context?: HookContext, context?: HookContext,
) { ) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
function update(target: any) { function update(target: any) {
if ( if (
typeof id === "string" typeof id === "string"
? target === id ? target === id
: Array.isArray(id) : Array.isArray(id)
? id.includes(target) ? id.includes(target)
: true : true
) { ) {
ctx.forceUpdate(); ctx.forceUpdate();
} }
} }
const map = ctx.client[type]; const map = ctx.client[type];
useEffect(() => { useEffect(() => {
map.addListener("update", update); map.addListener("update", update);
return () => map.removeListener("update", update); return () => map.removeListener("update", update);
}, [id]); }, [id]);
return typeof id === "string" return typeof id === "string"
? map.get(id) ? map.get(id)
: Array.isArray(id) : Array.isArray(id)
? id.map((x) => map.get(x)) ? id.map((x) => map.get(x))
: map.toArray(); : map.toArray();
} }
export function useUser(id?: string, context?: HookContext) { export function useUser(id?: string, context?: HookContext) {
if (typeof id === "undefined") return; if (typeof id === "undefined") return;
return useObject("users", id, context) as Readonly<Users.User> | undefined; return useObject("users", id, context) as Readonly<Users.User> | undefined;
} }
export function useSelf(context?: HookContext) { export function useSelf(context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
return useUser(ctx.client.user!._id, ctx); return useUser(ctx.client.user!._id, ctx);
} }
export function useUsers(ids?: string[], context?: HookContext) { export function useUsers(ids?: string[], context?: HookContext) {
return useObject("users", ids, context) as ( return useObject("users", ids, context) as (
| Readonly<Users.User> | Readonly<Users.User>
| undefined | undefined
)[]; )[];
} }
export function useChannel(id?: string, context?: HookContext) { export function useChannel(id?: string, context?: HookContext) {
if (typeof id === "undefined") return; if (typeof id === "undefined") return;
return useObject("channels", id, context) as return useObject("channels", id, context) as
| Readonly<Channels.Channel> | Readonly<Channels.Channel>
| undefined; | undefined;
} }
export function useChannels(ids?: string[], context?: HookContext) { export function useChannels(ids?: string[], context?: HookContext) {
return useObject("channels", ids, context) as ( return useObject("channels", ids, context) as (
| Readonly<Channels.Channel> | Readonly<Channels.Channel>
| undefined | undefined
)[]; )[];
} }
export function useServer(id?: string, context?: HookContext) { export function useServer(id?: string, context?: HookContext) {
if (typeof id === "undefined") return; if (typeof id === "undefined") return;
return useObject("servers", id, context) as return useObject("servers", id, context) as
| Readonly<Servers.Server> | Readonly<Servers.Server>
| undefined; | undefined;
} }
export function useServers(ids?: string[], context?: HookContext) { export function useServers(ids?: string[], context?: HookContext) {
return useObject("servers", ids, context) as ( return useObject("servers", ids, context) as (
| Readonly<Servers.Server> | Readonly<Servers.Server>
| undefined | undefined
)[]; )[];
} }
export function useDMs(context?: HookContext) { 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); let channel = ctx.client.channels.get(target);
if (channel) { if (channel) {
if ( if (
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
channel.channel_type === "Group" channel.channel_type === "Group"
) { ) {
ctx.forceUpdate(); ctx.forceUpdate();
} }
} }
} }
const map = ctx.client.channels; const map = ctx.client.channels;
useEffect(() => { useEffect(() => {
map.addListener("update", mutation); map.addListener("update", mutation);
return () => map.removeListener("update", mutation); return () => map.removeListener("update", mutation);
}, []); }, []);
return map return map
.toArray() .toArray()
.filter( .filter(
(x) => (x) =>
x.channel_type === "DirectMessage" || x.channel_type === "DirectMessage" ||
x.channel_type === "Group" || x.channel_type === "Group" ||
x.channel_type === "SavedMessages", x.channel_type === "SavedMessages",
) as ( ) as (
| Channels.GroupChannel | Channels.GroupChannel
| Channels.DirectMessageChannel | Channels.DirectMessageChannel
| Channels.SavedMessagesChannel | Channels.SavedMessagesChannel
)[]; )[];
} }
export function useUserPermission(id: string, context?: HookContext) { export function useUserPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
const mutation = (target: string) => target === id && ctx.forceUpdate(); const mutation = (target: string) => target === id && ctx.forceUpdate();
useEffect(() => { useEffect(() => {
ctx.client.users.addListener("update", mutation); ctx.client.users.addListener("update", mutation);
return () => ctx.client.users.removeListener("update", mutation); return () => ctx.client.users.removeListener("update", mutation);
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); let calculator = new PermissionCalculator(ctx.client);
return calculator.forUser(id); return calculator.forUser(id);
} }
export function useChannelPermission(id: string, context?: HookContext) { export function useChannelPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
const channel = ctx.client.channels.get(id); const channel = ctx.client.channels.get(id);
const server = const server =
channel && channel &&
(channel.channel_type === "TextChannel" || (channel.channel_type === "TextChannel" ||
channel.channel_type === "VoiceChannel") channel.channel_type === "VoiceChannel")
? channel.server ? channel.server
: undefined; : undefined;
const mutation = (target: string) => target === id && ctx.forceUpdate(); const mutation = (target: string) => target === id && ctx.forceUpdate();
const mutationServer = (target: string) => const mutationServer = (target: string) =>
target === server && ctx.forceUpdate(); target === server && ctx.forceUpdate();
const mutationMember = (target: string) => const mutationMember = (target: string) =>
target.substr(26) === ctx.client.user!._id && ctx.forceUpdate(); target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
useEffect(() => { useEffect(() => {
ctx.client.channels.addListener("update", mutation); ctx.client.channels.addListener("update", mutation);
if (server) { if (server) {
ctx.client.servers.addListener("update", mutationServer); ctx.client.servers.addListener("update", mutationServer);
ctx.client.servers.members.addListener("update", mutationMember); ctx.client.servers.members.addListener("update", mutationMember);
} }
return () => { return () => {
ctx.client.channels.removeListener("update", mutation); ctx.client.channels.removeListener("update", mutation);
if (server) { if (server) {
ctx.client.servers.removeListener("update", mutationServer); ctx.client.servers.removeListener("update", mutationServer);
ctx.client.servers.members.removeListener( ctx.client.servers.members.removeListener(
"update", "update",
mutationMember, mutationMember,
); );
} }
}; };
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); let calculator = new PermissionCalculator(ctx.client);
return calculator.forChannel(id); return calculator.forChannel(id);
} }
export function useServerPermission(id: string, context?: HookContext) { export function useServerPermission(id: string, context?: HookContext) {
const ctx = useForceUpdate(context); const ctx = useForceUpdate(context);
const mutation = (target: string) => target === id && ctx.forceUpdate(); const mutation = (target: string) => target === id && ctx.forceUpdate();
const mutationMember = (target: string) => const mutationMember = (target: string) =>
target.substr(26) === ctx.client.user!._id && ctx.forceUpdate(); target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
useEffect(() => { useEffect(() => {
ctx.client.servers.addListener("update", mutation); ctx.client.servers.addListener("update", mutation);
ctx.client.servers.members.addListener("update", mutationMember); ctx.client.servers.members.addListener("update", mutationMember);
return () => { return () => {
ctx.client.servers.removeListener("update", mutation); ctx.client.servers.removeListener("update", mutation);
ctx.client.servers.members.removeListener("update", mutationMember); ctx.client.servers.members.removeListener("update", mutationMember);
}; };
}, [id]); }, [id]);
let calculator = new PermissionCalculator(ctx.client); let calculator = new PermissionCalculator(ctx.client);
return calculator.forServer(id); return calculator.forServer(id);
} }

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

@ -6,52 +6,52 @@ import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; 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; let id = type;
if (!type) { if (!type) {
if (error?.response?.status === 403) { if (error?.response?.status === 403) {
return "Unauthorized"; return "Unauthorized";
} else if (error && !!error.isAxiosError && !error.response) { } else if (error && !!error.isAxiosError && !error.response) {
return "NetworkError"; return "NetworkError";
} }
console.error(error); console.error(error);
return "UnknownError"; return "UnknownError";
} }
return id; return id;
} }
export function getChannelName( export function getChannelName(
client: Client, client: Client,
channel: Channel, channel: Channel,
prefixType?: boolean, prefixType?: boolean,
): Children { ): Children {
if (channel.channel_type === "SavedMessages") if (channel.channel_type === "SavedMessages")
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); let uid = client.channels.getRecipient(channel._id);
return ( return (
<> <>
{prefixType && "@"} {prefixType && "@"}
{client.users.get(uid)?.username} {client.users.get(uid)?.username}
</> </>
); );
} }
if (channel.channel_type === "TextChannel" && prefixType) { if (channel.channel_type === "TextChannel" && prefixType) {
return <>#{channel.name}</>; return <>#{channel.name}</>;
} }
return <>{channel.name}</>; return <>{channel.name}</>;
} }
export type MessageObject = Omit<Message, "edited"> & { edited?: string }; export type MessageObject = Omit<Message, "edited"> & { edited?: string };
export function mapMessage(message: Partial<Message>) { export function mapMessage(message: Partial<Message>) {
const { edited, ...msg } = message; const { edited, ...msg } = message;
return { return {
...msg, ...msg,
edited: edited?.$date, edited: edited?.$date,
} as MessageObject; } as MessageObject;
} }

4
src/env.d.ts vendored
View file

@ -1,4 +1,4 @@
interface ImportMetaEnv { interface ImportMetaEnv {
VITE_API_URL: string; VITE_API_URL: string;
VITE_THEMES_URL: string; VITE_THEMES_URL: string;
} }

18
src/lib/ConditionalLink.tsx
View file

@ -1,16 +1,16 @@
import { Link, LinkProps } from "react-router-dom"; import { Link, LinkProps } from "react-router-dom";
type Props = LinkProps & type Props = LinkProps &
JSX.HTMLAttributes<HTMLAnchorElement> & { JSX.HTMLAttributes<HTMLAnchorElement> & {
active: boolean; active: boolean;
}; };
export default function ConditionalLink(props: Props) { export default function ConditionalLink(props: Props) {
const { active, ...linkProps } = props; const { active, ...linkProps } = props;
if (active) { if (active) {
return <a>{props.children}</a>; return <a>{props.children}</a>;
} else { } else {
return <Link {...linkProps} />; return <Link {...linkProps} />;
} }
} }

1940
src/lib/ContextMenus.tsx
View file

File diff suppressed because it is too large Load diff

26
src/lib/PaintCounter.tsx
View file

@ -3,20 +3,20 @@ import { useState } from "preact/hooks";
const counts: { [key: string]: number } = {}; const counts: { [key: string]: number } = {};
export default function PaintCounter({ export default function PaintCounter({
small, small,
always, always,
}: { }: {
small?: boolean; small?: boolean;
always?: boolean; always?: boolean;
}) { }) {
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 (
<div style={{ textAlign: "center", fontSize: "0.8em" }}> <div style={{ textAlign: "center", fontSize: "0.8em" }}>
{small ? <>P: {count + 1}</> : <>Painted {count + 1} time(s).</>} {small ? <>P: {count + 1}</> : <>Painted {count + 1} time(s).</>}
</div> </div>
); );
} }

Some files were not shown because too many files have changed in this diff Show more