cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 08:43:37 -05:00
Code Issues Projects Releases Packages Wiki Activity

merge: branch 'master' into production

Browse source
This commit is contained in:
Paul Makles 2022-07-13 12:53:58 +01:00
commit 57887dc86f
301 changed files with 10073 additions and 8614 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -0,0 +1,7 @@
contact_links:
- name: Lounge Chat
url: https://rvlt.gg/Testers
about: Ask questions and discuss with others.
- name: Discussions
url: https://github.com/orgs/revoltchat/discussions
about: For larger feature requests and general question & answer.

2
.github/workflows/docker.yml vendored
View file

@ -5,7 +5,7 @@ on:
branches:
- "master"
tags:
- "v*"
- "*"
paths-ignore:
- ".github/**"
- "!.github/workflows/docker.yml"

1
.github/workflows/mirroring.yml vendored
View file

@ -4,7 +4,6 @@ on:
push:
branches:
- "master"
- "production"
jobs:
to_gitlab:

40
.gitlab-ci.yml
View file

@ -1,40 +0,0 @@
image: node:16-buster
variables:
GIT_SUBMODULE_STRATEGY: recursive
cache:
paths:
- node_modules
# Fetch dependencies and setup project for compilation.
install:
stage: prepare
script:
- yarn
# Type check the project
typecheck:
stage: test
needs:
- install
dependencies:
- install
script:
- yarn typecheck
# Lint the project and check prettier output.
lint:
stage: test
allow_failure: true
needs:
- install
dependencies:
- install
script:
- yarn lint
- yarn --check 'src/**/*.{js,jsx,ts,tsx}'
stages:
- prepare
- test

4
.prettierrc.js
View file

@ -4,10 +4,12 @@ module.exports = {
jsxBracketSameLine: true,
importOrder: [
"preact|classnames|.scss$",
"^@revoltchat",
"/(lib)",
"/(redux|mobx)",
"/(context)",
"/(ui|common)|.svg|.webp|.png|.jpg$",
"/(ui|common)$",
".svg|.webp|.png|.jpg$",
"^[./]",
],
importOrderSeparation: true,

31
README.md
View file

@ -4,6 +4,14 @@
This is the web client for Revolt, which is also available live at [app.revolt.chat](https://app.revolt.chat).
## Pending Rewrite
The following code is pending a partial or full rewrite:
- `src/components`: components are being migrated to [revoltchat/components](https://github.com/revoltchat/components)
- `src/styles`: needs to be migrated to [revoltchat/components](https://github.com/revoltchat/components)
- `src/lib`: this needs to be organised
## Stack
- [Preact](https://preactjs.com/)
@ -42,17 +50,18 @@ You can now access the client at http://local.revolt.chat:3000.
## CLI Commands
| Command | Description |
| ------------------- | -------------------------------------------- |
| `yarn pull` | Setup assets required for Revite. |
| `yarn dev` | Start the Revolt client in development mode. |
| `yarn build` | Build the Revolt client. |
| `yarn preview` | Start a local server with the built client. |
| `yarn lint` | Run ESLint on the client. |
| `yarn fmt` | Run Prettier on the client. |
| `yarn typecheck` | Run TypeScript type checking on the client. |
| `yarn start` | Start a local sirv server with built client. |
| `yarn start:inject` | Inject a given API URL and start server. |
| Command | Description |
| --------------------------------------- | -------------------------------------------- |
| `yarn pull` | Setup assets required for Revite. |
| `yarn dev` | Start the Revolt client in development mode. |
| `yarn build` | Build the Revolt client. |
| `yarn preview` | Start a local server with the built client. |
| `yarn lint` | Run ESLint on the client. |
| `yarn fmt` | Run Prettier on the client. |
| `yarn typecheck` | Run TypeScript type checking on the client. |
| `yarn start` | Start a local sirv server with built client. |
| `yarn start:inject` | Inject a given API URL and start server. |
| `yarn lint \| egrep "no-literals" -B 1` | Scan for untranslated strings. |
## License

1
VERSION
View file

@ -1 +0,0 @@
0.5.3-1

2
external/lang vendored

@ -1 +1 @@
Subproject commit bac88cffd196a2afacf7d726e4f7ef19bd6bd94c
Subproject commit 5af7326c286f729ac6dd4cabff9dfdf7c480b631

72
package.json
View file

@ -1,5 +1,5 @@
{
"version": "0.0.0",
"version": "1.0.1",
"scripts": {
"dev": "node scripts/setup_assets.js --check && vite",
"pull": "node scripts/setup_assets.js",
@ -39,38 +39,19 @@
"varsIgnorePattern": "^_"
}
],
"require-jsdoc": [
"error",
{
"require": {
"FunctionDeclaration": true,
"MethodDefinition": true,
"ClassDeclaration": true,
"ArrowFunctionExpression": false,
"FunctionExpression": false
},
"ignore": {
"MethodDefinition": [
"toJSON",
"hydrate"
]
}
}
]
"react/jsx-no-literals": "warn"
}
},
"dependencies": {
"@fontsource/bitter": "^4.5.0",
"@insertish/vite-plugin-babel-macros": "^1.0.5",
"fs-extra": "^10.0.0",
"klaw": "^3.0.0",
"react-beautiful-dnd": "^13.1.0",
"sirv-cli": "^1.0.14",
"vite": "^2.6.14"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.17.9",
"@fontsource/atkinson-hyperlegible": "^4.4.5",
"@fontsource/bitter": "^4.5.7",
"@fontsource/comic-neue": "^4.4.5",
"@fontsource/fira-code": "^4.4.5",
"@fontsource/inter": "^4.4.5",
@ -90,27 +71,29 @@
"@fontsource/ubuntu": "^4.4.5",
"@fontsource/ubuntu-mono": "^4.4.5",
"@hcaptcha/react-hcaptcha": "^0.3.6",
"@insertish/vite-plugin-babel-macros": "^1.0.5",
"@preact/preset-vite": "^2.0.0",
"@revoltchat/ui": "1.0.31",
"@revoltchat/ui": "1.0.76",
"@rollup/plugin-replace": "^2.4.2",
"@styled-icons/boxicons-logos": "^10.38.0",
"@styled-icons/boxicons-regular": "^10.38.0",
"@styled-icons/boxicons-solid": "^10.38.0",
"@styled-icons/simple-icons": "^10.33.0",
"@tippyjs/react": "^4.2.5",
"@tippyjs/react": "4.2.6",
"@traptitech/markdown-it-katex": "^3.4.3",
"@traptitech/markdown-it-spoiler": "^1.1.6",
"@trivago/prettier-plugin-sort-imports": "^2.0.2",
"@types/lodash": "^4",
"@types/lodash.defaultsdeep": "^4.6.6",
"@types/lodash.isequal": "^4.5.5",
"@types/markdown-it": "^12.0.2",
"@types/node": "^15.12.4",
"@types/preact-i18n": "^2.3.0",
"@types/prismjs": "^1.16.5",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-beautiful-dnd": "^13",
"@types/react-helmet": "^6.1.1",
"@types/react-router-dom": "^5.1.7",
"@types/react-scroll": "^1.8.2",
"@types/semver": "^7",
"@types/styled-components": "^5.1.10",
"@types/twemoji": "^12.1.1",
"@typescript-eslint/eslint-plugin": "^4.27.0",
@ -122,37 +105,56 @@
"detect-browser": "^5.2.0",
"eslint": "^7.28.0",
"eslint-config-preact": "^1.1.4",
"eslint-plugin-jsdoc": "^39.3.2",
"eslint-plugin-mobx": "^0.0.8",
"eventemitter3": "^4.0.7",
"history": "4",
"json-stringify-deterministic": "^1.0.2",
"localforage": "^1.9.0",
"lodash": "^4.17.21",
"lodash.defaultsdeep": "^4.6.1",
"lodash.isequal": "^4.5.0",
"long": "^5.2.0",
"markdown-it": "^12.0.6",
"markdown-it-emoji": "^2.0.0",
"mdast-util-to-hast": "^12.1.2",
"mediasoup-client": "npm:@insertish/mediasoup-client@3.6.36-esnext",
"mobx": "^6.3.2",
"mobx-react-lite": "^3.3.0",
"mobx": "^6.6.0",
"mobx-react-lite": "3.4.0",
"preact": "^10.5.14",
"preact-context-menu": "0.4.0-patch.0",
"preact-context-menu": "0.4.1",
"preact-i18n": "^2.4.0-preactx",
"prettier": "^2.3.1",
"prismjs": "^1.23.0",
"react-device-detect": "^1.17.0",
"prismjs": "^1.28.0",
"qrcode.react": "^3.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-device-detect": "2.2.2",
"react-helmet": "^6.1.0",
"react-hook-form": "6.3.0",
"react-overlapping-panels": "1.2.2",
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.2",
"react-virtuoso": "^1.10.4",
"revolt.js": "6.0.0-2",
"react-virtuoso": "^2.12.0",
"rehype-katex": "^6.0.2",
"rehype-prism": "^2.1.3",
"rehype-react": "^7.1.1",
"remark-breaks": "^3.0.2",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"revolt.js": "^6.0.6",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"semver": "^7.3.7",
"shade-blend-color": "^1.0.0",
"slate": "^0.81.1",
"slate-history": "^0.66.0",
"slate-react": "^0.81.0",
"stacktrace-js": "^2.0.2",
"styled-components": "^5.3.0",
"typescript": "^4.4.2",
"ulid": "^2.3.0",
"unified": "^10.1.2",
"unist-util-visit": "^4.1.0",
"use-resize-observer": "^7.0.0",
"vite-plugin-pwa": "^0.11.13",
"workbox-precaching": "^6.1.5"

33
scripts/publish.sh
View file

@ -1,7 +1,30 @@
#!/bin/bash
version=$(cat VERSION)
# Build and publish release to production server
# Remote Server
REMOTE=revolt-de-nrb-1
# Remote Directory
REMOTE_DIR=/root/revite
# Post-install script
POST_INSTALL="pm2 restart revite"
# Assets
export REVOLT_SAAS=https://github.com/revoltchat/assets
# 1. Build Revite
yarn
yarn build
# 2. Archive built files
tar -czvf build.tar.gz dist
# 3. Upload built files
scp build.tar.gz $REMOTE:$REMOTE_DIR/build.tar.gz
rm build.tar.gz
# 4. Apply changes
ssh $REMOTE "cd $REMOTE_DIR; tar -xvzf build.tar.gz; rm build.tar.gz; $POST_INSTALL"
docker build -t revoltchat/client:${version} . &&
docker tag revoltchat/client:${version} revoltchat/client:latest &&
docker push revoltchat/client:${version} &&
docker push revoltchat/client:latest

4
scripts/setup_assets.js
View file

@ -3,8 +3,8 @@ const { copy, remove, access } = require("fs-extra");
const { exec: cexec } = require("child_process");
const { resolve } = require("path");
let target = process.env.REVOLT_SASS;
let branch = process.env.REVOLT_SASS_BRANCH;
let target = process.env.REVOLT_SAAS;
let branch = process.env.REVOLT_SAAS_BRANCH;
let DEFAULT_DIRECTORY = "public/assets_default";
let OUT_DIRECTORY = "public/assets";

38
src/assets/changelogs.ts Normal file
View file

@ -0,0 +1,38 @@
type Element =
| string
| {
type: "image";
src: string;
};
export interface ChangelogPost {
date: Date;
title: string;
content: Element[];
}
export const changelogEntries: Record<number, ChangelogPost> = {
1: {
date: new Date("2022-06-12T20:39:16.674Z"),
title: "Secure your account with 2FA",
content: [
"Two-factor authentication is now available to all users, you can now head over to settings to enable recovery codes and an authenticator app.",
{
type: "image",
src: "https://autumn.revolt.chat/attachments/E21kwmuJGcASgkVLiSIW0wV3ggcaOWjW0TQF7cdFNY/image.png",
},
"Once enabled, you will be prompted on login.",
{
type: "image",
src: "https://autumn.revolt.chat/attachments/LWRYoKR2tE1ggW_Lzm547P1pnrkNgmBaoCAfWvHE74/image.png",
},
"Other authentication methods coming later, stay tuned!",
],
},
};
export const changelogEntryArray = Object.keys(changelogEntries).map(
(index) => changelogEntries[index as unknown as number],
);
export const latestChangelog = changelogEntryArray.length;

3
src/assets/emojis.ts
View file

@ -1850,7 +1850,7 @@ export const emojiDictionary = {
scotland: "🏴󠁧󠁢󠁳󠁣󠁴󠁿",
wales: "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
...{
"1984": "custom:1984.gif",
1984: "custom:1984.gif",
KekW: "custom:KekW.png",
amogus: "custom:amogus.gif",
awaa: "custom:awaa.png",
@ -1952,5 +1952,6 @@ export const emojiDictionary = {
huggies: "custom:huggies.png",
noted: "custom:noted.gif",
waving: "custom:waving.png",
mogusvented: "custom:mogusvented.png",
},
};

14
src/components/README.md Normal file
View file

@ -0,0 +1,14 @@
The following folders should not be added to or modified:
- `common`
- `markdown`
- `native`
- `ui`
The following are part-legacy, will remain in place and will be rewritten to some degree still:
- `navigation`
The following are mostly good to go:
- `settings`

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

@ -6,14 +6,11 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { Button, Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import { SECTION_NSFW } from "../../mobx/stores/Layout";
import Button from "../ui/Button";
import Checkbox from "../ui/Checkbox";
import { Children } from "../../types/Preact";
const Base = styled.div`
display: flex;
flex-grow: 1;
@ -80,16 +77,16 @@ export default observer((props: Props) => {
</span>
<Checkbox
checked={layout.getSectionState(SECTION_NSFW, false)}
onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
title={<Text id="app.main.channel.nsfw.confirm" />}
value={layout.getSectionState(SECTION_NSFW, false)}
onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
/>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Button palette="secondary" onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button
contrast
palette="secondary"
onClick={() =>
layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
}>

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

@ -3,9 +3,8 @@ import styled, { css } from "styled-components/macro";
import { StateUpdater, useState } from "preact/hooks";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { emojiDictionary } from "../../assets/emojis";
import { useClient } from "../../controllers/client/ClientController";
import ChannelIcon from "./ChannelIcon";
import Emoji from "./Emoji";
import UserIcon from "./user/UserIcon";
@ -88,7 +87,7 @@ export function useAutoComplete(
? "emoji"
: "user",
search.toLowerCase(),
j + 1,
current === ":" ? j + 1 : j,
];
}
}
@ -242,7 +241,7 @@ export function useAutoComplete(
);
} else if (state.type === "user") {
content.splice(
index - 1,
index,
search.length + 1,
"<@",
state.matches[state.selected]._id,
@ -250,7 +249,7 @@ export function useAutoComplete(
);
} else {
content.splice(
index - 1,
index,
search.length + 1,
"<#",
state.matches[state.selected]._id,

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

@ -2,12 +2,9 @@ import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js";
import { useContext } from "preact/hooks";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import fallback from "./assets/group.png";
import { useClient } from "../../controllers/client/ClientController";
import { ImageIconBase, IconBaseProps } from "./IconBase";
interface Props extends IconBaseProps<Channel> {
@ -22,7 +19,7 @@ export default observer(
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const client = useClient();
const {
size,

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

@ -1,11 +1,9 @@
import { ChevronDown } from "@styled-icons/boxicons-regular";
import { Details } from "@revoltchat/ui";
import { useApplicationState } from "../../mobx/State";
import Details from "../ui/Details";
import { Children } from "../../types/Preact";
interface Props {
id: string;
defaultValue: boolean;
@ -34,7 +32,7 @@ export default function CollapsibleSection({
}
{...detailsProps}>
<summary>
<div class="padding">
<div className="padding">
<ChevronDown size={20} />
{summary}
</div>

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

@ -1,3 +1,5 @@
import { emojiDictionary } from "../../assets/emojis";
export type EmojiPack = "mutant" | "twemoji" | "noto" | "openmoji";
let EMOJI_PACK: EmojiPack = "mutant";
@ -40,7 +42,7 @@ function toCodePoint(rune: string) {
.join("-");
}
function parseEmoji(emoji: string) {
export function parseEmoji(emoji: string) {
if (emoji.startsWith("custom:")) {
return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
7,

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

@ -1,6 +1,6 @@
import { useApplicationState } from "../../mobx/State";
import { ComboBox } from "@revoltchat/ui";
import ComboBox from "../ui/ComboBox";
import { useApplicationState } from "../../mobx/State";
import { Language, Languages } from "../../../external/lang/Languages";

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

@ -7,8 +7,9 @@ import styled, { css } from "styled-components/macro";
import { Text } from "preact-i18n";
import IconButton from "../ui/IconButton";
import { IconButton } from "@revoltchat/ui";
import { modalController } from "../../controllers/modals/ModalController";
import Tooltip from "./Tooltip";
interface Props {
@ -60,6 +61,9 @@ const ServerBanner = styled.div<Omit<Props, "server">>`
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
cursor: pointer;
color: var(--foreground);
}
}
`;
@ -121,7 +125,13 @@ export default observer(({ server }: Props) => {
</svg>
</Tooltip>
) : undefined}
<div className="title">{server.name}</div>
<a
className="title"
onClick={() =>
modalController.push({ type: "server_info", server })
}>
{server.name}
</a>
{server.havePermission("ManageServer") && (
<Link to={`/server/${server._id}/settings`}>
<IconButton>

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

@ -4,8 +4,7 @@ import styled from "styled-components/macro";
import { useContext } from "preact/hooks";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { useClient } from "../../controllers/client/ClientController";
import { IconBaseProps, ImageIconBase } from "./IconBase";
interface Props extends IconBaseProps<Server> {
@ -34,7 +33,7 @@ export default observer(
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const client = useClient();
const { target, attachment, size, animate, server_name, ...imgProps } =
props;

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

@ -3,8 +3,6 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact";
type Props = Omit<TippyProps, "children"> & {
children: Children;
content: Children;

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

@ -3,13 +3,13 @@ import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
import { useEffect, useState } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { internalSubscribe } from "../../lib/eventEmitter";
import { useApplicationState } from "../../mobx/State";
import IconButton from "../ui/IconButton";
import { updateSW } from "../../main";
import { updateSW } from "../../updateWorker";
import Tooltip from "./Tooltip";
let pendingUpdate = false;
@ -31,7 +31,7 @@ export default function UpdateIndicator({ style }: Props) {
if (style === "titlebar") {
return (
<div class="actions">
<div className="actions">
<Tooltip
content="A new update is available!"
placement="bottom">
@ -46,7 +46,7 @@ export default function UpdateIndicator({ style }: Props) {
);
}
if (window.isNative) return null;
if (window.isNative && window.native.getConfig().frame) return null;
return (
<IconButton onClick={() => updateSW(true)}>

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

@ -5,17 +5,16 @@ import { useTriggerEvents } from "preact-context-menu";
import { memo } from "preact/compat";
import { useEffect, useState } from "preact/hooks";
import { Category } from "@revoltchat/ui";
import { internalEmit } from "../../../lib/eventEmitter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { I18nError } from "../../../context/Locale";
import Overline from "../../ui/Overline";
import { Children } from "../../../types/Preact";
import { modalController } from "../../../controllers/modals/ModalController";
import Markdown from "../../markdown/Markdown";
import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort";
@ -52,12 +51,10 @@ const Message = observer(
queued,
hideReply,
}: Props) => {
const client = useClient();
const client = message.client;
const user = message.author;
const { openScreen } = useIntermediate();
const content = message.content as string;
const content = message.content;
const head =
preferHead || (message.reply_ids && message.reply_ids.length > 0);
@ -70,7 +67,10 @@ const Message = observer(
: undefined;
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author_id });
modalController.push({
type: "user_profile",
user_id: message.author_id,
});
const handleUserClick = (e: MouseEvent) => {
if (e.shiftKey && user?._id) {
@ -162,13 +162,18 @@ const Message = observer(
{replacement ?? <Markdown content={content} />}
{!queued && <InviteList message={message} />}
{queued?.error && (
<Overline type="error" error={queued.error} />
<Category>
<I18nError error={queued.error} />
</Category>
)}
{message.attachments?.map((attachment, index) => (
<Attachment
key={index}
attachment={attachment}
hasContent={index > 0 || content.length > 0}
hasContent={
index > 0 ||
(content ? content.length > 0 : false)
}
/>
))}
{message.embeds?.map((embed, index) => (

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

@ -1,21 +1,15 @@
import { Send, ShieldX } from "@styled-icons/boxicons-solid";
import { HappyBeaming, Send, ShieldX } from "@styled-icons/boxicons-solid";
import Axios, { CancelTokenSource } from "axios";
import Long from "long";
import { observer } from "mobx-react-lite";
import {
Channel,
DEFAULT_PERMISSION_DIRECT_MESSAGE,
DEFAULT_PERMISSION_VIEW_ONLY,
Permission,
Server,
U32_MAX,
UserPermission,
} from "revolt.js";
import { Channel } from "revolt.js";
import styled, { css } from "styled-components/macro";
import { ulid } from "ulid";
import { Text } from "preact-i18n";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { memo } from "preact/compat";
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { IconButton, Picker } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { debounce } from "../../../lib/debounce";
@ -28,20 +22,19 @@ import {
SMOOTH_SCROLL_ON_RECEIVE,
} from "../../../lib/renderer/Singleton";
import { useApplicationState } from "../../../mobx/State";
import { state, useApplicationState } from "../../../mobx/State";
import { Reply } from "../../../mobx/stores/MessageQueue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { emojiDictionary } from "../../../assets/emojis";
import { useClient } from "../../../controllers/client/ClientController";
import { takeError } from "../../../controllers/client/jsx/error";
import {
FileUploader,
grabFiles,
uploadFile,
} from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
import IconButton from "../../ui/IconButton";
} from "../../../controllers/client/jsx/legacy/FileUploads";
import { modalController } from "../../../controllers/modals/ModalController";
import { RenderEmoji } from "../../markdown/plugins/emoji";
import AutoComplete, { useAutoComplete } from "../AutoComplete";
import { PermissionTooltip } from "../Tooltip";
import FilePreview from "./bars/FilePreview";
@ -104,7 +97,7 @@ const Blocked = styled.div`
`;
const Action = styled.div`
> div {
> a {
height: 48px;
width: 48px;
display: flex;
@ -127,7 +120,7 @@ const Action = styled.div`
`;
const FileAction = styled.div`
> div {
> a {
height: 48px;
width: 62px;
display: flex;
@ -136,6 +129,10 @@ const FileAction = styled.div`
}
`;
const FloatingLayer = styled.div`
position: relative;
`;
const ThisCodeWillBeReplacedAnywaysSoIMightAsWellJustDoItThisWay__Padding = styled.div`
width: 16px;
`;
@ -146,6 +143,57 @@ const RE_SED = new RegExp("^s/([^])*/([^])*$");
// Tests for code block delimiters (``` at start of line)
const RE_CODE_DELIMITER = new RegExp("^```", "gm");
const HackAlertThisFileWillBeReplaced = observer(({ channel }: Props) => {
const renderEmoji = useMemo(
() =>
memo(({ emoji }: { emoji: string }) => (
<RenderEmoji match={emoji} {...({} as any)} />
)),
[],
);
const emojis: Record<string, any> = {
default: Object.keys(emojiDictionary),
};
// ! FIXME: also expose typing from component
const categories: any[] = [];
for (const server of state.ordering.orderedServers) {
// ! FIXME: add a separate map on each server for emoji
const list = [...channel.client.emojis.values()]
.filter((emoji) => emoji.parent.id === server._id)
.map((x) => x._id);
if (list.length > 0) {
emojis[server._id] = list;
categories.push({
id: server._id,
name: server.name,
iconURL: server.generateIconURL({ max_side: 256 }),
});
}
}
categories.push({
id: "default",
name: "Default",
emoji: "smiley",
});
return (
<Picker
emojis={emojis}
categories={categories}
renderEmoji={renderEmoji}
onSelect={(emoji) => {
const v = state.draft.get(channel._id);
state.draft.set(channel._id, `${v ? `${v} ` : ""}:${emoji}:`);
}}
/>
);
});
// ! FIXME: add to app config and load from app config
export const CAN_UPLOAD_AT_ONCE = 5;
@ -157,8 +205,8 @@ export default observer(({ channel }: Props) => {
});
const [typing, setTyping] = useState<boolean | number>(false);
const [replies, setReplies] = useState<Reply[]>([]);
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const [picker, setPicker] = useState(false);
const client = useClient();
const translate = useTranslation();
const renderer = getRenderer(channel);
@ -309,6 +357,7 @@ export default observer(({ channel }: Props) => {
async function sendFile(content: string) {
if (uploadState.type !== "attached") return;
const attachments: string[] = [];
setMessage;
const cancel = Axios.CancelToken.source();
const files = uploadState.files;
@ -482,7 +531,10 @@ export default observer(({ channel }: Props) => {
files: [...uploadState.files, ...files],
}),
() =>
openScreen({ id: "error", error: "FileTooLarge" }),
modalController.push({
type: "error",
error: "FileTooLarge",
}),
true,
)
}
@ -505,6 +557,11 @@ export default observer(({ channel }: Props) => {
replies={replies}
setReplies={setReplies}
/>
<FloatingLayer>
{picker && (
<HackAlertThisFileWillBeReplaced channel={channel} />
)}
</FloatingLayer>
<Base>
{channel.havePermission("UploadFiles") ? (
<FileAction>
@ -625,19 +682,20 @@ export default observer(({ channel }: Props) => {
onFocus={onFocus}
onBlur={onBlur}
/>
{/*<Action>
<IconButton>
<Box size={24} />
</IconButton>
</Action>
<Action>
<IconButton>
<HappyBeaming size={24} />
</IconButton>
</Action>*/}
{state.experiments.isEnabled("picker") && (
<Action>
<IconButton onClick={() => setPicker(!picker)}>
<HappyBeaming size={24} />
</IconButton>
</Action>
)}
<Action>
<IconButton
className="mobile"
className={
state.settings.get("appearance:show_send_button")
? ""
: "mobile"
}
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} />

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

@ -3,10 +3,9 @@ import { API } from "revolt.js";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
import { useTriggerEvents } from "preact-context-menu";
import { useContext, useState } from "preact/hooks";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { useState } from "preact/hooks";
import { useClient } from "../../../../controllers/client/ClientController";
import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import ImageFile from "./ImageFile";
@ -21,7 +20,7 @@ interface Props {
const MAX_ATTACHMENT_WIDTH = 480;
export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext);
const client = useClient();
const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));

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

@ -11,18 +11,18 @@ import styles from "./AttachmentActions.module.scss";
import classNames from "classnames";
import { useContext } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { determineFileSize } from "../../../../lib/fileSize";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import IconButton from "../../../ui/IconButton";
import { useClient } from "../../../../controllers/client/ClientController";
interface Props {
attachment: API.File;
}
export default function AttachmentActions({ attachment }: Props) {
const client = useContext(AppContext);
const client = useClient();
const { filename, metadata, size } = attachment;
const url = client.generateFileURL(attachment);

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

@ -2,8 +2,6 @@ import styled from "styled-components/macro";
import { Ref } from "preact";
import { Children } from "../../../../types/Preact";
const Grid = styled.div<{ width: number; height: number }>`
--width: ${(props) => props.width}px;
--height: ${(props) => props.height}px;

13
src/components/common/messaging/attachments/ImageFile.tsx
View file

@ -2,10 +2,10 @@ import { API } from "revolt.js";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
import { useContext, useState } from "preact/hooks";
import { useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
enum ImageLoadingState {
Loading,
@ -19,8 +19,7 @@ type Props = JSX.HTMLAttributes<HTMLImageElement> & {
export default function ImageFile({ attachment, ...props }: Props) {
const [loading, setLoading] = useState(ImageLoadingState.Loading);
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const client = useClient();
const url = client.generateFileURL(attachment)!;
return (
@ -32,7 +31,9 @@ export default function ImageFile({ attachment, ...props }: Props) {
className={classNames(styles.image, {
[styles.loading]: loading !== ImageLoadingState.Loaded,
})}
onClick={() => openScreen({ id: "image_viewer", attachment })}
onClick={() =>
modalController.push({ type: "image_viewer", attachment })
}
onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank")}
onLoad={() => setLoading(ImageLoadingState.Loaded)}
onError={() => setLoading(ImageLoadingState.Error)}

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

@ -3,16 +3,12 @@ import { API } from "revolt.js";
import styles from "./Attachment.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
import {
AppContext,
StatusContext,
} from "../../../../context/revoltjs/RevoltClient";
import { Button, Preloader } from "@revoltchat/ui";
import Preloader from "../../../ui/Preloader";
import { Button } from "@revoltchat/ui";
import { useClient } from "../../../../controllers/client/ClientController";
import RequiresOnline from "../../../../controllers/client/jsx/RequiresOnline";
interface Props {
attachment: API.File;
@ -24,9 +20,8 @@ export default function TextFile({ attachment }: Props) {
const [gated, setGated] = useState(attachment.size > 100_000);
const [content, setContent] = useState<undefined | string>(undefined);
const [loading, setLoading] = useState(false);
const status = useContext(StatusContext);
const client = useContext(AppContext);
const client = useClient();
const url = client.generateFileURL(attachment)!;
useEffect(() => {
@ -57,7 +52,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(false);
});
}
}, [content, loading, gated, status, attachment._id, attachment.size, url]);
}, [content, loading, gated, attachment._id, attachment.size, url]);
return (
<div

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

@ -149,12 +149,12 @@ function FileEntry({
<EmptyEntry className="icon">
<File size={36} />
</EmptyEntry>
<div class="overlay">
<div className="overlay">
<XCircle size={36} />
</div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
<span className="fn">{file.name}</span>
<span className="size">{determineFileSize(file.size)}</span>
</Entry>
);
@ -169,13 +169,18 @@ function FileEntry({
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} loading="eager" />
<div class="overlay">
<img
className="icon"
src={url}
alt={file.name}
loading="eager"
/>
<div className="overlay">
<XCircle size={36} />
</div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
<span className="fn">{file.name}</span>
<span className="size">{determineFileSize(file.size)}</span>
</Entry>
);
}

20
src/components/common/messaging/bars/MessageOverlayBar.tsx
View file

@ -7,7 +7,6 @@ import {
Notification,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Permission } from "revolt.js";
import { Message as MessageObject } from "revolt.js";
import styled from "styled-components";
@ -20,12 +19,7 @@ import { getRenderer } from "../../../../lib/renderer/Singleton";
import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
import {
Screen,
useIntermediate,
} from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { modalController } from "../../../../controllers/modals/ModalController";
import Tooltip from "../../../common/Tooltip";
interface Props {
@ -88,8 +82,7 @@ const Divider = styled.div`
`;
export const MessageOverlayBar = observer(({ message, queued }: Props) => {
const client = useClient();
const { openScreen, writeClipboard } = useIntermediate();
const client = message.client;
const isAuthor = message.author_id === client.user!._id;
const [copied, setCopied] = useState<"link" | "id">(null!);
@ -137,11 +130,10 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
onClick={(e) =>
e.shiftKey
? message.delete()
: openScreen({
id: "special_prompt",
: modalController.push({
type: "delete_message",
target: message,
} as unknown as Screen)
})
}>
<Trash size={18} color={"var(--error)"} />
</Entry>
@ -190,7 +182,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
<Entry
onClick={() => {
setCopied("link");
writeClipboard(message.url);
modalController.writeText(message.url);
}}>
<LinkAlt size={18} />
</Entry>
@ -201,7 +193,7 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
<Entry
onClick={() => {
setCopied("id");
writeClipboard(message._id);
modalController.writeText(message._id);
}}>
<InfoSquare size={18} />
</Entry>

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

@ -7,6 +7,8 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { IconButton } from "@revoltchat/ui";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useApplicationState } from "../../../../mobx/State";
@ -14,8 +16,6 @@ import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
import { Reply } from "../../../../mobx/stores/MessageQueue";
import Tooltip from "../../../common/Tooltip";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
@ -152,11 +152,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
return (
<Base key={reply.id}>
<ReplyBase preview>
<div class="replyto">
<div className="replyto">
<Text id="app.main.channel.reply.replying" />
</div>
<div class="content">
<div class="username">
<div className="content">
<div className="username">
<UserShort
size={16}
showServerIdentity
@ -164,7 +164,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
masquerade={message.masquerade!}
/>
</div>
<div class="message">
<div className="message">
{message.attachments && (
<>
<File size={16} />
@ -196,7 +196,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
</div>
</div>
</ReplyBase>
<span class="actions">
<span className="actions">
{message.author_id !== client.user!._id && (
<IconButton
onClick={() => {
@ -225,7 +225,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
content={
<Text id="app.main.channel.reply.toggle" />
}>
<span class="toggle">
<span className="toggle">
<At size={15} />
<Text
id={

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

@ -4,9 +4,8 @@ import styles from "./Embed.module.scss";
import classNames from "classnames";
import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import Markdown from "../../../markdown/Markdown";
import Attachment from "../attachments/Attachment";
@ -24,7 +23,6 @@ const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
const client = useClient();
const { openScreen, openLink } = useIntermediate();
const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
@ -59,7 +57,7 @@ export default function Embed({ embed }: Props) {
if (embed.type === "Text") {
mw = MAX_EMBED_WIDTH;
mh = 0;
mh = 1;
} else {
switch (embed.special?.type) {
case "YouTube":
@ -143,7 +141,7 @@ export default function Embed({ embed }: Props) {
<a
onMouseDown={(ev) =>
(ev.button === 0 || ev.button === 1) &&
openLink(embed.url!)
modalController.openLink(embed.url!)
}
className={styles.title}>
{embed.title}
@ -191,8 +189,12 @@ export default function Embed({ embed }: Props) {
type="text/html"
frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) => ev.button === 1 && openLink(embed.url)}
onClick={() =>
modalController.push({ type: "image_viewer", embed })
}
onMouseDown={(ev) =>
ev.button === 1 && modalController.openLink(embed.url)
}
/>
);
}

32
src/components/common/messaging/embed/EmbedInvite.tsx
View file

@ -1,5 +1,4 @@
import { Group } from "@styled-icons/boxicons-solid";
import { reaction } from "mobx";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { Message, API } from "revolt.js";
@ -7,19 +6,18 @@ import styled, { css } from "styled-components/macro";
import { useContext, useEffect, useState } from "preact/hooks";
import { Button, Category, Preloader } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
import {
AppContext,
ClientStatus,
StatusContext,
} from "../../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../../context/revoltjs/util";
import { I18nError } from "../../../../context/Locale";
import ServerIcon from "../../../../components/common/ServerIcon";
import Button from "../../../../components/ui/Button";
import Overline from "../../../ui/Overline";
import Preloader from "../../../ui/Preloader";
import {
useClient,
useSession,
} from "../../../../controllers/client/ClientController";
import { takeError } from "../../../../controllers/client/jsx/error";
const EmbedInviteBase = styled.div`
width: 400px;
@ -78,8 +76,8 @@ type Props = {
export function EmbedInvite({ code }: Props) {
const history = useHistory();
const client = useContext(AppContext);
const status = useContext(StatusContext);
const session = useSession()!;
const client = session.client!;
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined);
const [joinError, setJoinError] = useState<string | undefined>(undefined);
@ -90,7 +88,7 @@ export function EmbedInvite({ code }: Props) {
useEffect(() => {
if (
typeof invite === "undefined" &&
(status === ClientStatus.ONLINE || status === ClientStatus.READY)
(session.state === "Online" || session.state === "Ready")
) {
client
.fetchInvite(code)
@ -99,7 +97,7 @@ export function EmbedInvite({ code }: Props) {
)
.catch((err) => setError(takeError(err)));
}
}, [client, code, invite, status]);
}, [client, code, invite, session.state]);
if (typeof invite === "undefined") {
return error ? (
@ -159,7 +157,11 @@ export function EmbedInvite({ code }: Props) {
</Button>
)}
</EmbedInviteBase>
{joinError && <Overline type="error" error={joinError} />}
{joinError && (
<Category>
<I18nError error={joinError} />
</Category>
)}
</>
);
}

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

@ -3,8 +3,8 @@ import { API } from "revolt.js";
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
interface Props {
embed: API.Embed;
@ -14,7 +14,6 @@ interface Props {
export default function EmbedMedia({ embed, width, height }: Props) {
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
@ -117,8 +116,8 @@ export default function EmbedMedia({ embed, width, height }: Props) {
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({
id: "image_viewer",
modalController.push({
type: "image_viewer",
embed: embed.image!,
})
}

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

@ -3,7 +3,7 @@ import { API } from "revolt.js";
import styles from "./Embed.module.scss";
import IconButton from "../../../ui/IconButton";
import { IconButton } from "@revoltchat/ui";
interface Props {
embed: API.Image;
@ -20,7 +20,7 @@ export default function EmbedMediaActions({ embed }: Props) {
</span>
<a
href={embed.url}
class={styles.openIcon}
className={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton>

8
src/components/common/user/UserBadges.tsx
View file

@ -16,6 +16,7 @@ enum Badges {
Paw = 128,
EarlyAdopter = 256,
ReservedRelevantJokeBadge1 = 512,
ReservedRelevantJokeBadge2 = 1024,
}
const BadgesBase = styled.div`
@ -135,6 +136,13 @@ export default function UserBadges({ badges, uid }: Props) {
) : (
<></>
)}
{badges & Badges.ReservedRelevantJokeBadge2 ? (
<Tooltip content="It's Morbin Time">
<img src="/assets/badges/amorbus.svg" />
</Tooltip>
) : (
<></>
)}
{badges & Badges.Paw ? (
<Tooltip content="🦊">
<img src="/assets/badges/paw.svg" />

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

@ -1,17 +1,24 @@
import { User } from "revolt.js";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import { Checkbox, Row, Column } from "@revoltchat/ui";
import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User };
type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
export default function UserCheckbox({ user, ...props }: UserProps) {
return (
<Checkbox {...props}>
<UserIcon target={user} size={32} />
<Username user={user} />
</Checkbox>
<Checkbox
{...props}
title={
<Row centred>
<UserIcon target={user} size={32} />
<Column centred>
<Username user={user} />
</Column>
</Row>
}
/>
);
}

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

@ -7,13 +7,11 @@ import styled from "styled-components/macro";
import { openContextMenu } from "preact-context-menu";
import { Text, Localizer } from "preact-i18n";
import { Header, IconButton } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton";
import { modalController } from "../../../controllers/modals/ModalController";
import Tooltip from "../Tooltip";
import UserStatus from "./UserStatus";
@ -49,16 +47,16 @@ interface Props {
}
export default observer(({ user }: Props) => {
const { writeClipboard } = useIntermediate();
return (
<Header topBorder placement="secondary">
<Header topBorder palette="secondary">
<HeaderBase>
<Localizer>
<Tooltip content={<Text id="app.special.copy_username" />}>
<span
className="username"
onClick={() => writeClipboard(user.username)}>
onClick={() =>
modalController.writeText(user.username)
}>
@{user.username}
</span>
</Tooltip>

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

@ -1,7 +1,6 @@
import { User } from "revolt.js";
import styled from "styled-components/macro";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";

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

@ -6,10 +6,9 @@ import styled, { css } from "styled-components/macro";
import { useApplicationState } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import fallback from "../assets/user.png";
import { useClient } from "../../../controllers/client/ClientController";
import IconBase, { IconBaseProps } from "../IconBase";
type VoiceStatus = "muted" | "deaf";
@ -114,7 +113,7 @@ export default observer(
y="0"
width="32"
height="32"
class="icon"
className="icon"
mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={url} draggable={false} loading="lazy" />}
</foreignObject>

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

@ -8,9 +8,8 @@ import { Text } from "preact-i18n";
import { internalEmit } from "../../../lib/eventEmitter";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useClient } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
import UserIcon from "./UserIcon";
const BotBadge = styled.div`
@ -125,9 +124,9 @@ export default function UserShort({
masquerade?: API.Masquerade;
showServerIdentity?: boolean;
}) {
const { openScreen } = useIntermediate();
const openProfile = () =>
user && openScreen({ id: "profile", user_id: user._id });
user &&
modalController.push({ type: "user_profile", user_id: user._id });
const handleUserClick = (e: MouseEvent) => {
if (e.shiftKey && user?._id) {

218
src/components/markdown/Markdown.module.scss
View file

@ -1,218 +0,0 @@
.markdown {
:global(.emoji) {
object-fit: contain;
height: 1.25em;
width: 1.25em;
margin: 0 0.05em 0 0.1em;
vertical-align: -0.2em;
}
&[data-large-emojis="true"] :global(.emoji) {
width: 3rem;
height: 3rem;
margin-bottom: 0;
margin-top: 1px;
margin-right: 2px;
vertical-align: -0.3em;
}
p,
pre {
margin: 0;
}
a {
text-decoration: none;
&[data-type="mention"] {
padding: 0 6px;
flex-shrink: 0;
font-weight: 600;
display: inline-block;
background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
&:hover {
text-decoration: none;
}
}
&:hover {
text-decoration: underline;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
blockquote {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
&:not(:first-child) {
margin-top: 12px;
}
}
ul,
ol {
list-style-position: inside;
padding-left: 10px;
}
blockquote {
margin: 2px 0;
padding: 2px 0;
background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background);
> * {
margin: 0 8px;
}
}
pre {
padding: 1em;
overflow-x: scroll;
border-radius: var(--border-radius);
background: var(--block) !important;
}
p > code {
padding: 1px 4px;
flex-shrink: 0;
}
code {
color: white;
font-size: 90%;
background: var(--block);
border-radius: var(--border-radius);
font-family: var(--monospace-font), monospace;
border-radius: 3px;
-webkit-box-decoration-break: clone;
}
input[type="checkbox"] {
margin-right: 4px;
pointer-events: none;
}
table {
border-collapse: collapse;
th,
td {
padding: 6px;
border: 1px solid var(--tertiary-foreground);
}
}
:global(.katex-block) {
overflow-x: auto;
}
:global(.spoiler) {
padding: 0 2px;
cursor: pointer;
user-select: none;
color: transparent;
background: #151515;
border-radius: var(--border-radius);
> * {
opacity: 0;
pointer-events: none;
}
&:global(.shown) {
cursor: auto;
user-select: all;
color: var(--foreground);
background: var(--secondary-background);
> * {
opacity: 1;
pointer-events: unset;
}
}
}
:global(.code) {
font-family: var(--monospace-font), monospace;
:global(.lang) {
width: fit-content;
padding-bottom: 8px;
div {
color: #111;
cursor: pointer;
padding: 2px 6px;
font-weight: 600;
user-select: none;
display: inline-block;
background: var(--accent);
font-size: 10px;
text-transform: uppercase;
box-shadow: 0 2px #787676;
border-radius: calc(var(--border-radius) / 3);
&:active {
transform: translateY(1px);
box-shadow: 0 1px #787676;
}
}
}
}
input[type="checkbox"] {
width: 0;
opacity: 0;
pointer-events: none;
}
label {
pointer-events: none;
}
input[type="checkbox"] + label:before {
width: 12px;
height: 12px;
content: "a";
font-size: 10px;
margin-right: 6px;
line-height: 12px;
background: white;
position: relative;
display: inline-block;
border-radius: var(--border-radius);
}
input[type="checkbox"][checked="true"] + label:before {
content: "✓";
align-items: center;
display: inline-flex;
justify-content: center;
background: var(--accent);
}
input[type="checkbox"] + label {
line-height: 12px;
position: relative;
}
}

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

@ -1,13 +1,15 @@
import { Suspense, lazy } from "preact/compat";
const Renderer = lazy(() => import("./Renderer"));
const Renderer = lazy(() => import("./RemarkRenderer"));
export interface MarkdownProps {
content?: string | null;
content: string;
disallowBigEmoji?: boolean;
}
export default function Markdown(props: MarkdownProps) {
if (!props.content) return null;
return (
// @ts-expect-error Typings mis-match.
<Suspense fallback={props.content}>

220
src/components/markdown/RemarkRenderer.tsx Normal file
View file

@ -0,0 +1,220 @@
import "katex/dist/katex.min.css";
import rehypeKatex from "rehype-katex";
import rehypePrism from "rehype-prism";
import rehypeReact from "rehype-react";
import remarkBreaks from "remark-breaks";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import styled, { css } from "styled-components";
import { unified } from "unified";
import { createElement } from "preact";
import { memo } from "preact/compat";
import { useLayoutEffect, useMemo, useState } from "preact/hooks";
import { MarkdownProps } from "./Markdown";
import { handlers } from "./hast";
import { RenderCodeblock } from "./plugins/Codeblock";
import { RenderAnchor } from "./plugins/anchors";
import { remarkChannels, RenderChannel } from "./plugins/channels";
import { isOnlyEmoji, remarkEmoji, RenderEmoji } from "./plugins/emoji";
import { remarkHtmlToText } from "./plugins/htmlToText";
import { remarkMention, RenderMention } from "./plugins/mentions";
import { remarkSpoiler, RenderSpoiler } from "./plugins/spoiler";
import { remarkTimestamps } from "./plugins/timestamps";
import "./prism";
/**
* Null element
*/
const Null: React.FC = () => null;
/**
* Custom Markdown components
*/
const components = {
emoji: RenderEmoji,
mention: RenderMention,
spoiler: RenderSpoiler,
channel: RenderChannel,
a: RenderAnchor,
p: styled.p`
margin: 0;
> code {
padding: 1px 4px;
flex-shrink: 0;
}
`,
h1: styled.h1`
margin: 0.2em 0;
`,
h2: styled.h2`
margin: 0.2em 0;
`,
h3: styled.h3`
margin: 0.2em 0;
`,
h4: styled.h4`
margin: 0.2em 0;
`,
h5: styled.h5`
margin: 0.2em 0;
`,
h6: styled.h6`
margin: 0.2em 0;
`,
pre: RenderCodeblock,
code: styled.code`
color: white;
background: var(--block);
font-size: 90%;
font-family: var(--monospace-font), monospace;
border-radius: 3px;
box-decoration-break: clone;
`,
table: styled.table`
border-collapse: collapse;
th,
td {
padding: 6px;
border: 1px solid var(--tertiary-foreground);
}
`,
ul: styled.ul`
list-style-position: inside;
padding-left: 10px;
margin: 0.2em 0;
`,
ol: styled.ol`
list-style-position: inside;
padding-left: 10px;
margin: 0.2em 0;
`,
li: styled.li`
${(props) =>
props.class === "task-list-item" &&
css`
list-style-type: none;
`}
`,
blockquote: styled.blockquote`
margin: 2px 0;
padding: 2px 0;
background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background);
> * {
margin: 0 8px;
}
`,
// Block image elements
img: Null,
// Catch literally everything else just in case
video: Null,
figure: Null,
picture: Null,
source: Null,
audio: Null,
script: Null,
style: Null,
};
/**
* Unified Markdown renderer
*/
const render = unified()
.use(remarkParse)
.use(remarkBreaks)
.use(remarkGfm)
.use(remarkMath)
.use(remarkSpoiler)
.use(remarkChannels)
.use(remarkTimestamps)
.use(remarkEmoji)
.use(remarkMention)
.use(remarkHtmlToText)
.use(remarkRehype, {
handlers,
})
.use(rehypeKatex, {
maxSize: 10,
maxExpand: 0,
trust: false,
strict: false,
output: "html",
throwOnError: false,
errorColor: "var(--error)",
})
.use(rehypePrism)
// @ts-expect-error typings do not
// match between Preact and React
.use(rehypeReact, {
createElement,
Fragment,
components,
});
/**
* Markdown parent container
*/
const Container = styled.div<{ largeEmoji: boolean }>`
// Allow scrolling block math
.math-display {
overflow-x: auto;
}
// Set emoji size
--emoji-size: ${(props) => (props.largeEmoji ? "3em" : "1.25em")};
// Underline link hover
a:hover {
text-decoration: underline;
}
`;
/**
* Regex for matching execessive blockquotes
*/
const RE_QUOTE = /(^(?:>\s){5})[>\s]+(.*$)/gm;
/**
* Sanitise Markdown input before rendering
* @param content Input string
* @returns Sanitised string
*/
function sanitise(content: string) {
return (
content
// Strip excessive blockquote indentation
.replace(RE_QUOTE, (_, m0, m1) => m0 + m1)
);
}
/**
* Remark renderer component
*/
export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
const sanitisedContent = useMemo(() => sanitise(content), [content]);
const [Content, setContent] = useState<React.ReactElement>(null!);
useLayoutEffect(() => {
render
.process(sanitisedContent)
.then((file) => setContent(file.result));
}, [sanitisedContent]);
const largeEmoji = useMemo(
() => !disallowBigEmoji && isOnlyEmoji(content!),
[content, disallowBigEmoji],
);
return <Container largeEmoji={largeEmoji}>{Content}</Container>;
});

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

@ -1,292 +0,0 @@
/* eslint-disable react-hooks/rules-of-hooks */
import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import "katex/dist/katex.min.css";
import MarkdownIt from "markdown-it";
// @ts-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
import { RE_MENTIONS } from "revolt.js";
import styles from "./Markdown.module.scss";
import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
import { determineLink } from "../../lib/links";
import { dayjs } from "../../context/Locale";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { generateEmoji } from "../common/Emoji";
import { emojiDictionary } from "../../assets/emojis";
import { MarkdownProps } from "./Markdown";
import Prism from "./prism";
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
copycode: (element: HTMLDivElement) => void;
}
}
// Handler for code block copy.
if (typeof window !== "undefined") {
window.copycode = function (element: HTMLDivElement) {
try {
const code = element.parentElement?.parentElement?.children[1];
if (code) {
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
}
} catch (e) {}
};
}
export const md: MarkdownIt = MarkdownIt({
breaks: true,
linkify: true,
highlight: (str, lang) => {
const v = Prism.languages[lang];
if (v) {
const out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
}
return `<pre class="code"><code>${md.utils.escapeHtml(
str,
)}</code></pre>`;
},
})
.disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0,
maxSize: 10,
strict: false,
errorColor: "var(--error)",
});
md.linkify.set({ fuzzyLink: false });
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
internalHandleURL: (element: HTMLAnchorElement) => void;
}
}
// Include emojis.
md.renderer.rules.emoji = function (token, idx) {
return generateEmoji(token[idx].content);
};
// Force line breaks.
// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
const defaultParagraphRenderer =
md.renderer.rules.paragraph_open ||
((tokens, idx, options, env, self) =>
self.renderToken(tokens, idx, options));
md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
let result = "";
if (idx > 1) {
const inline = tokens[idx - 2];
const paragraph = tokens[idx];
if (
inline.type === "inline" &&
inline.map &&
inline.map[1] &&
paragraph.map &&
paragraph.map[0]
) {
const diff = paragraph.map[0] - inline.map[1];
if (diff > 0) {
result = "<br>".repeat(diff);
}
}
}
return result + defaultParagraphRenderer(tokens, idx, options, env, self);
};
const RE_TWEMOJI = /:(\w+):/g;
// ! FIXME: Move to library
const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
const RE_TIME = /<t:([0-9]+):(\w)>/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext);
const { openLink } = useIntermediate();
if (typeof content === "undefined") return null;
if (!content || content.length === 0) return null;
// We replace the message with the mention at the time of render.
// We don't care if the mention changes.
const newContent = content
.replace(RE_TIME, (sub: string, ...args: unknown[]) => {
if (isNaN(args[0] as number)) return sub;
const date = dayjs.unix(args[0] as number);
const format = args[1] as string;
let final = "";
switch (format) {
case "t":
final = date.format("hh:mm");
break;
case "T":
final = date.format("hh:mm:ss");
break;
case "R":
final = date.fromNow();
break;
case "D":
final = date.format("DD MMMM YYYY");
break;
case "F":
final = date.format("dddd, DD MMMM YYYY hh:mm");
break;
default:
final = date.format("DD MMMM YYYY hh:mm");
break;
}
return `\`${final}\``;
})
.replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
user = client.users.get(id);
if (user) {
return `[@${user.username}](/@${id})`;
}
return sub;
})
.replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
channel = client.channels.get(id);
if (channel?.channel_type === "TextChannel") {
return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
}
return sub;
});
const useLargeEmojis = disallowBigEmoji
? false
: content.replace(RE_TWEMOJI, "").trim().length === 0;
const toggle = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLDivElement;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}, []);
const handleLink = useCallback(
(ev: MouseEvent) => {
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLAnchorElement;
if (ev.shiftKey) {
switch (element.dataset.type) {
case "mention": {
internalEmit(
"MessageBox",
"append",
`<@${element.dataset.mentionId}>`,
"mention",
);
ev.preventDefault();
return;
}
case "channel_mention": {
internalEmit(
"MessageBox",
"append",
`<#${element.dataset.mentionId}>`,
"channel_mention",
);
ev.preventDefault();
return;
}
}
}
if (openLink(element.href)) {
ev.preventDefault();
}
}
},
[openLink],
);
return (
<span
ref={(el) => {
if (el) {
el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
(element) => {
element.removeEventListener("click", toggle);
element.addEventListener("click", toggle);
},
);
el.querySelectorAll<HTMLAnchorElement>("a").forEach(
(element) => {
element.removeEventListener("click", handleLink);
element.addEventListener("click", handleLink);
element.removeAttribute("data-type");
element.removeAttribute("data-mention-id");
element.removeAttribute("target");
const link = determineLink(element.href);
switch (link.type) {
case "profile": {
element.setAttribute(
"data-type",
"mention",
);
element.setAttribute(
"data-mention-id",
link.id,
);
break;
}
case "navigate": {
if (link.navigation_type === "channel") {
element.setAttribute(
"data-type",
"channel_mention",
);
element.setAttribute(
"data-mention-id",
link.channel_id,
);
}
break;
}
case "external": {
element.setAttribute("target", "_blank");
element.setAttribute("rel", "noreferrer");
break;
}
}
},
);
}
}}
className={styles.markdown}
dangerouslySetInnerHTML={{
__html: md.render(newContent),
}}
data-large-emojis={useLargeEmojis}
/>
);
}

7
src/components/markdown/hast.ts Normal file
View file

@ -0,0 +1,7 @@
import { passThroughComponents } from "./plugins/remarkRegexComponent";
import { timestampHandler } from "./plugins/timestamps";
export const handlers = {
...passThroughComponents("emoji", "spoiler", "mention", "channel"),
timestamp: timestampHandler,
};

78
src/components/markdown/plugins/Codeblock.tsx Normal file
View file

@ -0,0 +1,78 @@
import styled from "styled-components";
import { useCallback, useRef } from "preact/hooks";
import { Tooltip } from "@revoltchat/ui";
import { modalController } from "../../../controllers/modals/ModalController";
/**
* Base codeblock styles
*/
const Base = styled.pre`
padding: 1em;
overflow-x: scroll;
background: var(--block);
border-radius: var(--border-radius);
`;
/**
* Copy codeblock contents button styles
*/
const Lang = styled.div`
width: fit-content;
padding-bottom: 8px;
a {
color: #111;
cursor: pointer;
padding: 2px 6px;
font-weight: 600;
user-select: none;
display: inline-block;
background: var(--accent);
font-size: 10px;
text-transform: uppercase;
box-shadow: 0 2px #787676;
border-radius: calc(var(--border-radius) / 3);
&:active {
transform: translateY(1px);
box-shadow: 0 1px #787676;
}
}
`;
/**
* Render a codeblock with copy text button
*/
export const RenderCodeblock: React.FC<{ class: string }> = ({
children,
...props
}) => {
const ref = useRef<HTMLPreElement>(null);
let text = "text";
if (props.class) {
text = props.class.split("-")[1];
}
const onCopy = useCallback(() => {
const text = ref.current?.querySelector("code")?.innerText;
text && modalController.writeText(text);
}, [ref]);
return (
<Base ref={ref}>
<Lang>
<Tooltip content="Copy to Clipboard" placement="top">
{/**
// @ts-expect-error Preact-React */}
<a onClick={onCopy}>{text}</a>
</Tooltip>
</Lang>
{children}
</Base>
);
};

34
src/components/markdown/plugins/anchors.tsx Normal file
View file

@ -0,0 +1,34 @@
import { Link } from "react-router-dom";
import { determineLink } from "../../../lib/links";
import { modalController } from "../../../controllers/modals/ModalController";
export function RenderAnchor({
href,
...props
}: JSX.HTMLAttributes<HTMLAnchorElement>) {
// Pass-through no href or if anchor
if (!href || href.startsWith("#")) return <a href={href} {...props} />;
// Determine type of link
const link = determineLink(href);
if (link.type === "none") return <a {...props} />;
// Render direct link if internal
if (link.type === "navigate") {
return <Link to={link.path} children={props.children} />;
}
return (
<a
{...props}
href={href}
target="_blank"
rel="noreferrer"
onClick={(ev) =>
modalController.openLink(href) && ev.preventDefault()
}
/>
);
}

21
src/components/markdown/plugins/channels.tsx Normal file
View file

@ -0,0 +1,21 @@
import { Link } from "react-router-dom";
import { clientController } from "../../../controllers/client/ClientController";
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
export function RenderChannel({ match }: CustomComponentProps) {
const channel = clientController.getAvailableClient().channels.get(match)!;
return (
<Link
to={`${
channel.server_id ? `/server/${channel.server_id}` : ""
}/channel/${match}`}>{`#${channel.name}`}</Link>
);
}
export const remarkChannels = createComponent(
"channel",
/<#([A-z0-9]{26})>/g,
(match) => clientController.getAvailableClient().channels.has(match),
);

63
src/components/markdown/plugins/emoji.tsx Normal file
View file

@ -0,0 +1,63 @@
import styled from "styled-components";
import { useState } from "preact/hooks";
import { emojiDictionary } from "../../../assets/emojis";
import { clientController } from "../../../controllers/client/ClientController";
import { parseEmoji } from "../../common/Emoji";
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
const Emoji = styled.img`
object-fit: contain;
height: var(--emoji-size);
width: var(--emoji-size);
margin: 0 0.05em 0 0.1em;
vertical-align: -0.2em;
img:before {
content: " ";
display: block;
position: absolute;
height: 50px;
width: 50px;
background-image: url(ishere.jpg);
}
`;
export function RenderEmoji({ match }: CustomComponentProps) {
const [fail, setFail] = useState(false);
const url =
match in emojiDictionary
? parseEmoji(emojiDictionary[match as keyof typeof emojiDictionary])
: `${
clientController.getAvailableClient().configuration?.features
.autumn.url
}/emojis/${match}`;
if (fail) return <span>{`:${match}:`}</span>;
return (
<Emoji
alt={`:${match}:`}
loading="lazy"
className="emoji"
draggable={false}
src={url}
onError={() => setFail(true)}
/>
);
}
const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
export const remarkEmoji = createComponent(
"emoji",
RE_EMOJI,
(match) => match in emojiDictionary || RE_ULID.test(match),
);
export function isOnlyEmoji(text: string) {
return text.replaceAll(RE_EMOJI, "").trim().length === 0;
}

10
src/components/markdown/plugins/htmlToText.ts Normal file
View file

@ -0,0 +1,10 @@
import { Plugin } from "unified";
import { visit } from "unist-util-visit";
export const remarkHtmlToText: Plugin = () => {
return (tree) => {
visit(tree, "html", (node: { type: string; value: string }) => {
node.type = "text";
});
};
};

53
src/components/markdown/plugins/mentions.tsx Normal file
View file

@ -0,0 +1,53 @@
import { RE_MENTIONS } from "revolt.js";
import styled from "styled-components";
import { clientController } from "../../../controllers/client/ClientController";
import UserShort from "../../common/user/UserShort";
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
const Mention = styled.a`
gap: 4px;
flex-shrink: 0;
padding-left: 2px;
padding-right: 6px;
align-items: center;
display: inline-flex;
vertical-align: middle;
cursor: pointer;
font-weight: 600;
text-decoration: none !important;
background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
transition: 0.1s ease filter;
&:hover {
filter: brightness(0.75);
}
&:active {
filter: brightness(0.65);
}
svg {
width: 1em;
height: 1em;
}
`;
export function RenderMention({ match }: CustomComponentProps) {
return (
<Mention>
<UserShort
showServerIdentity
user={clientController.getAvailableClient().users.get(match)}
/>
</Mention>
);
}
export const remarkMention = createComponent("mention", RE_MENTIONS, (match) =>
clientController.getAvailableClient().users.has(match),
);

108
src/components/markdown/plugins/remarkRegexComponent.ts Normal file
View file

@ -0,0 +1,108 @@
import type { Handler } from "mdast-util-to-hast";
import type { Plugin } from "unified";
import { visit } from "unist-util-visit";
/**
* Props given to custom components
*/
export interface CustomComponentProps {
type: string;
match: string;
arg1: string;
}
/**
* Create a new custom component matched by a given RegExp
* @param type hast node type
* @param regex Regex to match (must have one capture group)
* @returns Unified Plugin
*/
export function createComponent(
type: string,
regex: RegExp,
validator?: (match: string) => boolean,
): Plugin {
/**
* Plugin which transforms a given RegExp into a custom component with given name.
*/
return () => {
return (tree) => {
visit(
tree,
"text",
(
node: { value: string },
index: number,
parent: { children: any[] },
) => {
const result = [];
let start = 0;
regex.lastIndex = 0;
let match = regex.exec(node.value);
while (match) {
if (!validator || validator(match[1])) {
const position = match.index;
if (start !== position) {
result.push({
type: "text",
value: node.value.slice(start, position),
});
}
result.push({
type,
match: match[1],
arg1: match[2],
});
start = position + match[0].length;
}
match = regex.exec(node.value);
}
if (
result.length > 0 &&
parent &&
typeof index === "number"
) {
if (start < node.value.length) {
result.push({
type: "text",
value: node.value.slice(start),
});
}
parent.children.splice(index, 1, ...result);
return index + result.length;
}
},
);
};
};
}
/**
* Pass-through a component as-is from remark to rehype
* @param name Tag name
* @returns Handler
*/
export const passThroughRehype: (name: string) => Handler =
(name: string) => (h, node) =>
h(node, name, node);
/**
* Pass-through multiple components at once
* @param keys Tags
* @returns Handlers
*/
export const passThroughComponents = (...keys: string[]) => {
const obj: Record<string, Handler> = {};
for (const key of keys) {
obj[key] = passThroughRehype(key);
}
return obj;
};

45
src/components/markdown/plugins/spoiler.tsx Normal file
View file

@ -0,0 +1,45 @@
import styled, { css } from "styled-components";
import { useState } from "preact/hooks";
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
const Spoiler = styled.span<{ shown: boolean }>`
padding: 0 2px;
cursor: pointer;
user-select: none;
color: transparent;
background: #151515;
border-radius: var(--border-radius);
> * {
opacity: 0;
pointer-events: none;
}
${(props) =>
props.shown &&
css`
cursor: auto;
user-select: all;
color: var(--foreground);
background: var(--secondary-background);
> * {
opacity: 1;
pointer-events: unset;
}
`}
`;
export function RenderSpoiler({ match }: CustomComponentProps) {
const [shown, setShown] = useState(false);
return (
<Spoiler shown={shown} onClick={() => setShown(true)}>
{match}
</Spoiler>
);
}
export const remarkSpoiler = createComponent("spoiler", /!!([^!]+)!!/g);

39
src/components/markdown/plugins/timestamps.ts Normal file
View file

@ -0,0 +1,39 @@
import type { Handler } from "mdast-util-to-hast";
import { dayjs } from "../../../context/Locale";
import { createComponent } from "./remarkRegexComponent";
export const timestampHandler: Handler = (h, { match, arg1 }) => {
if (isNaN(match)) return { type: "text", value: match };
const date = dayjs.unix(match);
let value = "";
switch (arg1) {
case "t":
value = date.format("hh:mm");
break;
case "T":
value = date.format("hh:mm:ss");
break;
case "R":
value = date.fromNow();
break;
case "D":
value = date.format("DD MMMM YYYY");
break;
case "F":
value = date.format("dddd, DD MMMM YYYY hh:mm");
break;
default:
value = date.format("DD MMMM YYYY hh:mm");
break;
}
return h(null, "code", {}, [{ type: "text", value }]);
};
export const remarkTimestamps = createComponent(
"timestamp",
/<t:([0-9]+)(?::(\w))?>/g,
);

2
src/components/markdown/prism.ts
View file

@ -34,7 +34,6 @@ import "prismjs/components/prism-r";
import "prismjs/components/prism-sql";
import "prismjs/components/prism-graphql";
import "prismjs/components/prism-shell-session";
import "prismjs/components/prism-java";
import "prismjs/components/prism-powershell";
import "prismjs/components/prism-swift";
import "prismjs/components/prism-yaml";
@ -87,7 +86,6 @@ import "prismjs/components/prism-moonscript";
import "prismjs/components/prism-qml";
import "prismjs/components/prism-vim";
import "prismjs/components/prism-nim";
import "prismjs/components/prism-swift";
import "prismjs/components/prism-haml";
import "prismjs/components/prism-ada";
import "prismjs/components/prism-arduino";

10
src/components/native/Titlebar.tsx
View file

@ -98,7 +98,7 @@ const TitlebarBase = styled.div<Props>`
export function Titlebar(props: Props) {
return (
<TitlebarBase {...props}>
<div class="title">
<div className="title">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 193.733 37.438">
@ -114,7 +114,7 @@ export function Titlebar(props: Props) {
<Wrench size="12.5" />
)}
</div>
{/*<div class="actions quick">
{/*<div className="actions quick">
<Tooltip
content="Mute"
placement="bottom">
@ -130,9 +130,9 @@ export function Titlebar(props: Props) {
</div>
</Tooltip>
</div>*/}
<div class="drag" />
<div className="drag" />
<UpdateIndicator style="titlebar" />
<div class="actions">
<div className="actions">
<div onClick={window.native.min}>
<svg
aria-hidden="false"
@ -164,7 +164,7 @@ export function Titlebar(props: Props) {
/>
</svg>
</div>
<div onClick={window.native.close} class="error">
<div onClick={window.native.close} className="error">
<svg
aria-hidden="false"
width="12"

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

@ -3,14 +3,14 @@ import { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components/macro";
import { Centred, IconButton } from "@revoltchat/ui";
import ConditionalLink from "../../lib/ConditionalLink";
import { useApplicationState } from "../../mobx/State";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { useClient } from "../../controllers/client/ClientController";
import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton";
const Base = styled.div`
background: var(--secondary-background);
@ -24,8 +24,19 @@ const Navbar = styled.div`
height: var(--bottom-navigation-height);
`;
/**
* I've decided that this whole component
* needs to be re-written 👍👍👍👍👍👍
*/
const Button = styled.a<{ active: boolean }>`
flex: 1;
color: var(--foreground);
// ok
* {
color: var(--foreground) !important;
}
> a,
> div,
@ -63,7 +74,7 @@ export default observer(() => {
<Base>
<Navbar>
<Button active={homeActive}>
<IconButton
<Centred
onClick={() => {
if (settingsActive) {
if (history.length > 0) {
@ -80,14 +91,14 @@ export default observer(() => {
}
}}>
<Message size={24} />
</IconButton>
</Centred>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<IconButton>
<ConditionalLink active={friendsActive} to="/friends">
<Group size={25} />
</IconButton>
</ConditionalLink>
</ConditionalLink>
</IconButton>
</Button>
{/*<Button active={searchActive}>
<ConditionalLink active={searchActive} to="/search">
@ -104,20 +115,20 @@ export default observer(() => {
</ConditionalLink>
</Button>*/}
<Button active={discoverActive}>
<ConditionalLink
active={discoverActive}
to="/discover/servers">
<IconButton>
<IconButton>
<ConditionalLink
active={discoverActive}
to="/discover/servers">
<Compass size={24} />
</IconButton>
</ConditionalLink>
</ConditionalLink>
</IconButton>
</Button>
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<IconButton>
<ConditionalLink active={settingsActive} to="/settings">
<UserIcon target={user} size={26} status={true} />
</IconButton>
</ConditionalLink>
</ConditionalLink>
</IconButton>
</Button>
</Navbar>
</Base>

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

@ -5,23 +5,20 @@ import { User, Channel } from "revolt.js";
import styles from "./Item.module.scss";
import classNames from "classnames";
import { Ref } from "preact";
import { useTriggerEvents } from "preact-context-menu";
import { Localizer, Text } from "preact-i18n";
import { IconButton } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { stopPropagation } from "../../../lib/stopPropagation";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { modalController } from "../../../controllers/modals/ModalController";
import ChannelIcon from "../../common/ChannelIcon";
import Tooltip from "../../common/Tooltip";
import UserIcon from "../../common/user/UserIcon";
import { Username } from "../../common/user/UserShort";
import UserStatus from "../../common/user/UserStatus";
import IconButton from "../../ui/IconButton";
import { Children } from "../../../types/Preact";
type CommonProps = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
@ -52,7 +49,6 @@ export const UserButton = observer((props: UserProps) => {
channel,
...divProps
} = props;
const { openScreen } = useIntermediate();
return (
<div
@ -113,8 +109,7 @@ export const UserButton = observer((props: UserProps) => {
className={styles.icon}
onClick={(e) =>
stopPropagation(e) &&
openScreen({
id: "special_prompt",
modalController.push({
type: "close_dm",
target: channel,
})
@ -151,7 +146,6 @@ export const ChannelButton = observer((props: ChannelProps) => {
return <UserButton {...{ active, alert, channel, user }} />;
}
const { openScreen } = useIntermediate();
const alerting = alert && !muted && !active;
return (
@ -166,11 +160,9 @@ export const ChannelButton = observer((props: ChannelProps) => {
channel: channel._id,
unread: !!alert,
})}>
<ChannelIcon
className={styles.avatar}
target={channel}
size={compact ? 24 : 32}
/>
<div className={styles.avatar}>
<ChannelIcon target={channel} size={compact ? 24 : 32} />
</div>
<div className={styles.name}>
<div>{channel.name}</div>
{channel.channel_type === "Group" && (
@ -199,8 +191,7 @@ export const ChannelButton = observer((props: ChannelProps) => {
<IconButton
className={styles.icon}
onClick={() =>
openScreen({
id: "special_prompt",
modalController.push({
type: "leave_group",
target: channel,
})

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

@ -1,45 +1,47 @@
import { observer } from "mobx-react-lite";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import { Banner, Button, Column } from "@revoltchat/ui";
import Banner from "../../ui/Banner";
import { useSession } from "../../../controllers/client/ClientController";
export default function ConnectionStatus() {
const status = useContext(StatusContext);
const client = useClient();
function ConnectionStatus() {
const session = useSession()!;
if (status === ClientStatus.OFFLINE) {
if (session.state === "Offline") {
return (
<Banner>
<Text id="app.special.status.offline" />
</Banner>
);
} else if (status === ClientStatus.DISCONNECTED) {
} else if (session.state === "Disconnected") {
return (
<Banner>
<Text id="app.special.status.disconnected" /> <br />
<a onClick={() => client.websocket.connect()}>
<Text id="app.special.status.reconnect" />
</a>
<Column centred>
<Text id="app.special.status.disconnected" />
<Button
compact
palette="secondary"
onClick={() =>
session.emit({
action: "RETRY",
})
}>
<Text id="app.status.reconnect" />
</Button>
</Column>
</Banner>
);
} else if (status === ClientStatus.CONNECTING) {
return (
<Banner>
<Text id="app.special.status.connecting" />
</Banner>
);
} else if (status === ClientStatus.RECONNECTING) {
} else if (session.state === "Connecting") {
return (
<Banner>
<Text id="app.special.status.reconnecting" />
</Banner>
);
}
return null;
}
export default observer(ConnectionStatus);

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

@ -1,3 +1,4 @@
import { Plus } from "@styled-icons/boxicons-regular";
import {
Home,
UserDetail,
@ -11,18 +12,18 @@ import styled, { css } from "styled-components/macro";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import { Category, IconButton } from "@revoltchat/ui";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { useClient } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
@ -44,10 +45,9 @@ const Navbar = styled.div`
export default observer(() => {
const { pathname } = useLocation();
const client = useContext(AppContext);
const client = useClient();
const state = useApplicationState();
const { channel: channel_id } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate();
const channels = [...client.channels.values()].filter(
(x) =>
@ -125,15 +125,17 @@ export default observer(() => {
</ButtonItem>
</Link>
)}
<Category
text={<Text id="app.main.categories.conversations" />}
action={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}
/>
<Category>
<Text id="app.main.categories.conversations" />
<IconButton
onClick={() =>
modalController.push({
type: "create_group",
})
}>
<Plus size={16} />
</IconButton>
</Category>
{channels.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}

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

@ -1,448 +1,40 @@
import { Plus } from "@styled-icons/boxicons-regular";
import { Cog, Compass } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, useHistory, useLocation, useParams } from "react-router-dom";
import styled, { css } from "styled-components/macro";
import { useParams } from "react-router-dom";
import { useTriggerEvents } from "preact-context-menu";
import { useCallback } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { ServerList } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import ChannelIcon from "../../common/ChannelIcon";
import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover";
import UserIcon from "../../common/user/UserIcon";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { Children } from "../../../types/Preact";
function Icon({
children,
unread,
count,
size,
}: {
children: Children;
unread?: "mention" | "unread";
count: number | 0;
size: number;
}) {
return (
<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
<use href="#serverIndicator" />
<foreignObject
x="0"
y="0"
width="32"
height="32"
mask={unread ? "url(#server)" : undefined}>
{children}
</foreignObject>
{unread === "unread" && (
<circle cx="27" cy="5" r="5" fill={"white"} />
)}
{unread === "mention" && (
<>
<circle cx="27" cy="5" r="5" fill={"var(--error)"} />
<text
x="27"
y="5"
r="5"
fill={"white"}
fontSize={"7.5"}
fontWeight={600}
text-anchor="middle"
alignmentBaseline={"middle"}
dominant-baseline={"middle"}>
{count < 10 ? count : "9+"}
</text>
</>
)}
</svg>
);
}
const ServersBase = styled.div`
width: 58px;
height: 100%;
padding-inline-start: 2px;
display: flex;
flex-shrink: 0;
flex-direction: column;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
const ServerList = styled.div`
flex-grow: 1;
display: flex;
overflow-y: scroll;
padding-bottom: 20px;
flex-direction: column;
scrollbar-width: none;
> :first-child > svg {
margin: 6px 0 6px 4px;
}
&::-webkit-scrollbar {
width: 0px;
}
`;
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
height: 54px;
display: flex;
align-items: center;
//transition: 0.2s ease height;
:focus {
outline: 3px solid blue;
}
> div {
height: 42px;
padding-inline-start: 6px;
display: grid;
place-items: center;
border-start-start-radius: 50%;
border-end-start-radius: 50%;
&:active {
transform: translateY(1px);
}
${(props) =>
props.active &&
css`
&:active {
transform: none;
}
`}
}
> span {
width: 0;
display: relative;
${(props) =>
!props.active &&
css`
display: none;
`}
svg {
margin-top: 5px;
pointer-events: none;
}
}
${(props) =>
(!props.active || props.home) &&
css`
cursor: pointer;
`}
`;
const ServerCircle = styled.div`
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-background);
border-radius: 50%;
height: 42px;
width: 42px;
transition: background-color 0.1s ease-in;
cursor: pointer;
> div svg {
color: var(--accent);
}
&:active {
transform: translateY(1px);
}
}
`;
const SettingsButton = styled.div`
width: 50px;
height: 56px;
display: grid;
place-items: center;
`;
function Swoosh() {
const sidebarOpen = useApplicationState().layout.getSectionState(
SIDEBAR_CHANNELS,
true,
);
const fill = sidebarOpen
? "var(--sidebar-active)"
: "var(--primary-background)";
return (
<span>
<svg
width="56"
height="106"
viewBox="0 0 56 106"
xmlns="http://www.w3.org/2000/svg">
<path
d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
fill={fill}
/>
<path
d="M27.0002 80C4.50023 80 56.0002 53 56.0002 53V106C56.0002 106 49.5002 80 27.0002 80Z"
fill={fill}
/>
<path
d="M27.0003 26C4.50025 26 56 53 56 53L56.0003 0C56.0003 0 49.5003 26 27.0003 26Z"
fill={fill}
/>
<rect x="51" y="50" width="5" height="7" fill={fill} />
</svg>
</span>
);
}
import { useClient } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
/**
* Server list sidebar shim component
*/
export default observer(() => {
const client = useClient();
const state = useApplicationState();
const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? client.servers.get(server_id) : undefined;
const servers = [...client.servers.values()];
const channels = [...client.channels.values()];
const history = useHistory();
const path = useLocation().pathname;
const { openScreen } = useIntermediate();
let alertCount = [...client.users.values()].filter(
(x) => x.relationship === "Incoming",
).length;
const homeActive =
typeof server === "undefined" &&
!path.startsWith("/invite") &&
!path.startsWith("/discover");
const createServer = useCallback(
() =>
modalController.push({
type: "create_server",
}),
[],
);
return (
<ServersBase>
<ServerList>
<ConditionalLink
active={homeActive}
to={state.layout.getLastHomePath()}>
<ServerEntry home active={homeActive}>
<Swoosh />
<div
{...useTriggerEvents("Status")}
onClick={() =>
homeActive && history.push("/settings")
}>
<UserHover user={client.user ?? undefined}>
<Icon
size={42}
unread={
alertCount > 0 ? "mention" : undefined
}
count={alertCount}>
<UserIcon
target={client.user ?? undefined}
size={32}
status
hover
/>
</Icon>
</UserHover>
</div>
</ServerEntry>
</ConditionalLink>
{channels
.filter(
(x) =>
((x.channel_type === "DirectMessage" && x.active) ||
x.channel_type === "Group") &&
x.unread,
)
.map((x) => {
const unreadCount = x.mentions.length;
return (
<Link to={`/channel/${x._id}`}>
<ServerEntry
home
active={false}
{...useTriggerEvents("Menu", {
channel: x._id,
unread: true,
})}>
<div>
<Icon
size={42}
unread={
unreadCount > 0
? "mention"
: "unread"
}
count={unreadCount}>
{x.channel_type ===
"DirectMessage" ? (
<UserIcon
target={x.recipient}
size={32}
hover
/>
) : (
<ChannelIcon
target={x}
size={32}
hover
/>
)}
</Icon>
</div>
</ServerEntry>
</Link>
);
})}
<LineDivider />
{servers.map((server) => {
const active = server._id === server_id;
const isUnread = server.isUnread(state.notifications);
const mentionCount = server.getMentions(
state.notifications,
).length;
return (
<ConditionalLink
key={server._id}
active={active}
to={state.layout.getServerPath(server._id)}>
<ServerEntry
active={active}
{...useTriggerEvents("Menu", {
server: server._id,
unread: isUnread,
})}>
<Swoosh />
<Tooltip
content={server.name}
placement="right">
<Icon
size={42}
unread={
mentionCount > 0
? "mention"
: isUnread
? "unread"
: undefined
}
count={mentionCount}>
<ServerIcon size={32} target={server} />
</Icon>
</Tooltip>
</ServerEntry>
</ConditionalLink>
);
})}
{/*<LineDivider />*/}
<ServerCircle>
<Tooltip content="Add a Server" placement="right">
<div className="circle">
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Plus size={32} />
</IconButton>
</div>
</Tooltip>
</ServerCircle>
{!isTouchscreenDevice && (
<ServerCircle>
<Tooltip
content={
<div
style={{
display: "flex",
alignItems: "center",
gap: "6px",
}}>
<div>Discover Revolt</div>
<div
style={{
padding: "1px 5px",
fontSize: "9px",
background: "var(--status-busy)",
borderRadius: "60px",
}}>
NEW
</div>
</div>
}
placement="right">
<div className="circle">
<IconButton>
<Link to="/discover">
<a>
<Compass size={32} />
</a>
</Link>
</IconButton>
</div>
</Tooltip>
</ServerCircle>
)}
</ServerList>
{!isTouchscreenDevice && (
<Tooltip content={"Settings"} placement="right">
<ServerCircle>
<Link to="/settings">
<div className="circle">
<IconButton>
<Cog
size={24}
fill="var(--secondary-foreground) !important"
/>
</IconButton>
</div>
</Link>
</ServerCircle>
</Tooltip>
)}
<PaintCounter small />
</ServersBase>
<ServerList
client={client}
active={server_id}
createServer={createServer}
permit={state.notifications}
home={state.layout.getLastHomePath}
servers={state.ordering.orderedServers}
reorder={state.ordering.reorderServer}
/>
);
});

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

@ -1,12 +1,12 @@
import { observer } from "mobx-react-lite";
import { Redirect, useParams } from "react-router";
import { Server } from "revolt.js";
import styled, { css } from "styled-components/macro";
import { Ref } from "preact";
import { useTriggerEvents } from "preact-context-menu";
import { useEffect } from "preact/hooks";
import { Category } from "@revoltchat/ui";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { internalEmit } from "../../../lib/eventEmitter";
@ -14,12 +14,9 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useClient } from "../../../controllers/client/ClientController";
import CollapsibleSection from "../../common/CollapsibleSection";
import ServerHeader from "../../common/ServerHeader";
import Category from "../../ui/Category";
import { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
@ -126,7 +123,7 @@ export default observer(() => {
<CollapsibleSection
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
summary={<Category>{category.title}</Category>}>
{channels}
</CollapsibleSection>,
);

42
src/components/navigation/right/MemberList.tsx
View file

@ -8,11 +8,7 @@ import { memo } from "preact/compat";
import { internalEmit } from "../../../lib/eventEmitter";
import {
Screen,
useIntermediate,
} from "../../../context/intermediate/Intermediate";
import { modalController } from "../../../controllers/modals/ModalController";
import { UserButton } from "../items/ButtonItem";
export type MemberListGroup = {
@ -55,15 +51,7 @@ const NoOomfie = styled.div`
`;
const ItemContent = memo(
({
item,
context,
openScreen,
}: {
item: User;
context: Channel;
openScreen: (screen: Screen) => void;
}) => (
({ item, context }: { item: User; context: Channel }) => (
<UserButton
key={item._id}
user={item}
@ -77,13 +65,12 @@ const ItemContent = memo(
`<@${item._id}>`,
"mention",
);
} else
[
openScreen({
id: "profile",
user_id: item._id,
}),
];
} else {
modalController.push({
type: "user_profile",
user_id: item._id,
});
}
}}
/>
),
@ -96,8 +83,6 @@ export default function MemberList({
entries: MemberListGroup[];
context: Channel;
}) {
const { openScreen } = useIntermediate();
return (
<GroupedVirtuoso
groupCounts={entries.map((x) => x.users.length)}
@ -114,7 +99,7 @@ export default function MemberList({
)}
{entry.type !== "no_offline" && (
<>
{" - "}
{" – "}
{entry.users.length}
</>
)}
@ -137,7 +122,8 @@ export default function MemberList({
server, see issue{" "}
<a
href="https://github.com/revoltchat/delta/issues/128"
target="_blank">
target="_blank"
rel="noreferrer">
#128
</a>{" "}
for when this will be resolved.
@ -158,11 +144,7 @@ export default function MemberList({
return (
<div>
<ItemContent
item={item}
context={context}
openScreen={openScreen}
/>
<ItemContent item={item} context={context} />
</div>
);
}}

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

@ -4,14 +4,12 @@ import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { Channel, Server, User, API } from "revolt.js";
import { useContext, useEffect, useState } from "preact/hooks";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import {
ClientStatus,
StatusContext,
useSession,
useClient,
} from "../../../context/revoltjs/RevoltClient";
} from "../../../controllers/client/ClientController";
import { GenericSidebarBase } from "../SidebarBase";
import MemberList, { MemberListGroup } from "./MemberList";
@ -182,7 +180,7 @@ export const GroupMemberSidebar = observer(
);
// ! FIXME: this is temporary code until we get lazy guilds like subscriptions
const FETCHED: Set<String> = new Set();
const FETCHED: Set<string> = new Set();
export function resetMemberSidebarFetched() {
FETCHED.clear();
@ -205,18 +203,18 @@ function shouldSkipOffline(id: string) {
export const ServerMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const client = useClient();
const status = useContext(StatusContext);
const session = useSession()!;
const client = session.client!;
useEffect(() => {
const server_id = channel.server_id!;
if (status === ClientStatus.ONLINE && !FETCHED.has(server_id)) {
if (session.state === "Online" && !FETCHED.has(server_id)) {
FETCHED.add(server_id);
channel
.server!.syncMembers(shouldSkipOffline(server_id))
.catch(() => FETCHED.delete(server_id));
}
}, [status, channel]);
}, [session.state, channel]);
const entries = useEntries(
channel,

28
src/components/navigation/right/Search.tsx
View file

@ -5,14 +5,10 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui";
import { useClient } from "../../../controllers/client/ClientController";
import Message from "../../common/messaging/Message";
import Button from "../../ui/Button";
import InputBox from "../../ui/InputBox";
import Overline from "../../ui/Overline";
import Preloader from "../../ui/Preloader";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
type SearchState =
@ -102,23 +98,25 @@ export function SearchSidebar({ close }: Props) {
<GenericSidebarBase data-scroll-offset="with-padding">
<GenericSidebarList>
<SearchBase>
<Overline type="accent" block hover>
<a onClick={close}>« back to members</a>
</Overline>
<Overline type="subtle" block>
<Category>
<Error
error={<a onClick={close}>« back to members</a>}
/>
</Category>
<Category>
<Text id="app.main.channel.search.title" />
</Overline>
</Category>
<InputBox
value={query}
onKeyDown={(e) => e.key === "Enter" && search()}
onChange={(e) => setQuery(e.currentTarget.value)}
/>
<div class="sort">
<div className="sort">
{["Latest", "Oldest", "Relevance"].map((key) => (
<Button
key={key}
compact
accent={sort === key}
palette={sort === key ? "accent" : "primary"}
onClick={() => setSort(key as Sort)}>
<Text
id={`app.main.channel.search.sort.${key.toLowerCase()}`}
@ -128,7 +126,7 @@ export function SearchSidebar({ close }: Props) {
</div>
{state.type === "loading" && <Preloader type="ring" />}
{state.type === "results" && (
<div class="list">
<div className="list">
{state.results.map((message) => {
let href = "";
if (channel?.channel_type === "TextChannel") {
@ -139,7 +137,7 @@ export function SearchSidebar({ close }: Props) {
return (
<Link to={href} key={message._id}>
<div class="message">
<div className="message">
<Message
message={message}
head

261
src/components/settings/AppearanceShims.tsx
View file

@ -1,261 +0,0 @@
import { Brush } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
// @ts-expect-error shade-blend-color does not have typings.
import pSBC from "shade-blend-color";
import { Text } from "preact-i18n";
import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
import { useApplicationState } from "../../mobx/State";
import {
Fonts,
FONTS,
FONT_KEYS,
MonospaceFonts,
MONOSPACE_FONTS,
MONOSPACE_FONT_KEYS,
} from "../../context/Theme";
import Checkbox from "../ui/Checkbox";
import ColourSwatches from "../ui/ColourSwatches";
import ComboBox from "../ui/ComboBox";
import Radio from "../ui/Radio";
import CategoryButton from "../ui/fluent/CategoryButton";
import { EmojiSelector } from "./appearance/EmojiSelector";
import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
/**
* Component providing a way to switch the base theme being used.
*/
export const ThemeBaseSelectorShim = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<ThemeBaseSelector
value={theme.isModified() ? undefined : theme.getBase()}
setValue={(base) => {
theme.setBase(base);
theme.reset();
}}
/>
);
});
/**
* Component providing a link to the theme shop.
* Only appears if experiment is enabled.
* TODO: stabilise
*/
export const ThemeShopShim = () => {
return (
<Link to="/discover/themes" replace>
<CategoryButton
icon={<Brush size={24} />}
action="chevron"
description={
<Text id="app.settings.pages.appearance.discover.description" />
}
hover>
<Text id="app.settings.pages.appearance.discover.title" />
</CategoryButton>
</Link>
);
};
/**
* Component providing a way to change current accent colour.
*/
export const ThemeAccentShim = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />
</h3>
<ColourSwatches
value={theme.getVariable("accent")}
onChange={(colour) => {
theme.setVariable("accent", colour as string);
theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour));
}}
/>
</>
);
});
/**
* Component providing a way to edit custom CSS.
*/
export const ThemeCustomCSSShim = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
<TextAreaAutoSize
maxRows={20}
minHeight={480}
code
value={theme.getCSS() ?? ""}
onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
/>
</>
);
});
/**
* Component providing a way to switch between compact and normal message view.
*/
export const DisplayCompactShim = () => {
// TODO: WIP feature
return (
<>
<h3>
<Text id="app.settings.pages.appearance.message_display" />
</h3>
<div /* className={styles.display} */>
<Radio
description={
<Text id="app.settings.pages.appearance.display.default_description" />
}
checked>
<Text id="app.settings.pages.appearance.display.default" />
</Radio>
<Radio
description={
<Text id="app.settings.pages.appearance.display.compact_description" />
}
disabled>
<Text id="app.settings.pages.appearance.display.compact" />
</Radio>
</div>
</>
);
};
/**
* Component providing a way to change primary text font.
*/
export const DisplayFontShim = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox
value={theme.getFont()}
onChange={(e) => theme.setFont(e.currentTarget.value as Fonts)}>
{FONT_KEYS.map((key) => (
<option value={key} key={key}>
{FONTS[key as keyof typeof FONTS].name}
</option>
))}
</ComboBox>
</>
);
});
/**
* Component providing a way to change secondary, monospace text font.
*/
export const DisplayMonospaceFontShim = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox
value={theme.getMonospaceFont()}
onChange={(e) =>
theme.setMonospaceFont(
e.currentTarget.value as MonospaceFonts,
)
}>
{MONOSPACE_FONT_KEYS.map((key) => (
<option value={key} key={key}>
{
MONOSPACE_FONTS[key as keyof typeof MONOSPACE_FONTS]
.name
}
</option>
))}
</ComboBox>
</>
);
});
/**
* Component providing a way to toggle font ligatures.
*/
export const DisplayLigaturesShim = observer(() => {
const settings = useApplicationState().settings;
if (settings.theme.getFont() !== "Inter") return null;
return (
<>
<Checkbox
checked={settings.get("appearance:ligatures") ?? false}
onChange={(v) => settings.set("appearance:ligatures", v)}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</>
);
});
/**
* Component providing a way to toggle seasonal themes.
*/
export const DisplaySeasonalShim = observer(() => {
const settings = useApplicationState().settings;
return (
<Checkbox
checked={settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
description={
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
</Checkbox>
);
});
/**
* Component providing a way to toggle transparency effects.
*/
export const DisplayTransparencyShim = observer(() => {
const settings = useApplicationState().settings;
return (
<Checkbox
checked={settings.get("appearance:transparency") ?? true}
onChange={(v) => settings.set("appearance:transparency", v)}
description={
<Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
}>
<Text id="app.settings.pages.appearance.theme_options.transparency" />
</Checkbox>
);
});
/**
* Component providing a way to change emoji pack.
*/
export const DisplayEmojiShim = observer(() => {
const settings = useApplicationState().settings;
return (
<EmojiSelector
value={settings.get("appearance:emoji")}
setValue={(v) => settings.set("appearance:emoji", v)}
/>
);
});

60
src/components/settings/account/AccountManagement.tsx Normal file
View file

@ -0,0 +1,60 @@
import { Block } from "@styled-icons/boxicons-regular";
import { Trash } from "@styled-icons/boxicons-solid";
import { Text } from "preact-i18n";
import { CategoryButton } from "@revoltchat/ui";
import {
clientController,
useClient,
} from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
export default function AccountManagement() {
const client = useClient();
const callback = (route: "disable" | "delete") => () =>
modalController.mfaFlow(client).then(
(ticket) =>
ticket &&
client.api
.post(`/auth/account/${route}`, undefined, {
headers: {
"X-MFA-Ticket": ticket.token,
},
})
.then(clientController.logoutCurrent),
);
return (
<>
<h3>
<Text id="app.settings.pages.account.manage.title" />
</h3>
<h5>
<Text id="app.settings.pages.account.manage.description" />
</h5>
<CategoryButton
icon={<Block size={24} color="var(--error)" />}
description={
"Disable your account. You won't be able to access it unless you contact support."
}
action="chevron"
onClick={callback("disable")}>
<Text id="app.settings.pages.account.manage.disable" />
</CategoryButton>
<CategoryButton
icon={<Trash size={24} color="var(--error)" />}
description={
"Your account will be queued for deletion, a confirmation email will be sent."
}
action="chevron"
onClick={callback("delete")}>
<Text id="app.settings.pages.account.manage.delete" />
</CategoryButton>
</>
);
}

72
src/components/settings/account/EditAccount.tsx Normal file
View file

@ -0,0 +1,72 @@
import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key, Pencil } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import {
AccountDetail,
CategoryButton,
Column,
HiddenValue,
} from "@revoltchat/ui";
import { useSession } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
export default observer(() => {
const session = useSession()!;
const client = session.client!;
const [email, setEmail] = useState("...");
useEffect(() => {
if (email === "..." && session.state === "Online") {
client.api
.get("/auth/account/")
.then((account) => setEmail(account.email));
}
}, [client, email, session.state]);
return (
<>
<Column group>
<AccountDetail user={client.user!} />
</Column>
{(
[
["username", client.user!.username, At],
["email", email, Envelope],
["password", "•••••••••", Key],
] as const
).map(([field, value, Icon]) => (
<CategoryButton
key={field}
icon={<Icon size={24} />}
description={
field === "email" ? (
<HiddenValue
value={value}
placeholder={"•••••••••••@••••••.•••"}
/>
) : (
value
)
}
account
action={<Pencil size={20} />}
onClick={() =>
modalController.push({
type: "modify_account",
client,
field,
})
}>
<Text id={`login.${field}`} />
</CategoryButton>
))}
</>
);
});

218
src/components/settings/account/MultiFactorAuthentication.tsx Normal file
View file

@ -0,0 +1,218 @@
import { ListOl } from "@styled-icons/boxicons-regular";
import { Lock } from "@styled-icons/boxicons-solid";
import { API } from "revolt.js";
import { Text } from "preact-i18n";
import { useCallback, useEffect, useState } from "preact/hooks";
import { Category, CategoryButton, Error, Tip } from "@revoltchat/ui";
import { useSession } from "../../../controllers/client/ClientController";
import { takeError } from "../../../controllers/client/jsx/error";
import { modalController } from "../../../controllers/modals/ModalController";
/**
* Temporary helper function for Axios config
* @param token Token
* @returns Headers
*/
export function toConfig(token: string) {
return {
headers: {
"X-MFA-Ticket": token,
},
};
}
/**
* Component for configuring MFA on an account.
*/
export default function MultiFactorAuthentication() {
// Pull in prerequisites
const session = useSession()!;
const client = session.client!;
// Keep track of MFA state
const [mfa, setMFA] = useState<API.MultiFactorStatus>();
const [error, setError] = useState<string>();
// Fetch the current MFA status on account
useEffect(() => {
if (!mfa && session.state === "Online") {
client!.api
.get("/auth/mfa/")
.then(setMFA)
.catch((err) => setError(takeError(err)));
}
}, [mfa, client, session.state]);
// Action called when recovery code button is pressed
const recoveryAction = useCallback(async () => {
// Perform MFA flow first
const ticket = await modalController.mfaFlow(client);
// Check whether action was cancelled
if (typeof ticket === "undefined") {
return;
}
// Decide whether to generate or fetch.
let codes;
if (mfa!.recovery_active) {
// Fetch existing recovery codes
codes = await client.api.post(
"/auth/mfa/recovery",
undefined,
toConfig(ticket.token),
);
} else {
// Generate new recovery codes
codes = await client.api.patch(
"/auth/mfa/recovery",
undefined,
toConfig(ticket.token),
);
setMFA({
...mfa!,
recovery_active: true,
});
}
// Display the codes to the user
modalController.push({
type: "mfa_recovery",
client,
codes,
});
}, [mfa]);
// Action called when TOTP button is pressed
const totpAction = useCallback(async () => {
// Perform MFA flow first
const ticket = await modalController.mfaFlow(client);
// Check whether action was cancelled
if (typeof ticket === "undefined") {
return;
}
// Decide whether to disable or enable.
if (mfa!.totp_mfa) {
// Disable TOTP authentication
await client.api.delete("/auth/mfa/totp", toConfig(ticket.token));
setMFA({
...mfa!,
totp_mfa: false,
});
} else {
// Generate a TOTP secret
const { secret } = await client.api.post(
"/auth/mfa/totp",
undefined,
toConfig(ticket.token),
);
// Open secret modal
let success;
while (!success) {
try {
// Make the user generator a token
const totp_code = await modalController.mfaEnableTOTP(
secret,
client.user!.username,
);
if (totp_code) {
// Check whether it is valid
await client.api.put(
"/auth/mfa/totp",
{
totp_code,
},
toConfig(ticket.token),
);
// Mark as successful and activated
success = true;
setMFA({
...mfa!,
totp_mfa: true,
});
} else {
break;
}
} catch (err) {}
}
}
}, [mfa]);
const mfaActive = !!mfa?.totp_mfa;
return (
<>
<h3>
<Text id="app.settings.pages.account.2fa.title" />
</h3>
<h5>
<Text id="app.settings.pages.account.2fa.description" />
</h5>
{error && (
<Category compact>
<Error error={error} />
</Category>
)}
<CategoryButton
icon={<ListOl size={24} />}
description={
<Text
id={`app.settings.pages.account.2fa.${
mfa?.recovery_active
? "view_recovery"
: "generate_recovery"
}_long`}
/>
}
disabled={!mfa}
onClick={recoveryAction}>
<Text
id={`app.settings.pages.account.2fa.${
mfa?.recovery_active
? "view_recovery"
: "generate_recovery"
}`}
/>
</CategoryButton>
<CategoryButton
icon={
<Lock
size={24}
color={!mfa?.totp_mfa ? "var(--error)" : undefined}
/>
}
description={"Set up time-based one-time password."}
disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
onClick={totpAction}>
<Text
id={`app.settings.pages.account.2fa.${
mfa?.totp_mfa ? "remove" : "add"
}_auth`}
/>
</CategoryButton>
{mfa && (
<Tip palette={mfaActive ? "primary" : "error"}>
<Text
id={`app.settings.pages.account.2fa.two_factor_${
mfaActive ? "on" : "off"
}`}
/>
</Tip>
)}
</>
);
}

63
src/components/settings/appearance/AdvancedOptions.tsx Normal file
View file

@ -0,0 +1,63 @@
import { observer } from "mobx-react-lite";
import { Text } from "preact-i18n";
import { ObservedInputElement } from "@revoltchat/ui";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { useApplicationState } from "../../../mobx/State";
import {
MonospaceFonts,
MONOSPACE_FONTS,
MONOSPACE_FONT_KEYS,
} from "../../../context/Theme";
/**
* ! LEGACY
* Component providing a way to edit custom CSS.
*/
export const ShimThemeCustomCSS = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
<TextAreaAutoSize
maxRows={20}
minHeight={480}
code
value={theme.getCSS() ?? ""}
onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
/>
</>
);
});
export default function AdvancedOptions() {
const settings = useApplicationState().settings;
return (
<>
{/** Combo box of available monospaced fonts */}
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ObservedInputElement
type="combo"
value={() => settings.theme.getMonospaceFont()}
onChange={(value) =>
settings.theme.setMonospaceFont(value as MonospaceFonts)
}
options={MONOSPACE_FONT_KEYS.map((value) => ({
value,
name: MONOSPACE_FONTS[value as keyof typeof MONOSPACE_FONTS]
.name,
}))}
/>
{/** Custom CSS */}
<ShimThemeCustomCSS />
</>
);
}

63
src/components/settings/appearance/AppearanceOptions.tsx Normal file
View file

@ -0,0 +1,63 @@
import { Text } from "preact-i18n";
import { Column, ObservedInputElement } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
export default function AppearanceOptions() {
const settings = useApplicationState().settings;
return (
<>
<h3>
<Text id="app.settings.pages.appearance.appearance_options.title" />
</h3>
{/* Option to toggle "send message" button on desktop. */}
<ObservedInputElement
type="checkbox"
value={() =>
settings.get("appearance:show_send_button") ?? false
}
onChange={(v) => settings.set("appearance:show_send_button", v)}
title={
<Text id="app.settings.pages.appearance.appearance_options.show_send" />
}
description={
<Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
}
/>
<hr />
<h3>
<Text id="app.settings.pages.appearance.theme_options.title" />
</h3>
<Column>
{/* Option to toggle transparency effects in-app. */}
<ObservedInputElement
type="checkbox"
value={() =>
settings.get("appearance:transparency") ?? true
}
onChange={(v) => settings.set("appearance:transparency", v)}
title={
<Text id="app.settings.pages.appearance.theme_options.transparency" />
}
description={
<Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
}
/>
{/* Option to toggle seasonal effects. */}
<ObservedInputElement
type="checkbox"
value={() => settings.get("appearance:seasonal") ?? true}
onChange={(v) => settings.set("appearance:seasonal", v)}
title={
<Text id="app.settings.pages.appearance.theme_options.seasonal" />
}
description={
<Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
}
/>
</Column>
</>
);
}

70
src/components/settings/appearance/ChatOptions.tsx Normal file
View file

@ -0,0 +1,70 @@
import { observer } from "mobx-react-lite";
import { Text } from "preact-i18n";
import { Column, ObservedInputElement } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { FONTS, Fonts, FONT_KEYS } from "../../../context/Theme";
import { EmojiSelector } from "./legacy/EmojiSelector";
/**
* ! LEGACY
* Component providing a way to change emoji pack.
*/
export const ShimDisplayEmoji = observer(() => {
const settings = useApplicationState().settings;
return (
<EmojiSelector
value={settings.get("appearance:emoji")}
setValue={(v) => settings.set("appearance:emoji", v)}
/>
);
});
export default observer(() => {
const settings = useApplicationState().settings;
return (
<>
<Column>
{/* Combo box of available fonts. */}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ObservedInputElement
type="combo"
value={() => settings.theme.getFont()}
onChange={(value) => settings.theme.setFont(value as Fonts)}
options={FONT_KEYS.map((value) => ({
value,
name: FONTS[value as keyof typeof FONTS].name,
}))}
/>
{/* Option to toggle liagures for supported fonts. */}
{settings.theme.getFont() === "Inter" && (
<ObservedInputElement
type="checkbox"
value={() =>
settings.get("appearance:ligatures") ?? true
}
onChange={(v) =>
settings.set("appearance:ligatures", v)
}
title={
<Text id="app.settings.pages.appearance.ligatures" />
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}
/>
)}
</Column>
<hr />
{/* Emoji pack selector */}
<ShimDisplayEmoji />
</>
);
});

175
src/components/settings/appearance/ThemeOverrides.tsx
View file

@ -1,170 +1,11 @@
import { Pencil } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import styled from "styled-components/macro";
import { useDebounceCallback } from "../../../lib/debounce";
import { useApplicationState } from "../../../mobx/State";
import { Variables } from "../../../context/Theme";
import InputBox from "../../ui/InputBox";
const Container = styled.div`
row-gap: 8px;
display: grid;
column-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin-bottom: 20px;
.entry {
padding: 12px;
margin-top: 8px;
border: 1px solid black;
border-radius: var(--border-radius);
span {
flex: 1;
display: block;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 8px;
text-transform: capitalize;
background: inherit;
background-clip: text;
-webkit-background-clip: text;
}
.override {
gap: 8px;
display: flex;
.picker {
width: 38px;
height: 38px;
display: grid;
cursor: pointer;
place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background);
}
input[type="text"] {
width: 0;
min-width: 0;
flex-grow: 1;
}
}
.input {
width: 0;
height: 0;
position: relative;
input {
opacity: 0;
border: none;
display: block;
cursor: pointer;
position: relative;
top: 48px;
}
}
}
`;
export default observer(() => {
const theme = useApplicationState().settings.theme;
const setVariable = useDebounceCallback(
(data) => {
const { key, value } = data as { key: Variables; value: string };
theme.setVariable(key, value);
},
[theme],
100,
);
import Overrides from "./legacy/ThemeOverrides";
import ThemeTools from "./legacy/ThemeTools";
export default function ThemeOverrides() {
return (
<Container>
{(
[
"accent",
"background",
"foreground",
"primary-background",
"primary-header",
"secondary-background",
"secondary-foreground",
"secondary-header",
"tertiary-background",
"tertiary-foreground",
"block",
"message-box",
"mention",
"scrollbar-thumb",
"scrollbar-track",
"status-online",
"status-away",
"status-busy",
"status-streaming",
"status-invisible",
"success",
"warning",
"error",
"hover",
] as const
).map((key) => (
<div
class="entry"
key={key}
style={{ backgroundColor: theme.getVariable(key) }}>
<div class="input">
<input
type="color"
value={theme.getVariable(key)}
onChange={(el) =>
setVariable({
key,
value: el.currentTarget.value,
})
}
/>
</div>
<span
style={{
color: theme.getContrastingVariable(
key,
theme.getVariable("primary-background"),
),
}}>
{key}
</span>
<div class="override">
<div
class="picker"
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} />
</div>
<InputBox
type="text"
class="text"
value={theme.getVariable(key)}
onChange={(el) =>
setVariable({
key,
value: el.currentTarget.value,
})
}
/>
</div>
</div>
))}
</Container>
<>
<ThemeTools />
<Overrides />
</>
);
});
}

64
src/components/settings/appearance/ThemeSelection.tsx Normal file
View file

@ -0,0 +1,64 @@
import { Brush } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
// @ts-expect-error shade-blend-color does not have typings.
import pSBC from "shade-blend-color";
import { Text } from "preact-i18n";
import { CategoryButton, ObservedInputElement } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { ThemeBaseSelector } from "./legacy/ThemeBaseSelector";
/**
* ! LEGACY
* Component providing a way to switch the base theme being used.
*/
export const ShimThemeBaseSelector = observer(() => {
const theme = useApplicationState().settings.theme;
return (
<ThemeBaseSelector
value={theme.isModified() ? undefined : theme.getBase()}
setValue={(base) => {
theme.setBase(base);
theme.reset();
}}
/>
);
});
export default function ThemeSelection() {
const theme = useApplicationState().settings.theme;
return (
<>
{/** Allow users to change base theme */}
<ShimThemeBaseSelector />
{/** Provide a link to the theme shop */}
<Link to="/discover/themes" replace>
<CategoryButton
icon={<Brush size={24} />}
action="chevron"
description={
<Text id="app.settings.pages.appearance.discover.description" />
}>
<Text id="app.settings.pages.appearance.discover.title" />
</CategoryButton>
</Link>
<hr />
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />
</h3>
<ObservedInputElement
type="colour"
value={theme.getVariable("accent")}
onChange={(colour) => {
theme.setVariable("accent", colour as string);
theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour));
}}
/>
</>
);
}

23
src/components/settings/appearance/EmojiSelector.tsx → src/components/settings/appearance/legacy/EmojiSelector.tsx
View file

@ -2,11 +2,12 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { EmojiPack } from "../../common/Emoji";
import mutantSVG from "./mutant_emoji.svg";
import notoSVG from "./noto_emoji.svg";
import openmojiSVG from "./openmoji_emoji.svg";
import twemojiSVG from "./twemoji_emoji.svg";
import mutantSVG from "./assets/mutant_emoji.svg";
import notoSVG from "./assets/noto_emoji.svg";
import openmojiSVG from "./assets/openmoji_emoji.svg";
import twemojiSVG from "./assets/twemoji_emoji.svg";
import { EmojiPack } from "../../../common/Emoji";
const Container = styled.div`
gap: 12px;
@ -87,10 +88,10 @@ export function EmojiSelector({ value, setValue }: Props) {
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
<Container>
<div class="row">
<div className="row">
<div>
<div
class="button"
className="button"
onClick={() => setValue("mutant")}
data-active={!value || value === "mutant"}>
<img
@ -112,7 +113,7 @@ export function EmojiSelector({ value, setValue }: Props) {
</div>
<div>
<div
class="button"
className="button"
onClick={() => setValue("twemoji")}
data-active={value === "twemoji"}>
<img
@ -125,10 +126,10 @@ export function EmojiSelector({ value, setValue }: Props) {
<h4>Twemoji</h4>
</div>
</div>
<div class="row">
<div className="row">
<div>
<div
class="button"
className="button"
onClick={() => setValue("openmoji")}
data-active={value === "openmoji"}>
<img
@ -142,7 +143,7 @@ export function EmojiSelector({ value, setValue }: Props) {
</div>
<div>
<div
class="button"
className="button"
onClick={() => setValue("noto")}
data-active={value === "noto"}>
<img

1
src/components/settings/appearance/legacy/README.md Normal file
View file

@ -0,0 +1 @@
These components need to be ported to @revoltchat/ui.

4
src/components/settings/appearance/ThemeBaseSelector.tsx → src/components/settings/appearance/legacy/ThemeBaseSelector.tsx
View file

@ -2,8 +2,8 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import darkSVG from "./dark.svg";
import lightSVG from "./light.svg";
import darkSVG from "./assets/dark.svg";
import lightSVG from "./assets/light.svg";
const List = styled.div`
gap: 8px;

170
src/components/settings/appearance/legacy/ThemeOverrides.tsx Normal file
View file

@ -0,0 +1,170 @@
import { Pencil } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import styled from "styled-components/macro";
import { InputBox } from "@revoltchat/ui";
import { useDebounceCallback } from "../../../../lib/debounce";
import { useApplicationState } from "../../../../mobx/State";
import { Variables } from "../../../../context/Theme";
const Container = styled.div`
row-gap: 8px;
display: grid;
column-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin-bottom: 20px;
.entry {
padding: 12px;
margin-top: 8px;
border: 1px solid black;
border-radius: var(--border-radius);
span {
flex: 1;
display: block;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 8px;
text-transform: capitalize;
background: inherit;
background-clip: text;
-webkit-background-clip: text;
}
.override {
gap: 8px;
display: flex;
.picker {
width: 38px;
height: 38px;
display: grid;
cursor: pointer;
place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background);
}
input[type="text"] {
width: 0;
min-width: 0;
flex-grow: 1;
}
}
.input {
width: 0;
height: 0;
position: relative;
input {
opacity: 0;
border: none;
display: block;
cursor: pointer;
position: relative;
top: 48px;
}
}
}
`;
export default observer(() => {
const theme = useApplicationState().settings.theme;
const setVariable = useDebounceCallback(
(data) => {
const { key, value } = data as { key: Variables; value: string };
theme.setVariable(key, value);
},
[theme],
100,
);
return (
<Container>
{(
[
"accent",
"background",
"foreground",
"primary-background",
"primary-header",
"secondary-background",
"secondary-foreground",
"secondary-header",
"tertiary-background",
"tertiary-foreground",
"block",
"message-box",
"mention",
"scrollbar-thumb",
"scrollbar-track",
"status-online",
"status-away",
"status-busy",
"status-streaming",
"status-invisible",
"success",
"warning",
"error",
"hover",
] as const
).map((key) => (
<div
className="entry"
key={key}
style={{ backgroundColor: theme.getVariable(key) }}>
<div className="input">
<input
type="color"
value={theme.getVariable(key)}
onChange={(el) =>
setVariable({
key,
value: el.currentTarget.value,
})
}
/>
</div>
<span
style={{
color: theme.getContrastingVariable(
key,
theme.getVariable("primary-background"),
),
}}>
{key}
</span>
<div className="override">
<div
className="picker"
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} />
</div>
<InputBox
type="text"
className="text"
value={theme.getVariable(key)}
onChange={(el) =>
setVariable({
key,
value: el.currentTarget.value,
})
}
/>
</div>
</div>
))}
</Container>
);
});

36
src/components/settings/appearance/ThemeTools.tsx → src/components/settings/appearance/legacy/ThemeTools.tsx
View file

@ -3,12 +3,12 @@ import styled from "styled-components/macro";
import { Text } from "preact-i18n";
import { useApplicationState } from "../../../mobx/State";
import { Button } from "@revoltchat/ui";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useApplicationState } from "../../../../mobx/State";
import Tooltip from "../../common/Tooltip";
import Button from "../../ui/Button";
import { modalController } from "../../../../controllers/modals/ModalController";
import Tooltip from "../../../common/Tooltip";
const Actions = styled.div`
gap: 8px;
@ -37,7 +37,6 @@ const Actions = styled.div`
`;
export default function ThemeTools() {
const { writeClipboard, openScreen } = useIntermediate();
const theme = useApplicationState().settings.theme;
return (
@ -46,13 +45,18 @@ export default function ThemeTools() {
content={
<Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button contrast iconbutton onClick={theme.reset}>
<Button
palette="secondary"
compact="icon"
onClick={theme.reset}>
<Reset size={22} />
</Button>
</Tooltip>
<div
class="code"
onClick={() => writeClipboard(JSON.stringify(theme))}>
className="code"
onClick={() =>
modalController.writeText(JSON.stringify(theme))
}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{JSON.stringify(theme)}
@ -61,23 +65,15 @@ export default function ThemeTools() {
<Tooltip
content={<Text id="app.settings.pages.appearance.import" />}>
<Button
contrast
iconbutton
palette="secondary"
compact="icon"
onClick={async () => {
try {
const text = await navigator.clipboard.readText();
theme.hydrate(JSON.parse(text));
} catch (err) {
openScreen({
id: "_input",
question: (
<Text id="app.settings.pages.appearance.import_theme" />
),
field: (
<Text id="app.settings.pages.appearance.theme_data" />
),
callback: async (text) =>
theme.hydrate(JSON.parse(text)),
modalController.push({
type: "import_theme",
});
}
}}>

0
src/components/settings/appearance/dark.svg → src/components/settings/appearance/legacy/assets/dark.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
src/components/settings/appearance/light.svg → src/components/settings/appearance/legacy/assets/light.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
src/components/settings/appearance/mutant_emoji.svg → src/components/settings/appearance/legacy/assets/mutant_emoji.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

0
src/components/settings/appearance/noto_emoji.svg → src/components/settings/appearance/legacy/assets/noto_emoji.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
src/components/settings/appearance/openmoji_emoji.svg → src/components/settings/appearance/legacy/assets/openmoji_emoji.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

0
src/components/settings/appearance/twemoji_emoji.svg → src/components/settings/appearance/legacy/assets/twemoji_emoji.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

61
src/components/settings/customisation/EmojiUploader.tsx Normal file
View file

@ -0,0 +1,61 @@
import { Server } from "revolt.js";
import { useState } from "preact/hooks";
import { Form } from "@revoltchat/ui";
import { FileUploader } from "../../../controllers/client/jsx/legacy/FileUploads";
interface Props {
server: Server;
}
export function EmojiUploader({ server }: Props) {
const [fileId, setFileId] = useState<string>();
return (
<>
<h3>Upload Emoji</h3>
<Form
schema={{
name: "text",
file: "custom",
}}
data={{
name: {
field: "Name",
palette: "secondary",
},
file: {
element: (
<FileUploader
style="icon"
width={100}
height={100}
fileType="emojis"
behaviour="upload"
previewAfterUpload
maxFileSize={500000}
remove={async () => void setFileId("")}
onUpload={async (id) => void setFileId(id)}
/>
),
},
}}
submitBtn={{
children: "Save",
palette: "secondary",
disabled: !fileId,
}}
onSubmit={async ({ name }) => {
await server.client.api.put(`/custom/emoji/${fileId}`, {
name,
parent: { type: "Server", id: server._id },
});
setFileId("");
}}
/>
</>
);
}

13
src/components/settings/roles/PermissionSelect.tsx
View file

@ -7,8 +7,7 @@ import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useMemo } from "preact/hooks";
import Checkbox from "../../ui/Checkbox";
import { OverrideSwitch } from "@revoltchat/ui";
import { Checkbox, OverrideSwitch } from "@revoltchat/ui";
interface PermissionSelectProps {
id: keyof typeof Permission;
@ -69,13 +68,13 @@ export function PermissionSelect({
}
return "Neutral";
} else {
}
if (Long.fromNumber(value).and(permission).eq(permission)) {
return "Allow";
}
return "Neutral";
}
}, [value]);
function onSwitch(state: State) {
@ -118,12 +117,12 @@ export function PermissionSelect({
return (
<PermissionEntry disabled={disabled}>
<span class="title">
<span className="title">
<span>
<Text id={`permissions.${id}.t`}>{id}</Text>
{disabled && <Lock className="lock" size={14} />}
</span>
<span class="description">
<span className="description">
<Text id={`permissions.${id}.d`} />
</span>
</span>
@ -136,7 +135,7 @@ export function PermissionSelect({
) : (
<Checkbox
disabled={disabled}
checked={state === "Allow"}
value={state === "Allow"}
onChange={() =>
onChange(
Long.fromNumber(value, false)

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

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

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

@ -1,148 +0,0 @@
import styled, { css } from "styled-components/macro";
interface Props {
readonly compact?: boolean;
readonly accent?: boolean;
readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean;
readonly gold?: boolean;
readonly iconbutton?: boolean;
}
export type ButtonProps = Props &
Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
export default styled.button<Props>`
//z-index: 1;
display: flex;
height: 38px;
min-width: 96px;
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.8125rem;
font-family: inherit;
font-weight: 500;
flex-shrink: 0;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;
background: var(--primary-background);
color: var(--foreground);
border-radius: var(--border-radius);
cursor: pointer;
border: none;
&:hover {
background: var(--secondary-header);
}
&:disabled {
cursor: not-allowed;
background: var(--primary-background);
}
&:active {
background: var(--secondary-background);
}
${(props) =>
props.compact &&
css`
height: 32px !important;
padding: 2px 12px !important;
font-size: 13px;
`}
${(props) =>
props.iconbutton &&
css`
height: 38px !important;
width: 38px !important;
min-width: unset !important;
`}
${(props) =>
props.accent &&
css`
background: var(--accent) !important;
`}
${(props) =>
props.plain &&
css`
background: transparent !important;
&:hover {
text-decoration: underline;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
&:active {
background: var(--secondary-background);
}
`}
${(props) =>
props.contrast &&
css`
padding: 4px 8px;
background: var(--secondary-header);
&:hover {
background: var(--primary-header);
}
&:disabled {
cursor: not-allowed;
background: var(--secondary-header);
}
&:active {
background: var(--secondary-background);
}
`}
${(props) =>
props.error &&
css`
color: white;
font-weight: 600;
background: var(--error);
&:hover {
filter: brightness(1.2);
background: var(--error);
}
&:disabled {
cursor: not-allowed;
background: var(--error);
}
`}
${(props) =>
props.gold &&
css`
color: black;
font-weight: 600;
background: goldenrod;
&:hover {
filter: brightness(1.2);
background: goldenrod;
}
&:disabled {
cursor: not-allowed;
background: goldenrod;
}
`}
`;

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

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

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

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

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

@ -1,162 +0,0 @@
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components/macro";
import { RefObject } from "preact";
import { useRef } from "preact/hooks";
import { useDebounceCallback } from "../../lib/debounce";
interface Props {
value: string;
onChange: (value: string) => void;
}
const presets = [
[
"#7B68EE",
"#3498DB",
"#1ABC9C",
"#F1C40F",
"#FF7F50",
"#FD6671",
"#E91E63",
"#D468EE",
],
[
"#594CAD",
"#206694",
"#11806A",
"#C27C0E",
"#CD5B45",
"#FF424F",
"#AD1457",
"#954AA8",
],
];
const SwatchesBase = styled.div`
/*gap: 8px;*/
display: flex;
input {
width: 0;
height: 0;
top: 72px;
opacity: 0;
padding: 0;
border: 0;
position: relative;
pointer-events: none;
}
.overlay {
position: relative;
width: 0;
div {
width: 8px;
height: 68px;
background: linear-gradient(
to right,
var(--primary-background),
transparent
);
}
}
`;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0;
cursor: pointer;
border-radius: var(--border-radius);
background-color: ${(props) => props.colour};
display: grid;
place-items: center;
&:hover {
border: 3px solid var(--foreground);
transition: border ease-in-out 0.07s;
}
svg {
color: white;
}
${(props) =>
props.type === "small"
? css`
width: 30px;
height: 30px;
svg {
/*stroke-width: 2;*/
}
`
: css`
width: 68px;
height: 68px;
`}
`;
const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
overflow: auto;
padding-bottom: 4px;
> div {
gap: 8px;
display: flex;
flex-direction: row;
padding-inline-start: 8px;
}
`;
export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
const setValue = useDebounceCallback(
(value) => onChange(value as string),
[onChange],
100,
);
return (
<SwatchesBase>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => setValue(ev.currentTarget.value)}
/>
<Swatch
colour={value}
type="large"
onClick={() => ref.current?.click()}>
<Palette size={32} />
</Swatch>
<div class="overlay">
<div />
</div>
<Rows>
{presets.map((row, i) => (
<div key={i}>
{row.map((swatch, i) => (
<Swatch
colour={swatch}
type="small"
key={i}
onClick={() => onChange(swatch)}>
{swatch === value && <Check size={22} />}
</Swatch>
))}
</div>
))}
</Rows>
</SwatchesBase>
);
}

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

@ -1,26 +0,0 @@
import styled from "styled-components/macro";
export default styled.select`
width: 100%;
padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-weight: 500;
font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground);
background: var(--secondary-background);
border: none;
outline: 2px solid transparent;
transition: box-shadow 0.2s ease-in-out;
transition: outline-color 0.2s ease-in-out;
&:focus {
box-shadow: 0 0 0 1.5pt var(--accent);
}
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
`;

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

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

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

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

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

@ -7,93 +7,22 @@ import { observer } from "mobx-react-lite";
import { useLocation } from "react-router-dom";
import styled, { css } from "styled-components/macro";
import { Header } from "@revoltchat/ui";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../mobx/State";
import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
import { Children } from "../../types/Preact";
interface Props {
topBorder?: boolean;
bottomBorder?: boolean;
background?: boolean;
transparent?: boolean;
withBackground?: boolean;
withTransparency?: boolean;
placement: "primary" | "secondary";
}
const Header = styled.div<Props>`
gap: 10px;
flex: 0 auto;
display: flex;
flex-shrink: 0;
padding: 0 16px;
font-weight: 600;
user-select: none;
align-items: center;
height: var(--header-height);
background-size: cover !important;
background-position: center !important;
svg {
flex-shrink: 0;
}
.menu {
margin-inline-end: 8px;
color: var(--secondary-foreground);
}
${(props) =>
props.transparent
? css`
background-color: rgba(
var(--primary-header-rgb),
max(var(--min-opacity), 0.75)
);
backdrop-filter: blur(20px);
z-index: 20;
position: absolute;
width: 100%;
`
: css`
background-color: var(--primary-header);
`}
${(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.topBorder &&
css`
border-start-start-radius: 8px;
`}
${(props) =>
props.bottomBorder &&
css`
border-end-start-radius: 8px;
`}
`;
export default Header;
const IconContainer = styled.div`
display: flex;
align-items: center;
@ -128,7 +57,7 @@ export const PageHeader = observer(
return (
<Header
{...props}
placement="primary"
palette="primary"
topBorder={!visible}
bottomBorder={!pathname.includes("/server")}>
{!noBurger && <HamburgerAction />}

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