Compare commits
29 commits
dev
...
refactor-s
Author | SHA1 | Date | |
---|---|---|---|
|
24fdba2d92 | ||
|
bcbeadc72b | ||
|
dc848b1f04 | ||
|
0119811a67 | ||
|
23de3aa4a3 | ||
|
c7e668eed2 | ||
|
ddc9bdef70 | ||
|
b08125f68e | ||
|
837d03a93b | ||
|
9bd913e174 | ||
|
bc1e9abf3e | ||
|
85e5bc887f | ||
|
147a6065d0 | ||
|
67cd2fc5c4 | ||
|
899a5b934e | ||
|
4d802d918e | ||
|
a9937cb4ba | ||
|
08070d41c5 | ||
|
6b559404b2 | ||
|
582250c419 | ||
|
56a134c85c | ||
|
1c7600c3b8 | ||
|
5b41794947 | ||
|
3cf603bfc6 | ||
|
0a3fe685d1 | ||
|
116bf7d2f0 | ||
|
cf1a02a7b3 | ||
|
0714685b9b | ||
|
2ef8fdb1c9 |
49 changed files with 2978 additions and 164 deletions
|
@ -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"
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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
711
package-lock.json
generated
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
44
src/app/components/editor/Editor.css.ts
Normal file
44
src/app/components/editor/Editor.css.ts
Normal 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,
|
||||
},
|
||||
]);
|
80
src/app/components/editor/Editor.preview.tsx
Normal file
80
src/app/components/editor/Editor.preview.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
85
src/app/components/editor/Editor.tsx
Normal file
85
src/app/components/editor/Editor.tsx
Normal 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>
|
||||
);
|
||||
}
|
55
src/app/components/editor/Elements.css.ts
Normal file
55
src/app/components/editor/Elements.css.ts
Normal 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,
|
||||
},
|
||||
]);
|
108
src/app/components/editor/Elements.tsx
Normal file
108
src/app/components/editor/Elements.tsx
Normal 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>;
|
||||
}
|
132
src/app/components/editor/Toolbar.tsx
Normal file
132
src/app/components/editor/Toolbar.tsx
Normal 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>
|
||||
);
|
||||
}
|
96
src/app/components/editor/common.ts
Normal file
96
src/app/components/editor/common.ts
Normal 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,
|
||||
});
|
||||
};
|
39
src/app/components/editor/keyboard.ts
Normal file
39
src/app/components/editor/keyboard.ts
Normal 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]);
|
||||
}
|
||||
});
|
||||
};
|
78
src/app/components/editor/output.ts
Normal file
78
src/app/components/editor/output.ts
Normal 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
106
src/app/components/editor/slate.d.ts
vendored
Normal 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;
|
||||
}
|
||||
}
|
111
src/app/components/sidebar/Sidebar.css.ts
Normal file
111
src/app/components/sidebar/Sidebar.css.ts
Normal 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}`,
|
||||
});
|
8
src/app/components/sidebar/Sidebar.tsx
Normal file
8
src/app/components/sidebar/Sidebar.tsx
Normal 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} />
|
||||
));
|
75
src/app/components/sidebar/SidebarAvatar.tsx
Normal file
75
src/app/components/sidebar/SidebarAvatar.tsx
Normal 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>
|
||||
)
|
||||
);
|
21
src/app/components/sidebar/SidebarContent.tsx
Normal file
21
src/app/components/sidebar/SidebarContent.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
10
src/app/components/sidebar/SidebarStack.tsx
Normal file
10
src/app/components/sidebar/SidebarStack.tsx
Normal 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} />
|
||||
)
|
||||
);
|
13
src/app/components/sidebar/SidebarStackSeparator.tsx
Normal file
13
src/app/components/sidebar/SidebarStackSeparator.tsx
Normal 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"
|
||||
/>
|
||||
);
|
||||
}
|
5
src/app/components/sidebar/index.ts
Normal file
5
src/app/components/sidebar/index.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
export * from './Sidebar';
|
||||
export * from './SidebarAvatar';
|
||||
export * from './SidebarContent';
|
||||
export * from './SidebarStack';
|
||||
export * from './SidebarStackSeparator';
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
125
src/app/organisms/navigation/Sidebar1.tsx
Normal file
125
src/app/organisms/navigation/Sidebar1.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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;
|
||||
|
|
63
src/app/state/hooks/inviteList.ts
Normal file
63
src/app/state/hooks/inviteList.ts
Normal 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));
|
||||
};
|
54
src/app/state/hooks/roomList.ts
Normal file
54
src/app/state/hooks/roomList.ts
Normal 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));
|
||||
};
|
34
src/app/state/hooks/settings.ts
Normal file
34
src/app/state/hooks/settings.ts
Normal 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];
|
||||
};
|
16
src/app/state/hooks/useBindAtoms.ts
Normal file
16
src/app/state/hooks/useBindAtoms.ts
Normal 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);
|
||||
};
|
32
src/app/state/inviteList.ts
Normal file
32
src/app/state/inviteList.ts
Normal 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], [])
|
||||
);
|
||||
};
|
47
src/app/state/mDirectList.ts
Normal file
47
src/app/state/mDirectList.ts
Normal 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]);
|
||||
};
|
101
src/app/state/mutedRoomList.ts
Normal file
101
src/app/state/mutedRoomList.ts
Normal 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
31
src/app/state/roomList.ts
Normal 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], [])
|
||||
);
|
||||
};
|
120
src/app/state/roomToParents.ts
Normal file
120
src/app/state/roomToParents.ts
Normal 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]);
|
||||
};
|
219
src/app/state/roomToUnread.ts
Normal file
219
src/app/state/roomToUnread.ts
Normal 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]);
|
||||
};
|
3
src/app/state/selectedRoom.ts
Normal file
3
src/app/state/selectedRoom.ts
Normal file
|
@ -0,0 +1,3 @@
|
|||
import { atom } from 'jotai';
|
||||
|
||||
export const selectedRoomAtom = atom<string | undefined>(undefined);
|
8
src/app/state/selectedTab.ts
Normal file
8
src/app/state/selectedTab.ts
Normal 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
47
src/app/state/settings.ts
Normal 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);
|
||||
}
|
||||
);
|
34
src/app/state/tabToRoom.ts
Normal file
34
src/app/state/tabToRoom.ts
Normal 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
64
src/app/state/utils.ts
Normal 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]);
|
||||
};
|
8
src/app/utils/disposable.ts
Normal file
8
src/app/utils/disposable.ts
Normal 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
217
src/app/utils/room.ts
Normal 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
10
src/app/utils/sanitize.ts
Normal file
|
@ -0,0 +1,10 @@
|
|||
export const sanitizeText = (body: string) => {
|
||||
const tagsToReplace: Record<string, string> = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
};
|
||||
return body.replace(/[&<>'"]/g, (tag) => tagsToReplace[tag] || tag);
|
||||
};
|
7
src/client/mx.ts
Normal file
7
src/client/mx.ts
Normal 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!;
|
||||
};
|
|
@ -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'));
|
||||
|
|
6
src/types/matrix/accountData.ts
Normal file
6
src/types/matrix/accountData.ts
Normal 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
59
src/types/matrix/room.ts
Normal 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[];
|
||||
};
|
|
@ -2,8 +2,9 @@
|
|||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"jsx": "react",
|
||||
"target": "ES6",
|
||||
"target": "ES2016",
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"moduleResolution": "Node",
|
||||
"outDir": "dist",
|
||||
|
|
|
@ -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(),
|
||||
],
|
||||
|
|
Loading…
Reference in a new issue