Compare commits

...

29 commits

Author SHA1 Message Date
Ajay Bura
24fdba2d92 Add editor output function 2023-03-31 20:12:52 +05:30
Ajay Bura
bcbeadc72b Update folds 2023-03-31 20:11:21 +05:30
ajbura
dc848b1f04 Fix hotkeys 2023-03-05 20:31:10 +05:30
Ajay Bura
0119811a67 Add custom editor 2023-03-05 16:23:14 +05:30
ajbura
23de3aa4a3 add navigation atoms 2023-02-05 18:04:20 +05:30
ajbura
c7e668eed2 Fix init muted room list atom 2023-02-05 18:04:02 +05:30
ajbura
ddc9bdef70 Add bind atoms hook 2023-02-05 18:03:41 +05:30
Ajay Bura
b08125f68e WIP 2023-02-05 09:45:58 +05:30
Ajay Bura
837d03a93b Add Sidebar components 2023-02-04 20:32:23 +05:30
Ajay Bura
9bd913e174 Extract set settings hook 2022-12-31 19:10:00 +05:30
Ajay Bura
bc1e9abf3e Add settings hook 2022-12-31 19:02:57 +05:30
Ajay Bura
85e5bc887f Add settings atom 2022-12-31 19:02:43 +05:30
Ajay Bura
147a6065d0 Use hook to bind atoms with sdk 2022-12-31 15:54:57 +05:30
Ajay Bura
67cd2fc5c4 Add room to unread atom 2022-12-31 10:18:18 +05:30
Ajay Bura
899a5b934e Add mute list atom 2022-12-31 10:18:10 +05:30
Ajay Bura
4d802d918e Add room id to parents atom 2022-12-27 20:17:04 +05:30
Ajay Bura
a9937cb4ba add utils for jotai atoms 2022-12-27 20:16:49 +05:30
Ajay Bura
08070d41c5 add room list atom 2022-12-27 20:16:20 +05:30
Ajay Bura
6b559404b2 Add invite list atom 2022-12-27 20:16:13 +05:30
Ajay Bura
582250c419 Add mDirect list atom 2022-12-27 20:15:52 +05:30
Ajay Bura
56a134c85c Add room utils 2022-12-27 20:15:17 +05:30
Ajay Bura
1c7600c3b8 Add disposable util 2022-12-27 20:14:08 +05:30
Ajay Bura
5b41794947 Add new types 2022-12-27 20:13:49 +05:30
Ajay Bura
3cf603bfc6 Add function to access matrix client 2022-12-27 20:12:49 +05:30
Ajay Bura
0a3fe685d1 change cross-signing alert anim to 30 iteration 2022-12-27 20:11:40 +05:30
Ajay Bura
116bf7d2f0 Enable immer map/set 2022-12-27 20:10:43 +05:30
Ajay Bura
cf1a02a7b3 install folds, jotai & immer 2022-12-27 20:09:30 +05:30
Ajay Bura
0714685b9b Enable ts strict mode 2022-12-27 20:09:01 +05:30
Ajay Bura
2ef8fdb1c9 Fix eslint 2022-12-27 20:07:36 +05:30
49 changed files with 2978 additions and 164 deletions

View file

@ -27,6 +27,7 @@ module.exports = {
rules: {
'linebreak-style': 0,
'no-underscore-dangle': 0,
"no-shadow": "off",
"import/prefer-default-export": "off",
"import/extensions": "off",
@ -55,5 +56,6 @@ module.exports = {
"react-hooks/exhaustive-deps": "error",
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-shadow": "error"
},
};

View file

@ -27,7 +27,7 @@
<link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
<link rel="manifest" href="./manifest.json" />
<link rel="manifest" href="./public/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Cinny" />
<meta name="apple-mobile-web-app-title" content="Cinny" />

711
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -24,14 +24,23 @@
"@khanacademy/simple-markdown": "0.8.6",
"@matrix-org/olm": "3.2.14",
"@tippyjs/react": "4.2.6",
"@vanilla-extract/css": "1.9.3",
"@vanilla-extract/recipes": "0.3.0",
"@vanilla-extract/vite-plugin": "3.7.1",
"blurhash": "2.0.4",
"browser-encrypt-attachment": "0.3.0",
"classnames": "2.3.2",
"dateformat": "5.0.3",
"emojibase-data": "7.0.1",
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.0.6",
"formik": "2.2.9",
"html-react-parser": "3.0.4",
"immer": "9.0.16",
"is-hotkey": "0.2.0",
"jotai": "1.12.0",
"katex": "0.16.4",
"linkify-html": "4.0.2",
"linkifyjs": "4.0.2",
@ -46,6 +55,8 @@
"react-google-recaptcha": "2.1.0",
"react-modal": "3.16.1",
"sanitize-html": "2.8.0",
"slate": "0.90.0",
"slate-react": "0.90.0",
"tippy.js": "6.3.7",
"twemoji": "14.0.2"
},
@ -66,7 +77,7 @@
"prettier": "2.8.1",
"sass": "1.56.2",
"typescript": "4.9.4",
"vite": "4.0.1",
"vite": "4.0.4",
"vite-plugin-static-copy": "0.13.0"
}
}

View file

@ -0,0 +1,44 @@
import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset, toRem } from 'folds';
export const Editor = style([
DefaultReset,
{
backgroundColor: color.SurfaceVariant.Container,
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R400,
},
]);
export const EditorOptions = style([
DefaultReset,
{
padding: config.space.S200,
},
]);
export const EditorTextareaScroll = style({});
export const EditorTextarea = style([
DefaultReset,
{
flexGrow: 1,
height: '100%',
padding: `${toRem(13)} 0`,
selectors: {
[`${EditorTextareaScroll}:first-child &`]: {
paddingLeft: toRem(13),
},
[`${EditorTextareaScroll}:last-child &`]: {
paddingRight: toRem(13),
},
},
},
]);
export const EditorToolbar = style([
DefaultReset,
{
padding: config.space.S100,
},
]);

View file

@ -0,0 +1,80 @@
import React, { useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
config,
Icon,
IconButton,
Icons,
Line,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
} from 'folds';
import { CustomEditor } from './Editor';
import { Toolbar } from './Toolbar';
export function EditorPreview() {
const [open, setOpen] = useState(false);
const [toolbar, setToolbar] = useState(false);
return (
<>
<IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
<Icon src={Icons.BlockQuote} />
</IconButton>
<Overlay open={open} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
}}
>
<Modal size="500">
<div style={{ padding: config.space.S400 }}>
<CustomEditor
placeholder="Send a message..."
before={
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.PlusCircle} />
</IconButton>
}
after={
<>
<IconButton
variant="SurfaceVariant"
size="300"
radii="300"
onClick={() => setToolbar(!toolbar)}
aria-pressed={toolbar}
>
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Smile} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Send} />
</IconButton>
</>
}
bottom={
toolbar && (
<div>
<Line variant="SurfaceVariant" size="300" />
<Toolbar />
</div>
)
}
/>
</div>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
</>
);
}

View file

@ -0,0 +1,85 @@
import React, { KeyboardEventHandler, ReactNode, useCallback, useState } from 'react';
import { Box, Scroll } from 'folds';
import { createEditor } from 'slate';
import { Slate, Editable, withReact, RenderLeafProps, RenderElementProps } from 'slate-react';
import { BlockType, RenderElement, RenderLeaf } from './Elements';
import { CustomElement } from './slate';
import * as css from './Editor.css';
import { toggleKeyboardShortcut } from './keyboard';
const initialValue: CustomElement[] = [
{
type: BlockType.Paragraph,
children: [{ text: 'A line of text in paragraph' }],
},
];
type CustomEditorProps = {
top?: ReactNode;
bottom?: ReactNode;
before?: ReactNode;
after?: ReactNode;
maxHeight?: string;
placeholder?: string;
};
export function CustomEditor({
top,
bottom,
before,
after,
maxHeight = '50vh',
placeholder,
}: CustomEditorProps) {
const [editor] = useState(() => withReact(createEditor()));
const renderElement = useCallback(
(props: RenderElementProps) => <RenderElement {...props} />,
[]
);
const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
const handleKeydown: KeyboardEventHandler = useCallback(
(evt) => {
toggleKeyboardShortcut(editor, evt);
},
[editor]
);
return (
<div className={css.Editor}>
<Slate editor={editor} value={initialValue}>
{top}
<Box alignItems="Start">
{before && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{before}
</Box>
)}
<Scroll
className={css.EditorTextareaScroll}
variant="SurfaceVariant"
style={{ maxHeight }}
size="300"
visibility="Hover"
hideTrack
>
<Editable
className={css.EditorTextarea}
placeholder={placeholder}
renderElement={renderElement}
renderLeaf={renderLeaf}
onKeyDown={handleKeydown}
/>
</Scroll>
{after && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{after}
</Box>
)}
</Box>
{bottom}
</Slate>
</div>
);
}

View file

@ -0,0 +1,55 @@
import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset } from 'folds';
const MarginBottom = style({
marginBottom: config.space.S200,
selectors: {
'&:last-child': {
marginBottom: 0,
},
},
});
export const Paragraph = style([MarginBottom]);
export const Heading = style([MarginBottom]);
export const BlockQuote = style([
DefaultReset,
MarginBottom,
{
paddingLeft: config.space.S200,
borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
fontStyle: 'italic',
},
]);
const BaseCode = style({
fontFamily: 'monospace',
color: color.Warning.OnContainer,
background: color.Warning.Container,
border: `${config.borderWidth.B300} solid ${color.Warning.ContainerLine}`,
borderRadius: config.radii.R300,
});
export const Code = style([
DefaultReset,
BaseCode,
{
padding: `0 ${config.space.S100}`,
},
]);
export const CodeBlock = style([DefaultReset, BaseCode, MarginBottom]);
export const CodeBlockInternal = style({
padding: `${config.space.S200} ${config.space.S200} 0`,
});
export const List = style([
DefaultReset,
MarginBottom,
{
padding: `0 ${config.space.S100}`,
paddingLeft: config.space.S600,
},
]);

View file

@ -0,0 +1,108 @@
import { Scroll, Text } from 'folds';
import React from 'react';
import { RenderElementProps, RenderLeafProps } from 'slate-react';
import * as css from './Elements.css';
export enum MarkType {
Bold = 'bold',
Italic = 'italic',
Underline = 'underline',
StrikeThrough = 'strikeThrough',
Code = 'code',
}
export enum BlockType {
Paragraph = 'paragraph',
Heading = 'heading',
CodeLine = 'code-line',
CodeBlock = 'code-block',
QuoteLine = 'quote-line',
BlockQuote = 'block-quote',
ListItem = 'list-item',
OrderedList = 'ordered-list',
UnorderedList = 'unordered-list',
}
export function RenderElement({ attributes, element, children }: RenderElementProps) {
switch (element.type) {
case BlockType.Paragraph:
return (
<Text className={css.Paragraph} {...attributes}>
{children}
</Text>
);
case BlockType.Heading:
if (element.level === 1)
return (
<Text className={css.Heading} as="h2" size="H2" {...attributes}>
{children}
</Text>
);
if (element.level === 2)
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
if (element.level === 3)
return (
<Text className={css.Heading} as="h4" size="H4" {...attributes}>
{children}
</Text>
);
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
case BlockType.CodeLine:
return <div>{children}</div>;
case BlockType.CodeBlock:
return (
<Text as="pre" className={css.CodeBlock}>
<Scroll direction="Horizontal" variant="Warning" size="300" visibility="Hover" hideTrack>
<div className={css.CodeBlockInternal}>{children}</div>
</Scroll>
</Text>
);
case BlockType.QuoteLine:
return <div>{children}</div>;
case BlockType.BlockQuote:
return (
<Text as="blockquote" className={css.BlockQuote}>
{children}
</Text>
);
case BlockType.ListItem:
return <Text as="li">{children}</Text>;
case BlockType.OrderedList:
return <ol className={css.List}>{children}</ol>;
case BlockType.UnorderedList:
return <ul className={css.List}>{children}</ul>;
default:
return (
<Text className={css.Paragraph} {...attributes}>
{children}
</Text>
);
}
}
export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
let child = children;
if (leaf.bold) child = <strong {...attributes}>{child}</strong>;
if (leaf.italic) child = <i {...attributes}>{child}</i>;
if (leaf.underline) child = <u {...attributes}>{child}</u>;
if (leaf.strikeThrough) child = <s {...attributes}>{child}</s>;
if (leaf.code)
child = (
<code className={css.Code} {...attributes}>
{child}
</code>
);
if (child !== children) return child;
return <span {...attributes}>{child}</span>;
}

View file

@ -0,0 +1,132 @@
import FocusTrap from 'focus-trap-react';
import { Box, config, Icon, IconButton, Icons, IconSrc, Line, Menu, PopOut, toRem } from 'folds';
import React, { useState } from 'react';
import { useSlate } from 'slate-react';
import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from './common';
import * as css from './Editor.css';
import { BlockType, MarkType } from './Elements';
import { HeadingLevel } from './slate';
type MarkButtonProps = { format: MarkType; icon: IconSrc };
export function MarkButton({ format, icon }: MarkButtonProps) {
const editor = useSlate();
return (
<IconButton
variant="SurfaceVariant"
onClick={() => toggleMark(editor, format)}
aria-pressed={isMarkActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
);
}
type BlockButtonProps = { format: BlockType; icon: IconSrc };
export function BlockButton({ format, icon }: BlockButtonProps) {
const editor = useSlate();
return (
<IconButton
variant="SurfaceVariant"
onClick={() => toggleBlock(editor, format, { level: 1 })}
aria-pressed={isBlockActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
);
}
export function HeadingBlockButton() {
const editor = useSlate();
const [level, setLevel] = useState<HeadingLevel>(1);
const [open, setOpen] = useState(false);
const isActive = isBlockActive(editor, BlockType.Heading);
const handleMenuSelect = (selectedLevel: HeadingLevel) => {
setOpen(false);
setLevel(selectedLevel);
toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
};
return (
<PopOut
open={open}
align="start"
position="top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
}}
>
<Menu style={{ padding: config.space.S100 }}>
<Box gap="100">
<IconButton onClick={() => handleMenuSelect(1)} size="300" radii="300">
<Icon size="100" src={Icons.Heading1} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(2)} size="300" radii="300">
<Icon size="100" src={Icons.Heading2} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(3)} size="300" radii="300">
<Icon size="100" src={Icons.Heading3} />
</IconButton>
</Box>
</Menu>
</FocusTrap>
}
>
{(ref) => (
<IconButton
style={{ width: 'unset' }}
ref={ref}
variant="SurfaceVariant"
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
aria-pressed={isActive}
size="300"
radii="300"
>
<Icon size="50" src={Icons[`Heading${level}`]} />
<Icon size="50" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
)}
</PopOut>
);
}
export function Toolbar() {
const editor = useSlate();
const allowInline = !isBlockActive(editor, BlockType.CodeBlock);
return (
<Box className={css.EditorToolbar} alignItems="Center" gap="300">
<Box gap="100">
<HeadingBlockButton />
<BlockButton format={BlockType.OrderedList} icon={Icons.OrderList} />
<BlockButton format={BlockType.UnorderedList} icon={Icons.UnorderList} />
<BlockButton format={BlockType.BlockQuote} icon={Icons.BlockQuote} />
<BlockButton format={BlockType.CodeBlock} icon={Icons.BlockCode} />
</Box>
{allowInline && (
<>
<Line direction="Vertical" style={{ height: toRem(12) }} />
<Box gap="100">
<MarkButton format={MarkType.Bold} icon={Icons.Bold} />
<MarkButton format={MarkType.Italic} icon={Icons.Italic} />
<MarkButton format={MarkType.Underline} icon={Icons.Underline} />
<MarkButton format={MarkType.StrikeThrough} icon={Icons.Strike} />
<MarkButton format={MarkType.Code} icon={Icons.Code} />
</Box>
</>
)}
</Box>
);
}

View file

@ -0,0 +1,96 @@
import { Editor, Element, Transforms } from 'slate';
import { BlockType, MarkType } from './Elements';
import { HeadingLevel } from './slate';
export const isMarkActive = (editor: Editor, format: MarkType) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
export const toggleMark = (editor: Editor, format: MarkType) => {
const isActive = isMarkActive(editor, format);
if (isActive) {
Editor.removeMark(editor, format);
} else {
Editor.addMark(editor, format, true);
}
};
export const isBlockActive = (editor: Editor, format: BlockType) => {
const [match] = Editor.nodes(editor, {
match: (node) => Element.isElement(node) && node.type === format,
});
return !!match;
};
type BlockOption = { level: HeadingLevel };
const NESTED_BLOCK = [
BlockType.OrderedList,
BlockType.UnorderedList,
BlockType.BlockQuote,
BlockType.CodeBlock,
];
export const toggleBlock = (editor: Editor, format: BlockType, option?: BlockOption) => {
const isActive = isBlockActive(editor, format);
Transforms.unwrapNodes(editor, {
match: (node) => Element.isElement(node) && NESTED_BLOCK.includes(node.type),
split: true,
});
if (isActive) {
Transforms.setNodes(editor, {
type: BlockType.Paragraph,
});
return;
}
if (format === BlockType.OrderedList || format === BlockType.UnorderedList) {
Transforms.setNodes(editor, {
type: BlockType.ListItem,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.CodeBlock) {
Transforms.setNodes(editor, {
type: BlockType.CodeLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.BlockQuote) {
Transforms.setNodes(editor, {
type: BlockType.QuoteLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.Heading) {
Transforms.setNodes(editor, {
type: format,
level: option?.level ?? 1,
});
}
Transforms.setNodes(editor, {
type: format,
});
};

View file

@ -0,0 +1,39 @@
import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements';
export const INLINE_HOTKEYS: Record<string, MarkType> = {
'mod+b': MarkType.Bold,
'mod+i': MarkType.Italic,
'mod+u': MarkType.Underline,
'mod+shift+u': MarkType.StrikeThrough,
'mod+[': MarkType.Code,
};
const INLINE_KEYS = Object.keys(INLINE_HOTKEYS);
export const BLOCK_HOTKEYS: Record<string, BlockType> = {
'mod+shift+0': BlockType.OrderedList,
'mod+shift+8': BlockType.UnorderedList,
'mod+shift+.': BlockType.BlockQuote,
'mod+shift+m': BlockType.CodeBlock,
};
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>) => {
BLOCK_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
}
});
if (!isBlockActive(editor, BlockType.CodeBlock))
INLINE_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}
});
};

View file

@ -0,0 +1,78 @@
import { Text } from 'slate';
import { sanitizeText } from '../../utils/sanitize';
import { BlockType } from './Elements';
import { CustomElement, FormattedText } from './slate';
const textToCustomHtml = (node: FormattedText): string => {
let string = sanitizeText(node.text);
if (node.bold) string = `<strong>${string}</strong>`;
if (node.italic) string = `<i>${string}</i>`;
if (node.underline) string = `<u>${string}</u>`;
if (node.strikeThrough) string = `<s>${string}</s>`;
if (node.code) string = `<code>${string}</code>`;
return string;
};
const elementToCustomHtml = (node: CustomElement, children: string): string => {
switch (node.type) {
case BlockType.Paragraph:
return `<p>${children}</p>`;
case BlockType.Heading:
return `<h${node.level}>${children}</h${node.level}>`;
case BlockType.CodeLine:
return `${children}\n`;
case BlockType.CodeBlock:
return `<pre><code>${children}</code></pre>`;
case BlockType.QuoteLine:
return `<p>${children}</p>`;
case BlockType.BlockQuote:
return `<blockquote>${children}</blockquote>`;
case BlockType.ListItem:
return `<li><p>${children}</p></li>`;
case BlockType.OrderedList:
return `<ol>${children}</ol>`;
case BlockType.UnorderedList:
return `<ul>${children}</ul>`;
default:
return children;
}
};
export const toMatrixCustomHTML = (node: CustomElement | Text): string => {
if (Text.isText(node)) return textToCustomHtml(node);
const children = node.children.map((n) => toMatrixCustomHTML(n)).join('');
return elementToCustomHtml(node, children);
};
const elementToPlainText = (node: CustomElement, children: string): string => {
switch (node.type) {
case BlockType.Paragraph:
return `${children}\n\n`;
case BlockType.Heading:
return `${children}\n\n`;
case BlockType.CodeLine:
return `${children}\n`;
case BlockType.CodeBlock:
return `${children}\n`;
case BlockType.QuoteLine:
return `| ${children}\n`;
case BlockType.BlockQuote:
return `${children}\n`;
case BlockType.ListItem:
return `- ${children}\n`;
case BlockType.OrderedList:
return `${children}\n`;
case BlockType.UnorderedList:
return `${children}\n`;
default:
return children;
}
};
export const toPlainText = (node: CustomElement | Text): string => {
if (Text.isText(node)) return sanitizeText(node.text);
const children = node.children.map((n) => toPlainText(n)).join('');
return elementToPlainText(node, children);
};

106
src/app/components/editor/slate.d.ts vendored Normal file
View file

@ -0,0 +1,106 @@
import { BaseEditor } from 'slate';
import { ReactEditor } from 'slate-react';
import { BlockType } from './Elements';
export type HeadingLevel = 1 | 2 | 3;
export type Text = {
text: string;
};
export type FormattedText = Text & {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strikeThrough?: boolean;
code?: boolean;
};
export type LinkElement = {
type: 'link';
href: string;
children: FormattedText[];
};
export type SpoilerElement = {
type: 'spoiler';
children: FormattedText[];
};
export type UserPillElement = {
type: 'user-pill';
userId: string;
children: Text[];
};
export type RoomPillElement = {
type: 'room-pill';
roomId: string;
children: Text[];
};
export type EmoticonElement = {
type: 'emoticon';
mxc: string;
children: Text[];
};
export type ParagraphElement = {
type: BlockType.Paragraph;
children: FormattedText[];
};
export type HeadingElement = {
type: BlockType.Heading;
level: HeadingLevel;
children: FormattedText[];
};
export type CodeLineElement = {
type: BlockType.CodeLine;
children: Text[];
};
export type CodeBlockElement = {
type: BlockType.CodeBlock;
children: CodeLineElement[];
};
export type QuoteLineElement = {
type: BlockType.QuoteLine;
children: FormattedText[];
};
export type BlockQuoteElement = {
type: BlockType.BlockQuote;
children: QuoteLineElement[];
};
export type ListItemElement = {
type: BlockType.ListItem;
children: FormattedText[];
};
export type OrderedListElement = {
type: BlockType.OrderedList;
children: ListItemElement[];
};
export type UnorderedListElement = {
type: BlockType.UnorderedList;
children: ListItemElement[];
};
export type CustomElement =
// | LinkElement
// | SpoilerElement
// | UserPillElement
// | RoomPillElement
// | EmoticonElement
| ParagraphElement
| HeadingElement
| CodeLineElement
| CodeBlockElement
| QuoteLineElement
| BlockQuoteElement
| ListItemElement
| OrderedListElement
| UnorderedListElement;
export type CustomEditor = BaseEditor & ReactEditor;
declare module 'slate' {
interface CustomTypes {
Editor: BaseEditor & ReactEditor;
Element: CustomElement;
Text: FormattedText & Text;
}
}

View file

@ -0,0 +1,111 @@
import { style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
import { color, config, DefaultReset, toRem } from 'folds';
export const Sidebar = style([
DefaultReset,
{
width: toRem(66),
backgroundColor: color.Background.Container,
borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
display: 'flex',
flexDirection: 'column',
color: color.Background.OnContainer,
},
]);
export const SidebarStack = style([
DefaultReset,
{
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: config.space.S300,
padding: `${config.space.S300} 0`,
},
]);
const PUSH_X = 2;
export const SidebarAvatarBox = recipe({
base: [
DefaultReset,
{
display: 'flex',
alignItems: 'center',
position: 'relative',
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
selectors: {
'&:hover': {
transform: `translateX(${toRem(PUSH_X)})`,
},
'&::before': {
content: '',
display: 'none',
position: 'absolute',
left: toRem(-11.5 - PUSH_X),
width: toRem(3 + PUSH_X),
height: toRem(16),
borderRadius: `0 ${toRem(4)} ${toRem(4)} 0`,
background: 'CurrentColor',
transition: 'height 200ms linear',
},
'&:hover::before': {
display: 'block',
width: toRem(3),
},
},
},
],
variants: {
active: {
true: {
selectors: {
'&::before': {
display: 'block',
height: toRem(24),
},
'&:hover::before': {
width: toRem(3 + PUSH_X),
},
},
},
},
},
});
export type SidebarAvatarBoxVariants = RecipeVariants<typeof SidebarAvatarBox>;
export const SidebarBadgeBox = recipe({
base: [
DefaultReset,
{
position: 'absolute',
zIndex: 1,
},
],
variants: {
hasCount: {
true: {
top: toRem(-6),
right: toRem(-6),
},
false: {
top: toRem(-2),
right: toRem(-2),
},
},
},
defaultVariants: {
hasCount: false,
},
});
export type SidebarBadgeBoxVariants = RecipeVariants<typeof SidebarBadgeBox>;
export const SidebarBadgeOutline = style({
boxShadow: `0 0 0 ${config.borderWidth.B500} ${color.Background.Container}`,
});

View file

@ -0,0 +1,8 @@
import classNames from 'classnames';
import { as } from 'folds';
import React from 'react';
import * as css from './Sidebar.css';
export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
<AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
));

View file

@ -0,0 +1,75 @@
import classNames from 'classnames';
import { as, Avatar, Box, color, config, Text, Tooltip, TooltipProvider } from 'folds';
import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
import * as css from './Sidebar.css';
const SidebarAvatarBox = as<'div', css.SidebarAvatarBoxVariants>(
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
<AsSidebarAvatarBox
className={classNames(css.SidebarAvatarBox({ active }), className)}
{...props}
ref={ref}
/>
)
);
export const SidebarAvatar = forwardRef<
HTMLDivElement,
css.SidebarAvatarBoxVariants &
css.SidebarBadgeBoxVariants & {
outlined?: boolean;
avatarChildren: ReactNode;
tooltip: ReactNode | string;
notificationBadge?: (badgeClassName: string) => ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
onContextMenu?: MouseEventHandler<HTMLButtonElement>;
}
>(
(
{
active,
hasCount,
outlined,
avatarChildren,
tooltip,
notificationBadge,
onClick,
onContextMenu,
},
ref
) => (
<SidebarAvatarBox active={active} ref={ref}>
<TooltipProvider
delay={0}
position="right"
tooltip={
<Tooltip>
<Text size="T300">{tooltip}</Text>
</Tooltip>
}
>
{(avRef) => (
<Avatar
ref={avRef}
as="button"
onClick={onClick}
onContextMenu={onContextMenu}
style={{
border: outlined
? `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`
: undefined,
cursor: 'pointer',
}}
>
{avatarChildren}
</Avatar>
)}
</TooltipProvider>
{notificationBadge && (
<Box className={css.SidebarBadgeBox({ hasCount })}>
{notificationBadge(css.SidebarBadgeOutline)}
</Box>
)}
</SidebarAvatarBox>
)
);

View file

@ -0,0 +1,21 @@
import React, { ReactNode } from 'react';
import { Box, Scroll } from 'folds';
type SidebarContentProps = {
scrollable: ReactNode;
sticky: ReactNode;
};
export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
return (
<>
<Box direction="Column" grow="Yes">
<Scroll variant="Background" size="0">
{scrollable}
</Scroll>
</Box>
<Box direction="Column" shrink="No">
{sticky}
</Box>
</>
);
}

View file

@ -0,0 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import { as } from 'folds';
import * as css from './Sidebar.css';
export const SidebarStack = as<'div'>(
({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
<AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
)
);

View file

@ -0,0 +1,13 @@
import React from 'react';
import { Line, toRem } from 'folds';
export function SidebarStackSeparator() {
return (
<Line
role="separator"
style={{ width: toRem(24), margin: '0 auto' }}
variant="Background"
size="300"
/>
);
}

View file

@ -0,0 +1,5 @@
export * from './Sidebar';
export * from './SidebarAvatar';
export * from './SidebarContent';
export * from './SidebarStack';
export * from './SidebarStackSeparator';

View file

@ -3,10 +3,12 @@ import './Navigation.scss';
import SideBar from './SideBar';
import Drawer from './Drawer';
import { EditorPreview } from '../../components/editor/Editor.preview';
function Navigation() {
return (
<div className="navigation">
<EditorPreview />
<SideBar />
<Drawer />
</div>

View file

@ -7,10 +7,7 @@
width: var(--navigation-sidebar-width);
height: 100%;
background-color: var(--bg-surface-extra-low);
@include dir.side(border,
none,
1px solid var(--bg-surface-border),
);
@include dir.side(border, none, 1px solid var(--bg-surface-border));
&__scrollable,
&__sticky {
@ -24,7 +21,7 @@
.scrollable-content {
&::after {
content: "";
content: '';
display: block;
width: 100%;
height: 8px;
@ -33,7 +30,8 @@
background-image: linear-gradient(
to top,
var(--bg-surface-extra-low),
var(--bg-surface-extra-low-transparent));
var(--bg-surface-extra-low-transparent)
);
position: sticky;
bottom: -1px;
left: 0;
@ -44,7 +42,7 @@
.space-container,
.sticky-container {
@extend .cp-fx__column--c-c;
padding: var(--sp-ultra-tight) 0;
& > .sidebar-avatar,
@ -63,7 +61,7 @@
box-shadow: var(--bs-danger-border);
animation-name: pushRight;
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-iteration-count: 30;
animation-direction: alternate;
}
@ -74,4 +72,4 @@
to {
transform: translateX(0) scale(1);
}
}
}

View file

@ -0,0 +1,125 @@
import React from 'react';
import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds';
import { useAtom } from 'jotai';
import {
Sidebar,
SidebarContent,
SidebarStackSeparator,
SidebarStack,
SidebarAvatar,
} from '../../components/sidebar';
import { selectedTabAtom, SidebarTab } from '../../state/selectedTab';
export function Sidebar1() {
const [selectedTab, setSelectedTab] = useAtom(selectedTabAtom);
return (
<Sidebar>
<SidebarContent
scrollable={
<>
<SidebarStack>
<SidebarAvatar
active={selectedTab === SidebarTab.Home}
outlined
tooltip="Home"
avatarChildren={<Icon src={Icons.Home} filled />}
onClick={() => setSelectedTab(SidebarTab.Home)}
/>
<SidebarAvatar
active={selectedTab === SidebarTab.People}
outlined
tooltip="People"
avatarChildren={<Icon src={Icons.User} />}
onClick={() => setSelectedTab(SidebarTab.People)}
/>
</SidebarStack>
<SidebarStackSeparator />
<SidebarStack>
<SidebarAvatar
tooltip="Space A"
notificationBadge={(badgeClassName) => (
<Badge
className={badgeClassName}
size="200"
variant="Secondary"
fill="Solid"
radii="Pill"
/>
)}
avatarChildren={
<AvatarFallback
style={{
backgroundColor: 'red',
color: 'white',
}}
>
<Text size="T500">B</Text>
</AvatarFallback>
}
/>
<SidebarAvatar
tooltip="Space B"
hasCount
notificationBadge={(badgeClassName) => (
<Badge className={badgeClassName} radii="Pill" fill="Solid" variant="Secondary">
<Text size="L400">64</Text>
</Badge>
)}
avatarChildren={
<AvatarFallback
style={{
backgroundColor: 'green',
color: 'white',
}}
>
<Text size="T500">C</Text>
</AvatarFallback>
}
/>
</SidebarStack>
<SidebarStackSeparator />
<SidebarStack>
<SidebarAvatar
outlined
tooltip="Explore Community"
avatarChildren={<Icon src={Icons.Explore} />}
/>
<SidebarAvatar
outlined
tooltip="Create Space"
avatarChildren={<Icon src={Icons.Plus} />}
/>
</SidebarStack>
</>
}
sticky={
<>
<SidebarStackSeparator />
<SidebarStack>
<SidebarAvatar
outlined
tooltip="Search"
avatarChildren={<Icon src={Icons.Search} />}
/>
<SidebarAvatar
tooltip="User Settings"
avatarChildren={
<AvatarFallback
style={{
backgroundColor: 'blue',
color: 'white',
}}
>
<Text size="T500">A</Text>
</AvatarFallback>
}
/>
</SidebarStack>
</>
}
/>
</Sidebar>
);
}

View file

@ -1,4 +1,5 @@
import React from 'react';
import React, { StrictMode } from 'react';
import { Provider } from 'jotai';
import { isAuthenticated } from '../../client/state/auth';
@ -6,7 +7,11 @@ import Auth from '../templates/auth/Auth';
import Client from '../templates/client/Client';
function App() {
return isAuthenticated() ? <Client /> : <Auth />;
return (
<StrictMode>
<Provider>{isAuthenticated() ? <Client /> : <Auth />}</Provider>
</StrictMode>
);
}
export default App;

View file

@ -0,0 +1,63 @@
import { useAtomValue, WritableAtom } from 'jotai';
import { selectAtom } from 'jotai/utils';
import { MatrixClient } from 'matrix-js-sdk';
import { useCallback } from 'react';
import { isDirectInvite, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
import { compareRoomsEqual, RoomsAction } from '../utils';
import { MDirectAction } from '../mDirectList';
export const useSpaceInvites = (
mx: MatrixClient,
allInvitesAtom: WritableAtom<string[], RoomsAction>
) => {
const selector = useCallback(
(rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
[mx]
);
return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
};
export const useRoomInvites = (
mx: MatrixClient,
allInvitesAtom: WritableAtom<string[], RoomsAction>,
mDirectAtom: WritableAtom<Set<string>, MDirectAction>
) => {
const mDirects = useAtomValue(mDirectAtom);
const selector = useCallback(
(rooms: string[]) =>
rooms.filter(
(roomId) =>
isRoom(mx.getRoom(roomId)) &&
!(mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId()))
),
[mx, mDirects]
);
return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
};
export const useDirectInvites = (
mx: MatrixClient,
allInvitesAtom: WritableAtom<string[], RoomsAction>,
mDirectAtom: WritableAtom<Set<string>, MDirectAction>
) => {
const mDirects = useAtomValue(mDirectAtom);
const selector = useCallback(
(rooms: string[]) =>
rooms.filter(
(roomId) => mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId())
),
[mx, mDirects]
);
return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
};
export const useUnsupportedInvites = (
mx: MatrixClient,
allInvitesAtom: WritableAtom<string[], RoomsAction>
) => {
const selector = useCallback(
(rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
[mx]
);
return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
};

View file

@ -0,0 +1,54 @@
import { useAtomValue, WritableAtom } from 'jotai';
import { selectAtom } from 'jotai/utils';
import { MatrixClient } from 'matrix-js-sdk';
import { useCallback } from 'react';
import { isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
import { compareRoomsEqual, RoomsAction } from '../utils';
import { MDirectAction } from '../mDirectList';
export const useSpaces = (mx: MatrixClient, allRoomsAtom: WritableAtom<string[], RoomsAction>) => {
const selector = useCallback(
(rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
[mx]
);
return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
};
export const useRooms = (
mx: MatrixClient,
allRoomsAtom: WritableAtom<string[], RoomsAction>,
mDirectAtom: WritableAtom<Set<string>, MDirectAction>
) => {
const mDirects = useAtomValue(mDirectAtom);
const selector = useCallback(
(rooms: string[]) =>
rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId)),
[mx, mDirects]
);
return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
};
export const useDirects = (
mx: MatrixClient,
allRoomsAtom: WritableAtom<string[], RoomsAction>,
mDirectAtom: WritableAtom<Set<string>, MDirectAction>
) => {
const mDirects = useAtomValue(mDirectAtom);
const selector = useCallback(
(rooms: string[]) =>
rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId)),
[mx, mDirects]
);
return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
};
export const useUnsupportedRooms = (
mx: MatrixClient,
allRoomsAtom: WritableAtom<string[], RoomsAction>
) => {
const selector = useCallback(
(rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
[mx]
);
return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
};

View file

@ -0,0 +1,34 @@
import { atom, useAtomValue, useSetAtom, WritableAtom } from 'jotai';
import { SetAtom } from 'jotai/core/atom';
import { selectAtom } from 'jotai/utils';
import { useMemo } from 'react';
import { Settings } from '../settings';
export const useSetSetting = <K extends keyof Settings>(
settingsAtom: WritableAtom<Settings, Settings>,
key: K
) => {
const setterAtom = useMemo(
() =>
atom<null, Settings[K]>(null, (get, set, value) => {
const s = { ...get(settingsAtom) };
s[key] = value;
set(settingsAtom, s);
}),
[settingsAtom, key]
);
return useSetAtom(setterAtom);
};
export const useSetting = <K extends keyof Settings>(
settingsAtom: WritableAtom<Settings, Settings>,
key: K
): [Settings[K], SetAtom<Settings[K], void>] => {
const selector = useMemo(() => (s: Settings) => s[key], [key]);
const setting = useAtomValue(selectAtom(settingsAtom, selector));
const setter = useSetSetting(settingsAtom, key);
return [setting, setter];
};

View file

@ -0,0 +1,16 @@
import { MatrixClient } from 'matrix-js-sdk';
import { allInvitesAtom, useBindAllInvitesAtom } from '../inviteList';
import { allRoomsAtom, useBindAllRoomsAtom } from '../roomList';
import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../mutedRoomList';
import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../roomToUnread';
import { roomToParentsAtom, useBindRoomToParentsAtom } from '../roomToParents';
export const useBindAtoms = (mx: MatrixClient) => {
useBindMDirectAtom(mx, mDirectAtom);
useBindAllInvitesAtom(mx, allInvitesAtom);
useBindAllRoomsAtom(mx, allRoomsAtom);
useBindRoomToParentsAtom(mx, roomToParentsAtom);
useBindMutedRoomsAtom(mx, mutedRoomsAtom);
useBindRoomToUnreadAtom(mx, roomToUnreadAtom, muteChangesAtom);
};

View file

@ -0,0 +1,32 @@
import { atom, WritableAtom } from 'jotai';
import { MatrixClient } from 'matrix-js-sdk';
import { useMemo } from 'react';
import { Membership } from '../../types/matrix/room';
import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
const baseRoomsAtom = atom<string[]>([]);
export const allInvitesAtom = atom<string[], RoomsAction>(
(get) => get(baseRoomsAtom),
(get, set, action) => {
if (action.type === 'INITIALIZE') {
set(baseRoomsAtom, action.rooms);
return;
}
set(baseRoomsAtom, (ids) => {
const newIds = ids.filter((id) => id !== action.roomId);
if (action.type === 'PUT') newIds.push(action.roomId);
return newIds;
});
}
);
export const useBindAllInvitesAtom = (
mx: MatrixClient,
allRooms: WritableAtom<string[], RoomsAction>
) => {
useBindRoomsWithMembershipsAtom(
mx,
allRooms,
useMemo(() => [Membership.Invite], [])
);
};

View file

@ -0,0 +1,47 @@
import { atom, useSetAtom, WritableAtom } from 'jotai';
import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
import { useEffect } from 'react';
import { AccountDataEvent } from '../../types/matrix/accountData';
import { getAccountData, getMDirects } from '../utils/room';
export type MDirectAction = {
type: 'INITIALIZE' | 'UPDATE';
rooms: Set<string>;
};
const baseMDirectAtom = atom(new Set<string>());
export const mDirectAtom = atom<Set<string>, MDirectAction>(
(get) => get(baseMDirectAtom),
(get, set, action) => {
set(baseMDirectAtom, action.rooms);
}
);
export const useBindMDirectAtom = (
mx: MatrixClient,
mDirect: WritableAtom<Set<string>, MDirectAction>
) => {
const setMDirect = useSetAtom(mDirect);
useEffect(() => {
const mDirectEvent = getAccountData(mx, AccountDataEvent.Direct);
if (mDirectEvent) {
setMDirect({
type: 'INITIALIZE',
rooms: getMDirects(mDirectEvent),
});
}
const handleAccountData = (event: MatrixEvent) => {
setMDirect({
type: 'UPDATE',
rooms: getMDirects(event),
});
};
mx.on(ClientEvent.AccountData, handleAccountData);
return () => {
mx.removeListener(ClientEvent.AccountData, handleAccountData);
};
}, [mx, setMDirect]);
};

View file

@ -0,0 +1,101 @@
import { atom, WritableAtom, useSetAtom } from 'jotai';
import { ClientEvent, IPushRule, IPushRules, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
import { useEffect } from 'react';
import { MuteChanges } from '../../types/matrix/room';
import { findMutedRule, isMutedRule } from '../utils/room';
export type MutedRoomsUpdate =
| {
type: 'INITIALIZE';
addRooms: string[];
}
| {
type: 'UPDATE';
addRooms: string[];
removeRooms: string[];
};
export const muteChangesAtom = atom<MuteChanges>({
added: [],
removed: [],
});
const baseMutedRoomsAtom = atom(new Set<string>());
export const mutedRoomsAtom = atom<Set<string>, MutedRoomsUpdate>(
(get) => get(baseMutedRoomsAtom),
(get, set, action) => {
const mutedRooms = new Set([...get(mutedRoomsAtom)]);
if (action.type === 'INITIALIZE') {
set(baseMutedRoomsAtom, new Set([...action.addRooms]));
set(muteChangesAtom, {
added: [...action.addRooms],
removed: [],
});
return;
}
if (action.type === 'UPDATE') {
action.removeRooms.forEach((roomId) => mutedRooms.delete(roomId));
action.addRooms.forEach((roomId) => mutedRooms.add(roomId));
set(baseMutedRoomsAtom, mutedRooms);
set(muteChangesAtom, {
added: [...action.addRooms],
removed: [...action.removeRooms],
});
}
}
);
export const useBindMutedRoomsAtom = (
mx: MatrixClient,
mutedAtom: WritableAtom<Set<string>, MutedRoomsUpdate>
) => {
const setMuted = useSetAtom(mutedAtom);
useEffect(() => {
const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
?.global?.override;
if (overrideRules) {
const mutedRooms = overrideRules.reduce<string[]>((rooms, rule) => {
if (isMutedRule(rule)) rooms.push(rule.rule_id);
return rooms;
}, []);
setMuted({
type: 'INITIALIZE',
addRooms: mutedRooms,
});
}
}, [mx, setMuted]);
useEffect(() => {
const handlePushRules = (mEvent: MatrixEvent, oldMEvent?: MatrixEvent) => {
if (mEvent.getType() === 'm.push_rules') {
const override = mEvent?.getContent()?.global?.override as IPushRule[] | undefined;
const oldOverride = oldMEvent?.getContent()?.global?.override as IPushRule[] | undefined;
if (!override || !oldOverride) return;
const isMuteToggled = (rule: IPushRule, otherOverride: IPushRule[]) => {
const roomId = rule.rule_id;
const isMuted = isMutedRule(rule);
if (!isMuted) return false;
const isOtherMuted = findMutedRule(otherOverride, roomId);
if (isOtherMuted) return false;
return true;
};
const mutedRules = override.filter((rule) => isMuteToggled(rule, oldOverride));
const unMutedRules = oldOverride.filter((rule) => isMuteToggled(rule, override));
setMuted({
type: 'UPDATE',
addRooms: mutedRules.map((rule) => rule.rule_id),
removeRooms: unMutedRules.map((rule) => rule.rule_id),
});
}
};
mx.on(ClientEvent.AccountData, handlePushRules);
return () => {
mx.removeListener(ClientEvent.AccountData, handlePushRules);
};
}, [mx, setMuted]);
};

31
src/app/state/roomList.ts Normal file
View file

@ -0,0 +1,31 @@
import { atom, WritableAtom } from 'jotai';
import { MatrixClient } from 'matrix-js-sdk';
import { useMemo } from 'react';
import { Membership } from '../../types/matrix/room';
import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
const baseRoomsAtom = atom<string[]>([]);
export const allRoomsAtom = atom<string[], RoomsAction>(
(get) => get(baseRoomsAtom),
(get, set, action) => {
if (action.type === 'INITIALIZE') {
set(baseRoomsAtom, action.rooms);
return;
}
set(baseRoomsAtom, (ids) => {
const newIds = ids.filter((id) => id !== action.roomId);
if (action.type === 'PUT') newIds.push(action.roomId);
return newIds;
});
}
);
export const useBindAllRoomsAtom = (
mx: MatrixClient,
allRooms: WritableAtom<string[], RoomsAction>
) => {
useBindRoomsWithMembershipsAtom(
mx,
allRooms,
useMemo(() => [Membership.Join], [])
);
};

View file

@ -0,0 +1,120 @@
import produce from 'immer';
import { atom, useSetAtom, WritableAtom } from 'jotai';
import {
ClientEvent,
MatrixClient,
MatrixEvent,
Room,
RoomEvent,
RoomStateEvent,
} from 'matrix-js-sdk';
import { useEffect } from 'react';
import { Membership, RoomToParents, StateEvent } from '../../types/matrix/room';
import {
getRoomToParents,
getSpaceChildren,
isSpace,
isValidChild,
mapParentWithChildren,
} from '../utils/room';
export type RoomToParentsAction =
| {
type: 'INITIALIZE';
roomToParents: RoomToParents;
}
| {
type: 'PUT';
parent: string;
children: string[];
}
| {
type: 'DELETE';
roomId: string;
};
const baseRoomToParents = atom<RoomToParents>(new Map());
export const roomToParentsAtom = atom<RoomToParents, RoomToParentsAction>(
(get) => get(baseRoomToParents),
(get, set, action) => {
if (action.type === 'INITIALIZE') {
set(baseRoomToParents, action.roomToParents);
return;
}
if (action.type === 'PUT') {
set(
baseRoomToParents,
produce(get(baseRoomToParents), (draftRoomToParents) => {
mapParentWithChildren(draftRoomToParents, action.parent, action.children);
})
);
return;
}
if (action.type === 'DELETE') {
set(
baseRoomToParents,
produce(get(baseRoomToParents), (draftRoomToParents) => {
const noParentRooms: string[] = [];
draftRoomToParents.delete(action.roomId);
draftRoomToParents.forEach((parents, child) => {
parents.delete(action.roomId);
if (parents.size === 0) noParentRooms.push(child);
});
noParentRooms.forEach((room) => draftRoomToParents.delete(room));
})
);
}
}
);
export const useBindRoomToParentsAtom = (
mx: MatrixClient,
roomToParents: WritableAtom<RoomToParents, RoomToParentsAction>
) => {
const setRoomToParents = useSetAtom(roomToParents);
useEffect(() => {
setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) });
const handleAddRoom = (room: Room) => {
if (isSpace(room) && room.getMyMembership() !== Membership.Invite) {
setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
}
};
const handleMembershipChange = (room: Room, membership: string) => {
if (isSpace(room) && membership === Membership.Join) {
setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
}
};
const handleStateChange = (mEvent: MatrixEvent) => {
if (mEvent.getType() === StateEvent.SpaceChild) {
const childId = mEvent.getStateKey();
const roomId = mEvent.getRoomId();
if (childId && roomId) {
if (isValidChild(mEvent)) {
setRoomToParents({ type: 'PUT', parent: roomId, children: [childId] });
} else {
setRoomToParents({ type: 'DELETE', roomId: childId });
}
}
}
};
const handleDeleteRoom = (roomId: string) => {
setRoomToParents({ type: 'DELETE', roomId });
};
mx.on(ClientEvent.Room, handleAddRoom);
mx.on(RoomEvent.MyMembership, handleMembershipChange);
mx.on(RoomStateEvent.Events, handleStateChange);
mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
return () => {
mx.removeListener(ClientEvent.Room, handleAddRoom);
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
mx.removeListener(RoomStateEvent.Events, handleStateChange);
mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
};
}, [mx, setRoomToParents]);
};

View file

@ -0,0 +1,219 @@
import produce from 'immer';
import { atom, useSetAtom, PrimitiveAtom, WritableAtom, useAtomValue } from 'jotai';
import { IRoomTimelineData, MatrixClient, MatrixEvent, Room, RoomEvent } from 'matrix-js-sdk';
import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
import { useEffect } from 'react';
import {
MuteChanges,
Membership,
NotificationType,
RoomToUnread,
UnreadInfo,
} from '../../types/matrix/room';
import {
getAllParents,
getNotificationType,
getUnreadInfo,
getUnreadInfos,
isNotificationEvent,
roomHaveUnread,
} from '../utils/room';
import { roomToParentsAtom } from './roomToParents';
export type RoomToUnreadAction =
| {
type: 'RESET';
unreadInfos: UnreadInfo[];
}
| {
type: 'PUT';
unreadInfo: UnreadInfo;
}
| {
type: 'DELETE';
roomId: string;
};
const putUnreadInfo = (
roomToUnread: RoomToUnread,
allParents: Set<string>,
unreadInfo: UnreadInfo
) => {
const oldUnread = roomToUnread.get(unreadInfo.roomId) ?? { highlight: 0, total: 0, from: null };
roomToUnread.set(unreadInfo.roomId, {
highlight: unreadInfo.highlight,
total: unreadInfo.total,
from: null,
});
const newH = unreadInfo.highlight - oldUnread.highlight;
const newT = unreadInfo.total - oldUnread.total;
allParents.forEach((parentId) => {
const oldParentUnread = roomToUnread.get(parentId) ?? { highlight: 0, total: 0, from: null };
roomToUnread.set(parentId, {
highlight: (oldParentUnread.highlight += newH),
total: (oldParentUnread.total += newT),
from: new Set([...(oldParentUnread.from ?? []), unreadInfo.roomId]),
});
});
};
const deleteUnreadInfo = (roomToUnread: RoomToUnread, allParents: Set<string>, roomId: string) => {
const oldUnread = roomToUnread.get(roomId);
if (!oldUnread) return;
roomToUnread.delete(roomId);
allParents.forEach((parentId) => {
const oldParentUnread = roomToUnread.get(parentId);
if (!oldParentUnread) return;
const newFrom = new Set([...(oldParentUnread.from ?? roomId)]);
newFrom.delete(roomId);
if (newFrom.size === 0) {
roomToUnread.delete(parentId);
return;
}
roomToUnread.set(parentId, {
highlight: oldParentUnread.highlight - oldUnread.highlight,
total: oldParentUnread.total - oldUnread.total,
from: newFrom,
});
});
};
const baseRoomToUnread = atom<RoomToUnread>(new Map());
export const roomToUnreadAtom = atom<RoomToUnread, RoomToUnreadAction>(
(get) => get(baseRoomToUnread),
(get, set, action) => {
if (action.type === 'RESET') {
const draftRoomToUnread: RoomToUnread = new Map();
action.unreadInfos.forEach((unreadInfo) => {
putUnreadInfo(
draftRoomToUnread,
getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
unreadInfo
);
});
set(baseRoomToUnread, draftRoomToUnread);
return;
}
if (action.type === 'PUT') {
set(
baseRoomToUnread,
produce(get(baseRoomToUnread), (draftRoomToUnread) =>
putUnreadInfo(
draftRoomToUnread,
getAllParents(get(roomToParentsAtom), action.unreadInfo.roomId),
action.unreadInfo
)
)
);
return;
}
if (action.type === 'DELETE' && get(baseRoomToUnread).has(action.roomId)) {
set(
baseRoomToUnread,
produce(get(baseRoomToUnread), (draftRoomToUnread) =>
deleteUnreadInfo(
draftRoomToUnread,
getAllParents(get(roomToParentsAtom), action.roomId),
action.roomId
)
)
);
}
}
);
export const useBindRoomToUnreadAtom = (
mx: MatrixClient,
unreadAtom: WritableAtom<RoomToUnread, RoomToUnreadAction>,
muteChangesAtom: PrimitiveAtom<MuteChanges>
) => {
const setUnreadAtom = useSetAtom(unreadAtom);
const muteChanges = useAtomValue(muteChangesAtom);
useEffect(() => {
setUnreadAtom({
type: 'RESET',
unreadInfos: getUnreadInfos(mx),
});
}, [mx, setUnreadAtom]);
useEffect(() => {
const handleTimelineEvent = (
mEvent: MatrixEvent,
room: Room | undefined,
toStartOfTimeline: boolean | undefined,
removed: boolean,
data: IRoomTimelineData
) => {
if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
setUnreadAtom({
type: 'DELETE',
roomId: room.roomId,
});
return;
}
if (mEvent.getSender() === mx.getUserId()) return;
setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
};
mx.on(RoomEvent.Timeline, handleTimelineEvent);
return () => {
mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
};
}, [mx, setUnreadAtom]);
useEffect(() => {
const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
if (mEvent.getType() === 'm.receipt') {
const myUserId = mx.getUserId();
if (!myUserId) return;
if (room.isSpaceRoom()) return;
const content = mEvent.getContent<ReceiptContent>();
const isMyReceipt = Object.keys(content).find((eventId) =>
(Object.keys(content[eventId]) as ReceiptType[]).find(
(receiptType) => content[eventId][receiptType][myUserId]
)
);
if (isMyReceipt) {
setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
}
}
};
mx.on(RoomEvent.Receipt, handleReceipt);
return () => {
mx.removeListener(RoomEvent.Receipt, handleReceipt);
};
}, [mx, setUnreadAtom]);
useEffect(() => {
muteChanges.removed.forEach((roomId) => {
const room = mx.getRoom(roomId);
if (!room) return;
if (!roomHaveUnread(mx, room)) return;
setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
});
muteChanges.added.forEach((roomId) => {
setUnreadAtom({ type: 'DELETE', roomId });
});
}, [mx, setUnreadAtom, muteChanges]);
useEffect(() => {
const handleMembershipChange = (room: Room, membership: string) => {
if (membership !== Membership.Join) {
setUnreadAtom({
type: 'DELETE',
roomId: room.roomId,
});
}
};
mx.on(RoomEvent.MyMembership, handleMembershipChange);
return () => {
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
};
}, [mx, setUnreadAtom]);
};

View file

@ -0,0 +1,3 @@
import { atom } from 'jotai';
export const selectedRoomAtom = atom<string | undefined>(undefined);

View file

@ -0,0 +1,8 @@
import { atom } from 'jotai';
export enum SidebarTab {
Home = 'Home',
People = 'People',
}
export const selectedTabAtom = atom<SidebarTab | string>(SidebarTab.Home);

47
src/app/state/settings.ts Normal file
View file

@ -0,0 +1,47 @@
import { atom } from 'jotai';
const STORAGE_KEY = 'settings';
export interface Settings {
themeIndex: number;
useSystemTheme: boolean;
isMarkdown: boolean;
isPeopleDrawer: boolean;
hideMembershipEvents: boolean;
hideNickAvatarEvents: boolean;
showNotifications: boolean;
isNotificationSounds: boolean;
}
const defaultSettings: Settings = {
themeIndex: 0,
useSystemTheme: true,
isMarkdown: true,
isPeopleDrawer: true,
hideMembershipEvents: false,
hideNickAvatarEvents: true,
showNotifications: true,
isNotificationSounds: true,
};
export const getSettings = () => {
const settings = localStorage.getItem(STORAGE_KEY);
if (settings === null) return defaultSettings;
return JSON.parse(settings) as Settings;
};
export const setSettings = (settings: Settings) => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
};
const baseSettings = atom<Settings>(getSettings());
export const settingsAtom = atom<Settings, Settings>(
(get) => get(baseSettings),
(get, set, update) => {
set(baseSettings, update);
setSettings(update);
}
);

View file

@ -0,0 +1,34 @@
import produce from 'immer';
import { atom } from 'jotai';
import { MatrixClient } from 'matrix-js-sdk';
type RoomInfo = {
roomId: string;
timestamp: number;
};
type TabToRoom = Map<string, RoomInfo>;
type TabToRoomAction = {
type: 'PUT';
tabInfo: { tabId: string; roomInfo: RoomInfo };
};
const baseTabToRoom = atom<TabToRoom>(new Map());
export const tabToRoomAtom = atom<TabToRoom, TabToRoomAction>(
(get) => get(baseTabToRoom),
(get, set, action) => {
if (action.type === 'PUT') {
set(
baseTabToRoom,
produce(get(baseTabToRoom), (draft) => {
draft.set(action.tabInfo.tabId, action.tabInfo.roomInfo);
})
);
}
}
);
export const useBindTabToRoomAtom = (mx: MatrixClient) => {
console.log(mx);
// TODO:
};

64
src/app/state/utils.ts Normal file
View file

@ -0,0 +1,64 @@
import { useSetAtom, WritableAtom } from 'jotai';
import { ClientEvent, MatrixClient, Room, RoomEvent } from 'matrix-js-sdk';
import { useEffect } from 'react';
import { Membership } from '../../types/matrix/room';
export type RoomsAction =
| {
type: 'INITIALIZE';
rooms: string[];
}
| {
type: 'PUT' | 'DELETE';
roomId: string;
};
export const useBindRoomsWithMembershipsAtom = (
mx: MatrixClient,
roomsAtom: WritableAtom<string[], RoomsAction>,
memberships: Membership[]
) => {
const setRoomsAtom = useSetAtom(roomsAtom);
useEffect(() => {
const satisfyMembership = (room: Room): boolean =>
!!memberships.find((membership) => membership === room.getMyMembership());
setRoomsAtom({
type: 'INITIALIZE',
rooms: mx
.getRooms()
.filter(satisfyMembership)
.map((room) => room.roomId),
});
const handleAddRoom = (room: Room) => {
if (satisfyMembership(room)) {
setRoomsAtom({ type: 'PUT', roomId: room.roomId });
}
};
const handleMembershipChange = (room: Room) => {
if (!satisfyMembership(room)) {
setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
}
};
const handleDeleteRoom = (roomId: string) => {
setRoomsAtom({ type: 'DELETE', roomId });
};
mx.on(ClientEvent.Room, handleAddRoom);
mx.on(RoomEvent.MyMembership, handleMembershipChange);
mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
return () => {
mx.removeListener(ClientEvent.Room, handleAddRoom);
mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
};
}, [mx, memberships, setRoomsAtom]);
};
export const compareRoomsEqual = (a: string[], b: string[]) => {
if (a.length !== b.length) return false;
return a.every((roomId, roomIdIndex) => roomId === b[roomIdIndex]);
};

View file

@ -0,0 +1,8 @@
export type DisposeCallback<Q extends unknown[] = [], R = void> = (...args: Q) => R;
export type DisposableContext<P extends unknown[] = [], Q extends unknown[] = [], R = void> = (
...args: P
) => DisposeCallback<Q, R>;
export const disposable = <P extends unknown[], Q extends unknown[] = [], R = void>(
context: DisposableContext<P, Q, R>
) => context;

217
src/app/utils/room.ts Normal file
View file

@ -0,0 +1,217 @@
import {
IPushRule,
IPushRules,
MatrixClient,
MatrixEvent,
NotificationCountType,
Room,
} from 'matrix-js-sdk';
import { AccountDataEvent } from '../../types/matrix/accountData';
import {
NotificationType,
RoomToParents,
RoomType,
StateEvent,
UnreadInfo,
} from '../../types/matrix/room';
export const getStateEvent = (
room: Room,
eventType: StateEvent,
stateKey = ''
): MatrixEvent | null => room.currentState.getStateEvents(eventType, stateKey);
export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] =>
room.currentState.getStateEvents(eventType);
export const getAccountData = (
mx: MatrixClient,
eventType: AccountDataEvent
): MatrixEvent | undefined => mx.getAccountData(eventType);
export const getMDirects = (mDirectEvent: MatrixEvent): Set<string> => {
const roomIds = new Set<string>();
const userIdToDirects = mDirectEvent?.getContent();
if (userIdToDirects === undefined) return roomIds;
Object.keys(userIdToDirects).forEach((userId) => {
const directs = userIdToDirects[userId];
if (Array.isArray(directs)) {
directs.forEach((id) => {
if (typeof id === 'string') roomIds.add(id);
});
}
});
return roomIds;
};
export const isDirectInvite = (room: Room | null, myUserId: string | null): boolean => {
if (!room || !myUserId) return false;
const me = room.getMember(myUserId);
const memberEvent = me?.events?.member;
const content = memberEvent?.getContent();
return content?.is_direct === true;
};
export const isSpace = (room: Room | null): boolean => {
if (!room) return false;
const event = getStateEvent(room, StateEvent.RoomCreate);
if (!event) return false;
return event.getContent().type === RoomType.Space;
};
export const isRoom = (room: Room | null): boolean => {
if (!room) return false;
const event = getStateEvent(room, StateEvent.RoomCreate);
if (!event) return false;
return event.getContent().type === undefined;
};
export const isUnsupportedRoom = (room: Room | null): boolean => {
if (!room) return false;
const event = getStateEvent(room, StateEvent.RoomCreate);
if (!event) return true; // Consider room unsupported if m.room.create event doesn't exist
return event.getContent().type !== undefined && event.getContent().type !== RoomType.Space;
};
export function isValidChild(mEvent: MatrixEvent): boolean {
return mEvent.getType() === StateEvent.SpaceChild && Object.keys(mEvent.getContent()).length > 0;
}
export const getAllParents = (roomToParents: RoomToParents, roomId: string): Set<string> => {
const allParents = new Set<string>();
const addAllParentIds = (rId: string) => {
if (allParents.has(rId)) return;
allParents.add(rId);
const parents = roomToParents.get(rId);
parents?.forEach((id) => addAllParentIds(id));
};
addAllParentIds(roomId);
allParents.delete(roomId);
return allParents;
};
export const getSpaceChildren = (room: Room) =>
getStateEvents(room, StateEvent.SpaceChild).reduce<string[]>((filtered, mEvent) => {
const stateKey = mEvent.getStateKey();
if (isValidChild(mEvent) && stateKey) {
filtered.push(stateKey);
}
return filtered;
}, []);
export const mapParentWithChildren = (
roomToParents: RoomToParents,
roomId: string,
children: string[]
) => {
const allParents = getAllParents(roomToParents, roomId);
children.forEach((childId) => {
if (allParents.has(childId)) {
// Space cycle detected.
return;
}
const parents = roomToParents.get(childId) ?? new Set<string>();
parents.add(roomId);
roomToParents.set(childId, parents);
});
};
export const getRoomToParents = (mx: MatrixClient): RoomToParents => {
const map: RoomToParents = new Map();
mx.getRooms()
.filter((room) => isSpace(room))
.forEach((room) => mapParentWithChildren(map, room.roomId, getSpaceChildren(room)));
return map;
};
export const isMutedRule = (rule: IPushRule) =>
rule.actions[0] === 'dont_notify' && rule.conditions?.[0]?.kind === 'event_match';
export const findMutedRule = (overrideRules: IPushRule[], roomId: string) =>
overrideRules.find((rule) => rule.rule_id === roomId && isMutedRule(rule));
export const getNotificationType = (mx: MatrixClient, roomId: string): NotificationType => {
let roomPushRule: IPushRule | undefined;
try {
roomPushRule = mx.getRoomPushRule('global', roomId);
} catch {
roomPushRule = undefined;
}
if (!roomPushRule) {
const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
?.global?.override;
if (!overrideRules) return NotificationType.Default;
return findMutedRule(overrideRules, roomId) ? NotificationType.Mute : NotificationType.Default;
}
if (roomPushRule.actions[0] === 'notify') return NotificationType.AllMessages;
return NotificationType.MentionsAndKeywords;
};
export const isNotificationEvent = (mEvent: MatrixEvent) => {
const eType = mEvent.getType();
if (
['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'].find(
(type) => type === eType
)
)
return false;
if (eType === 'm.room.member') return false;
if (mEvent.isRedacted()) return false;
if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
return true;
};
export const roomHaveUnread = (mx: MatrixClient, room: Room) => {
const userId = mx.getUserId();
if (!userId) return false;
const readUpToId = room.getEventReadUpTo(userId);
const liveEvents = room.getLiveTimeline().getEvents();
if (liveEvents[liveEvents.length - 1]?.getSender() === userId) {
return false;
}
for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
const event = liveEvents[i];
if (!event) return false;
if (event.getId() === readUpToId) return false;
if (isNotificationEvent(event)) return true;
}
return true;
};
export const getUnreadInfo = (room: Room): UnreadInfo => {
const total = room.getUnreadNotificationCount(NotificationCountType.Total);
const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight);
return {
roomId: room.roomId,
highlight,
total: highlight > total ? highlight : total,
};
};
export const getUnreadInfos = (mx: MatrixClient): UnreadInfo[] => {
const unreadInfos = mx.getRooms().reduce<UnreadInfo[]>((unread, room) => {
if (room.isSpaceRoom()) return unread;
if (room.getMyMembership() !== 'join') return unread;
if (getNotificationType(mx, room.roomId) === NotificationType.Mute) return unread;
if (roomHaveUnread(mx, room)) {
unread.push(getUnreadInfo(room));
}
return unread;
}, []);
return unreadInfos;
};

10
src/app/utils/sanitize.ts Normal file
View file

@ -0,0 +1,10 @@
export const sanitizeText = (body: string) => {
const tagsToReplace: Record<string, string> = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
};
return body.replace(/[&<>'"]/g, (tag) => tagsToReplace[tag] || tag);
};

7
src/client/mx.ts Normal file
View file

@ -0,0 +1,7 @@
import { MatrixClient } from 'matrix-js-sdk';
import initMatrix from './initMatrix';
export const mx = (): MatrixClient => {
if (!initMatrix.matrixClient) console.error('Matrix client is used before initialization!');
return initMatrix.matrixClient!;
};

View file

@ -1,5 +1,13 @@
/* eslint-disable import/first */
import React from 'react';
import ReactDom from 'react-dom';
import { enableMapSet } from 'immer';
import '@fontsource/inter/variable.css';
import 'folds/dist/style.css';
import { lightTheme, configClass, config, varsClass } from 'folds';
enableMapSet();
import './font';
import './index.scss';
@ -7,6 +15,9 @@ import settings from './client/state/settings';
import App from './app/pages/App';
document.body.classList.add(lightTheme, configClass, varsClass);
document.body.style.fontFamily = config.font.Inter;
settings.applyTheme();
ReactDom.render(<App />, document.getElementById('root'));

View file

@ -0,0 +1,6 @@
export enum AccountDataEvent {
PushRules = 'm.push_rules',
Direct = 'm.direct',
IgnoredUserList = 'm.ignored_user_list',
CinnySpaces = 'in.cinny.spaces',
}

59
src/types/matrix/room.ts Normal file
View file

@ -0,0 +1,59 @@
export enum Membership {
Invite = 'invite',
Knock = 'knock',
Join = 'join',
Leave = 'leave',
Ban = 'ban',
}
export enum StateEvent {
RoomCanonicalAlias = 'm.room.canonical_alias',
RoomCreate = 'm.room.create',
RoomJoinRules = 'm.room.join_rules',
RoomMember = 'm.room.member',
RoomThirdPartyInvite = 'm.room.third_party_invite',
RoomPowerLevels = 'm.room.power_levels',
RoomName = 'm.room.name',
RoomTopic = 'm.room.topic',
RoomAvatar = 'm.room.avatar',
RoomPinnedEvents = 'm.room.pinned_events',
RoomEncryption = 'm.room.encryption',
RoomHistoryVisibility = 'm.room.history_visibility',
RoomGuestAccess = 'm.room.guest_access',
RoomServerAcl = 'm.room.server_acl',
RoomTombstone = 'm.room.tombstone',
SpaceChild = 'm.space.child',
SpaceParent = 'm.space.parent',
}
export enum RoomType {
Space = 'm.space',
}
export enum NotificationType {
Default = 'default',
AllMessages = 'all_messages',
MentionsAndKeywords = 'mentions_and_keywords',
Mute = 'mute',
}
export type RoomToParents = Map<string, Set<string>>;
export type RoomToUnread = Map<
string,
{
total: number;
highlight: number;
from: Set<string> | null;
}
>;
export type UnreadInfo = {
roomId: string;
total: number;
highlight: number;
};
export type MuteChanges = {
added: string[];
removed: string[];
};

View file

@ -2,8 +2,9 @@
"compilerOptions": {
"sourceMap": true,
"jsx": "react",
"target": "ES6",
"target": "ES2016",
"allowJs": true,
"strict": true,
"esModuleInterop": true,
"moduleResolution": "Node",
"outDir": "dist",

View file

@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { wasm } from '@rollup/plugin-wasm';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
const copyFiles = {
targets: [
@ -33,6 +34,7 @@ export default defineConfig({
},
plugins: [
viteStaticCopy(copyFiles),
vanillaExtractPlugin(),
wasm(),
react(),
],