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 1697 additions and 780 deletions
src/components/markdown/Emoji.tsx deleted 100644 → 0
View file @ b8fba749
import twemoji from 'twemoji';
var EMOJI_PACK = 'mutant';
const REVISION = 3;
/*export function setEmojiPack(pack: EmojiPacks) {
EMOJI_PACK = pack;
}*/
// Taken from Twemoji source code.
// scripts/build.js#344
// grabTheRightIcon(rawText);
const UFE0Fg = /\uFE0F/g;
const U200D = String.fromCharCode(0x200D);
function toCodePoint(emoji: string) {
return twemoji.convert.toCodePoint(emoji.indexOf(U200D) < 0 ?
emoji.replace(UFE0Fg, '') :
emoji
);
}
function parseEmoji(emoji: string) {
let codepoint = toCodePoint(emoji);
return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
}
export function Emoji({ emoji, size }: { emoji: string, size?: number }) {
return (
<img
alt={emoji}
className="emoji"
draggable={false}
src={parseEmoji(emoji)}
style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
/>
)
}
export function generateEmoji(emoji: string) {
return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(emoji)}" />`;
}
src/components/markdown/Markdown.module.scss
View file @ 1ac5de17
@import "@fontsource/fira-mono/400.css";
.markdown {
:global(.emoji) {
height: 1.25em;
......@@ -14,7 +12,7 @@
margin-bottom: 0;
margin-top: 1px;
margin-right: 2px;
vertical-align: -.3em;
vertical-align: -0.3em;
}
p,
......@@ -28,9 +26,9 @@
&[data-type="mention"] {
padding: 0 6px;
font-weight: 600;
border-radius: 12px;
display: inline-block;
background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
&:hover {
text-decoration: none;
......@@ -63,8 +61,8 @@
blockquote {
margin: 2px 0;
padding: 2px 0;
border-radius: 4px;
background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background);
> * {
......@@ -74,9 +72,8 @@
pre {
padding: 1em;
border-radius: 4px;
overflow-x: scroll;
border-radius: 3px;
border-radius: var(--border-radius);
background: var(--block) !important;
}
......@@ -87,9 +84,9 @@
code {
color: white;
font-size: 90%;
border-radius: 4px;
background: var(--block);
font-family: "Fira Mono", monospace;
border-radius: var(--border-radius);
font-family: var(--monospace-font), monospace;
}
input[type="checkbox"] {
......@@ -116,29 +113,35 @@
cursor: pointer;
user-select: none;
color: transparent;
border-radius: 4px;
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: "Fira Mono", monospace;
font-family: var(--monospace-font), monospace;
:global(.lang) {
// height: 8px;
// position: relative;
width: fit-content;
padding-bottom: 8px;
div {
// margin-left: -5px;
// margin-top: -16px;
// position: absolute;
color: #111;
cursor: pointer;
padding: 2px 6px;
......@@ -157,10 +160,6 @@
box-shadow: 0 1px #787676;
}
}
// ! FIXME: had to change this temporarily due to overflow
width: fit-content;
padding-bottom: 8px;
}
}
......@@ -177,18 +176,18 @@
input[type="checkbox"] + label:before {
width: 12px;
height: 12px;
content: 'a';
content: "a";
font-size: 10px;
margin-right: 6px;
line-height: 12px;
position: relative;
border-radius: 4px;
background: white;
position: relative;
display: inline-block;
border-radius: var(--border-radius);
}
input[type="checkbox"][checked="true"] + label:before {
content: '✓';
content: "✓";
align-items: center;
display: inline-flex;
justify-content: center;
......
src/components/markdown/Markdown.tsx
View file @ 1ac5de17
import { Suspense, lazy } from "preact/compat";
const Renderer = lazy(() => import('./Renderer'));
const Renderer = lazy(() => import("./Renderer"));
export interface MarkdownProps {
content?: string;
......@@ -9,9 +9,9 @@ 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-expect-error No typings.
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-expect-error No typings.
import MarkdownSub from "markdown-it-sub";
// @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 { generateEmoji } from "./Emoji";
import { useContext } from "preact/hooks";
import { MarkdownProps } from "./Markdown";
import styles from "./Markdown.module.scss";
import { useCallback, useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import Prism from "prismjs";
import "katex/dist/katex.min.css";
import "prismjs/themes/prism-tomorrow.css";
import { generateEmoji } from "../common/Emoji";
import MarkdownKatex from "@traptitech/markdown-it-katex";
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
import { emojiDictionary } from "../../assets/emojis";
import { MarkdownProps } from "./Markdown";
// @ts-ignore
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
// @ts-ignore
import MarkdownSup from "markdown-it-sup";
// @ts-ignore
import MarkdownSub from "markdown-it-sub";
// 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 as any).copycode = function(element: HTMLDivElement) {
window.copycode = function (element: HTMLDivElement) {
try {
let code = element.parentElement?.parentElement?.children[1];
const code = element.parentElement?.parentElement?.children[1];
if (code) {
navigator.clipboard.writeText((code as any).innerText.trim());
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
}
} catch (e) {}
};
......@@ -36,97 +48,46 @@ export const md: MarkdownIt = MarkdownIt({
breaks: true,
linkify: true,
highlight: (str, lang) => {
let v = Prism.languages[lang];
const v = Prism.languages[lang];
if (v) {
let out = Prism.highlight(str, v, lang);
const out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
}
return `<pre class="code"><code>${md.utils.escapeHtml(str)}</code></pre>`;
}
})
.disable("image")
.use(MarkdownEmoji/*, { defs: emojiDictionary }*/)
.use(MarkdownSpoilers)
.use(MarkdownSup)
.use(MarkdownSub)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0
});
// ? Force links to open _blank.
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender =
md.renderer.rules.link_open ||
function(tokens, idx, options, _env, self) {
return self.renderToken(tokens, idx, options);
};
// Handler for internal links, pushes events to React using magic.
if (typeof window !== "undefined") {
(window as any).internalHandleURL = function(element: HTMLAnchorElement) {
const url = new URL(element.href, location as any);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
//InternalEventEmitter.emit("openProfile", pathname.substr(2));
} else {
//InternalEventEmitter.emit("navigate", pathname);
}
};
}
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
let internal;
const hIndex = tokens[idx].attrIndex("href");
if (hIndex >= 0) {
try {
// For internal links, we should use our own handler to use react-router history.
// @ts-ignore
const href = tokens[idx].attrs[hIndex][1];
const url = new URL(href, location as any);
if (url.hostname === location.hostname) {
internal = true;
// I'm sorry.
tokens[idx].attrPush([
"onclick",
"internalHandleURL(this); return false"
]);
if (url.pathname.startsWith("/@")) {
tokens[idx].attrPush(["data-type", "mention"]);
}
}
} catch (err) {
// Ignore the error, treat as normal link.
}
}
if (!internal) {
// Add target=_blank for external links.
const aIndex = tokens[idx].attrIndex("target");
if (aIndex < 0) {
tokens[idx].attrPush(["target", "_blank"]);
} else {
try {
// @ts-ignore
tokens[idx].attrs[aIndex][1] = "_blank";
} catch (_) {}
}
return `<pre class="code"><code>${md.utils.escapeHtml(
str,
)}</code></pre>`;
},
})
.disable("image")
.use(MarkdownEmoji, { defs: emojiDictionary })
.use(MarkdownSpoilers)
.use(MarkdownSup)
.use(MarkdownSub)
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0,
maxSize: 10,
strict: false,
errorColor: "var(--error)",
});
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
internalHandleURL: (element: HTMLAnchorElement) => void;
}
}
return defaultRender(tokens, idx, options, env, self);
};
md.renderer.rules.emoji = function(token, idx) {
md.renderer.rules.emoji = function (token, idx) {
return generateEmoji(token[idx].content);
};
const RE_TWEMOJI = /:(\w+):/g;
// ! FIXME: Move to library
const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const client = useContext(AppContext);
if (typeof content === "undefined") return null;
......@@ -134,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.
let 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) {
......@@ -145,26 +105,102 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
}
return sub;
}
);
})
.replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
const id = args[0] as string,
channel = client.channels.get(id);
const useLargeEmojis = disallowBigEmoji ? false : content.replace(RE_TWEMOJI, '').trim().length === 0;
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;
const url = new URL(element.href, location.href);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
const id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault();
internalEmit("Intermediate", "openProfile", id);
}
} else {
ev.preventDefault();
internalEmit("Intermediate", "navigate", pathname);
}
}
}, []);
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.removeAttribute("data-type");
element.removeAttribute("target");
let internal;
const href = element.href;
if (href) {
try {
const url = new URL(href, location.href);
if (url.hostname === location.hostname) {
internal = true;
element.addEventListener(
"click",
handleLink,
);
if (url.pathname.startsWith("/@")) {
element.setAttribute(
"data-type",
"mention",
);
}
}
} catch (err) {}
}
if (!internal) {
element.setAttribute("target", "_blank");
}
},
);
}
}}
className={styles.markdown}
dangerouslySetInnerHTML={{
__html: md.render(newContent)
__html: md.render(newContent),
}}
data-large-emojis={useLargeEmojis}
onClick={ev => {
if (ev.target) {
let element: Element = ev.target as any;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
}
}}
/>
);
}
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 0 → 100644
View file @ 1ac5de17
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 { connectState } from "../../redux/connector";
import { LastOpened } from "../../redux/reducers/last_opened";
import { useClient } from "../../context/revoltjs/RevoltClient";
import UserIcon from "../common/user/UserIcon";
import IconButton from "../ui/IconButton";
const Base = styled.div`
background: var(--secondary-background);
`;
const Navbar = styled.div`
z-index: 100;
max-width: 500px;
margin: 0 auto;
display: flex;
height: var(--bottom-navigation-height);
`;
const Button = styled.a<{ active: boolean }>`
flex: 1;
> a,
> div,
> a > div {
width: 100%;
height: 100%;
}
> div,
> a > div {
padding: 0 20px;
}
${(props) =>
props.active &&
css`
background: var(--hover);
`}
`;
interface Props {
lastOpened: LastOpened;
}
export const BottomNavigation = observer(({ lastOpened }: Props) => {
const client = useClient();
const user = client.users.get(client.user!._id);
const history = useHistory();
const path = useLocation().pathname;
const channel_id = lastOpened["home"];
const friendsActive = path.startsWith("/friends");
const settingsActive = path.startsWith("/settings");
const homeActive = !(friendsActive || settingsActive);
return (
<Base>
<Navbar>
<Button active={homeActive}>
<IconButton
onClick={() => {
if (settingsActive) {
if (history.length > 0) {
history.goBack();
}
}
if (channel_id) {
history.push(`/channel/${channel_id}`);
} else {
history.push("/");
}
}}>
<Message size={24} />
</IconButton>
</Button>
<Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends">
<IconButton>
<Group size={25} />
</IconButton>
</ConditionalLink>
</Button>
{/*<Button active={searchActive}>
<ConditionalLink active={searchActive} to="/search">
<IconButton>
<Search size={25} />
</IconButton>
</ConditionalLink>
</Button>
<Button active={inboxActive}>
<ConditionalLink active={inboxActive} to="/inbox">
<IconButton>
<Inbox size={25} />
</IconButton>
</ConditionalLink>
</Button>*/}
<Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings">
<IconButton>
<UserIcon target={user} size={26} status={true} />
</IconButton>
</ConditionalLink>
</Button>
</Navbar>
</Base>
);
});
export default connectState(BottomNavigation, (state) => {
return {
lastOpened: state.lastOpened,
};
});
src/components/navigation/LeftSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
import SidebarBase from "./SidebarBase";
import HomeSidebar from "./left/HomeSidebar";
import ServerListSidebar from "./left/ServerListSidebar";
import ServerSidebar from "./left/ServerSidebar";
import HomeSidebar from "./left/HomeSidebar";
export default function LeftSidebar() {
return (
......@@ -29,4 +29,4 @@ export default function LeftSidebar() {
</Switch>
</SidebarBase>
);
};
}
src/components/navigation/RightSidebar.tsx
View file @ 1ac5de17
import { Route, Switch } from "react-router";
import SidebarBase from "./SidebarBase";
// import { MemberSidebar } from "./right/MemberSidebar";
import SidebarBase from "./SidebarBase";
import MemberSidebar from "./right/MemberSidebar";
export default function RightSidebar() {
return (
<SidebarBase>
<Switch>
{/*
<Route path="/server/:server/channel/:channel">
<MemberSidebar />
</Route>
<Route path="/channel/:channel">
<MemberSidebar />
</Route> */ }
</Route>
</Switch>
</SidebarBase>
);
};
}
src/components/navigation/SidebarBase.tsx
View file @ 1ac5de17
import styled from "styled-components";
import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
export default styled.div`
height: 100%;
......@@ -7,3 +9,30 @@ export default styled.div`
flex-direction: row;
align-items: stretch;
`;
export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
height: 100%;
width: 240px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
border-end-start-radius: 8px;
${(props) =>
props.padding &&
isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
export const GenericSidebarList = styled.div`
padding: 6px;
flex-grow: 1;
overflow-y: scroll;
> img {
width: 100%;
}
`;
src/components/navigation/items/ButtonItem.tsx
View file @ 1ac5de17
import classNames from 'classnames';
import { X, Crown } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./Item.module.scss";
import Tooltip from '../../common/Tooltip';
import IconButton from '../../ui/IconButton';
import UserIcon from '../../common/UserIcon';
import classNames from "classnames";
import { attachContextMenu } from "preact-context-menu";
import { Localizer, Text } from "preact-i18n";
import { X, Zap } from "@styled-icons/feather";
import UserStatus from '../../common/UserStatus';
import { Children } from "../../../types/Preact";
import ChannelIcon from '../../common/ChannelIcon';
import { attachContextMenu } from 'preact-context-menu';
import { Channels, Users } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from '../../../context/intermediate/Intermediate';
import { stopPropagation } from "../../../lib/stopPropagation";
interface CommonProps {
active?: boolean
alert?: 'unread' | 'mention'
alertCount?: number
}
import { useIntermediate } from "../../../context/intermediate/Intermediate";
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>,
"children" | "as"
> & {
active?: boolean;
alert?: "unread" | "mention";
alertCount?: number;
};
type UserProps = CommonProps & {
user: Users.User,
context?: Channels.Channel,
channel?: Channels.DirectMessageChannel
}
user: User;
context?: Channel;
channel?: Channel;
};
export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
export const UserButton = observer((props: UserProps) => {
const { active, alert, alertCount, user, context, channel, ...divProps } =
props;
const { openScreen } = useIntermediate();
return (
<div
{...divProps}
className={classNames(styles.item, styles.user)}
data-active={active}
data-alert={typeof alert === 'string'}
data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)}
onContextMenu={attachContextMenu('Menu', {
data-alert={typeof alert === "string"}
data-online={
typeof channel !== "undefined" ||
(user.online && user.status?.presence !== Presence.Invisible)
}
onContextMenu={attachContextMenu("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id
contextualChannel: context?._id,
})}>
<div className={styles.avatar}>
<UserIcon target={user} size={32} status />
</div>
<UserIcon
className={styles.avatar}
target={user}
size={32}
status
/>
<div className={styles.name}>
<div>{user.username}</div>
<div>
<Username user={user} />
</div>
{
<div className={styles.subText}>
{ channel?.last_message && alert ? (
channel.last_message.short
{channel?.last_message && alert ? (
(channel.last_message as { short: string }).short
) : (
<UserStatus user={user} />
) }
)}
</div>
}
</div>
<div className={styles.button}>
{ context?.channel_type === "Group" &&
context.owner === user._id && (
{context?.channel_type === "Group" &&
context.owner_id === user._id && (
<Localizer>
<Tooltip
content={
<Text id="app.main.groups.owner" />
}
>
<Zap size={20} />
content={<Text id="app.main.groups.owner" />}>
<Crown size={20} />
</Tooltip>
</Localizer>
)}
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
{ !isTouchscreenDevice && channel &&
{!isTouchscreenDevice && channel && (
<IconButton
className={styles.icon}
onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
onClick={(e) =>
stopPropagation(e) &&
openScreen({
id: "special_prompt",
type: "close_dm",
target: channel,
})
}>
<X size={24} />
</IconButton>
}
)}
</div>
</div>
)
}
);
});
type ChannelProps = CommonProps & {
channel: Channels.Channel,
user?: Users.User
compact?: boolean
}
channel: Channel & { unread?: string };
user?: User;
compact?: boolean;
};
export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) {
if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
if (channel.channel_type === 'DirectMessage') {
if (typeof user === 'undefined') throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />
export const ChannelButton = observer((props: ChannelProps) => {
const { active, alert, alertCount, channel, user, compact, ...divProps } =
props;
if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
if (channel.channel_type === "DirectMessage") {
if (typeof user === "undefined") throw "No user provided.";
return <UserButton {...{ active, alert, channel, user }} />;
}
const { openScreen } = useIntermediate();
return (
<div
{...divProps}
data-active={active}
data-alert={typeof alert === 'string'}
data-alert={typeof alert === "string"}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu('Menu', { channel: channel._id })}>
<div className={styles.avatar}>
<ChannelIcon target={channel} size={compact ? 24 : 32} />
</div>
onContextMenu={attachContextMenu("Menu", {
channel: channel._id,
unread: typeof channel.unread !== "undefined",
})}>
<ChannelIcon
className={styles.avatar}
target={channel}
size={compact ? 24 : 32}
/>
<div className={styles.name}>
<div>{channel.name}</div>
{ channel.channel_type === 'Group' &&
{channel.channel_type === "Group" && (
<div className={styles.subText}>
{(channel.last_message && alert) ? (
channel.last_message.short
{channel.last_message && alert ? (
(channel.last_message as { short: string }).short
) : (
<Text
id="quantities.members"
plural={channel.recipients.length}
fields={{ count: channel.recipients.length }}
plural={channel.recipients!.length}
fields={{ count: channel.recipients!.length }}
/>
)}
</div>
}
)}
</div>
<div className={styles.button}>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
{!isTouchscreenDevice && channel.channel_type === "Group" && (
<IconButton
className={styles.icon}
onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}>
onClick={() =>
openScreen({
id: "special_prompt",
type: "leave_group",
target: channel,
})
}>
<X size={24} />
</IconButton>
)}
</div>
</div>
)
}
);
});
type ButtonProps = CommonProps & {
onClick?: () => void
children?: Children
className?: string
compact?: boolean
}
onClick?: () => void;
children?: Children;
className?: string;
compact?: boolean;
};
export default function ButtonItem(props: ButtonProps) {
const {
active,
alert,
alertCount,
onClick,
className,
children,
compact,
...divProps
} = props;
export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
return (
<div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
<div
{...divProps}
className={classNames(
styles.item,
{ [styles.compact]: compact, [styles.normal]: !compact },
className,
)}
onClick={onClick}
data-active={active}
data-alert={typeof alert === 'string'}>
<div className={styles.content}>{ children }</div>
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
data-alert={typeof alert === "string"}>
<div className={styles.content}>{children}</div>
{alert && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>
)}
</div>
)
);
}
src/components/navigation/items/ConnectionStatus.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import Banner from "../../ui/Banner";
import { useContext } from "preact/hooks";
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import {
ClientStatus,
StatusContext,
} from "../../../context/revoltjs/RevoltClient";
import Banner from "../../ui/Banner";
export default function ConnectionStatus() {
const status = useContext(StatusContext);
......
src/components/navigation/items/Item.module.scss
View file @ 1ac5de17
.item {
height: 48px;
height: 42px;
display: flex;
padding: 0 8px;
user-select: none;
border-radius: 6px;
margin-bottom: 2px;
border-radius: var(--border-radius);
gap: 8px;
align-items: center;
......@@ -15,20 +15,19 @@
transition: .1s ease-in-out background-color;
color: var(--tertiary-foreground);
stroke: var(--tertiary-foreground);
&.normal {
height: 38px;
height: 42px;
}
&.compact {
&.compact { /* TOFIX: Introduce two separate compact items, one for settings, other for channels. */
height: 32px;
}
&.user {
opacity: 0.4;
cursor: pointer;
transition: .15s ease opacity;
transition: .1s ease-in-out opacity;
&[data-online="true"],
&:hover {
......@@ -47,7 +46,7 @@
transition: color .1s ease-in-out;
&.content {
gap: 8px;
gap: 10px;
flex-grow: 1;
min-width: 0;
display: flex;
......@@ -66,6 +65,7 @@
}
&.avatar {
display: flex;
flex-shrink: 0;
}
......@@ -117,7 +117,6 @@
&[data-alert="true"], &[data-active="true"], &:hover {
color: var(--foreground);
stroke: var(--foreground);
.subText {
color: var(--secondary-foreground) !important;
......@@ -146,158 +145,21 @@
}
}
/* ! FIXME: check if anything is missing, then remove this block
.olditem {
display: flex;
user-select: none;
align-items: center;
flex-direction: row;
gap: 8px;
height: 48px;
padding: 0 8px;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
box-sizing: content-box;
transition: .1s ease background-color;
color: var(--tertiary-foreground);
stroke: var(--tertiary-foreground);
.avatar {
flex-shrink: 0;
height: 32px;
flex-shrink: 0;
padding: 10px 0;
box-sizing: content-box;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: color .1s ease-in-out;
&.content {
gap: 8px;
flex-grow: 1;
min-width: 0;
display: flex;
align-items: center;
flex-direction: row;
svg {
flex-shrink: 0;
}
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&.name {
flex-grow: 1;
display: flex;
flex-direction: column;
font-size: .90625rem;
font-weight: 600;
.subText {
font-size: .6875rem;
margin-top: -1px;
color: var(--tertiary-foreground);
font-weight: 500;
}
}
@media (pointer: coarse) {
.item {
height: 40px;
&.unread {
width: 6px;
height: 6px;
margin: 9px;
flex-shrink: 0;
border-radius: 50%;
background: var(--foreground);
}
&.compact {
height: var(--bottom-navigation-height);
&.button {
flex-shrink: 0;
> div {
gap: 20px;
.icon {
opacity: 0;
display: none;
transition: 0.1s ease opacity;
> svg {
height: 24px;
width: 24px;
}
}
}
}
&[data-active="true"] {
color: var(--foreground);
stroke: var(--foreground);
background: var(--hover);
cursor: default;
.subText {
color: var(--secondary-foreground) !important;
}
.unread {
display: none;
}
}
&[data-alert="true"] {
color: var(--secondary-foreground);
}
&[data-type="user"] {
opacity: 0.4;
color: var(--foreground);
transition: 0.15s ease opacity;
cursor: pointer;
&[data-online="true"],
&:hover {
opacity: 1;
//background: none;
}
}
&[data-size="compact"] {
margin-bottom: 2px;
height: 32px;
transition: border-inline-start .1s ease-in-out;
border-inline-start: 4px solid transparent;
&[data-active="true"] {
border-inline-start: 4px solid var(--accent);
border-radius: 4px;
}
}
&[data-size="small"] {
margin-bottom: 2px;
height: 42px;
}
&:hover {
background: var(--hover);
div.button .unread {
display: none;
}
div.button .icon {
opacity: 1;
display: block;
}
}
}*/
}
\ No newline at end of file
src/components/navigation/left/HomeSidebar.tsx
View file @ 1ac5de17
import { Localizer, Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { Home, Users, Tool, Save } from "@styled-icons/feather";
import {
Home,
UserDetail,
Wrench,
Notepad,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
import { WithDispatcher } from "../../../redux/reducers";
import { Unreads } from "../../../redux/reducers/unreads";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannels, useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { Users as UsersNS } from 'revolt.js/dist/api/objects';
import Category from "../../ui/Category";
import placeholderSVG from "../items/placeholder.svg";
import { mapChannelWithUnread, useUnreads } from "./common";
import { Channels } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import ConnectionStatus from '../items/ConnectionStatus';
import ButtonItem, { ChannelButton } from '../items/ButtonItem';
import styled from "styled-components";
import UserHeader from "../../common/UserHeader";
import Category from '../../ui/Category';
import PaintCounter from "../../../lib/PaintCounter";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
type Props = WithDispatcher & {
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
type Props = {
unreads: Unreads;
}
const HomeBase = styled.div`
height: 100%;
width: 240px;
display: flex;
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
`;
const HomeList = styled.div`
padding: 6px;
flex-grow: 1;
overflow-y: scroll;
> svg {
width: 100%;
}
`;
function HomeSidebar(props: Props) {
};
const HomeSidebar = observer((props: Props) => {
const { pathname } = useLocation();
const client = useContext(AppContext);
const { channel } = useParams<{ channel: string }>();
const { openScreen } = useIntermediate();
const ctx = useForceUpdate();
const channels = useDMs(ctx);
const channels = [...client.channels.values()]
.filter(
(x) =>
x.channel_type === "DirectMessage" ||
x.channel_type === "Group",
)
.map((x) => mapChannelWithUnread(x, props.unreads));
const obj = channels.find(x => x?._id === channel);
const obj = client.channels.get(channel);
if (channel && !obj) return <Redirect to="/" />;
if (obj) useUnreads({ ...props, channel: obj });
const channelsArr = channels
.filter(x => x.channel_type !== 'SavedMessages')
.map(x => mapChannelWithUnread(x, props.unreads));
useEffect(() => {
if (!channel) return;
const users = useUsers(
(channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
.reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
, ctx);
dispatch({
type: "LAST_OPENED_SET",
parent: "home",
child: channel,
});
}, [channel]);
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
return (
<HomeBase>
<UserHeader user={client.user!} />
<GenericSidebarBase padding>
<ConnectionStatus />
<HomeList>
<GenericSidebarList>
<ConditionalLink active={pathname === "/"} to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span>
<Text id="app.navigation.tabs.home" />
</span>
</ButtonItem>
</ConditionalLink>
{!isTouchscreenDevice && (
<>
<Link to="/">
<ButtonItem active={pathname === "/"}>
<Home size={20} />
<span><Text id="app.navigation.tabs.home" /></span>
</ButtonItem>
</Link>
<Link to="/friends">
<ConditionalLink
active={pathname === "/friends"}
to="/friends">
<ButtonItem
active={pathname === "/friends"}
alert={
typeof users.find(
user =>
typeof [...client.users.values()].find(
(user) =>
user?.relationship ===
UsersNS.Relationship.Incoming
) !== "undefined" ? 'unread' : undefined
}
>
<Users size={20} />
<span><Text id="app.navigation.tabs.friends" /></span>
RelationshipStatus.Incoming,
) !== "undefined"
? "unread"
: undefined
}>
<UserDetail size={20} />
<span>
<Text id="app.navigation.tabs.friends" />
</span>
</ButtonItem>
</Link>
</ConditionalLink>
</>
)}
<Link to="/open/saved">
<ConditionalLink
active={obj?.channel_type === "SavedMessages"}
to="/open/saved">
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
<Save size={20} />
<span><Text id="app.navigation.tabs.saved" /></span>
<Notepad size={20} />
<span>
<Text id="app.navigation.tabs.saved" />
</span>
</ButtonItem>
</Link>
</ConditionalLink>
{import.meta.env.DEV && (
<Link to="/dev">
<ButtonItem active={pathname === "/dev"}>
<Tool size={20} />
<span><Text id="app.navigation.tabs.dev" /></span>
<Wrench size={20} />
<span>
<Text id="app.navigation.tabs.dev" />
</span>
</ButtonItem>
</Link>
)}
<Localizer>
<Category
text={
(
<Text id="app.main.categories.conversations" />
) as any
}
action={() => openScreen({ id: "special_input", type: "create_group" })}
/>
</Localizer>
{channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />}
{channelsArr.map(x => {
<Category
text={<Text id="app.main.categories.conversations" />}
action={() =>
openScreen({
id: "special_input",
type: "create_group",
})
}
/>
{channels.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{channels.map((x) => {
let user;
if (x.channel_type === 'DirectMessage') {
let recipient = client.channels.getRecipient(x._id);
user = users.find(x => x!._id === recipient);
if (x.channel.channel_type === "DirectMessage") {
if (!x.channel.active) return null;
user = x.channel.recipient;
if (!user) {
console.warn(
`Skipped DM ${x.channel._id} because user was missing.`,
);
return null;
}
}
return (
<Link to={`/channel/${x._id}`}>
<ConditionalLink
key={x.channel._id}
active={x.channel._id === channel}
to={`/channel/${x.channel._id}`}>
<ChannelButton
user={user}
channel={x}
channel={x.channel}
alert={x.unread}
alertCount={x.alertCount}
active={x._id === channel}
active={x.channel._id === channel}
/>
</Link>
</ConditionalLink>
);
})}
<PaintCounter />
</HomeList>
</HomeBase>
</GenericSidebarList>
</GenericSidebarBase>
);
};
});
export default connectState(
HomeSidebar,
state => {
(state) => {
return {
unreads: state.unreads
unreads: state.unreads,
};
},
true,
true
);
src/components/navigation/left/ServerListSidebar.tsx
View file @ 1ac5de17
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import { Plus } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact";
import { attachContextMenu } from "preact-context-menu";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { attachContextMenu } from 'preact-context-menu';
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { connectState } from "../../../redux/connector";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { Unreads } from "../../../redux/reducers/unreads";
import { Channel, Servers } from "revolt.js/dist/api/objects";
import { Link, useLocation, useParams } from "react-router-dom";
import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
import logoSVG from '../../../assets/logo.svg';
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
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 { mapChannelWithUnread } from "./common";
import { Children } from "../../../types/Preact";
function Icon({
children,
unread,
size,
}: {
children: Children;
unread?: "mention" | "unread";
size: number;
}) {
return (
<svg
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32"
>
<foreignObject x="0" y="0" width="32" height="32">
{ children }
<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="27"
r="5"
fill={"white"}
/>
{unread === "unread" && (
<circle cx="27" cy="5" r="5" fill={"white"} />
)}
{unread === 'mention' && (
<circle
cx="27"
cy="27"
r="5"
fill={"red"}
/>
{unread === "mention" && (
<circle cx="27" cy="5" r="5" fill={"var(--error)"} />
)}
</svg>
)
);
}
const ServersBase = styled.div`
width: 52px;
width: 56px;
height: 100%;
padding-left: 2px;
display: flex;
flex-direction: column;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
const ServerList = styled.div`
flex-grow: 1;
display: flex;
overflow-y: scroll;
padding-bottom: 48px;
padding-bottom: 20px;
/*width: 58px;*/
flex-direction: column;
border-inline-end: 2px solid var(--sidebar-active);
scrollbar-width: none;
......@@ -68,149 +87,250 @@ const ServerList = styled.div`
&::-webkit-scrollbar {
width: 0px;
}
/*${isTouchscreenDevice &&
css`
width: 58px;
`}*/
`;
const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
height: 44px;
padding: 4px;
margin: 2px 0 2px 4px;
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
height: 58px;
display: flex;
align-items: center;
:focus {
outline: 3px solid blue;
}
> div {
height: 42px;
padding-inline-start: 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
display: grid;
place-items: center;
img {
width: 32px;
height: 32px;
border-start-start-radius: 50%;
border-end-start-radius: 50%;
&:active {
transform: translateY(1px);
}
${(props) =>
props.active &&
css`
&:active {
transform: none;
}
`}
}
${ props => props.active && css`
background: var(--sidebar-active);
` }
> span {
width: 0;
display: relative;
${(props) =>
!props.active &&
css`
display: none;
`}
${ props => props.active && props.invert && css`
img {
filter: saturate(0) brightness(10);
svg {
margin-top: 5px;
pointer-events: none;
// outline: 1px solid red;
}
` }
}
${(props) =>
(!props.active || props.home) &&
css`
cursor: pointer;
`}
`;
function Swoosh() {
return (
<span>
<svg
width="54"
height="106"
viewBox="0 0 54 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="var(--sidebar-active)"
/>
<path
d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
fill="var(--sidebar-active)"
/>
<path
d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
fill="var(--sidebar-active)"
/>
</svg>
</span>
);
}
interface Props {
unreads: Unreads;
lastOpened: LastOpened;
}
export function ServerListSidebar({ unreads }: Props) {
const ctx = useForceUpdate();
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[])
.map(x => mapChannelWithUnread(x, unreads));
const unreadChannels = channels.filter(x => x.unread)
.map(x => x._id);
export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
const client = useClient();
const servers = activeServers.map(server => {
const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? client.servers.get(server_id) : undefined;
const activeServers = [...client.servers.values()];
const channels = [...client.channels.values()].map((x) =>
mapChannelWithUnread(x, unreads),
);
const unreadChannels = channels
.filter((x) => x.unread)
.map((x) => x.channel?._id);
const servers = activeServers.map((server) => {
let alertCount = 0;
for (let id of server.channels) {
let channel = channels.find(x => x._id === id);
for (const id of server.channel_ids) {
const channel = channels.find((x) => x.channel?._id === id);
if (channel?.alertCount) {
alertCount += channel.alertCount;
}
}
return {
...server,
unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ?
( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined,
alertCount
}
server,
unread: (typeof server.channel_ids.find((x) =>
unreadChannels.includes(x),
) !== "undefined"
? alertCount > 0
? "mention"
: "unread"
: undefined) as "mention" | "unread" | undefined,
alertCount,
};
});
const history = useHistory();
const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>();
const server = servers.find(x => x!._id == server_id);
const { openScreen } = useIntermediate();
// const { openScreen } = useContext(IntermediateContext);
let homeUnread: 'mention' | 'unread' | undefined;
let homeUnread: "mention" | "unread" | undefined;
let alertCount = 0;
for (let x of channels) {
if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) {
homeUnread = 'unread';
for (const x of channels) {
if (
(x.channel?.channel_type === "DirectMessage"
? x.channel?.active
: x.channel?.channel_type === "Group") &&
x.unread
) {
homeUnread = "unread";
alertCount += x.alertCount ?? 0;
}
}
if (alertCount > 0) homeUnread = 'mention';
if (
[...client.users.values()].find(
(x) => x.relationship === RelationshipStatus.Incoming,
)
) {
alertCount++;
}
if (alertCount > 0) homeUnread = "mention";
const homeActive =
typeof server === "undefined" && !path.startsWith("/invite");
return (
<ServersBase>
<ServerList>
<Link to={`/`}>
<ServerEntry invert
active={typeof server === 'undefined' && !path.startsWith('/invite')}>
<Icon size={36} unread={homeUnread}>
<img src={logoSVG} />
</Icon>
<ConditionalLink
active={homeActive}
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<ServerEntry home active={homeActive}>
<Swoosh />
<div
onContextMenu={attachContextMenu("Status")}
onClick={() =>
homeActive && history.push("/settings")
}>
<UserHover user={client.user}>
<Icon size={42} unread={homeUnread}>
<UserIcon
target={client.user}
size={32}
status
hover
/>
</Icon>
</UserHover>
</div>
</ServerEntry>
</Link>
</ConditionalLink>
<LineDivider />
{
servers.map(entry =>
<Link to={`/server/${entry!._id}`}>
{servers.map((entry) => {
const active = entry.server._id === server?._id;
const id = lastOpened[entry.server._id];
return (
<ConditionalLink
key={entry.server._id}
active={active}
to={`/server/${entry.server._id}${
id ? `/channel/${id}` : ""
}`}>
<ServerEntry
active={entry!._id === server?._id}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Icon size={36} unread={entry.unread}>
<ServerIcon size={32} target={entry} />
</Icon>
active={active}
onContextMenu={attachContextMenu("Menu", {
server: entry.server._id,
})}>
<Swoosh />
<Tooltip
content={entry.server.name}
placement="right">
<Icon size={42} unread={entry.unread}>
<ServerIcon
size={32}
target={entry.server}
/>
</Icon>
</Tooltip>
</ServerEntry>
</Link>
)
}
</ConditionalLink>
);
})}
<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Plus size={36} />
</IconButton>
{/*<IconButton
onClick={() =>
openScreen({
id: "special_input",
type: "create_server",
})
}>
<Compass size={36} />
</IconButton>*/}
<PaintCounter small />
</ServerList>
</ServersBase>
// ! FIXME: add overlay back
/*<div className={styles.servers}>
<div className={styles.list}>
<Link to={`/`}>
<div className={styles.entry}
data-active={typeof server === 'undefined' && !path.startsWith('/invite')}>
<Icon size={36} unread={homeUnread} alertCount={alertCount}>
<div className={styles.logo} />
</Icon>
</div>
</Link>
<LineDivider className={styles.divider} />
{
servers.map(entry =>
<Link to={`/server/${entry!._id}`}>
<div className={styles.entry}
data-active={entry!._id === server?._id}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Icon size={36} unread={entry.unread}>
<ServerIcon id={entry!._id} size={32} />
</Icon>
</div>
</Link>
)
}
</div>
<div className={styles.overlay}>
<div className={styles.actions}>
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
<PlusCircle size={36} />
</IconButton>
</div>
</div>
</div> */
)
}
);
});
export default connectState(
ServerListSidebar,
state => {
return {
unreads: state.unreads
};
}
);
export default connectState(ServerListSidebar, (state) => {
return {
unreads: state.unreads,
lastOpened: state.lastOpened,
};
});
src/components/navigation/left/ServerSidebar.tsx
View file @ 1ac5de17
import { Link } from "react-router-dom";
import { Settings } from "@styled-icons/feather";
import { observer } from "mobx-react-lite";
import { Redirect, useParams } from "react-router";
import { ChannelButton } from "../items/ButtonItem";
import { Channels } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions";
import styled, { css } from "styled-components";
import { attachContextMenu } from "preact-context-menu";
import { useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
import { WithDispatcher } from "../../../redux/reducers";
import { useChannels, useForceUpdate, useServer, useServerPermission } from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import ServerHeader from "../../common/ServerHeader";
import Category from "../../ui/Category";
import { mapChannelWithUnread, useUnreads } from "./common";
import Header from '../../ui/Header';
import ConnectionStatus from '../items/ConnectionStatus';
import { connectState } from "../../../redux/connector";
import PaintCounter from "../../../lib/PaintCounter";
import styled from "styled-components";
import { attachContextMenu } from 'preact-context-menu';
import { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
interface Props {
unreads: Unreads;
......@@ -26,6 +34,13 @@ const ServerBase = styled.div`
flex-shrink: 0;
flex-direction: column;
background: var(--secondary-background);
border-start-start-radius: 8px;
overflow: hidden;
${isTouchscreenDevice &&
css`
padding-bottom: 50px;
`}
`;
const ServerList = styled.div`
......@@ -38,60 +53,93 @@ const ServerList = styled.div`
}
`;
function ServerSidebar(props: Props & WithDispatcher) {
const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
const ctx = useForceUpdate();
const ServerSidebar = observer((props: Props) => {
const client = useClient();
const { server: server_id, channel: channel_id } =
useParams<{ server: string; channel?: string }>();
const server = useServer(server_id, ctx);
const server = client.servers.get(server_id);
if (!server) return <Redirect to="/" />;
const permissions = useServerPermission(server._id, ctx);
const channels = (useChannels(server.channels, ctx)
.filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel>[])
.map(x => mapChannelWithUnread(x, props.unreads));
const channel = channels.find(x => x?._id === channel_id);
if (channel) useUnreads({ ...props, channel }, ctx);
const channel = channel_id ? client.channels.get(channel_id) : undefined;
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
if (channel) useUnreads({ ...props, channel });
useEffect(() => {
if (!channel_id) return;
dispatch({
type: "LAST_OPENED_SET",
parent: server_id!,
child: channel_id!,
});
}, [channel_id, server_id]);
const uncategorised = new Set(server.channel_ids);
const elements = [];
function addChannel(id: string) {
const entry = client.channels.get(id);
if (!entry) return;
const active = channel?._id === entry._id;
return (
<ConditionalLink
key={entry._id}
active={active}
to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton
channel={entry}
active={active}
// ! FIXME: pull it out directly
alert={mapChannelWithUnread(entry, props.unreads).unread}
compact
/>
</ConditionalLink>
);
}
if (server.categories) {
for (const category of server.categories) {
const channels = [];
for (const id of category.channels) {
uncategorised.delete(id);
channels.push(addChannel(id));
}
elements.push(
<CollapsibleSection
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
{channels}
</CollapsibleSection>,
);
}
}
for (const id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}
return (
<ServerBase>
<Header placement="secondary" background style={{ background: `url('${ctx.client.servers.getBannerURL(server._id, { width: 480 }, true)}')` }}>
<div>
{ server.name }
</div>
{ (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
{/*<IconButton to={`/server/${server._id}/settings`}>*/}
<Settings size={24} />
{/*</IconButton>*/}
</div> }
</Header>
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
{channels.map(entry => {
return (
<Link to={`/server/${server._id}/channel/${entry._id}`}>
<ChannelButton
key={entry._id}
channel={entry}
active={channel?._id === entry._id}
alert={entry.unread}
compact
/>
</Link>
);
})}
<ServerList
onContextMenu={attachContextMenu("Menu", {
server_list: server._id,
})}>
{elements}
</ServerList>
<PaintCounter small />
</ServerBase>
)
};
export default connectState(
ServerSidebar,
state => {
return {
unreads: state.unreads
};
},
true
);
);
});
export default connectState(ServerSidebar, (state) => {
return {
unreads: state.unreads,
};
});
src/components/navigation/left/common.ts
View file @ 1ac5de17
import { Channel } from "revolt.js";
import { reaction } from "mobx";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useLayoutEffect } from "preact/hooks";
import { WithDispatcher } from "../../../redux/reducers";
import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = WithDispatcher & {
type UnreadProps = {
channel: Channel;
unreads: Unreads;
}
export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
const ctx = useForceUpdate(context);
};
export function useUnreads({ channel, unreads }: UnreadProps) {
useLayoutEffect(() => {
function checkUnread(target?: Channel) {
function checkUnread(target: Channel) {
if (!target) return;
if (target._id !== channel._id) return;
if (target?.channel_type === "SavedMessages") return;
if (
target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel"
)
return;
const unread = unreads[channel._id]?.last_id;
if (target.last_message) {
const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
const message =
typeof target.last_message === "string"
? target.last_message
: target.last_message._id;
if (!unread || (unread && message.localeCompare(unread) > 0)) {
dispatcher({
dispatch({
type: "UNREADS_MARK_READ",
channel: channel._id,
message,
request: true
});
channel.ack(message);
}
}
}
checkUnread(channel);
ctx.client.channels.addListener("mutation", checkUnread);
return () => ctx.client.channels.removeListener("mutation", checkUnread);
return reaction(
() => channel.last_message,
() => checkUnread(channel),
);
}, [channel, unreads]);
}
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
let last_message_id;
if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
last_message_id = channel.last_message?._id;
} else if (channel.channel_type === 'TextChannel') {
last_message_id = channel.last_message;
if (
channel.channel_type === "DirectMessage" ||
channel.channel_type === "Group"
) {
last_message_id = (channel.last_message as { _id: string })?._id;
} else if (channel.channel_type === "TextChannel") {
last_message_id = channel.last_message as string;
} else {
return { ...channel, unread: undefined, alertCount: undefined, timestamp: channel._id };
return {
channel,
unread: undefined,
alertCount: undefined,
timestamp: channel._id,
};
}
let unread: 'mention' | 'unread' | undefined;
let unread: "mention" | "unread" | undefined;
let alertCount: undefined | number;
if (last_message_id && unreads) {
const u = unreads[channel._id];
if (u) {
if (u.mentions && u.mentions.length > 0) {
alertCount = u.mentions.length;
unread = 'mention';
} else if (u.last_id && last_message_id.localeCompare(u.last_id) > 0) {
unread = 'unread';
unread = "mention";
} else if (
u.last_id &&
(last_message_id as string).localeCompare(u.last_id) > 0
) {
unread = "unread";
}
} else {
unread = 'unread';
unread = "unread";
}
}
return {
...channel,
channel,
timestamp: last_message_id ?? channel._id,
unread,
alertCount
alertCount,
};
}
src/components/navigation/right/ChannelDebugInfo.tsx 0 → 100644
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { useRenderState } from "../../../lib/renderer/Singleton";
interface Props {
id: string;
}
export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null;
const view = useRenderState(id);
if (!view) return null;
return (
<span style={{ display: "block", padding: "12px 10px 0 10px" }}>
<span
style={{
display: "block",
fontSize: "12px",
textTransform: "uppercase",
fontWeight: "600",
}}>
Channel Info
</span>
<p style={{ fontSize: "10px", userSelect: "text" }}>
State: <b>{view.type}</b> <br />
{view.type === "RENDER" && view.messages.length > 0 && (
<>
Start: <b>{view.messages[0]._id}</b> <br />
End:{" "}
<b>
{view.messages[view.messages.length - 1]._id}
</b>{" "}
<br />
At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
</>
)}
</p>
</span>
);
}
src/components/navigation/right/MemberSidebar.tsx 0 → 100644
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { observer } from "mobx-react-lite";
import { Link, useParams } from "react-router-dom";
import { Presence } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import CollapsibleSection from "../../common/CollapsibleSection";
import Button from "../../ui/Button";
import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
const { channel: channel_id } = useParams<{ channel: string }>();
const client = useClient();
const channel = obj ?? client.channels.get(channel_id);
switch (channel?.channel_type) {
case "Group":
return <GroupMemberSidebar channel={channel} />;
case "TextChannel":
return <ServerMemberSidebar channel={channel} />;
default:
return null;
}
}
export const GroupMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const { openScreen } = useIntermediate();
const members = channel.recipients?.filter(
(x) => typeof x !== "undefined",
);
/*const voice = useContext(VoiceContext);
const voiceActive = voice.roomId === channel._id;
let voiceParticipants: User[] = [];
if (voiceActive) {
const idArray = Array.from(voice.participants.keys());
voiceParticipants = idArray
.map(x => users.find(y => y?._id === x))
.filter(x => typeof x !== "undefined") as User[];
members = members.filter(member => idArray.indexOf(member._id) === -1);
voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
}*/
members?.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a!.online && a!.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b!.online && b!.status?.presence !== Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a!.username.localeCompare(b!.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
{/*voiceActive && voiceParticipants.length !== 0 && (
<Fragment>
<Category
type="members"
text={
<span>
<Text id="app.main.categories.participants" />{" "}
— {voiceParticipants.length}
</span>
}
/>
{voiceParticipants.map(
user =>
user && (
<LinkProfile user_id={user._id}>
<UserButton
key={user._id}
user={user}
context={channel}
/>
</LinkProfile>
)
)}
</Fragment>
)*/}
<CollapsibleSection
sticky
id="members"
defaultValue
summary={
<Category
variant="uniform"
text={
<span>
<Text id="app.main.categories.members" />{" "}
— {channel.recipients?.length ?? 0}
</span>
}
/>
}>
{members?.length === 0 && (
<img src={placeholderSVG} loading="eager" />
)}
{members?.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel!}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
export const ServerMemberSidebar = observer(
({ channel }: { channel: Channel }) => {
const client = useClient();
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
useEffect(() => {
if (status === ClientStatus.ONLINE) {
channel.server!.fetchMembers();
}
}, [status, channel.server]);
const users = [...client.members.keys()]
.map((x) => JSON.parse(x))
.filter((x) => x.server === channel.server_id)
.map((y) => client.users.get(y.user)!)
.filter((z) => typeof z !== "undefined");
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
const l =
+(
(a.online && a.status?.presence !== Presence.Invisible) ??
false
) | 0;
const r =
+(
(b.online && b.status?.presence !== Presence.Invisible) ??
false
) | 0;
const n = r - l;
if (n !== 0) {
return n;
}
return a.username.localeCompare(b.username);
});
return (
<GenericSidebarBase>
<GenericSidebarList>
<ChannelDebugInfo id={channel._id} />
<Search channel={channel} />
<div>{users.length === 0 && <Preloader type="ring" />}</div>
{users.length > 0 && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
id="members"
defaultValue
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users?.length ?? 0}
</span>
}>
{users.map(
(user) =>
user && (
<UserButton
key={user._id}
user={user}
context={channel}
onClick={() =>
openScreen({
id: "profile",
user_id: user._id,
})
}
/>
),
)}
</CollapsibleSection>
)}
</GenericSidebarList>
</GenericSidebarBase>
);
},
);
function Search({ channel }: { channel: Channel }) {
if (!getState().experiments.enabled?.includes("search")) return null;
type Sort = "Relevance" | "Latest" | "Oldest";
const [sort, setSort] = useState<Sort>("Relevance");
const [query, setV] = useState("");
const [results, setResults] = useState<Message[]>([]);
async function search() {
const data = await channel.searchWithUsers({ query, sort });
setResults(data.messages);
}
return (
<CollapsibleSection
sticky
id="search"
defaultValue={false}
summary={
<>
<Text id="app.main.channel.search.title" /> (BETA)
</>
}>
<div style={{ display: "flex" }}>
{["Relevance", "Latest", "Oldest"].map((key) => (
<Button
key={key}
style={{ flex: 1, minWidth: 0 }}
compact
error={sort === key}
onClick={() => setSort(key as Sort)}>
<Text
id={`app.main.channel.search.sort.${key.toLowerCase()}`}
/>
</Button>
))}
</div>
<InputBox
style={{ width: "100%" }}
onKeyDown={(e) => e.key === "Enter" && search()}
value={query}
onChange={(e) => setV(e.currentTarget.value)}
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "4px",
marginTop: "8px",
}}>
{results.map((message) => {
let href = "";
if (channel?.channel_type === "TextChannel") {
href += `/server/${channel.server_id}`;
}
href += `/channel/${message.channel_id}/${message._id}`;
return (
<Link to={href} key={message._id}>
<div
style={{
margin: "2px",
padding: "6px",
background: "var(--primary-background)",
}}>
<b>@{message.author?.username}</b>
<br />
{message.content}
</div>
</Link>
);
})}
</div>
</CollapsibleSection>
);
}
src/components/ui/Button.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components";
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;
padding: 8px;
font-size: 16px;
text-align: center;
display: flex;
height: 38px;
min-width: 96px;
align-items: center;
justify-content: center;
padding: 2px 16px;
font-size: 0.875rem;
font-family: inherit;
font-weight: 500;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;
......@@ -17,7 +31,7 @@ export default styled.button<Props>`
background: var(--primary-background);
color: var(--foreground);
border-radius: 6px;
border-radius: var(--border-radius);
cursor: pointer;
border: none;
......@@ -26,6 +40,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--primary-background);
}
......@@ -33,6 +48,47 @@ export default styled.button<Props>`
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`
......@@ -44,6 +100,7 @@ export default styled.button<Props>`
}
&:disabled {
cursor: not-allowed;
background: var(--secondary-header);
}
......@@ -56,14 +113,35 @@ export default styled.button<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;
}
`}
`;
src/components/ui/Category.tsx
View file @ 1ac5de17
import { Plus } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
import { Plus } from "@styled-icons/feather";
const CategoryBase = styled.div<Pick<Props, 'variant'>>`
const CategoryBase = styled.div<Pick<Props, "variant">>`
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
margin-top: 4px;
padding: 6px 10px;
padding: 6px 0;
margin-bottom: 4px;
white-space: nowrap;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
svg {
stroke: var(--foreground);
cursor: pointer;
}
${ props => props.variant === 'uniform' && css`
padding-top: 6px;
` }
&:first-child {
margin-top: 0;
padding-top: 0;
}
${(props) =>
props.variant === "uniform" &&
css`
padding-top: 6px;
`}
`;
interface Props {
type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "action"
> & {
text: Children;
action?: () => void;
variant?: 'default' | 'uniform';
}
variant?: "default" | "uniform";
};
export default function Category(props: Props) {
const { text, action, ...otherProps } = props;
return (
<CategoryBase>
{props.text}
{props.action && (
<Plus size={16} onClick={props.action} />
)}
<CategoryBase {...otherProps}>
{text}
{action && <Plus size={16} onClick={action} />}
</CategoryBase>
);
};
}