Skip to content
Snippets Groups Projects

Compare revisions

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

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 553 additions and 500 deletions
src/pages/channels/messaging/ConversationStart.tsx
View file @ 1ac5de17
...@@ -3,8 +3,6 @@ import styled from "styled-components"; ...@@ -3,8 +3,6 @@ import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util"; import { getChannelName } from "../../../context/revoltjs/util";
...@@ -28,14 +26,13 @@ interface Props { ...@@ -28,14 +26,13 @@ interface Props {
} }
export default observer(({ id }: Props) => { export default observer(({ id }: Props) => {
const store = useData();
const client = useClient(); const client = useClient();
const channel = store.channels.get(id); const channel = client.channels.get(id);
if (!channel) return null; if (!channel) return null;
return ( return (
<StartBase> <StartBase>
<h1>{getChannelName(client, channel, true)}</h1> <h1>{getChannelName(channel, true)}</h1>
<h4> <h4>
<Text id="app.main.channel.start.group" /> <Text id="app.main.channel.start.group" />
</h4> </h4>
......
src/pages/channels/messaging/MessageArea.tsx
View file @ 1ac5de17
...@@ -5,6 +5,7 @@ import useResizeObserver from "use-resize-observer"; ...@@ -5,6 +5,7 @@ import useResizeObserver from "use-resize-observer";
import { createContext } from "preact"; import { createContext } from "preact";
import { import {
useCallback,
useContext, useContext,
useEffect, useEffect,
useLayoutEffect, useLayoutEffect,
...@@ -74,7 +75,7 @@ export function MessageArea({ id }: Props) { ...@@ -74,7 +75,7 @@ export function MessageArea({ id }: Props) {
// ? useRef to avoid re-renders // ? useRef to avoid re-renders
const scrollState = useRef<ScrollState>({ type: "Free" }); const scrollState = useRef<ScrollState>({ type: "Free" });
const setScrollState = (v: ScrollState) => { const setScrollState = useCallback((v: ScrollState) => {
if (v.type === "StayAtBottom") { if (v.type === "StayAtBottom") {
if (scrollState.current.type === "Bottom" || atBottom()) { if (scrollState.current.type === "Bottom" || atBottom()) {
scrollState.current = { scrollState.current = {
...@@ -131,7 +132,7 @@ export function MessageArea({ id }: Props) { ...@@ -131,7 +132,7 @@ export function MessageArea({ id }: Props) {
setScrollState({ type: "Free" }); setScrollState({ type: "Free" });
} }
}); });
}; }, []);
// ? Determine if we are at the bottom of the scroll container. // ? Determine if we are at the bottom of the scroll container.
// -> https://stackoverflow.com/a/44893438 // -> https://stackoverflow.com/a/44893438
...@@ -151,7 +152,7 @@ export function MessageArea({ id }: Props) { ...@@ -151,7 +152,7 @@ export function MessageArea({ id }: Props) {
return internalSubscribe("MessageArea", "jump_to_bottom", () => return internalSubscribe("MessageArea", "jump_to_bottom", () =>
setScrollState({ type: "ScrollToBottom" }), setScrollState({ type: "ScrollToBottom" }),
); );
}, []); }, [setScrollState]);
// ? Handle events from renderer. // ? Handle events from renderer.
useEffect(() => { useEffect(() => {
...@@ -163,12 +164,13 @@ export function MessageArea({ id }: Props) { ...@@ -163,12 +164,13 @@ export function MessageArea({ id }: Props) {
SingletonMessageRenderer.addListener("scroll", setScrollState); SingletonMessageRenderer.addListener("scroll", setScrollState);
return () => return () =>
SingletonMessageRenderer.removeListener("scroll", setScrollState); SingletonMessageRenderer.removeListener("scroll", setScrollState);
}, [scrollState]); }, [scrollState, setScrollState]);
// ? Load channel initially. // ? Load channel initially.
useEffect(() => { useEffect(() => {
if (message) return; if (message) return;
SingletonMessageRenderer.init(id); SingletonMessageRenderer.init(id);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id]); }, [id]);
// ? If message present or changes, load it as well. // ? If message present or changes, load it as well.
...@@ -179,11 +181,12 @@ export function MessageArea({ id }: Props) { ...@@ -179,11 +181,12 @@ export function MessageArea({ id }: Props) {
const channel = client.channels.get(id); const channel = client.channels.get(id);
if (channel?.channel_type === "TextChannel") { if (channel?.channel_type === "TextChannel") {
history.push(`/server/${channel.server}/channel/${id}`); history.push(`/server/${channel.server_id}/channel/${id}`);
} else { } else {
history.push(`/channel/${id}`); history.push(`/channel/${id}`);
} }
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [message]); }, [message]);
// ? If we are waiting for network, try again. // ? If we are waiting for network, try again.
...@@ -203,11 +206,14 @@ export function MessageArea({ id }: Props) { ...@@ -203,11 +206,14 @@ export function MessageArea({ id }: Props) {
SingletonMessageRenderer.markStale(); SingletonMessageRenderer.markStale();
break; break;
} }
}, [status, state]); }, [id, status, state]);
// ? When the container is scrolled. // ? When the container is scrolled.
// ? Also handle StayAtBottom // ? Also handle StayAtBottom
useEffect(() => { useEffect(() => {
const current = ref.current;
if (!current) return;
async function onScroll() { async function onScroll() {
if (scrollState.current.type === "Free" && atBottom()) { if (scrollState.current.type === "Free" && atBottom()) {
setScrollState({ type: "Bottom" }); setScrollState({ type: "Bottom" });
...@@ -221,12 +227,15 @@ export function MessageArea({ id }: Props) { ...@@ -221,12 +227,15 @@ export function MessageArea({ id }: Props) {
} }
} }
ref.current?.addEventListener("scroll", onScroll); current.addEventListener("scroll", onScroll);
return () => ref.current?.removeEventListener("scroll", onScroll); return () => current.removeEventListener("scroll", onScroll);
}, [ref, scrollState]); }, [ref, scrollState, setScrollState]);
// ? Top and bottom loaders. // ? Top and bottom loaders.
useEffect(() => { useEffect(() => {
const current = ref.current;
if (!current) return;
async function onScroll() { async function onScroll() {
if (atTop(100)) { if (atTop(100)) {
SingletonMessageRenderer.loadTop(ref.current!); SingletonMessageRenderer.loadTop(ref.current!);
...@@ -237,12 +246,12 @@ export function MessageArea({ id }: Props) { ...@@ -237,12 +246,12 @@ export function MessageArea({ id }: Props) {
} }
} }
ref.current?.addEventListener("scroll", onScroll); current.addEventListener("scroll", onScroll);
return () => ref.current?.removeEventListener("scroll", onScroll); return () => current.removeEventListener("scroll", onScroll);
}, [ref]); }, [ref]);
// ? Scroll down whenever the message area resizes. // ? Scroll down whenever the message area resizes.
function stbOnResize() { const stbOnResize = useCallback(() => {
if (!atBottom() && scrollState.current.type === "Bottom") { if (!atBottom() && scrollState.current.type === "Bottom") {
animateScroll.scrollToBottom({ animateScroll.scrollToBottom({
container: ref.current, container: ref.current,
...@@ -251,18 +260,18 @@ export function MessageArea({ id }: Props) { ...@@ -251,18 +260,18 @@ export function MessageArea({ id }: Props) {
setScrollState({ type: "Bottom" }); setScrollState({ type: "Bottom" });
} }
} }, [setScrollState]);
// ? Scroll down when container resized. // ? Scroll down when container resized.
useLayoutEffect(() => { useLayoutEffect(() => {
stbOnResize(); stbOnResize();
}, [height]); }, [stbOnResize, height]);
// ? Scroll down whenever the window resizes. // ? Scroll down whenever the window resizes.
useLayoutEffect(() => { useLayoutEffect(() => {
document.addEventListener("resize", stbOnResize); document.addEventListener("resize", stbOnResize);
return () => document.removeEventListener("resize", stbOnResize); return () => document.removeEventListener("resize", stbOnResize);
}, [ref, scrollState]); }, [ref, scrollState, stbOnResize]);
// ? Scroll to bottom when pressing 'Escape'. // ? Scroll to bottom when pressing 'Escape'.
useEffect(() => { useEffect(() => {
...@@ -275,7 +284,7 @@ export function MessageArea({ id }: Props) { ...@@ -275,7 +284,7 @@ export function MessageArea({ id }: Props) {
document.body.addEventListener("keyup", keyUp); document.body.addEventListener("keyup", keyUp);
return () => document.body.removeEventListener("keyup", keyUp); return () => document.body.removeEventListener("keyup", keyUp);
}, [ref, focusTaken]); }, [id, ref, focusTaken]);
return ( return (
<MessageAreaWidthContext.Provider <MessageAreaWidthContext.Provider
......
src/pages/channels/messaging/MessageEditor.tsx
View file @ 1ac5de17
import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components"; import styled from "styled-components";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
...@@ -9,8 +10,6 @@ import { ...@@ -9,8 +10,6 @@ import {
IntermediateContext, IntermediateContext,
useIntermediate, useIntermediate,
} from "../../../context/intermediate/Intermediate"; } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { MessageObject } from "../../../context/revoltjs/util";
import AutoComplete, { import AutoComplete, {
useAutoComplete, useAutoComplete,
...@@ -44,7 +43,7 @@ const EditorBase = styled.div` ...@@ -44,7 +43,7 @@ const EditorBase = styled.div`
`; `;
interface Props { interface Props {
message: MessageObject; message: Message;
finish: () => void; finish: () => void;
} }
...@@ -52,7 +51,6 @@ export default function MessageEditor({ message, finish }: Props) { ...@@ -52,7 +51,6 @@ export default function MessageEditor({ message, finish }: Props) {
const [content, setContent] = useState((message.content as string) ?? ""); const [content, setContent] = useState((message.content as string) ?? "");
const { focusTaken } = useContext(IntermediateContext); const { focusTaken } = useContext(IntermediateContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext);
async function save() { async function save() {
finish(); finish();
...@@ -60,13 +58,11 @@ export default function MessageEditor({ message, finish }: Props) { ...@@ -60,13 +58,11 @@ export default function MessageEditor({ message, finish }: Props) {
if (content.length === 0) { if (content.length === 0) {
openScreen({ openScreen({
id: "special_prompt", id: "special_prompt",
// @ts-expect-error
type: "delete_message", type: "delete_message",
// @ts-expect-error
target: message, target: message,
}); });
} else if (content !== message.content) { } else if (content !== message.content) {
await client.channels.editMessage(message.channel, message._id, { await message.edit({
content, content,
}); });
} }
...@@ -82,7 +78,7 @@ export default function MessageEditor({ message, finish }: Props) { ...@@ -82,7 +78,7 @@ export default function MessageEditor({ message, finish }: Props) {
document.body.addEventListener("keyup", keyUp); document.body.addEventListener("keyup", keyUp);
return () => document.body.removeEventListener("keyup", keyUp); return () => document.body.removeEventListener("keyup", keyUp);
}, [focusTaken]); }, [focusTaken, finish]);
const { const {
onChange, onChange,
......
src/pages/channels/messaging/MessageRenderer.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { X } from "@styled-icons/boxicons-regular"; import { X } from "@styled-icons/boxicons-regular";
import { Users } from "revolt.js/dist/api/objects"; import { RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Message as MessageI } from "revolt.js/dist/maps/Messages";
import styled from "styled-components"; import styled from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { memo } from "preact/compat"; import { memo } from "preact/compat";
import { useContext, useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter"; import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
import { RenderState } from "../../../lib/renderer/types"; import { RenderState } from "../../../lib/renderer/types";
...@@ -14,8 +17,7 @@ import { connectState } from "../../../redux/connector"; ...@@ -14,8 +17,7 @@ import { connectState } from "../../../redux/connector";
import { QueuedMessage } from "../../../redux/reducers/queue"; import { QueuedMessage } from "../../../redux/reducers/queue";
import RequiresOnline from "../../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import { MessageObject } from "../../../context/revoltjs/util";
import Message from "../../../components/common/messaging/Message"; import Message from "../../../components/common/messaging/Message";
import { SystemMessage } from "../../../components/common/messaging/SystemMessage"; import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
...@@ -47,7 +49,7 @@ const BlockedMessage = styled.div` ...@@ -47,7 +49,7 @@ const BlockedMessage = styled.div`
function MessageRenderer({ id, state, queue, highlight }: Props) { function MessageRenderer({ id, state, queue, highlight }: Props) {
if (state.type !== "RENDER") return null; if (state.type !== "RENDER") return null;
const client = useContext(AppContext); const client = useClient();
const userId = client.user!._id; const userId = client.user!._id;
const [editing, setEditing] = useState<string | undefined>(undefined); const [editing, setEditing] = useState<string | undefined>(undefined);
...@@ -60,7 +62,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { ...@@ -60,7 +62,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
function editLast() { function editLast() {
if (state.type !== "RENDER") return; if (state.type !== "RENDER") return;
for (let i = state.messages.length - 1; i >= 0; i--) { for (let i = state.messages.length - 1; i >= 0; i--) {
if (state.messages[i].author === userId) { if (state.messages[i].author_id === userId) {
setEditing(state.messages[i]._id); setEditing(state.messages[i]._id);
internalEmit("MessageArea", "jump_to_bottom"); internalEmit("MessageArea", "jump_to_bottom");
return; return;
...@@ -74,10 +76,10 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { ...@@ -74,10 +76,10 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
]; ];
return () => subs.forEach((unsub) => unsub()); return () => subs.forEach((unsub) => unsub());
}, [state.messages]); }, [state.messages, state.type, userId]);
let render: Children[] = [], const render: Children[] = [];
previous: MessageObject | undefined; let previous: MessageI | undefined;
if (state.atTop) { if (state.atTop) {
render.push(<ConversationStart id={id} />); render.push(<ConversationStart id={id} />);
...@@ -129,10 +131,15 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { ...@@ -129,10 +131,15 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
for (const message of state.messages) { for (const message of state.messages) {
if (previous) { if (previous) {
compare(message._id, message.author, previous._id, previous.author); compare(
message._id,
message.author_id,
previous._id,
previous.author_id,
);
} }
if (message.author === "00000000000000000000000000") { if (message.author_id === SYSTEM_USER_ID) {
render.push( render.push(
<SystemMessage <SystemMessage
key={message._id} key={message._id}
...@@ -141,34 +148,30 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { ...@@ -141,34 +148,30 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
highlight={highlight === message._id} highlight={highlight === message._id}
/>, />,
); );
} else if (
message.author?.relationship === RelationshipStatus.Blocked
) {
blocked++;
} else { } else {
// ! FIXME: temp solution if (blocked > 0) pushBlocked();
if (
client.users.get(message.author)?.relationship === render.push(
Users.Relationship.Blocked <Message
) { message={message}
blocked++; key={message._id}
} else { head={head}
if (blocked > 0) pushBlocked(); content={
editing === message._id ? (
render.push( <MessageEditor
<Message message={message}
message={message} finish={stopEditing}
key={message._id} />
head={head} ) : undefined
content={ }
editing === message._id ? ( attachContext
<MessageEditor highlight={highlight === message._id}
message={message} />,
finish={stopEditing} );
/>
) : undefined
}
attachContext
highlight={highlight === message._id}
/>,
);
}
} }
previous = message; previous = message;
...@@ -183,20 +186,22 @@ function MessageRenderer({ id, state, queue, highlight }: Props) { ...@@ -183,20 +186,22 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
if (nonces.includes(msg.id)) continue; if (nonces.includes(msg.id)) continue;
if (previous) { if (previous) {
compare(msg.id, userId!, previous._id, previous.author); compare(msg.id, userId!, previous._id, previous.author_id);
previous = { previous = {
_id: msg.id, _id: msg.id,
data: { author: userId! }, author_id: userId!,
} as any; } as MessageI;
} }
render.push( render.push(
<Message <Message
message={{ message={
...msg.data, new MessageI(client, {
replies: msg.data.replies.map((x) => x.id), ...msg.data,
}} replies: msg.data.replies.map((x) => x.id),
})
}
key={msg.id} key={msg.id}
queued={msg} queued={msg}
head={head} head={head}
......
src/pages/channels/voice/VoiceHeader.tsx
View file @ 1ac5de17
import { BarChart } from "@styled-icons/boxicons-regular"; import { BarChart } from "@styled-icons/boxicons-regular";
import { observable } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { import {
VoiceContext, VoiceContext,
VoiceOperationsContext, VoiceOperationsContext,
...@@ -77,14 +74,13 @@ export default observer(({ id }: Props) => { ...@@ -77,14 +74,13 @@ export default observer(({ id }: Props) => {
const { isProducing, startProducing, stopProducing, disconnect } = const { isProducing, startProducing, stopProducing, disconnect } =
useContext(VoiceOperationsContext); useContext(VoiceOperationsContext);
const store = useData();
const client = useClient(); const client = useClient();
const self = store.users.get(client.user!._id); const self = client.users.get(client.user!._id);
//const ctx = useForceUpdate(); //const ctx = useForceUpdate();
//const self = useSelf(ctx); //const self = useSelf(ctx);
const keys = participants ? Array.from(participants.keys()) : undefined; const keys = participants ? Array.from(participants.keys()) : undefined;
const users = keys?.map((key) => store.users.get(key)); const users = keys?.map((key) => client.users.get(key));
return ( return (
<VoiceBase> <VoiceBase>
......
src/pages/developer/Developer.tsx
View file @ 1ac5de17
import { Wrench } from "@styled-icons/boxicons-solid"; import { Wrench } from "@styled-icons/boxicons-solid";
import { isObservable, isObservableProp } from "mobx";
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
...@@ -9,17 +6,13 @@ import PaintCounter from "../../lib/PaintCounter"; ...@@ -9,17 +6,13 @@ import PaintCounter from "../../lib/PaintCounter";
import { TextReact } from "../../lib/i18n"; import { TextReact } from "../../lib/i18n";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
import { useUserPermission } from "../../context/revoltjs/hooks";
import UserIcon from "../../components/common/user/UserIcon";
import Header from "../../components/ui/Header"; import Header from "../../components/ui/Header";
import { useData } from "../../mobx/State";
export default function Developer() { export default function Developer() {
// const voice = useContext(VoiceContext); // const voice = useContext(VoiceContext);
const client = useContext(AppContext); const client = useContext(AppContext);
const userPermission = useUserPermission(client.user!._id); const userPermission = client.user!.permission;
return ( return (
<div> <div>
...@@ -40,10 +33,6 @@ export default function Developer() { ...@@ -40,10 +33,6 @@ export default function Developer() {
fields={{ provider: <b>GAMING!</b> }} fields={{ provider: <b>GAMING!</b> }}
/> />
</div> </div>
<ObserverTest />
<ObserverTest2 />
<ObserverTest3 />
<ObserverTest4 />
<div style={{ padding: "16px" }}> <div style={{ padding: "16px" }}>
{/*<span> {/*<span>
<b>Voice Status:</b> {VoiceStatus[voice.status]} <b>Voice Status:</b> {VoiceStatus[voice.status]}
...@@ -62,67 +51,3 @@ export default function Developer() { ...@@ -62,67 +51,3 @@ export default function Developer() {
</div> </div>
); );
} }
const ObserverTest = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
username:{" "}
{store.users.get(client.user!._id)?.username ?? "no user!"}
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest2 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
status:{" "}
{JSON.stringify(store.users.get(client.user!._id)?.status) ??
"none"}
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest3 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
avatar{" "}
<UserIcon
size={64}
attachment={
store.users.get(client.user!._id)?.avatar ?? undefined
}
/>
<PaintCounter small />
</p>
</div>
);
});
const ObserverTest4 = observer(() => {
const client = useContext(AppContext);
const store = useData();
return (
<div style={{ padding: "16px" }}>
<p>
status text:{" "}
{JSON.stringify(
store.users.get(client.user!._id)?.status?.text,
) ?? "none"}
<PaintCounter small />
</p>
</div>
);
});
src/pages/friends/Friend.tsx
View file @ 1ac5de17
import { X, Plus } from "@styled-icons/boxicons-regular"; import { X, Plus } from "@styled-icons/boxicons-regular";
import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid"; import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects"; import { useHistory } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import classNames from "classnames"; import classNames from "classnames";
...@@ -11,14 +13,8 @@ import { useContext } from "preact/hooks"; ...@@ -11,14 +13,8 @@ import { useContext } from "preact/hooks";
import { stopPropagation } from "../../lib/stopPropagation"; import { stopPropagation } from "../../lib/stopPropagation";
import { User } from "../../mobx";
import { VoiceOperationsContext } from "../../context/Voice"; import { VoiceOperationsContext } from "../../context/Voice";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
import {
AppContext,
OperationsContext,
} from "../../context/revoltjs/RevoltClient";
import UserIcon from "../../components/common/user/UserIcon"; import UserIcon from "../../components/common/user/UserIcon";
import UserStatus from "../../components/common/user/UserStatus"; import UserStatus from "../../components/common/user/UserStatus";
...@@ -31,15 +27,14 @@ interface Props { ...@@ -31,15 +27,14 @@ interface Props {
} }
export const Friend = observer(({ user }: Props) => { export const Friend = observer(({ user }: Props) => {
const client = useContext(AppContext); const history = useHistory();
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { openDM } = useContext(OperationsContext);
const { connect } = useContext(VoiceOperationsContext); const { connect } = useContext(VoiceOperationsContext);
const actions: Children[] = []; const actions: Children[] = [];
let subtext: Children = null; let subtext: Children = null;
if (user.relationship === Users.Relationship.Friend) { if (user.relationship === RelationshipStatus.Friend) {
subtext = <UserStatus user={user} />; subtext = <UserStatus user={user} />;
actions.push( actions.push(
<> <>
...@@ -47,28 +42,41 @@ export const Friend = observer(({ user }: Props) => { ...@@ -47,28 +42,41 @@ export const Friend = observer(({ user }: Props) => {
type="circle" type="circle"
className={classNames(styles.button, styles.success)} className={classNames(styles.button, styles.success)}
onClick={(ev) => onClick={(ev) =>
stopPropagation(ev, openDM(user._id).then(connect)) stopPropagation(
ev,
user
.openDM()
.then(connect)
.then((x) => history.push(`/channel/${x._id}`)),
)
}> }>
<PhoneCall size={20} /> <PhoneCall size={20} />
</IconButton> </IconButton>
<IconButton <IconButton
type="circle" type="circle"
className={styles.button} className={styles.button}
onClick={(ev) => stopPropagation(ev, openDM(user._id))}> onClick={(ev) =>
stopPropagation(
ev,
user
.openDM()
.then((channel) =>
history.push(`/channel/${channel._id}`),
),
)
}>
<Envelope size={20} /> <Envelope size={20} />
</IconButton> </IconButton>
</>, </>,
); );
} }
if (user.relationship === Users.Relationship.Incoming) { if (user.relationship === RelationshipStatus.Incoming) {
actions.push( actions.push(
<IconButton <IconButton
type="circle" type="circle"
className={styles.button} className={styles.button}
onClick={(ev) => onClick={(ev) => stopPropagation(ev, user.addFriend())}>
stopPropagation(ev, client.users.addFriend(user.username))
}>
<Plus size={24} /> <Plus size={24} />
</IconButton>, </IconButton>,
); );
...@@ -76,14 +84,14 @@ export const Friend = observer(({ user }: Props) => { ...@@ -76,14 +84,14 @@ export const Friend = observer(({ user }: Props) => {
subtext = <Text id="app.special.friends.incoming" />; subtext = <Text id="app.special.friends.incoming" />;
} }
if (user.relationship === Users.Relationship.Outgoing) { if (user.relationship === RelationshipStatus.Outgoing) {
subtext = <Text id="app.special.friends.outgoing" />; subtext = <Text id="app.special.friends.outgoing" />;
} }
if ( if (
user.relationship === Users.Relationship.Friend || user.relationship === RelationshipStatus.Friend ||
user.relationship === Users.Relationship.Outgoing || user.relationship === RelationshipStatus.Outgoing ||
user.relationship === Users.Relationship.Incoming user.relationship === RelationshipStatus.Incoming
) { ) {
actions.push( actions.push(
<IconButton <IconButton
...@@ -96,13 +104,13 @@ export const Friend = observer(({ user }: Props) => { ...@@ -96,13 +104,13 @@ export const Friend = observer(({ user }: Props) => {
onClick={(ev) => onClick={(ev) =>
stopPropagation( stopPropagation(
ev, ev,
user.relationship === Users.Relationship.Friend user.relationship === RelationshipStatus.Friend
? openScreen({ ? openScreen({
id: "special_prompt", id: "special_prompt",
type: "unfriend_user", type: "unfriend_user",
target: user, target: user,
}) })
: client.users.removeFriend(user._id), : user.removeFriend(),
) )
}> }>
<X size={24} /> <X size={24} />
...@@ -110,14 +118,12 @@ export const Friend = observer(({ user }: Props) => { ...@@ -110,14 +118,12 @@ export const Friend = observer(({ user }: Props) => {
); );
} }
if (user.relationship === Users.Relationship.Blocked) { if (user.relationship === RelationshipStatus.Blocked) {
actions.push( actions.push(
<IconButton <IconButton
type="circle" type="circle"
className={classNames(styles.button, styles.error)} className={classNames(styles.button, styles.error)}
onClick={(ev) => onClick={(ev) => stopPropagation(ev, user.unblockUser())}>
stopPropagation(ev, client.users.unblockUser(user._id))
}>
<UserX size={24} /> <UserX size={24} />
</IconButton>, </IconButton>,
); );
......
src/pages/friends/Friends.tsx
View file @ 1ac5de17
import { import { ChevronRight } from "@styled-icons/boxicons-regular";
ChevronDown,
ChevronRight,
ListPlus,
} from "@styled-icons/boxicons-regular";
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid"; import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects"; import { RelationshipStatus, Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
...@@ -13,10 +10,8 @@ import { Text } from "preact-i18n"; ...@@ -13,10 +10,8 @@ import { Text } from "preact-i18n";
import { TextReact } from "../../lib/i18n"; import { TextReact } from "../../lib/i18n";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
import { useClient } from "../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../components/common/CollapsibleSection"; import CollapsibleSection from "../../components/common/CollapsibleSection";
import Tooltip from "../../components/common/Tooltip"; import Tooltip from "../../components/common/Tooltip";
...@@ -30,49 +25,48 @@ import { Friend } from "./Friend"; ...@@ -30,49 +25,48 @@ import { Friend } from "./Friend";
export default observer(() => { export default observer(() => {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const store = useData(); const client = useClient();
const users = [...store.users.values()]; const users = [...client.users.values()];
users.sort((a, b) => a.username.localeCompare(b.username)); users.sort((a, b) => a.username.localeCompare(b.username));
const friends = users.filter( const friends = users.filter(
(x) => x.relationship === Users.Relationship.Friend, (x) => x.relationship === RelationshipStatus.Friend,
); );
const lists = [ const lists = [
[ [
"", "",
users.filter((x) => x.relationship === Users.Relationship.Incoming), users.filter((x) => x.relationship === RelationshipStatus.Incoming),
], ],
[ [
"app.special.friends.sent", "app.special.friends.sent",
users.filter((x) => x.relationship === Users.Relationship.Outgoing), users.filter((x) => x.relationship === RelationshipStatus.Outgoing),
"outgoing", "outgoing",
], ],
[ [
"app.status.online", "app.status.online",
friends.filter( friends.filter(
(x) => (x) => x.online && x.status?.presence !== Presence.Invisible,
x.online && x.status?.presence !== Users.Presence.Invisible,
), ),
"online", "online",
], ],
[ [
"app.status.offline", "app.status.offline",
friends.filter( friends.filter(
(x) => (x) => !x.online || x.status?.presence === Presence.Invisible,
!x.online ||
x.status?.presence === Users.Presence.Invisible,
), ),
"offline", "offline",
], ],
[ [
"app.special.friends.blocked", "app.special.friends.blocked",
users.filter((x) => x.relationship === Users.Relationship.Blocked), users.filter((x) => x.relationship === RelationshipStatus.Blocked),
"blocked", "blocked",
], ],
] as [string, User[], string][]; ] as [string, User[], string][];
const incoming = lists[0][1]; const incoming = lists[0][1];
const userlist: Children[] = incoming.map((x) => <b>{x.username}</b>); const userlist: Children[] = incoming.map((x) => (
<b key={x._id}>{x.username}</b>
));
for (let i = incoming.length - 1; i > 0; i--) userlist.splice(i, 0, ", "); for (let i = incoming.length - 1; i > 0; i--) userlist.splice(i, 0, ", ");
const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0; const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
...@@ -199,6 +193,7 @@ export default observer(() => { ...@@ -199,6 +193,7 @@ export default observer(() => {
return ( return (
<CollapsibleSection <CollapsibleSection
key={section_id}
id={`friends_${section_id}`} id={`friends_${section_id}`}
defaultValue={true} defaultValue={true}
sticky sticky
......
src/pages/home/Home.tsx
View file @ 1ac5de17
...@@ -17,7 +17,8 @@ export default function Home() { ...@@ -17,7 +17,8 @@ export default function Home() {
<Text id="app.navigation.tabs.home" /> <Text id="app.navigation.tabs.home" />
</Header> </Header>
<h3> <h3>
<Text id="app.special.modals.onboarding.welcome" />{" "} <Text id="app.special.modals.onboarding.welcome" />
<br />
<img src={wideSVG} /> <img src={wideSVG} />
</h3> </h3>
<div className={styles.actions}> <div className={styles.actions}>
...@@ -26,6 +27,14 @@ export default function Home() { ...@@ -26,6 +27,14 @@ export default function Home() {
Join testers server Join testers server
</Button> </Button>
</Link> </Link>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<Button contrast gold>
Donate to Revolt
</Button>
</a>
<Link to="/settings/feedback"> <Link to="/settings/feedback">
<Button contrast>Give feedback</Button> <Button contrast>Give feedback</Button>
</Link> </Link>
...@@ -34,12 +43,6 @@ export default function Home() { ...@@ -34,12 +43,6 @@ export default function Home() {
<Button contrast>Open settings</Button> <Button contrast>Open settings</Button>
</Tooltip> </Tooltip>
</Link> </Link>
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<Button contrast>Source code</Button>
</a>
</div> </div>
</div> </div>
); );
......
src/pages/invite/Invite.tsx
View file @ 1ac5de17
import { ArrowBack } from "@styled-icons/boxicons-regular"; import { ArrowBack } from "@styled-icons/boxicons-regular";
import { autorun } from "mobx";
import { useHistory, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import { Invites } from "revolt.js/dist/api/objects"; import { RetrievedInvite } from "revolt-api/types/Invites";
import styles from "./Invite.module.scss"; import styles from "./Invite.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { defer } from "../../lib/defer"; import { defer } from "../../lib/defer";
import { TextReact } from "../../lib/i18n";
import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { import {
...@@ -28,7 +31,7 @@ export default function Invite() { ...@@ -28,7 +31,7 @@ export default function Invite() {
const { code } = useParams<{ code: string }>(); const { code } = useParams<{ code: string }>();
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const [invite, setInvite] = useState<Invites.RetrievedInvite | undefined>( const [invite, setInvite] = useState<RetrievedInvite | undefined>(
undefined, undefined,
); );
...@@ -42,7 +45,7 @@ export default function Invite() { ...@@ -42,7 +45,7 @@ export default function Invite() {
.then((data) => setInvite(data)) .then((data) => setInvite(data))
.catch((err) => setError(takeError(err))); .catch((err) => setError(takeError(err)));
} }
}, [status]); }, [client, code, invite, status]);
if (typeof invite === "undefined") { if (typeof invite === "undefined") {
return ( return (
...@@ -89,12 +92,20 @@ export default function Invite() { ...@@ -89,12 +92,20 @@ export default function Invite() {
<h1>{invite.server_name}</h1> <h1>{invite.server_name}</h1>
<h2>#{invite.channel_name}</h2> <h2>#{invite.channel_name}</h2>
<h3> <h3>
Invited by{" "} <TextReact
<UserIcon id="app.special.invite.invited_by"
size={24} fields={{
attachment={invite.user_avatar} user: (
/>{" "} <>
{invite.user_name} <UserIcon
size={24}
attachment={invite.user_avatar}
/>{" "}
{invite.user_name}
</>
),
}}
/>
</h3> </h3>
<Overline type="error" error={error} /> <Overline type="error" error={error} />
<Button <Button
...@@ -115,27 +126,35 @@ export default function Invite() { ...@@ -115,27 +126,35 @@ export default function Invite() {
`/server/${invite.server_id}/channel/${invite.channel_id}`, `/server/${invite.server_id}/channel/${invite.channel_id}`,
); );
} }
}
const result = await client.joinInvite(
code,
);
if (result.type === "Server") { const dispose = autorun(() => {
defer(() => { const server = client.servers.get(
history.push( invite.server_id,
`/server/${result.server._id}/channel/${result.channel._id}`,
); );
defer(() => {
if (server) {
history.push(
`/server/${server._id}/channel/${invite.channel_id}`,
);
}
});
dispose();
}); });
} }
await client.joinInvite(code);
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
setProcessing(false); setProcessing(false);
} }
}}> }}>
{status === ClientStatus.READY {status === ClientStatus.READY ? (
? "Login to Revolt" <Text id="app.special.invite.login" />
: "Accept Invite"} ) : (
<Text id="app.special.invite.accept" />
)}
</Button> </Button>
</> </>
)} )}
......
src/pages/login/FormField.tsx
View file @ 1ac5de17
import { UseFormMethods } from "react-hook-form";
import { Text, Localizer } from "preact-i18n"; import { Text, Localizer } from "preact-i18n";
import InputBox from "../../components/ui/InputBox"; import InputBox from "../../components/ui/InputBox";
...@@ -6,7 +8,7 @@ import Overline from "../../components/ui/Overline"; ...@@ -6,7 +8,7 @@ import Overline from "../../components/ui/Overline";
interface Props { interface Props {
type: "email" | "username" | "password" | "invite" | "current_password"; type: "email" | "username" | "password" | "invite" | "current_password";
showOverline?: boolean; showOverline?: boolean;
register: Function; register: UseFormMethods["register"];
error?: string; error?: string;
name?: string; name?: string;
} }
...@@ -27,9 +29,11 @@ export default function FormField({ ...@@ -27,9 +29,11 @@ export default function FormField({
)} )}
<Localizer> <Localizer>
<InputBox <InputBox
// Styled uses React typing while we use Preact placeholder={
// this leads to inconsistances where things need to be typed oddly (
placeholder={(<Text id={`login.enter.${type}`} />) as any} <Text id={`login.enter.${type}`} />
) as unknown as string
}
name={ name={
type === "current_password" ? "password" : name ?? type type === "current_password" ? "password" : name ?? type
} }
...@@ -40,6 +44,8 @@ export default function FormField({ ...@@ -40,6 +44,8 @@ export default function FormField({
? "password" ? "password"
: type : type
} }
// See https://github.com/mozilla/contain-facebook/issues/783
className="fbc-has-badge"
ref={register( ref={register(
type === "password" || type === "current_password" type === "password" || type === "current_password"
? { ? {
......
src/pages/login/Login.tsx
View file @ 1ac5de17
...@@ -11,6 +11,7 @@ import { AppContext } from "../../context/revoltjs/RevoltClient"; ...@@ -11,6 +11,7 @@ import { AppContext } from "../../context/revoltjs/RevoltClient";
import LocaleSelector from "../../components/common/LocaleSelector"; import LocaleSelector from "../../components/common/LocaleSelector";
import { Titlebar } from "../../components/native/Titlebar";
import { APP_VERSION } from "../../version"; import { APP_VERSION } from "../../version";
import background from "./background.jpg"; import background from "./background.jpg";
import { FormCreate } from "./forms/FormCreate"; import { FormCreate } from "./forms/FormCreate";
...@@ -23,52 +24,57 @@ export default function Login() { ...@@ -23,52 +24,57 @@ export default function Login() {
const client = useContext(AppContext); const client = useContext(AppContext);
return ( return (
<div className={styles.login}> <>
<Helmet> {window.isNative && !window.native.getConfig().frame && (
<meta name="theme-color" content={theme.background} /> <Titlebar />
</Helmet> )}
<div className={styles.content}> <div className={styles.login}>
<div className={styles.attribution}> <Helmet>
<span> <meta name="theme-color" content={theme.background} />
API:{" "} </Helmet>
<code>{client.configuration?.revolt ?? "???"}</code>{" "} <div className={styles.content}>
&middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "} <div className={styles.attribution}>
&middot; App: <code>{APP_VERSION}</code> <span>
</span> API:{" "}
<span> <code>{client.configuration?.revolt ?? "???"}</code>{" "}
<LocaleSelector /> &middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
</span> &middot; App: <code>{APP_VERSION}</code>
</div> </span>
<div className={styles.modal}> <span>
<Switch> <LocaleSelector />
<Route path="/login/create"> </span>
<FormCreate /> </div>
</Route> <div className={styles.modal}>
<Route path="/login/resend"> <Switch>
<FormResend /> <Route path="/login/create">
</Route> <FormCreate />
<Route path="/login/reset/:token"> </Route>
<FormReset /> <Route path="/login/resend">
</Route> <FormResend />
<Route path="/login/reset"> </Route>
<FormSendReset /> <Route path="/login/reset/:token">
</Route> <FormReset />
<Route path="/"> </Route>
<FormLogin /> <Route path="/login/reset">
</Route> <FormSendReset />
</Switch> </Route>
</div> <Route path="/">
<div className={styles.attribution}> <FormLogin />
<span> </Route>
<Text id="general.image_by" /> &lrm;@lorenzoherrera </Switch>
&rlm;· unsplash.com </div>
</span> <div className={styles.attribution}>
<span>
<Text id="general.image_by" /> &lrm;@lorenzoherrera
&rlm;· unsplash.com
</span>
</div>
</div> </div>
<div
className={styles.bg}
style={{ background: `url('${background}')` }}
/>
</div> </div>
<div </>
className={styles.bg}
style={{ background: `url('${background}')` }}
/>
</div>
); );
} }
src/pages/login/forms/CaptchaBlock.tsx
View file @ 1ac5de17
...@@ -20,7 +20,7 @@ export function CaptchaBlock(props: CaptchaProps) { ...@@ -20,7 +20,7 @@ export function CaptchaBlock(props: CaptchaProps) {
if (!client.configuration?.features.captcha.enabled) { if (!client.configuration?.features.captcha.enabled) {
props.onSuccess(); props.onSuccess();
} }
}, []); }, [client.configuration?.features.captcha.enabled, props]);
if (!client.configuration?.features.captcha.enabled) if (!client.configuration?.features.captcha.enabled)
return <Preloader type="spinner" />; return <Preloader type="spinner" />;
......
src/pages/login/forms/Form.tsx
View file @ 1ac5de17
...@@ -63,7 +63,7 @@ export function Form({ page, callback }: Props) { ...@@ -63,7 +63,7 @@ export function Form({ page, callback }: Props) {
setGlobalError(undefined); setGlobalError(undefined);
setLoading(true); setLoading(true);
function onError(err: any) { function onError(err: unknown) {
setLoading(false); setLoading(false);
const error = takeError(err); const error = takeError(err);
......
src/pages/login/forms/FormLogin.tsx
View file @ 1ac5de17
...@@ -19,7 +19,11 @@ export function FormLogin() { ...@@ -19,7 +19,11 @@ export function FormLogin() {
let device_name; let device_name;
if (browser) { if (browser) {
const { name, os } = browser; const { name, os } = browser;
device_name = `${name} on ${os}`; if (window.isNative) {
device_name = `Revolt Desktop on ${os}`;
} else {
device_name = `${name} on ${os}`;
}
} else { } else {
device_name = "Unknown Device"; device_name = "Unknown Device";
} }
......
src/pages/settings/ChannelSettings.tsx
View file @ 1ac5de17
import { ListCheck, ListUl } from "@styled-icons/boxicons-regular"; import { ListCheck, ListUl } from "@styled-icons/boxicons-regular";
import { Route, useHistory, useParams } from "react-router-dom"; import { Route, Switch, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useData } from "../../mobx/State";
import { useClient } from "../../context/revoltjs/RevoltClient"; import { useClient } from "../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../context/revoltjs/util"; import { getChannelName } from "../../context/revoltjs/util";
...@@ -17,9 +15,10 @@ import Permissions from "./channel/Permissions"; ...@@ -17,9 +15,10 @@ import Permissions from "./channel/Permissions";
export default function ChannelSettings() { export default function ChannelSettings() {
const { channel: cid } = useParams<{ channel: string }>(); const { channel: cid } = useParams<{ channel: string }>();
const store = useData();
const client = useClient(); const client = useClient();
const channel = store.channels.get(cid); const history = useHistory();
const channel = client.channels.get(cid);
if (!channel) return null; if (!channel) return null;
if ( if (
channel.channel_type === "SavedMessages" || channel.channel_type === "SavedMessages" ||
...@@ -27,13 +26,12 @@ export default function ChannelSettings() { ...@@ -27,13 +26,12 @@ export default function ChannelSettings() {
) )
return null; return null;
const history = useHistory();
function switchPage(to?: string) { function switchPage(to?: string) {
let base_url; let base_url;
switch (channel?.channel_type) { switch (channel?.channel_type) {
case "TextChannel": case "TextChannel":
case "VoiceChannel": case "VoiceChannel":
base_url = `/server/${channel.server}/channel/${cid}/settings`; base_url = `/server/${channel.server_id}/channel/${cid}/settings`;
break; break;
default: default:
base_url = `/channel/${cid}/settings`; base_url = `/channel/${cid}/settings`;
...@@ -53,7 +51,7 @@ export default function ChannelSettings() { ...@@ -53,7 +51,7 @@ export default function ChannelSettings() {
category: ( category: (
<Category <Category
variant="uniform" variant="uniform"
text={getChannelName(client, channel, true)} text={getChannelName(channel, true)}
/> />
), ),
id: "overview", id: "overview",
...@@ -70,18 +68,20 @@ export default function ChannelSettings() { ...@@ -70,18 +68,20 @@ export default function ChannelSettings() {
), ),
}, },
]} ]}
children={[ children={
<Route path="/server/:server/channel/:channel/settings/permissions"> <Switch>
<Permissions channel={channel} /> <Route path="/server/:server/channel/:channel/settings/permissions">
</Route>, <Permissions channel={channel} />
<Route path="/channel/:channel/settings/permissions"> </Route>
<Permissions channel={channel} /> <Route path="/channel/:channel/settings/permissions">
</Route>, <Permissions channel={channel} />
</Route>
<Route path="/"> <Route>
<Overview channel={channel} /> <Overview channel={channel} />
</Route>, </Route>
]} </Switch>
}
category="channel_pages" category="channel_pages"
switchPage={switchPage} switchPage={switchPage}
defaultPage="overview" defaultPage="overview"
......
src/pages/settings/GenericSettings.tsx
View file @ 1ac5de17
import { ArrowBack, X } from "@styled-icons/boxicons-regular"; import { ArrowBack, X } from "@styled-icons/boxicons-regular";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import styles from "./Settings.module.scss"; import styles from "./Settings.module.scss";
import classNames from "classnames";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks"; import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
...@@ -25,6 +26,7 @@ interface Props { ...@@ -25,6 +26,7 @@ interface Props {
id: string; id: string;
icon: Children; icon: Children;
title: Children; title: Children;
hidden?: boolean;
hideTitle?: boolean; hideTitle?: boolean;
}[]; }[];
custom?: Children; custom?: Children;
...@@ -48,13 +50,18 @@ export function GenericSettings({ ...@@ -48,13 +50,18 @@ export function GenericSettings({
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
const { page } = useParams<{ page: string }>(); const { page } = useParams<{ page: string }>();
function exitSettings() { const [closing, setClosing] = useState(false);
if (history.length > 0) { const exitSettings = useCallback(() => {
history.goBack(); if (history.length > 1) {
setClosing(true);
setTimeout(() => {
history.goBack();
}, 100);
} else { } else {
history.push("/"); history.push("/");
} }
} }, [history]);
useEffect(() => { useEffect(() => {
function keyDown(e: KeyboardEvent) { function keyDown(e: KeyboardEvent) {
...@@ -65,10 +72,15 @@ export function GenericSettings({ ...@@ -65,10 +72,15 @@ export function GenericSettings({
document.body.addEventListener("keydown", keyDown); document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown); return () => document.body.removeEventListener("keydown", keyDown);
}, []); }, [exitSettings]);
return ( return (
<div className={styles.settings} data-mobile={isTouchscreenDevice}> <div
className={classNames(styles.settings, {
[styles.closing]: closing,
[styles.native]: window.isNative,
})}
data-mobile={isTouchscreenDevice}>
<Helmet> <Helmet>
<meta <meta
name="theme-color" name="theme-color"
...@@ -110,52 +122,64 @@ export function GenericSettings({ ...@@ -110,52 +122,64 @@ export function GenericSettings({
)} )}
{(!isTouchscreenDevice || typeof page === "undefined") && ( {(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className={styles.container}> <div className={styles.scrollbox}>
{pages.map((entry, i) => ( <div className={styles.container}>
<> {pages.map((entry, i) =>
{entry.category && ( entry.hidden ? undefined : (
<Category <>
variant="uniform" {entry.category && (
text={entry.category} <Category
/> variant="uniform"
)} text={entry.category}
<ButtonItem />
active={ )}
page === entry.id || <ButtonItem
(i === 0 && active={
!isTouchscreenDevice && page === entry.id ||
typeof page === "undefined") (i === 0 &&
} !isTouchscreenDevice &&
onClick={() => switchPage(entry.id)} typeof page === "undefined")
compact> }
{entry.icon} {entry.title} onClick={() => switchPage(entry.id)}
</ButtonItem> compact>
{entry.divider && <LineDivider />} {entry.icon} {entry.title}
</> </ButtonItem>
))} {entry.divider && <LineDivider />}
{custom} </>
),
)}
{custom}
</div>
</div> </div>
</div> </div>
)} )}
{(!isTouchscreenDevice || typeof page === "string") && ( {(!isTouchscreenDevice || typeof page === "string") && (
<div className={styles.content}> <div className={styles.content}>
{!isTouchscreenDevice && <div className={styles.scrollbox}>
!pages.find((x) => x.id === page && x.hideTitle) && ( <div className={styles.contentcontainer}>
<h1> {!isTouchscreenDevice &&
<Text !pages.find(
id={`app.settings.${category}.${ (x) => x.id === page && x.hideTitle,
page ?? defaultPage ) && (
}.title`} <h1>
/> <Text
</h1> id={`app.settings.${category}.${
page ?? defaultPage
}.title`}
/>
</h1>
)}
{children}
</div>
{!isTouchscreenDevice && (
<div className={styles.action}>
<div
onClick={exitSettings}
className={styles.closeButton}>
<X size={28} />
</div>
</div>
)} )}
<Switch>{children}</Switch>
</div>
)}
{!isTouchscreenDevice && (
<div className={styles.action}>
<div onClick={exitSettings} className={styles.closeButton}>
<X size={28} />
</div> </div>
</div> </div>
)} )}
......
src/pages/settings/ServerSettings.tsx
View file @ 1ac5de17
import { ListUl, ListCheck, ListMinus } from "@styled-icons/boxicons-regular"; import { ListUl, ListCheck, ListMinus } from "@styled-icons/boxicons-regular";
import { XSquare, Share, Group } from "@styled-icons/boxicons-solid"; import { XSquare, Share, Group } from "@styled-icons/boxicons-solid";
import { Route, useHistory, useParams } from "react-router-dom"; import { observer } from "mobx-react-lite";
import { Route, Switch, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { useServer } from "../../context/revoltjs/hooks"; import { useClient } from "../../context/revoltjs/RevoltClient";
import Category from "../../components/ui/Category"; import Category from "../../components/ui/Category";
...@@ -17,9 +18,10 @@ import { Members } from "./server/Members"; ...@@ -17,9 +18,10 @@ import { Members } from "./server/Members";
import { Overview } from "./server/Overview"; import { Overview } from "./server/Overview";
import { Roles } from "./server/Roles"; import { Roles } from "./server/Roles";
export default function ServerSettings() { export default observer(() => {
const { server: sid } = useParams<{ server: string }>(); const { server: sid } = useParams<{ server: string }>();
const server = useServer(sid); const client = useClient();
const server = client.servers.get(sid);
if (!server) return null; if (!server) return null;
const history = useHistory(); const history = useHistory();
...@@ -35,7 +37,7 @@ export default function ServerSettings() { ...@@ -35,7 +37,7 @@ export default function ServerSettings() {
<GenericSettings <GenericSettings
pages={[ pages={[
{ {
category: <Category variant="uniform" text={server.name} />, //TOFIX: Just add the server.name as a string, otherwise it makes a duplicate category category: <Category variant="uniform" text={server.name} />,
id: "overview", id: "overview",
icon: <ListUl size={20} />, icon: <ListUl size={20} />,
title: ( title: (
...@@ -75,38 +77,40 @@ export default function ServerSettings() { ...@@ -75,38 +77,40 @@ export default function ServerSettings() {
hideTitle: true, hideTitle: true,
}, },
]} ]}
children={[ children={
<Route path="/server/:server/settings/categories"> <Switch>
<Categories server={server} /> <Route path="/server/:server/settings/categories">
</Route>, <Categories server={server} />
<Route path="/server/:server/settings/members"> </Route>
<RequiresOnline> <Route path="/server/:server/settings/members">
<Members server={server} /> <RequiresOnline>
</RequiresOnline> <Members server={server} />
</Route>, </RequiresOnline>
<Route path="/server/:server/settings/invites"> </Route>
<RequiresOnline> <Route path="/server/:server/settings/invites">
<Invites server={server} /> <RequiresOnline>
</RequiresOnline> <Invites server={server} />
</Route>, </RequiresOnline>
<Route path="/server/:server/settings/bans"> </Route>
<RequiresOnline> <Route path="/server/:server/settings/bans">
<Bans server={server} /> <RequiresOnline>
</RequiresOnline> <Bans server={server} />
</Route>, </RequiresOnline>
<Route path="/server/:server/settings/roles"> </Route>
<RequiresOnline> <Route path="/server/:server/settings/roles">
<Roles server={server} /> <RequiresOnline>
</RequiresOnline> <Roles server={server} />
</Route>, </RequiresOnline>
<Route path="/"> </Route>
<Overview server={server} /> <Route>
</Route>, <Overview server={server} />
]} </Route>
</Switch>
}
category="server_pages" category="server_pages"
switchPage={switchPage} switchPage={switchPage}
defaultPage="overview" defaultPage="overview"
showExitButton showExitButton
/> />
); );
} });
src/pages/settings/Settings.module.scss
View file @ 1ac5de17
/* Settings animations */
@keyframes open { @keyframes open {
0% { 0% {
transform: scale(1.2); transform: scale(1.2);
opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1;
} }
} }
...@@ -30,6 +33,7 @@ ...@@ -30,6 +33,7 @@
} }
} }
/* Settings CSS */
.settings[data-mobile="true"] { .settings[data-mobile="true"] {
flex-direction: column; flex-direction: column;
background: var(--primary-header); background: var(--primary-header);
...@@ -39,25 +43,41 @@ ...@@ -39,25 +43,41 @@
background: var(--primary-background); background: var(--primary-background);
} }
.scrollbox {
&::-webkit-scrollbar-thumb {
border-top: none;
}
}
/* Sidebar */
.sidebar { .sidebar {
justify-content: flex-start; overflow-y: auto;
.container { .container {
padding: 20px 8px; padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
min-width: 218px; min-width: 218px;
} }
> div { .scrollbox {
width: 100%; width: 100%;
} }
.version { .version {
place-items: center; place-items: center;
} }
} }
/* Content */
.content { .content {
padding: 10px 12px var(--bottom-navigation-height); padding: 0;
.scrollbox {
overflow: auto;
}
.contentcontainer {
max-width: unset !important;
padding: 16px 12px var(--bottom-navigation-height) !important;
}
} }
} }
...@@ -69,6 +89,10 @@ ...@@ -69,6 +89,10 @@
height: 100%; height: 100%;
position: fixed; position: fixed;
animation: open 0.18s ease-out, opacity 0.18s; animation: open 0.18s ease-out, opacity 0.18s;
&.closing {
animation: close 0.18s ease-in;
}
} }
.settings { .settings {
...@@ -76,21 +100,40 @@ ...@@ -76,21 +100,40 @@
display: flex; display: flex;
user-select: none; user-select: none;
flex-direction: row; flex-direction: row;
justify-content: center;
background: var(--primary-background); background: var(--primary-background);
.scrollbox {
overflow-y: scroll;
visibility: hidden;
transition: visibility 0.1s;
}
.container,
.contentcontainer,
.scrollbox:hover,
.scrollbox:focus {
visibility: visible;
}
// All children receive custom scrollbar.
> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 80px solid transparent;
}
.sidebar { .sidebar {
flex: 2; flex: 1 0 218px;
display: flex; display: flex;
flex-shrink: 0;
overflow-y: scroll;
justify-content: flex-end; justify-content: flex-end;
background: var(--secondary-background); background: var(--secondary-background);
.container { .container {
width: 218px; min-width: 218px;
padding: 60px 8px; padding: 80px 8px;
height: fit-content; display: flex;
gap: 2px;
flex-direction: column;
} }
.divider { .divider {
...@@ -100,20 +143,17 @@ ...@@ -100,20 +143,17 @@
.donate { .donate {
color: goldenrod !important; color: goldenrod !important;
} }
.logOut { .logOut {
color: var(--error) !important; color: var(--error) !important;
} }
.version { .version {
margin: 1rem 12px 0; margin: 1rem 12px 0;
font-size: 10px; font-size: 0.625rem;
color: var(--secondary-foreground); color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace; font-family: var(--monospace-font), monospace;
user-select: text; user-select: text;
display: grid; display: grid;
//place-items: center;
> div { > div {
gap: 2px; gap: 2px;
...@@ -121,49 +161,63 @@ ...@@ -121,49 +161,63 @@
flex-direction: column; flex-direction: column;
} }
.revision a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
} }
.content { .content {
flex: 3; flex: 1 1 800px;
max-width: 740px; display: flex;
padding: 60px 2em; overflow-y: auto;
overflow-y: scroll;
overflow-x: hidden; .scrollbox {
display: flex;
flex-grow: 1;
}
.contentcontainer {
display: flex;
gap: 13px;
height: fit-content;
max-width: 740px;
padding: 80px 32px;
width: 100%;
flex-direction: column;
}
details { details {
margin: 14px 0; margin: 14px 0;
} }
h1 { h1 {
margin-top: 0; margin: 0;
line-height: 1em; line-height: 1rem;
font-size: 1.2em; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-size: 13px; font-size: 0.8125rem;
text-transform: uppercase; text-transform: uppercase;
color: var(--secondary-foreground); color: var(--secondary-foreground);
&:first-child {
margin-top: 0;
}
} }
h4 { h4 {
margin: 4px 2px; margin: 4px 2px;
font-size: 13px; font-size: 0.8125rem;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
text-transform: uppercase; text-transform: uppercase;
} }
h5 { h5 {
margin-top: 0; margin-top: 0;
font-size: 12px; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
} }
...@@ -171,29 +225,26 @@ ...@@ -171,29 +225,26 @@
border-top: 1px solid; border-top: 1px solid;
margin: 0; margin: 0;
padding-top: 5px; padding-top: 5px;
font-size: 14px; font-size: 0.875rem;
color: var(--secondary-foreground); color: var(--secondary-foreground);
} }
} }
.action { .action {
flex: 1; flex-grow: 1;
flex-shrink: 0; padding: 80px 8px;
padding: 60px 8px; visibility: visible;
color: var(--tertiary-background); position: sticky;
top: 0;
&:after { &:after {
content: "ESC"; content: "ESC";
margin-top: 4px; margin-top: 4px;
display: flex; display: flex;
text-align: center;
align-content: center;
justify-content: center; justify-content: center;
position: relative;
color: var(--foreground);
width: 40px; width: 40px;
opacity: 0.5; opacity: 0.5;
font-size: 0.75em; font-size: 0.75rem;
} }
.closeButton { .closeButton {
...@@ -209,28 +260,19 @@ ...@@ -209,28 +260,19 @@
svg { svg {
color: var(--secondary-foreground); color: var(--secondary-foreground);
} }
&:hover { &:hover {
background: var(--secondary-header); background: var(--secondary-header);
} }
&:active { &:active {
transform: translateY(2px); transform: translateY(2px);
} }
} }
> div {
display: inline;
}
}
section {
margin-bottom: 1em;
} }
} }
.loader { @media (pointer: coarse) {
> div { .scrollbox {
margin: auto; visibility: visible !important;
overflow-y: auto;
} }
} }
src/pages/settings/Settings.tsx
View file @ 1ac5de17
...@@ -3,6 +3,7 @@ import { ...@@ -3,6 +3,7 @@ import {
Sync as SyncIcon, Sync as SyncIcon,
Globe, Globe,
LogOut, LogOut,
Desktop,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import { import {
Bell, Bell,
...@@ -14,7 +15,7 @@ import { ...@@ -14,7 +15,7 @@ import {
User, User,
Megaphone, Megaphone,
} from "@styled-icons/boxicons-solid"; } from "@styled-icons/boxicons-solid";
import { Route, useHistory } from "react-router-dom"; import { Route, Switch, useHistory } from "react-router-dom";
import { LIBRARY_VERSION } from "revolt.js"; import { LIBRARY_VERSION } from "revolt.js";
import styles from "./Settings.module.scss"; import styles from "./Settings.module.scss";
...@@ -38,6 +39,7 @@ import { Appearance } from "./panes/Appearance"; ...@@ -38,6 +39,7 @@ import { Appearance } from "./panes/Appearance";
import { ExperimentsPage } from "./panes/Experiments"; import { ExperimentsPage } from "./panes/Experiments";
import { Feedback } from "./panes/Feedback"; import { Feedback } from "./panes/Feedback";
import { Languages } from "./panes/Languages"; import { Languages } from "./panes/Languages";
import { Native } from "./panes/Native";
import { Notifications } from "./panes/Notifications"; import { Notifications } from "./panes/Notifications";
import { Profile } from "./panes/Profile"; import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions"; import { Sessions } from "./panes/Sessions";
...@@ -100,6 +102,12 @@ export default function Settings() { ...@@ -100,6 +102,12 @@ export default function Settings() {
icon: <SyncIcon size={20} />, icon: <SyncIcon size={20} />,
title: <Text id="app.settings.pages.sync.title" />, title: <Text id="app.settings.pages.sync.title" />,
}, },
{
id: "native",
hidden: !window.isNative,
icon: <Desktop size={20} />,
title: <Text id="app.settings.pages.native.title" />,
},
{ {
divider: true, divider: true,
id: "experiments", id: "experiments",
...@@ -112,69 +120,74 @@ export default function Settings() { ...@@ -112,69 +120,74 @@ export default function Settings() {
title: <Text id="app.settings.pages.feedback.title" />, title: <Text id="app.settings.pages.feedback.title" />,
}, },
]} ]}
children={[ children={
<Route path="/settings/profile"> <Switch>
<Profile /> <Route path="/settings/profile">
</Route>, <Profile />
<Route path="/settings/sessions"> </Route>
<RequiresOnline> <Route path="/settings/sessions">
<Sessions /> <RequiresOnline>
</RequiresOnline> <Sessions />
</Route>, </RequiresOnline>
<Route path="/settings/appearance"> </Route>
<Appearance /> <Route path="/settings/appearance">
</Route>, <Appearance />
<Route path="/settings/notifications"> </Route>
<Notifications /> <Route path="/settings/notifications">
</Route>, <Notifications />
<Route path="/settings/language"> </Route>
<Languages /> <Route path="/settings/language">
</Route>, <Languages />
<Route path="/settings/sync"> </Route>
<Sync /> <Route path="/settings/sync">
</Route>, <Sync />
<Route path="/settings/experiments"> </Route>
<ExperimentsPage /> <Route path="/settings/native">
</Route>, <Native />
<Route path="/settings/feedback"> </Route>
<Feedback /> <Route path="/settings/experiments">
</Route>, <ExperimentsPage />
<Route path="/"> </Route>
<Account /> <Route path="/settings/feedback">
</Route>, <Feedback />
]} </Route>
<Route path="/">
<Account />
</Route>
</Switch>
}
defaultPage="account" defaultPage="account"
switchPage={switchPage} switchPage={switchPage}
category="pages" category="pages"
custom={[ custom={
<a <>
href="https://gitlab.insrt.uk/revolt" <a
target="_blank" href="https://gitlab.insrt.uk/revolt"
rel="noreferrer"> target="_blank"
<ButtonItem compact> rel="noreferrer">
<Gitlab size={20} /> <ButtonItem compact>
<Text id="app.settings.pages.source_code" /> <Gitlab size={20} />
<Text id="app.settings.pages.source_code" />
</ButtonItem>
</a>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
</ButtonItem>
</a>
<LineDivider />
<ButtonItem
onClick={() => operations.logout()}
className={styles.logOut}
compact>
<LogOut size={20} />
<Text id="app.settings.pages.logOut" />
</ButtonItem> </ButtonItem>
</a>, <div className={styles.version}>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
</ButtonItem>
</a>,
<LineDivider />,
<ButtonItem
onClick={() => operations.logout()}
className={styles.logOut}
compact>
<LogOut size={20} />
<Text id="app.settings.pages.logOut" />
</ButtonItem>,
<div className={styles.version}>
<div>
<span className={styles.revision}> <span className={styles.revision}>
<a <a
href={`${REPO_URL}/${GIT_REVISION}`} href={`${REPO_URL}/${GIT_REVISION}`}
...@@ -198,13 +211,16 @@ export default function Settings() { ...@@ -198,13 +211,16 @@ export default function Settings() {
{GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "} {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
{APP_VERSION} {APP_VERSION}
</span> </span>
{window.isNative && (
<span>Native: {window.nativeVersion}</span>
)}
<span> <span>
API: {client.configuration?.revolt ?? "N/A"} API: {client.configuration?.revolt ?? "N/A"}
</span> </span>
<span>revolt.js: {LIBRARY_VERSION}</span> <span>revolt.js: {LIBRARY_VERSION}</span>
</div> </div>
</div>, </>
]} }
/> />
); );
} }