cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-01-12 15:31:26 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'master' into cleanup

Browse source
This commit is contained in:
bree 2021-07-04 21:06:30 -04:00
commit 3c2a85a3e4
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 1B2E56B9EC985B96
50 changed files with 686 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 24766f8f5c2147ba866af922e3f5f42ad3ea44e4
Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b

19
package.json
View file

@ -25,8 +25,23 @@
"preact": "^10.5.13"
},
"devDependencies": {
"@fontsource/fira-mono": "^4.4.5",
"@fontsource/atkinson-hyperlegible": "^4.4.5",
"@fontsource/bree-serif": "^4.4.5",
"@fontsource/comic-neue": "^4.4.5",
"@fontsource/fira-code": "^4.4.5",
"@fontsource/inter": "^4.4.5",
"@fontsource/lato": "^4.4.5",
"@fontsource/montserrat": "^4.4.5",
"@fontsource/noto-sans": "^4.4.5",
"@fontsource/open-sans": "^4.4.5",
"@fontsource/poppins": "^4.4.5",
"@fontsource/raleway": "^4.4.5",
"@fontsource/roboto": "^4.4.5",
"@fontsource/roboto-mono": "^4.4.5",
"@fontsource/source-code-pro": "^4.4.5",
"@fontsource/space-mono": "^4.4.5",
"@fontsource/ubuntu": "^4.4.5",
"@fontsource/ubuntu-mono": "^4.4.5",
"@hcaptcha/react-hcaptcha": "^0.3.6",
"@preact/preset-vite": "^2.0.0",
"@rollup/plugin-replace": "^2.4.2",
@ -86,7 +101,7 @@
"typescript": "^4.3.2",
"ulid": "^2.3.0",
"use-resize-observer": "^7.0.0",
"vite": "^2.3.7",
"vite": "npm:@insertish/vite@2.2.4-dynamic-import-css-f428476",
"vite-plugin-pwa": "^0.8.1",
"workbox-precaching": "^6.1.5"
}

50
src/components/common/CollapsibleSection.tsx Normal file
View file

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

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

@ -24,14 +24,16 @@ const PermissionTooltipBase = styled.div`
display: flex;
align-items: center;
flex-direction: column;
span {
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
font-size: 11px;
}
code {
font-family: 'Fira Mono';
font-family: var(--monoscape-font);
}
`;

9
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -2,6 +2,13 @@
border-radius: 6px;
margin: .125rem 0 .125rem;
height: auto;
max-height: 640px;
max-width: min(480px, 100%);
object-fit: contain;
&[data-spoiler="true"] {
filter: blur(30px);
pointer-events: none;
@ -71,7 +78,7 @@
}
pre code {
font-family: "Fira Mono", sans-serif;
font-family: var(--monoscape-font), sans-serif;
}
&[data-loading="true"] {

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

@ -15,60 +15,33 @@ interface Props {
}
const MAX_ATTACHMENT_WIDTH = 480;
const MAX_ATTACHMENT_HEIGHT = 640;
export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
let width = 0,
height = 0;
if (metadata.type === 'Image' || metadata.type === 'Video') {
let limitingWidth = Math.min(
maxWidth,
metadata.width
);
let limitingHeight = Math.min(
MAX_ATTACHMENT_HEIGHT,
metadata.height
);
// Calculate smallest possible WxH.
width = Math.min(
limitingWidth,
limitingHeight * (metadata.width / metadata.height)
);
height = Math.min(
limitingHeight,
limitingWidth * (metadata.height / metadata.width)
);
}
switch (metadata.type) {
case "Image": {
return (
<div
style={{ width }}
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}
>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<img
src={url}
alt={filename}
width={metadata.width}
height={metadata.height}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.image)}
@ -79,7 +52,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 &&
window.open(url, "_blank")
}
style={{ width, height }}
/>
</div>
);
@ -102,13 +74,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<div
style={{ width }}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}
@ -117,7 +86,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
<video
src={url}
controls
style={{ width, height }}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")

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

@ -101,6 +101,7 @@ const PreviewBox = styled.div`
.icon {
height: 100px;
width: 100%;
margin-bottom: 4px;
object-fit: contain;
}

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

@ -1,5 +1,3 @@
@import "@fontsource/fira-mono/400.css";
.markdown {
:global(.emoji) {
height: 1.25em;
@ -89,7 +87,7 @@
font-size: 90%;
border-radius: 4px;
background: var(--block);
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
}
input[type="checkbox"] {
@ -136,7 +134,7 @@
}
:global(.code) {
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
:global(.lang) {
// height: 8px;

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

@ -1,4 +1,4 @@
import { Localizer, Text } from "preact-i18n";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
@ -105,13 +105,9 @@ function HomeSidebar(props: Props) {
</ButtonItem>
</Link>
)}
<Localizer>
<Category
text={<Text id="app.main.categories.conversations" />}
/** @ts-ignore : ignored due to conflicting naming between the Category property name and the existing JSX attribute */
action={() => openScreen({ id: "special_input", type: "create_group" })}
/>
</Localizer>
<Category
text={<Text id="app.main.categories.conversations" />}
action={() => openScreen({ id: "special_input", type: "create_group" })} />
{channelsArr.length === 0 && <img src={placeholderSVG} />}
{channelsArr.map(x => {
let user;

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

@ -14,6 +14,7 @@ import ServerHeader from "../../common/ServerHeader";
import { useEffect } from "preact/hooks";
import Category from "../../ui/Category";
import ConditionalLink from "../../../lib/ConditionalLink";
import CollapsibleSection from "../../common/CollapsibleSection";
interface Props {
unreads: Unreads;
@ -69,6 +70,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
let uncategorised = new Set(server.channels);
let elements = [];
function addChannel(id: string) {
const entry = channels.find(x => x._id === id);
if (!entry) return;
@ -76,9 +78,8 @@ function ServerSidebar(props: Props & WithDispatcher) {
const active = channel?._id === entry._id;
return (
<ConditionalLink active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
<ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
<ChannelButton
key={entry._id}
channel={entry}
active={active}
alert={entry.unread}
@ -90,16 +91,24 @@ function ServerSidebar(props: Props & WithDispatcher) {
if (server.categories) {
for (let category of server.categories) {
elements.push(<Category text={category.title} />);
let channels = [];
for (let id of category.channels) {
uncategorised.delete(id);
elements.push(addChannel(id));
channels.push(addChannel(id));
}
elements.push(
<CollapsibleSection
id={`category_${category.id}`}
defaultValue
summary={<Category text={category.title} />}>
{ channels }
</CollapsibleSection>
);
}
}
for (let id of uncategorised) {
for (let id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}

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

@ -2,6 +2,7 @@ import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { User } from "revolt.js";
import Details from "../../../components/ui/Details";
import Category from "../../ui/Category";
import { useParams } from "react-router";
import { UserButton } from "../items/ButtonItem";

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

@ -10,7 +10,7 @@ export default styled.button<Props>`
padding: 8px;
font-size: 16px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-family: inherit;
transition: 0.2s ease opacity;
transition: 0.2s ease background-color;

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

@ -31,7 +31,7 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
` }
`;
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
text: Children;
// TODO: rename from action to prevent type conflicts with the dom
action?: () => void;

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

@ -3,9 +3,9 @@ import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
const CheckboxBase = styled.label`
margin-top: 20px;
gap: 4px;
z-index: 1;
padding: 4px;
display: flex;
border-radius: 4px;
align-items: center;
@ -16,25 +16,19 @@ const CheckboxBase = styled.label`
transition: 0.2s ease all;
p {
margin: 0;
}
input {
display: none;
}
&:hover {
background: var(--secondary-background);
.check {
background: var(--background);
}
}
&[disabled] {
opacity: 0.5;
cursor: unset;
opacity: .5;
cursor: not-allowed;
&:hover {
background: unset;
@ -43,15 +37,15 @@ const CheckboxBase = styled.label`
`;
const CheckboxContent = styled.span`
flex-grow: 1;
display: flex;
flex-grow: 1;
font-size: 1rem;
font-weight: 600;
flex-direction: column;
`;
const CheckboxDescription = styled.span`
font-size: 0.8em;
font-size: .75rem;
font-weight: 400;
color: var(--secondary-foreground);
`;

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

@ -1,5 +1,6 @@
import { useRef } from "preact/hooks";
import { Check, Pencil } from "@styled-icons/boxicons-regular";
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import styled, { css } from "styled-components";
interface Props {
@ -98,7 +99,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
type="large"
onClick={() => ref.current.click()}
>
<Pencil size={32} />
<Palette size={32} />
</Swatch>
<input
type="color"

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

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

68
src/components/ui/Details.tsx Normal file
View file

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

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

@ -46,6 +46,6 @@ export default styled.div<Props>`
` }
${ props => props.borders && css`
border-end-start-radius: 8px;
border-start-start-radius: 8px;
` }
`;

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

@ -9,6 +9,7 @@ export default styled.input<Props>`
padding: 8px 16px;
border-radius: 6px;
font-family: inherit;
color: var(--foreground);
background: var(--primary-background);
transition: 0.2s ease background-color;

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

@ -5,6 +5,7 @@ import { Text } from 'preact-i18n';
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
error?: string;
block?: boolean;
spaced?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
}
@ -12,7 +13,10 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
margin: 0.4em 0;
margin-top: 0.8em;
${ props => props.spaced && css`
margin-top: 0.8em;
` }
font-size: 14px;
font-weight: 600;

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

@ -39,8 +39,10 @@ export default styled.textarea<TextAreaProps>`
}
${ props => props.code ? css`
font-family: 'Fira Mono', 'Courier New', Courier, monospace;
font-family: var(--monoscape-font-font), monospace;
` : css`
font-family: 'Open Sans', sans-serif;
font-family: inherit;
` }
font-variant-ligatures: var(--ligatures);
`;

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

@ -7,6 +7,13 @@ interface Props {
error?: boolean
}
export const Separator = styled.div<Props>`
height: 1px;
width: calc(100% - 10px);
background: var(--secondary-header);
margin: 18px auto;
`;
export const TipBase = styled.div<Props>`
display: flex;
padding: 12px;
@ -46,9 +53,13 @@ export const TipBase = styled.div<Props>`
export default function Tip(props: Props & { children: Children }) {
const { children, ...tipProps } = props;
return (
<TipBase {...tipProps}>
<InfoCircle size={20} />
<span>{props.children}</span>
</TipBase>
<>
<Separator />
<TipBase {...tipProps}>
<InfoCircle size={20} />
<span>{props.children}</span>
</TipBase>
</>
);
}

31
src/context/Locale.tsx
View file

@ -43,7 +43,6 @@ export enum Language {
PIRATE = "pr",
BOTTOM = "bottom",
PIGLATIN = "piglatin",
HARDCORE = "hardcore",
}
export interface LanguageEntry {
@ -107,13 +106,6 @@ export const Languages: { [key in Language]: LanguageEntry } = {
dayjs: "en-gb",
alt: true
},
hardcore: {
display: "Hardcore Mode",
emoji: "🔥",
i18n: "hardcore",
dayjs: "en-gb",
alt: true
},
};
interface Props {
@ -126,8 +118,10 @@ function Locale({ children, locale }: Props) {
const [defns, setDefinition] = useState<Record<string, unknown>>(definition);
const lang = Languages[locale];
// TOOD: clean this up and use the built in Intl API
function transformLanguage(obj: { [key: string]: any }) {
// TODO: clean this up and use the built in Intl API
function transformLanguage(source: { [key: string]: any }) {
const obj = defaultsDeep(source, definition);
const dayjs = obj.dayjs;
const defaults = dayjs.defaults;
@ -151,23 +145,16 @@ function Locale({ children, locale }: Props) {
useEffect(() => {
if (locale === "en") {
transformLanguage(definition);
setDefinition(definition);
const defn = transformLanguage(definition);
setDefinition(defn);
dayjs.locale("en");
dayjs.updateLocale('en', { calendar: definition.dayjs });
return;
}
if (lang.i18n === "hardcore") {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setDefinition({});
dayjs.updateLocale('en', { calendar: defn.dayjs });
return;
}
import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
const defn = lang_file.default;
transformLanguage(defn);
const defn = transformLanguage(lang_file.default);
const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);
@ -176,7 +163,7 @@ function Locale({ children, locale }: Props) {
}
dayjs.locale(dayjs_locale.default);
setDefinition(defaultsDeep(defn, definition));
setDefinition(defn);
}
);
}, [locale, lang]);

166
src/context/Theme.tsx
View file

@ -33,18 +33,161 @@ export type Variables =
| "status-invisible"
| "sidebar-active";
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
export type Theme = {
[variable in Variables]: string;
} & {
light?: boolean;
font?: Fonts;
css?: string;
monoscapeFont?: MonoscapeFonts;
};
export interface ThemeOptions {
preset?: string;
ligatures?: boolean;
custom?: Partial<Theme>;
}
// import aaa from "@fontsource/open-sans/300.css?raw";
// console.info(aaa);
export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
"Open Sans": {
name: "Open Sans",
load: async () => {
await import("@fontsource/open-sans/300.css");
await import("@fontsource/open-sans/400.css");
await import("@fontsource/open-sans/600.css");
await import("@fontsource/open-sans/700.css");
await import("@fontsource/open-sans/400-italic.css");
}
},
Inter: {
name: "Inter",
load: async () => {
await import("@fontsource/inter/300.css");
await import("@fontsource/inter/400.css");
await import("@fontsource/inter/600.css");
await import("@fontsource/inter/700.css");
}
},
"Atkinson Hyperlegible": {
name: "Atkinson Hyperlegible",
load: async () => {
await import("@fontsource/atkinson-hyperlegible/400.css");
await import("@fontsource/atkinson-hyperlegible/700.css");
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
}
},
"Roboto": {
name: "Roboto",
load: async () => {
await import("@fontsource/roboto/400.css");
await import("@fontsource/roboto/700.css");
await import("@fontsource/roboto/400-italic.css");
}
},
"Noto Sans": {
name: "Noto Sans",
load: async () => {
await import("@fontsource/noto-sans/400.css");
await import("@fontsource/noto-sans/700.css");
await import("@fontsource/noto-sans/400-italic.css");
}
},
"Bree Serif": {
name: "Bree Serif",
load: () => import("@fontsource/bree-serif/400.css")
},
"Lato": {
name: "Lato",
load: async () => {
await import("@fontsource/lato/300.css");
await import("@fontsource/lato/400.css");
await import("@fontsource/lato/700.css");
await import("@fontsource/lato/400-italic.css");
}
},
"Montserrat": {
name: "Montserrat",
load: async () => {
await import("@fontsource/montserrat/300.css");
await import("@fontsource/montserrat/400.css");
await import("@fontsource/montserrat/600.css");
await import("@fontsource/montserrat/700.css");
await import("@fontsource/montserrat/400-italic.css");
}
},
"Poppins": {
name: "Poppins",
load: async () => {
await import("@fontsource/poppins/300.css");
await import("@fontsource/poppins/400.css");
await import("@fontsource/poppins/600.css");
await import("@fontsource/poppins/700.css");
await import("@fontsource/poppins/400-italic.css");
}
},
"Raleway": {
name: "Raleway",
load: async () => {
await import("@fontsource/raleway/300.css");
await import("@fontsource/raleway/400.css");
await import("@fontsource/raleway/600.css");
await import("@fontsource/raleway/700.css");
await import("@fontsource/raleway/400-italic.css");
}
},
"Ubuntu": {
name: "Ubuntu",
load: async () => {
await import("@fontsource/ubuntu/300.css");
await import("@fontsource/ubuntu/400.css");
await import("@fontsource/ubuntu/500.css");
await import("@fontsource/ubuntu/700.css");
await import("@fontsource/ubuntu/400-italic.css");
}
},
"Comic Neue": {
name: "Comic Neue",
load: async () => {
await import("@fontsource/comic-neue/300.css");
await import("@fontsource/comic-neue/400.css");
await import("@fontsource/comic-neue/700.css");
await import("@fontsource/comic-neue/400-italic.css");
}
}
};
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
"Fira Code": {
name: "Fira Code",
load: () => import("@fontsource/fira-code/400.css")
},
"Roboto Mono": {
name: "Roboto Mono",
load: () => import("@fontsource/roboto-mono/400.css")
},
"Source Code Pro": {
name: "Source Code Pro",
load: () => import("@fontsource/source-code-pro/400.css")
},
"Space Mono": {
name: "Space Mono",
load: () => import("@fontsource/space-mono/400.css")
},
"Ubuntu Mono": {
name: "Ubuntu Mono",
load: () => import("@fontsource/ubuntu-mono/400.css")
}
};
export const FONT_KEYS = Object.keys(FONTS).sort();
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
// Generated from https://gitlab.insrt.uk/revolt/community/themes
export const PRESETS: Record<string, Theme> = {
light: {
@ -124,15 +267,32 @@ interface Props {
options?: ThemeOptions;
}
function Theme(props: Props) {
function Theme({ children, options }: Props) {
const theme: Theme = {
...PRESETS["dark"],
...PRESETS[props.options?.preset ?? ''],
...props.options?.custom
};
const root = document.documentElement.style;
useEffect(() => {
const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
const font = theme.font ?? 'Inter';
root.setProperty('--font', `"${font}"`);
FONTS[font].load();
}, [ theme.font ]);
useEffect(() => {
const font = theme.monoscapeFont ?? 'Fira Code';
root.setProperty('--monoscape-font', `"${font}"`);
MONOSCAPE_FONTS[font].load();
}, [ theme.monoscapeFont ]);
useEffect(() => {
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
}, [ options?.ligatures ]);
useEffect(() => {
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
resize();
window.addEventListener('resize', resize);
@ -155,7 +315,7 @@ function Theme(props: Props) {
{theme.css && (
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
)}
{props.children}
{ children }
</ThemeContext.Provider>
);
}

2
src/context/intermediate/modals/Prompt.module.scss
View file

@ -7,7 +7,7 @@
user-select: all;
font-size: 1.4em;
text-align: center;
font-family: "Fira Mono";
font-family: var(--monoscape-font);
}
}

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

@ -8,7 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton';
import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import { useIntermediate } from "../intermediate/Intermediate";
type Props = {
@ -190,7 +191,7 @@ export function FileUploader(props: Props) {
<Preloader type="ring" />
</div> :
<div className={styles.edit}>
<Edit size={30} />
<Pencil size={30} />
</div> }
</div>
<div className={styles.modify}>

1
src/lib/TextAreaAutoSize.tsx
View file

@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const ref = useRef<HTMLTextAreaElement>();
useEffect(() => {
if (isTouchscreenDevice) return;
autoFocus && ref.current.focus();
}, [value]);

6
src/pages/developer/Developer.tsx
View file

@ -4,6 +4,7 @@ import Header from "../../components/ui/Header";
import PaintCounter from "../../lib/PaintCounter";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { useUserPermission } from "../../context/revoltjs/hooks";
import { Wrench } from "@styled-icons/boxicons-solid";
export default function Developer() {
// const voice = useContext(VoiceContext);
@ -12,7 +13,10 @@ export default function Developer() {
return (
<div>
<Header placement="primary">Developer Tab</Header>
<Header placement="primary">
<Wrench size="24" />
Developer Tab
</Header>
<div style={{ padding: "16px" }}>
<PaintCounter always />
</div>

52
src/pages/friends/Friend.module.scss
View file

@ -14,57 +14,6 @@
padding: 0 10px 10px 10px;
user-select: none;
overflow-y: scroll;
summary {
position: sticky;
z-index: 10;
top: -1px;
}
.overline {
display: flex;
align-items: center;
background: var(--primary-background);
padding: 5px 0;
cursor: pointer;
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
svg {
margin-inline-end: 4px;
}
}
details {
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
}
&[data-empty="true"] {
img {
@ -145,7 +94,6 @@
.divider {
width: 1px;
height: 24px;
margin: 0 8px;
background: var(--primary-background);
}

34
src/pages/friends/Friends.tsx
View file

@ -14,6 +14,8 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
import Details from "../../components/ui/Details";
import CollapsibleSection from "../../components/common/CollapsibleSection";
export default function Friends() {
const { openScreen } = useIntermediate();
@ -29,17 +31,17 @@ export default function Friends() {
) ],
[ 'app.special.friends.sent', users.filter(x =>
x.relationship === Users.Relationship.Outgoing
) ],
), 'outgoing' ],
[ 'app.status.online', friends.filter(x =>
x.online && x.status?.presence !== Users.Presence.Invisible
) ],
), 'online' ],
[ 'app.status.offline', friends.filter(x =>
!x.online || x.status?.presence === Users.Presence.Invisible
) ],
[ 'app.special.friends.blocked', friends.filter(x =>
), 'offline' ],
[ 'app.special.friends.blocked', users.filter(x =>
x.relationship === Users.Relationship.Blocked
) ]
] as [ string, User[] ][];
), 'blocked' ]
] as [ string, User[], string ][];
const incoming = lists[0][1];
const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
@ -56,7 +58,7 @@ export default function Friends() {
<div className={styles.actions}>
{/*<Tooltip content={"Create Category"} placement="bottom">
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
<ListPlus size={24} />
<ListPlus size={28} />
</IconButton>
</Tooltip>
<div className={styles.divider} />*/}
@ -107,22 +109,18 @@ export default function Friends() {
</div> }
{
lists.map(([i18n, list], index) => {
lists.map(([i18n, list, section_id], index) => {
if (index === 0) return;
if (list.length === 0) return;
return (
<details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
<div className={styles.title}>
<Text id={i18n} /> — { list.length }
</div>
</Overline>
</summary>
<CollapsibleSection
id={`friends_${section_id}`}
defaultValue={true}
sticky large
summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
{ list.map(x => <Friend key={x._id} user={x} />) }
</details>
</CollapsibleSection>
)
})
}

2
src/pages/settings/Settings.module.scss
View file

@ -93,7 +93,7 @@
margin: 1rem 12px 0;
font-size: 10px;
color: var(--secondary-foreground);
font-family: "Fira Mono", monospace;
font-family: var(--monoscape-font), monospace;
user-select: text;
display: grid;

19
src/pages/settings/Settings.tsx
View file

@ -10,22 +10,19 @@ import {
Bell,
Palette,
Coffee,
Globe,
IdCard,
LogOut,
Sync as SyncIcon,
Shield,
Vial,
User
} from "@styled-icons/boxicons-regular";
import { Brush, Megaphone } from "@styled-icons/boxicons-solid";
CheckShield,
Flask,
User,
Megaphone
} from "@styled-icons/boxicons-solid";
import { Sync as SyncIcon, Globe, LogOut } from "@styled-icons/boxicons-regular";
import { Gitlab } from "@styled-icons/boxicons-logos";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import LineDivider from "../../components/ui/LineDivider";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import ButtonItem from "../../components/navigation/items/ButtonItem";
import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
import { Account } from "./panes/Account";
import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions";
@ -64,7 +61,7 @@ export default function Settings() {
},
{
id: 'sessions',
icon: <Shield size={20} />,
icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" />
},
{
@ -91,7 +88,7 @@ export default function Settings() {
{
divider: true,
id: 'experiments',
icon: <Vial size={20} />,
icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" />
},
{

7
src/pages/settings/panes/Account.tsx
View file

@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
import { Users } from "revolt.js/dist/api/objects";
import { Link, useHistory } from "react-router-dom";
import Overline from "../../../components/ui/Overline";
import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
import { Envelope, Key } from "@styled-icons/boxicons-solid";
import { At } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@ -47,9 +48,7 @@ export function Account() {
return (
<div className={styles.user}>
<div className={styles.banner}>
<Link to="/settings/profile">
<UserIcon target={user} size={72} />
</Link>
<UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
<div className={styles.username}>@{user.username}</div>
</div>
<div className={styles.details}>

45
src/pages/settings/panes/Appearance.tsx
View file

@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
import styles from "./Panes.module.scss";
import { debounce } from "../../../lib/debounce";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
// @ts-ignore
import pSBC from 'shade-blend-color';
@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
</Radio>
</div>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
{
FONT_KEYS
.map(key =>
<option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
)
}
</ComboBox>
<p>
<Checkbox checked={props.settings.theme?.ligatures === true}
onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
</div>
</div>
<details>
<summary>
<Text id="app.settings.pages.appearance.advanced" />
<div className={styles.divider}></div>
</summary>
<CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
</div>
))}
</div>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
{
MONOSCAPE_FONT_KEYS
.map(key =>
<option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
)
}
</ComboBox>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
code
value={css}
onChange={ev => setCSS(ev.currentTarget.value)} />
</details>
</CollapsibleSection>
</div>
);
}

8
src/pages/settings/panes/Notifications.tsx
View file

@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
<Checkbox
disabled={!("Notification" in window)}
checked={options?.desktopEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
onChange={async desktopEnabled => {
if (desktopEnabled) {
let permission = await Notification.requestPermission();
@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_desktop" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
</p>
</Checkbox>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
onChange={async pushEnabled => {
try {
const reg = await navigator.serviceWorker?.getRegistration();
@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
}}
>
<Text id="app.settings.pages.notifications.enable_push" />
<p>
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
</p>
</Checkbox>
<h3>
<Text id="app.settings.pages.notifications.sounds" />

38
src/pages/settings/panes/Panes.module.scss
View file

@ -8,16 +8,18 @@
align-items: center;
background: var(--secondary-header);
.avatar {
cursor: pointer;
transition: 0.2s ease filter;
&:hover {
filter: brightness(80%);
}
}
.username {
font-size: 24px;
}
a {
transition: 0.2s ease filter;
}
a:hover {
filter: brightness(80%);
font-weight: 600;
}
}
@ -32,6 +34,10 @@
display: flex;
align-items: center;
flex-direction: row;
> svg {
flex-shrink: 0;
}
}
.detail {
@ -321,30 +327,16 @@
}
}
.notifications {
label {
margin-top: 12px;
}
p {
margin-top: 0;
font-size: 0.9em;
color: var(--secondary-foreground);
}
}
.languages {
.list {
margin-bottom: 1em;
.entry {
padding: 2px 8px;
height: 50px;
border-radius: 4px;
}
.entry > span > span {
gap: 8px;
gap: 20px;
display: flex;
align-items: center;
flex-direction: row;

4
src/pages/settings/panes/Sync.tsx
View file

@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
([ key, title ]) =>
<Checkbox
checked={(props.options?.disabled ?? []).indexOf(key) === -1}
description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
onChange={enabled => {
props.dispatcher({
type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
}}
>
<Text id={`app.settings.pages.${title}`} />
<p>
<Text id={`app.settings.pages.sync.descriptions.${key}`} />
</p>
</Checkbox>
)
}

3
src/pages/settings/server/Members.tsx
View file

@ -1,7 +1,6 @@
import styles from './Panes.module.scss';
import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
interface Props {
@ -23,7 +22,7 @@ export function Members({ server }: Props) {
return (
<div className={styles.members}>
<div className={styles.subtitle}>
X Members
{ members?.length ?? 0 } Members
</div>
{ members && members.length > 0 && users?.map(x => x &&
<div className={styles.member}>

60
src/pages/settings/server/Overview.tsx
View file

@ -1,10 +1,13 @@
import { Text } from "preact-i18n";
import isEqual from "lodash.isequal";
import styles from './Panes.module.scss';
import Button from "../../../components/ui/Button";
import { Servers } from "revolt.js/dist/api/objects";
import InputBox from "../../../components/ui/InputBox";
import ComboBox from "../../../components/ui/ComboBox";
import { Servers, Server } from "revolt.js/dist/api/objects";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { useContext, useEffect, useState } from "preact/hooks";
import { getChannelName } from "../../../context/revoltjs/util";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
@ -17,16 +20,18 @@ export function Overview({ server }: Props) {
const [name, setName] = useState(server.name);
const [description, setDescription] = useState(server.description ?? '');
const [systemMessages, setSystemMessages] = useState(server.system_messages);
useEffect(() => setName(server.name), [ server.name ]);
useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);
const [ changed, setChanged ] = useState(false);
function save() {
let changes: any = {};
let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
if (name !== server.name) changes.name = name;
if (description !== server.description)
changes.description = description;
if (description !== server.description) changes.description = description;
if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
client.servers.edit(server._id, changes);
setChanged(false);
@ -76,11 +81,6 @@ export function Overview({ server }: Props) {
if (!changed) setChanged(true)
}}
/>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
<h3>
<Text id="app.main.servers.custom_banner" />
@ -95,6 +95,48 @@ export function Overview({ server }: Props) {
previewURL={client.servers.getBannerURL(server._id, { width: 1000 }, true)}
remove={() => client.servers.edit(server._id, { remove: 'Banner' })}
/>
<h3>
<Text id="app.settings.server_pages.overview.system_messages" />
</h3>
{[
[ 'User Joined', 'user_joined' ],
[ 'User Left', 'user_left' ],
[ 'User Kicked', 'user_kicked' ],
[ 'User Banned', 'user_banned' ]
].map(([ i18n, key ]) =>
// ! FIXME: temporary code just so we can expose the options
<p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<span style={{ flexShrink: '0', flex: `25%` }}>{i18n}</span>
<ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
onChange={e => {
if (!changed) setChanged(true)
const v = e.currentTarget.value;
if (v === 'disabled') {
const { [key as keyof typeof systemMessages]: _, ...other } = systemMessages;
setSystemMessages(other);
} else {
setSystemMessages({
...systemMessages,
[key]: v
});
}
}}>
<option value='disabled'><Text id="general.disabled" /></option>
{ server.channels.map(id => {
const channel = client.channels.get(id);
if (!channel) return null;
return <option value={id}>{ getChannelName(client, channel, true) }</option>;
}) }
</ComboBox>
</p>
)}
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
}

2
src/pages/settings/server/Roles.tsx
View file

@ -49,7 +49,7 @@ export function Roles({ server }: Props) {
<div className={styles.list}>
<div className={styles.title}>
<h1><Text id="app.settings.server_pages.roles.title" /></h1>
<Plus size={16} onClick={() =>
<Plus size={22} onClick={() =>
openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
</div>
{ [ 'default', ...Object.keys(roles) ]

8
src/redux/index.ts
View file

@ -14,6 +14,7 @@ import { QueuedMessage } from "./reducers/queue";
import { ExperimentOptions } from "./reducers/experiments";
import { LastOpened } from "./reducers/last_opened";
import { Notifications } from "./reducers/notifications";
import { SectionToggle } from "./reducers/section_toggle";
export type State = {
config: Core.RevoltNodeConfiguration,
@ -28,6 +29,7 @@ export type State = {
experiments: ExperimentOptions;
lastOpened: LastOpened;
notifications: Notifications;
sectionToggle: SectionToggle;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -56,7 +58,8 @@ store.subscribe(() => {
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
} = store.getState() as State;
localForage.setItem("state", {
@ -70,6 +73,7 @@ store.subscribe(() => {
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
});
});

5
src/redux/reducers/index.ts
View file

@ -13,6 +13,7 @@ import { sync, SyncAction } from "./sync";
import { experiments, ExperimentsAction } from "./experiments";
import { lastOpened, LastOpenedAction } from "./last_opened";
import { notifications, NotificationsAction } from "./notifications";
import { sectionToggle, SectionToggleAction } from "./section_toggle";
export default combineReducers({
config,
@ -26,7 +27,8 @@ export default combineReducers({
sync,
experiments,
lastOpened,
notifications
notifications,
sectionToggle
});
export type Action =
@ -42,6 +44,7 @@ export type Action =
| ExperimentsAction
| LastOpenedAction
| NotificationsAction
| SectionToggleAction
| { type: "__INIT"; state: State };
export type WithDispatcher = { dispatcher: (action: Action) => void };

37
src/redux/reducers/section_toggle.ts Normal file
View file

@ -0,0 +1,37 @@
export interface SectionToggle {
[key: string]: boolean
}
export type SectionToggleAction =
| { type: undefined }
| {
type: "SECTION_TOGGLE_SET";
id: string;
state: boolean;
}
| {
type: "SECTION_TOGGLE_UNSET";
id: string;
}
| {
type: "RESET";
};
export function sectionToggle(state = {} as SectionToggle, action: SectionToggleAction): SectionToggle {
switch (action.type) {
case "SECTION_TOGGLE_SET": {
return {
...state,
[action.id]: action.state
}
}
case "SECTION_TOGGLE_UNSET": {
const { [action.id]: _, ...newState } = state;
return newState;
}
case "RESET":
return {};
default:
return state;
}
}

2
src/redux/reducers/settings.ts
View file

@ -65,7 +65,7 @@ export function settings(
return {
...state,
theme: {
...filter(state.theme, ["custom", "preset"]),
...filter(state.theme, ["custom", "preset", "ligatures"]),
...action.theme,
},
};

8
src/styles/_context-menu.scss
View file

@ -51,7 +51,13 @@
}
.status {
font-size: .6rem;
max-width: 132px;
font-size: .625rem;
color: var(--secondary-foreground);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

6
src/styles/_fonts.scss
View file

@ -1,6 +0,0 @@
@import "@fontsource/open-sans/300.css";
@import "@fontsource/open-sans/400.css";
@import "@fontsource/open-sans/600.css";
@import "@fontsource/open-sans/700.css";
@import "@fontsource/open-sans/400-italic.css";

4
src/styles/_page.scss
View file

@ -18,7 +18,9 @@ html,
body {
margin: 0;
height: 100%;
font-family: "Open Sans", sans-serif;
font-family: var(--font), sans-serif;
font-variant-ligatures: var(--ligatures);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
caret-color: var(--accent);

3
src/styles/_variables.scss
View file

@ -1,4 +1,7 @@
:root {
--ligatures: none;
--font: "Open Sans";
--app-height: 100vh;
--codeblock-font: "Fira Code";
--sidebar-active: var(--secondary-background);
}

1
src/styles/index.scss
View file

@ -1,7 +1,6 @@
@import "variables";
@import "context-menu";
@import "elements";
@import "fonts";
@import "page";
@import "react-overlapping-panels/dist";

103
yarn.lock
View file

@ -912,16 +912,91 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@fontsource/fira-mono@^4.4.5":
"@fontsource/atkinson-hyperlegible@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/fira-mono/-/fira-mono-4.4.5.tgz#ceac70967cd3c4262195603aba567cd4582493f8"
integrity sha512-LWbsPhTr1JRV3zUgvMrOxQDn1BG9F4R0FPeBkqWP8/oqPxvVYAhEepg1DN9M1k6L9sRN2I2HWHBpt4QVbDGXpw==
resolved "https://registry.yarnpkg.com/@fontsource/atkinson-hyperlegible/-/atkinson-hyperlegible-4.4.5.tgz#4f2ecf34491d5798ec2a346d7de403d99ca82d39"
integrity sha512-HmhcEIWucTCfvl4qB/ucGIGjp7zMyOfGgfeY+n84Qz7x4sFosOpQlziPFmgO1MHiU1Quw9VGGj2t+zNU5EtBFQ==
"@fontsource/bree-serif@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/bree-serif/-/bree-serif-4.4.5.tgz#ac5dc36b9b96bcae17820d66eee7d9f64647fc76"
integrity sha512-/a8Ef8O5TTWcKSQKFs7kc/oVZddSFEunxgWJwt9f8q9Z9qSYNeUrBft0q8SGA+V6c4m0svaZSWICqBTg/aeDcQ==
"@fontsource/comic-neue@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/comic-neue/-/comic-neue-4.4.5.tgz#00cb5546ca2a9fe9cc2e0fa73349e9202c7b28d5"
integrity sha512-0oTyJMmWxiJaf1ZTyyK10RRHBqhYgatAqE0SJPCdithDTzETkHWINEi51lkd95evo418pqmjmjNHGYBgO5CN9w==
"@fontsource/fira-code@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.4.5.tgz#380c964676b1e873b192862ce03a7ad1c7838516"
integrity sha512-ap1UKABzbPrUTgIB376n8CSJ7mbJYxGm52A60BHnGHjU2cSDBqNUAColdERgFWgLHfybWXQT13ZrNhAdynf9rg==
"@fontsource/inter@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.4.5.tgz#bce26ff9dd83898bd610924cff1342cc30d0e89a"
integrity sha512-eRUmB54CbyC3MhAuw2VvTPEc3wy8sFi0/1mVHaC7ZXglXcrSWXY+p8Xad/Zy8AcmS9BuqCCEH2qJbOt9XdX65Q==
"@fontsource/lato@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/lato/-/lato-4.4.5.tgz#82c16ef01ab1a1039f74d774e89ef1f76111def6"
integrity sha512-pm9am2tdLnK+21PKCK060oY8R8OKFVzTVvM6pPS+mS7JOZKe3mmDgfB2DGzzyHG/Azj3Pn6onU72BrQsh3XjNw==
"@fontsource/montserrat@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/montserrat/-/montserrat-4.4.5.tgz#f97ebea605f4a2d6b9b23a19bc9bf8fc6f4c79d5"
integrity sha512-1F3cR9OIp4Qi1AJHFg/SeFeUWLYemMgI3ldetx0mrlHoWeMuK+p2YentYIIZVkV9ogXOIE2QEw7VnHlGBPo7iw==
"@fontsource/noto-sans@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans/-/noto-sans-4.4.5.tgz#0053bf374f8d5222908c825aa1db6a3078a79cf6"
integrity sha512-1P+AMhUvjfpMwuDsLHG1F95ij1SULGM8IiW/4RmdP7+ZHJuvBsSG465Ujps34IDio5bcv6OaLpGyU1YBVTTe+Q==
"@fontsource/open-sans@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.4.5.tgz#07b31617e62ed753c94cabcf552ebaed4de497ce"
integrity sha512-PDWEvO1/p8OAHHiielvEmwGXHNbZhrZn96ojV7+/mKgFu+cCUcGVJl9sFs97rCWLe3hKQsYLEsJs4EiLjwa+UQ==
"@fontsource/poppins@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/poppins/-/poppins-4.4.5.tgz#c75dcc453f7a9381de3f9b932366c2457887184c"
integrity sha512-pu675yvBGFhAHD8D7uj7C0NaHqDxD7mlgmLM8ziyYL4kYH79fil7rJ6U5X2oaKxoyRk3rxxb9k1fG0CCc7CquA==
"@fontsource/raleway@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/raleway/-/raleway-4.4.5.tgz#483871d82aa35e6a981b370b44dbae0b9d59ca6c"
integrity sha512-jUOBbqGDadtgjtxQe8YpaiRVy9WGIBUCfQoKlfyuBuI6BNHg1HdsBwL9qetru99uGTTy9L0fEwYoY9J8lhNXqw==
"@fontsource/roboto-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-4.4.5.tgz#63c54719a8d592d793632501a56d570572c17065"
integrity sha512-y9fbKH1eCCkcqtRGhevFlmR5schCRz1GiTT/VYz6z8Ij0WHW0tS26BhMyXhmSgEIiFt+254yS8teqP+cc7Xq0w==
"@fontsource/roboto@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.4.5.tgz#9ef1b9288ac4a97b97906da920c63c08dba97c89"
integrity sha512-e3s7BF8MDBLpkA2r6lnl5PMnllF0McVvpolK9h2zzvVJw2WPexP1GTgMKHISlglYZRij2lKg/ZjQcIUUYDsAXg==
"@fontsource/source-code-pro@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/source-code-pro/-/source-code-pro-4.4.5.tgz#927ac48da9a7de6054b44b2e1979abd908f00f47"
integrity sha512-PuoF6JHR+s3IaceWMZB02fHLIOehIAfYQUGHXBEyuPQ+BdonbbYpS+RIyduKsUYt7ajZURysbBFlg/N0cb/Jhw==
"@fontsource/space-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/space-mono/-/space-mono-4.4.5.tgz#2acc2f08c5060bc983bfbf14f8827770a5ce3c2a"
integrity sha512-QBU55UPj+JOzkwI/ezR1y1qBk+iJtYhjxBTHqXJMTrKCXIuWMD+NIXvVYHIJW8i6Aov+6kOksgVOqrU7rqOK8Q==
"@fontsource/ubuntu-mono@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/ubuntu-mono/-/ubuntu-mono-4.4.5.tgz#2653f4eedf89f4efa3708b6cdc990c06f90b5faf"
integrity sha512-TvkybOBDDfZwrIE9imcoMMi4xhdZY+0Q1gmmdrGCG2xFxPM2/fuHXBcn6FKLvm5/regKKq93DO6JIPcH2G1r/w==
"@fontsource/ubuntu@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@fontsource/ubuntu/-/ubuntu-4.4.5.tgz#4d386755a4f3f88bfbc6a9d517f33dcdf263f992"
integrity sha512-dK/WdBncYJAZrwhANBGYN7wKrB2+NsYX/QomNBkJuze9kel9uijz7cNQPYdUDogink/X8D4MF2PeLEhF565fSA==
"@hapi/address@^2.1.2":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@ -1985,10 +2060,10 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
esbuild@^0.12.5:
version "0.12.9"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.9.tgz#bed4e7087c286cd81d975631f77d47feb1660070"
integrity sha512-MWRhAbMOJ9RJygCrt778rz/qNYgA4ZVj6aXnNPxFjs7PmIpb0fuB9Gmg5uWrr6n++XKwwm/RmSz6RR5JL2Ocsw==
esbuild@^0.11.19:
version "0.11.23"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.11.23.tgz#c42534f632e165120671d64db67883634333b4b8"
integrity sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==
escalade@^3.1.1:
version "3.1.1"
@ -3119,7 +3194,7 @@ postcss-value-parser@^4.0.2:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
postcss@^8.3.0:
postcss@^8.2.1:
version "8.3.5"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
@ -3976,13 +4051,13 @@ vite-plugin-pwa@^0.8.1:
workbox-build "^6.1.5"
workbox-window "^6.1.5"
vite@^2.3.7:
version "2.3.7"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.7.tgz#3023892419367465e1af1739578f8663d04243b2"
integrity sha512-Y0xRz11MPYu/EAvzN94+FsOZHbSvO6FUvHv127CyG7mV6oDoay2bw+g5y9wW3Blf8OY3chaz3nc/DcRe1IQ3Nw==
"vite@npm:@insertish/vite@2.2.4-dynamic-import-css-f428476":
version "2.2.4-dynamic-import-css-f428476"
resolved "https://registry.yarnpkg.com/@insertish/vite/-/vite-2.2.4-dynamic-import-css-f428476.tgz#33e0de5a3504c90d900e32c8536e0567dda9de17"
integrity sha512-rUKEbkNbUUNbVt5pb1OiHnkt09d+IiHfEOHGexSYmYKGEIPxQAKiGjrfvjpqH0Dzb0B5BbQ+FI23QmNKbari2Q==
dependencies:
esbuild "^0.12.5"
postcss "^8.3.0"
esbuild "^0.11.19"
postcss "^8.2.1"
resolve "^1.19.0"
rollup "^2.38.5"
optionalDependencies: