Skip to content
Snippets Groups Projects

Compare revisions

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

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 385 additions and 193 deletions
src/components/common/messaging/attachments/AttachmentActions.tsx
View file @ 1ac5de17
......@@ -5,7 +5,7 @@ import {
Headphone,
Video,
} from "@styled-icons/boxicons-regular";
import { Attachment } from "revolt.js/dist/api/objects";
import { Attachment } from "revolt-api/types/Autumn";
import styles from "./AttachmentActions.module.scss";
import classNames from "classnames";
......
src/components/common/messaging/attachments/MessageReply.tsx
View file @ 1ac5de17
import { Reply } from "@styled-icons/boxicons-regular";
import { File } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
......@@ -11,17 +12,12 @@ import { useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useData } from "../../../../mobx/State";
import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
interface Props {
channel: string;
channel: Channel;
index: number;
id: string;
}
......@@ -36,12 +32,24 @@ export const ReplyBase = styled.div<{
display: flex;
margin-inline-start: 30px;
margin-inline-end: 12px;
margin-bottom: 4px;
/*margin-bottom: 4px;*/
font-size: 0.8em;
user-select: none;
align-items: center;
color: var(--secondary-foreground);
&::before {
content: "";
height: 10px;
width: 28px;
margin-inline-end: 2px;
align-self: flex-end;
display: flex;
border-top: 2.2px solid var(--tertiary-foreground);
border-inline-start: 2.2px solid var(--tertiary-foreground);
border-start-start-radius: 6px;
}
* {
overflow: hidden;
white-space: nowrap;
......@@ -49,12 +57,13 @@ export const ReplyBase = styled.div<{
}
.user {
gap: 4px;
gap: 6px;
display: flex;
flex-shrink: 0;
font-weight: 600;
overflow: visible;
align-items: center;
padding: 2px 0;
span {
cursor: pointer;
......@@ -72,6 +81,7 @@ export const ReplyBase = styled.div<{
}
.content {
padding: 2px 0;
gap: 4px;
display: flex;
cursor: pointer;
......@@ -93,9 +103,9 @@ export const ReplyBase = styled.div<{
pointer-events: none;
}
> span {
/*> span > p {
display: flex;
}
}*/
}
> svg:first-child {
......@@ -124,13 +134,11 @@ export const ReplyBase = styled.div<{
`;
export const MessageReply = observer(({ index, channel, id }: Props) => {
const ctx = useForceUpdate();
const view = useRenderState(channel);
const view = useRenderState(channel._id);
if (view?.type !== "RENDER") return null;
const [message, setMessage] = useState<MessageObject | undefined>(
undefined,
);
const [message, setMessage] = useState<Message | undefined>(undefined);
useLayoutEffect(() => {
// ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
const m = view.messages.find((x) => x._id === id);
......@@ -138,16 +146,13 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
if (m) {
setMessage(m);
} else {
ctx.client.channels
.fetchMessage(channel, id)
.then((m) => setMessage(mapMessage(m)));
channel.fetchMessage(id).then(setMessage);
}
}, [view.messages]);
}, [id, channel, view.messages]);
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
......@@ -155,45 +160,52 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
);
}
const store = useData();
const user = store.users.get(message.author);
const history = useHistory();
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{user?.relationship === Users.Relationship.Blocked ? (
<>
<Text id="app.main.channel.misc.blocked_user" />
</>
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<>
{message.author === SYSTEM_USER_ID ? (
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : (
<>
<div className="user">
<UserShort user={user} size={16} />
<UserShort user={message.author} size={16} />
</div>
<div
className="content"
onClick={() => {
const obj =
ctx.client.channels.get(channel);
if (obj?.channel_type === "TextChannel") {
const channel = message.channel!;
if (
channel.channel_type === "TextChannel"
) {
console.log(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
history.push(
`/server/${obj.server}/channel/${obj._id}/${message._id}`,
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel}/${message._id}`,
`/channel/${channel._id}/${message._id}`,
);
}
}}>
{message.attachments &&
message.attachments.length > 0 && (
{message.attachments && (
<>
<File size={16} />
)}
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown
disallowBigEmoji
content={(
......
src/components/common/messaging/attachments/TextFile.tsx
View file @ 1ac5de17
import axios from "axios";
import { Attachment } from "revolt.js/dist/api/objects";
import { Attachment } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import { useContext, useEffect, useState } from "preact/hooks";
......@@ -60,7 +60,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(false);
});
}
}, [content, loading, status]);
}, [content, loading, status, attachment._id, attachment.size, url]);
return (
<div
......
src/components/common/messaging/bars/FilePreview.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
......@@ -186,7 +187,9 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
<Container>
<Carousel>
{state.files.map((file, index) => (
<>
// @ts-expect-error brokey
// eslint-disable-next-line react/jsx-no-undef
<Fragment key={file.name}>
{index === CAN_UPLOAD_AT_ONCE && <Divider />}
<FileEntry
index={index}
......@@ -198,7 +201,7 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
: undefined
}
/>
</>
</Fragment>
))}
{state.type === "attached" && (
<EmptyEntry onClick={addFile}>
......
src/components/common/messaging/bars/ReplyBar.tsx
View file @ 1ac5de17
import {
At,
Reply as ReplyIcon,
File,
XCircle,
} from "@styled-icons/boxicons-regular";
import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
import { File, XCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components";
......@@ -14,11 +10,8 @@ import { StateUpdater, useEffect } from "preact/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useData } from "../../../../mobx/State";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
......@@ -34,26 +27,50 @@ interface Props {
const Base = styled.div`
display: flex;
padding: 0 22px;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
div {
> div {
flex-grow: 1;
}
margin-bottom: 0;
.actions {
gap: 12px;
display: flex;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
font-size: 12px;
align-items: center;
font-weight: 600;
}
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.message {
display: flex;
}
.actions {
gap: 12px;
display: flex;
}
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
}
}*/
`;
// ! FIXME: Move to global config
......@@ -66,9 +83,9 @@ export default observer(({ channel, replies, setReplies }: Props) => {
(id) =>
replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) &&
setReplies([...replies, { id, mention: false }]),
setReplies([...replies, { id: id as string, mention: false }]),
);
}, [replies]);
}, [replies, setReplies]);
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
......@@ -76,9 +93,6 @@ export default observer(({ channel, replies, setReplies }: Props) => {
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
const store = useData();
const users = messages.map((x) => store.users.get(x.author));
return (
<div>
{replies.map((reply, index) => {
......@@ -94,26 +108,37 @@ export default observer(({ channel, replies, setReplies }: Props) => {
</span>
);
const user = users[index];
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<UserShort user={user} size={16} />
{message.attachments &&
message.attachments.length > 0 && (
<File size={16} />
<div class="username">
<UserShort user={message.author} size={16} />
</div>
<div class="message">
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
</div>
</ReplyBase>
<span class="actions">
<IconButton
......
src/components/common/messaging/bars/TypingIndicator.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { User } from "revolt.js";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { TextReact } from "../../../../lib/i18n";
import { useData } from "../../../../mobx/State";
import { connectState } from "../../../../redux/connector";
import { TypingUser } from "../../../../redux/reducers/typing";
import {
AppContext,
useClient,
} from "../../../../context/revoltjs/RevoltClient";
import { useUsers } from "../../../../context/revoltjs/hooks";
import { Username } from "../../user/UserShort";
interface Props {
typing?: TypingUser[];
channel: Channel;
}
const Base = styled.div`
......@@ -66,43 +52,44 @@ const Base = styled.div`
}
`;
export const TypingIndicator = observer(({ typing }: Props) => {
if (typing && typing.length > 0) {
const client = useClient();
const store = useData();
const users = typing
.map((x) => store.users.get(x.id)!)
.filter((x) => typeof x !== "undefined");
export default observer(({ channel }: Props) => {
const users = channel.typing.filter(
(x) =>
typeof x !== "undefined" &&
x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
if (users.length > 0) {
users.sort((a, b) =>
a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
);
let text;
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) {
const userlist = [...users].map((x) => <Username user={x} />);
const userlist = [...users].map((x) => x!.username);
const user = userlist.pop();
for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, <>, </>);
}
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
text = (
<TextReact
<Text
id="app.main.channel.typing.multiple"
fields={{
user,
userlist,
userlist: userlist.join(", "),
}}
/>
);
} else {
text = (
<TextReact
<Text
id="app.main.channel.typing.single"
fields={{ user: <Username user={users[0]} /> }}
fields={{ user: users[0]!.username }}
/>
);
}
......@@ -113,12 +100,9 @@ export const TypingIndicator = observer(({ typing }: Props) => {
<div className="avatars">
{users.map((user) => (
<img
key={user!._id}
loading="eager"
src={client.users.getAvatarURL(
user._id,
{ max_side: 256 },
true,
)}
src={user!.generateAvatarURL({ max_side: 256 })}
/>
))}
</div>
......@@ -130,9 +114,3 @@ export const TypingIndicator = observer(({ typing }: Props) => {
return null;
});
export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
return {
typing: state.typing && state.typing[props.id],
};
});
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import classNames from "classnames";
......@@ -11,7 +11,7 @@ import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/Me
import EmbedMedia from "./EmbedMedia";
interface Props {
embed: EmbedRJS;
embed: EmbedI;
}
const MAX_EMBED_WIDTH = 480;
......
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import { Embed } from "revolt.js/dist/api/objects";
/* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import { LinkExternal } from "@styled-icons/boxicons-regular";
import { EmbedImage } from "revolt.js/dist/api/objects";
import { EmbedImage } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
......
src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "../../../mobx";
import { User } from "revolt.js/dist/maps/Users";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
......
src/components/common/user/UserHeader.tsx
View file @ 1ac5de17
import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { openContextMenu } from "preact-context-menu";
import { Text } from "preact-i18n";
import { Localizer } from "preact-i18n";
import { Text, Localizer } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { User } from "../../../mobx";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton";
import Tooltip from "../Tooltip";
import UserIcon from "./UserIcon";
import UserStatus from "./UserStatus";
const HeaderBase = styled.div`
......
src/components/common/user/UserHover.tsx
View file @ 1ac5de17
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { User } from "../../../mobx";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
......
src/components/common/user/UserIcon.tsx
View file @ 1ac5de17
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import { useContext } from "preact/hooks";
......@@ -8,7 +9,6 @@ import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { User } from "../../../mobx";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
......@@ -22,10 +22,10 @@ interface Props extends IconBaseProps<User> {
export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext);
return user?.online && user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle
return user?.online && user?.status?.presence !== Presence.Invisible
? user?.status?.presence === Presence.Idle
? theme["status-away"]
: user?.status?.presence === Users.Presence.Busy
: user?.status?.presence === Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"];
......@@ -52,19 +52,23 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
`;
export default observer(
(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) => {
(
props: Props &
Omit<
JSX.SVGAttributes<SVGSVGElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const {
target,
attachment,
size,
voice,
status,
animate,
mask,
children,
as,
hover,
...svgProps
} = props;
const iconURL =
......@@ -72,14 +76,14 @@ export default observer(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ??
(target ? client.users.getDefaultAvatarURL(target._id) : fallback);
) ?? (target ? target.defaultAvatarURL : fallback);
return (
<IconBase
{...svgProps}
width={size}
height={size}
hover={hover}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject
......@@ -87,6 +91,7 @@ export default observer(
y="0"
width="32"
height="32"
class="icon"
mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} loading="lazy" />}
</foreignObject>
......
src/components/common/user/UserShort.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
import { User } from "../../../mobx";
import {
useForceUpdate,
useMember,
useServer,
} from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "./UserIcon";
......@@ -21,30 +16,35 @@ export const Username = observer(
let username = user?.username;
let color;
/* // ! FIXME: this must be really bad for perf.
if (user) {
let { server } = useParams<{ server?: string }>();
const { server } = useParams<{ server?: string }>();
if (server) {
let ctx = useForceUpdate();
let member = useMember(`${server}${user._id}`, ctx);
const client = useClient();
const member = client.members.getKey({
server,
user: user._id,
});
if (member) {
if (member.nickname) {
username = member.nickname;
}
if (member.roles && member.roles.length > 0) {
let s = useServer(server, ctx);
for (let role of member.roles) {
let c = s?.roles?.[role].colour;
if (c) {
color = c;
continue;
const srv = client.servers.get(member._id.server);
if (srv?.roles) {
for (const role of member.roles) {
const c = srv.roles[role].colour;
if (c) {
color = c;
continue;
}
}
}
}
}
}
} */
}
return (
<span {...otherProps} style={{ color }}>
......
src/components/common/user/UserStatus.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Users } from "revolt.js/dist/api/objects";
import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
import { User } from "../../../mobx";
import Tooltip from "../Tooltip";
interface Props {
......@@ -25,15 +25,15 @@ export default observer(({ user, tooltip }: Props) => {
return <>{user.status.text}</>;
}
if (user.status?.presence === Users.Presence.Busy) {
if (user.status?.presence === Presence.Busy) {
return <Text id="app.status.busy" />;
}
if (user.status?.presence === Users.Presence.Idle) {
if (user.status?.presence === Presence.Idle) {
return <Text id="app.status.idle" />;
}
if (user.status?.presence === Users.Presence.Invisible) {
if (user.status?.presence === Presence.Invisible) {
return <Text id="app.status.offline" />;
}
......
src/components/markdown/Markdown.module.scss
View file @ 1ac5de17
......@@ -118,6 +118,7 @@
> * {
opacity: 0;
pointer-events: none;
}
&:global(.shown) {
......@@ -128,6 +129,7 @@
> * {
opacity: 1;
pointer-events: unset;
}
}
}
......
src/components/markdown/Markdown.tsx
View file @ 1ac5de17
......@@ -9,7 +9,7 @@ export interface MarkdownProps {
export default function Markdown(props: MarkdownProps) {
return (
// @ts-expect-error
// @ts-expect-error Typings mis-match.
<Suspense fallback={props.content}>
<Renderer {...props} />
</Suspense>
......
src/components/markdown/Renderer.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import "katex/dist/katex.min.css";
import MarkdownIt from "markdown-it";
// @ts-ignore
// @ts-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-ignore
// @ts-expect-error No typings.
import MarkdownSub from "markdown-it-sub";
// @ts-ignore
// @ts-expect-error No typings.
import MarkdownSup from "markdown-it-sup";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
import { RE_MENTIONS } from "revolt.js";
import styles from "./Markdown.module.scss";
import { useCallback, useContext, useRef } from "preact/hooks";
import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
......@@ -67,6 +68,8 @@ export const md: MarkdownIt = MarkdownIt({
throwOnError: false,
maxExpand: 0,
maxSize: 10,
strict: false,
errorColor: "var(--error)",
});
// TODO: global.d.ts file for defining globals
......@@ -92,10 +95,9 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
// 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_MENTIONS,
(sub: string, ...args: any[]) => {
const id = args[0],
const newContent = content
.replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
user = client.users.get(id);
if (user) {
......@@ -103,20 +105,17 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
}
return sub;
},
).replace(
RE_CHANNELS,
(sub: string, ...args: any[]) => {
const id = args[0],
})
.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}/channel/${id})`;
if (channel?.channel_type === "TextChannel") {
return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
}
return sub;
},
);
});
const useLargeEmojis = disallowBigEmoji
? false
......
src/components/native/Titlebar.tsx 0 → 100644
View file @ 1ac5de17
import { Wrench } from "@styled-icons/boxicons-solid";
import styled from "styled-components";
import UpdateIndicator from "../common/UpdateIndicator";
const TitlebarBase = styled.div`
height: var(--titlebar-height);
display: flex;
user-select: none;
align-items: center;
.drag {
flex-grow: 1;
-webkit-app-region: drag;
margin-top: 10px;
height: 100%;
}
.quick {
color: var(--secondary-foreground);
> div,
> div > div {
width: var(--titlebar-height) !important;
}
&.disabled {
color: var(--error);
}
&.unavailable {
background: var(--error);
}
}
.title {
-webkit-app-region: drag;
/*height: var(--titlebar-height);*/
font-size: 16px;
font-weight: 600;
margin-inline-start: 10px;
margin-top: 10px;
gap: 6px;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 90000;
color: var(--titlebar-logo-color);
svg {
margin-bottom: 10px;
}
svg:first-child {
height: calc(var(--titlebar-height) / 3);
}
}
.actions {
z-index: 100;
display: flex;
align-items: center;
margin-inline-start: 6px;
div {
width: calc(
var(--titlebar-height) + var(--titlebar-action-padding)
);
height: var(--titlebar-height);
display: grid;
place-items: center;
transition: 0.2s ease color;
transition: 0.2s ease background-color;
&:hover {
background: var(--primary-background);
}
&.error:hover {
background: var(--error);
}
}
}
`;
export function Titlebar() {
return (
<TitlebarBase>
<div class="title">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 193.733 37.438">
<path
d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
transform="translate(1.586 11.18)"
fill="var(--titlebar-logo-color)"
stroke="var(--titlebar-logo-color)"
stroke-width="1"
/>
</svg>
{window.native.getConfig().build === "dev" && (
<Wrench size="12.5" />
)}
</div>
{/*<div class="actions quick">
<Tooltip
content="Mute"
placement="bottom">
<div onClick={window.native.min}>
<Microphone size={15}/>
</div>
</Tooltip>
<Tooltip
content="Deafen"
placement="bottom">
<div onClick={window.native.min}>
<VolumeFull size={15}/>
</div>
</Tooltip>
</div>*/}
<div class="drag" />
<UpdateIndicator style="titlebar" />
<div class="actions">
<div onClick={window.native.min}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
fill="currentColor"
width="10"
height="1"
x="1"
y="6"
/>
</svg>
</div>
<div onClick={window.native.max}>
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<rect
width="9"
height="9"
x="1.5"
y="1.5"
fill="none"
stroke="currentColor"
/>
</svg>
</div>
<div onClick={window.native.close} class="error">
<svg
aria-hidden="false"
width="12"
height="12"
viewBox="0 0 12 12">
<polygon
fill="currentColor"
stroke-width="1"
fill-rule="evenodd"
points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
style="stroke:currentColor;stroke-width:0.4"
/>
</svg>
</div>
</div>
</TitlebarBase>
);
}
src/components/navigation/BottomNavigation.tsx
View file @ 1ac5de17
import { Search } from "@styled-icons/boxicons-regular";
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { Message, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components";
import ConditionalLink from "../../lib/ConditionalLink";
import { useData } from "../../mobx/State";
import { connectState } from "../../redux/connector";
import { LastOpened } from "../../redux/reducers/last_opened";
......@@ -55,8 +53,7 @@ interface Props {
export const BottomNavigation = observer(({ lastOpened }: Props) => {
const client = useClient();
const store = useData();
const user = store.users.get(client.user!._id);
const user = client.users.get(client.user!._id);
const history = useHistory();
const path = useLocation().pathname;
......