mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 02:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'dev' into fix-257

Browse source
This commit is contained in:
Ajay Bura 2025-09-15 13:16:59 +05:30
commit 737cc09fea
379 changed files with 9750 additions and 9975 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/app/atoms/avatar/Avatar.jsx
View file

@ -1,69 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Avatar.scss';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
import { avatarInitials } from '../../../util/common';
const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
let textSize = 's1';
if (size === 'large') textSize = 'h1';
if (size === 'small') textSize = 'b1';
if (size === 'extra-small') textSize = 'b3';
return (
<div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
{imageSrc !== null ? (
<img
draggable="false"
src={imageSrc}
onLoad={(e) => {
e.target.style.backgroundColor = 'transparent';
}}
onError={(e) => {
e.target.src = ImageBrokenSVG;
}}
alt=""
/>
) : (
<span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
>
{iconSrc !== null ? (
<RawIcon size={size} src={iconSrc} color={iconColor} />
) : (
text !== null && (
<Text variant={textSize} primary>
{avatarInitials(text)}
</Text>
)
)}
</span>
)}
</div>
);
});
Avatar.defaultProps = {
text: null,
bgColor: 'transparent',
iconSrc: null,
iconColor: null,
imageSrc: null,
size: 'normal',
};
Avatar.propTypes = {
text: PropTypes.string,
bgColor: PropTypes.string,
iconSrc: PropTypes.string,
iconColor: PropTypes.string,
imageSrc: PropTypes.string,
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
};
export default Avatar;

56
src/app/atoms/avatar/Avatar.scss
View file

@ -1,56 +0,0 @@
@use '../../partials/flex';
.avatar-container {
display: inline-flex;
width: 42px;
height: 42px;
border-radius: var(--bo-radius);
position: relative;
&__large {
width: var(--av-large);
height: var(--av-large);
}
&__normal {
width: var(--av-normal);
height: var(--av-normal);
}
&__small {
width: var(--av-small);
height: var(--av-small);
}
&__extra-small {
width: var(--av-extra-small);
height: var(--av-extra-small);
}
> img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
background-color: var(--bg-surface-hover);
}
.avatar__border {
@extend .cp-fx__row--c-c;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
.text {
color: white;
}
&--active {
@extend .avatar__border;
box-shadow: var(--bs-surface-border);
}
}
}

57
src/app/atoms/avatar/render.js
View file

@ -1,57 +0,0 @@
import { avatarInitials, cssVar } from '../../../util/common';
// renders the avatar and returns it as an URL
export default async function renderAvatar({
text, bgColor, imageSrc, size, borderRadius, scale,
}) {
try {
const canvas = document.createElement('canvas');
canvas.width = size * scale;
canvas.height = size * scale;
const ctx = canvas.getContext('2d');
ctx.scale(scale, scale);
// rounded corners
ctx.beginPath();
ctx.moveTo(size, size);
ctx.arcTo(0, size, 0, 0, borderRadius);
ctx.arcTo(0, 0, size, 0, borderRadius);
ctx.arcTo(size, 0, size, size, borderRadius);
ctx.arcTo(size, size, 0, size, borderRadius);
if (imageSrc) {
// clip corners of image
ctx.closePath();
ctx.clip();
const img = new Image();
img.crossOrigin = 'anonymous';
const promise = new Promise((resolve, reject) => {
img.onerror = reject;
img.onload = resolve;
});
img.src = imageSrc;
await promise;
ctx.drawImage(img, 0, 0, size, size);
} else {
// colored background
ctx.fillStyle = cssVar(bgColor);
ctx.fill();
// centered letter
ctx.fillStyle = '#fff';
ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText(avatarInitials(text), size / 2, size / 2);
}
return canvas.toDataURL();
} catch (e) {
console.error(e);
return imageSrc;
}
}

29
src/app/atoms/badge/NotificationBadge.jsx
View file

@ -1,29 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './NotificationBadge.scss';
import Text from '../text/Text';
function NotificationBadge({ alert, content }) {
const notificationClass = alert ? ' notification-badge--alert' : '';
return (
<div className={`notification-badge${notificationClass}`}>
{content !== null && <Text variant="b3" weight="bold">{content}</Text>}
</div>
);
}
NotificationBadge.defaultProps = {
alert: false,
content: null,
};
NotificationBadge.propTypes = {
alert: PropTypes.bool,
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
};
export default NotificationBadge;

21
src/app/atoms/badge/NotificationBadge.scss
View file

@ -1,21 +0,0 @@
.notification-badge {
min-width: 16px;
min-height: 8px;
padding: 0 var(--sp-ultra-tight);
background-color: var(--bg-badge);
border-radius: var(--bo-radius);
.text {
color: var(--tc-badge);
text-align: center;
}
&--alert {
background-color: var(--bg-positive);
}
&:empty {
min-width: 8px;
margin: 0 var(--sp-ultra-tight);
}
}

53
src/app/atoms/button/Button.jsx
View file

@ -1,53 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Button.scss';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
import { blurOnBubbling } from './script';
const Button = React.forwardRef(({
id, className, variant, iconSrc,
type, onClick, children, disabled,
}, ref) => {
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
return (
<button
ref={ref}
id={id === '' ? undefined : id}
className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
onClick={onClick}
// eslint-disable-next-line react/button-has-type
type={type}
disabled={disabled}
>
{iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
{typeof children === 'string' && <Text variant="b1">{ children }</Text>}
{typeof children !== 'string' && children }
</button>
);
});
Button.defaultProps = {
id: '',
className: null,
variant: 'surface',
iconSrc: null,
type: 'button',
onClick: null,
disabled: false,
};
Button.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit', 'reset']),
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
};
export default Button;

81
src/app/atoms/button/Button.scss
View file

@ -1,81 +0,0 @@
@use 'state';
@use '../../partials/dir';
@use '../../partials/text';
.btn-surface,
.btn-primary,
.btn-positive,
.btn-caution,
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
padding: var(--sp-extra-tight) var(--sp-normal);
background-color: transparent;
border: none;
border-radius: var(--bo-radius);
cursor: pointer;
@include state.disabled;
& .text {
@extend .cp-txt__ellipsis;
}
&--icon {
@include dir.side(padding, var(--sp-tight), var(--sp-loose));
}
.ic-raw {
@include dir.side(margin, 0, var(--sp-extra-tight));
flex-shrink: 0;
}
}
@mixin color($textColor, $iconColor) {
.text {
color: $textColor;
}
.ic-raw {
background-color: $iconColor;
}
}
.btn-surface {
box-shadow: var(--bs-surface-border);
@include color(var(--tc-surface-high), var(--ic-surface-normal));
@include state.hover(var(--bg-surface-hover));
@include state.focus(var(--bs-surface-outline));
@include state.active(var(--bg-surface-active));
}
.btn-primary {
background-color: var(--bg-primary);
@include color(var(--tc-primary-high), var(--ic-primary-normal));
@include state.hover(var(--bg-primary-hover));
@include state.focus(var(--bs-primary-outline));
@include state.active(var(--bg-primary-active));
}
.btn-positive {
box-shadow: var(--bs-positive-border);
@include color(var(--tc-positive-high), var(--ic-positive-normal));
@include state.hover(var(--bg-positive-hover));
@include state.focus(var(--bs-positive-outline));
@include state.active(var(--bg-positive-active));
}
.btn-caution {
box-shadow: var(--bs-caution-border);
@include color(var(--tc-caution-high), var(--ic-caution-normal));
@include state.hover(var(--bg-caution-hover));
@include state.focus(var(--bs-caution-outline));
@include state.active(var(--bg-caution-active));
}
.btn-danger {
box-shadow: var(--bs-danger-border);
@include color(var(--tc-danger-high), var(--ic-danger-normal));
@include state.hover(var(--bg-danger-hover));
@include state.focus(var(--bs-danger-outline));
@include state.active(var(--bg-danger-active));
}

39
src/app/atoms/button/Checkbox.jsx
View file

@ -1,39 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Checkbox.scss';
function Checkbox({
variant, isActive, onToggle,
disabled, tabIndex,
}) {
const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
if (onToggle === null) return <span className={className} />;
return (
// eslint-disable-next-line jsx-a11y/control-has-associated-label
<button
onClick={() => onToggle(!isActive)}
className={className}
type="button"
disabled={disabled}
tabIndex={tabIndex}
/>
);
}
Checkbox.defaultProps = {
variant: 'primary',
isActive: false,
onToggle: null,
disabled: false,
tabIndex: 0,
};
Checkbox.propTypes = {
variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
isActive: PropTypes.bool,
onToggle: PropTypes.func,
disabled: PropTypes.bool,
tabIndex: PropTypes.number,
};
export default Checkbox;

39
src/app/atoms/button/Checkbox.scss
View file

@ -1,39 +0,0 @@
@use '../../partials/flex';
@use './state';
.checkbox {
width: 20px;
height: 20px;
border-radius: calc(var(--bo-radius) / 2);
background-color: var(--bg-surface-border);
box-shadow: var(--bs-surface-border);
cursor: pointer;
@include state.disabled;
@extend .cp-fx__row--c-c;
&--active {
background-color: black;
&::before {
content: "";
display: inline-block;
width: 12px;
height: 6px;
border: 6px solid white;
border-width: 0 0 3px 3px;
transform: rotateZ(-45deg) translate(1px, -1px);
}
}
}
.checkbox-primary.checkbox--active {
background-color: var(--bg-primary);
}
.checkbox-positive.checkbox--active {
background-color: var(--bg-positive);
}
.checkbox-caution.checkbox--active {
background-color: var(--bg-caution);
}
.checkbox-danger.checkbox--active {
background-color: var(--bg-danger);
}

68
src/app/atoms/button/IconButton.jsx
View file

@ -1,68 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './IconButton.scss';
import RawIcon from '../system-icons/RawIcon';
import Tooltip from '../tooltip/Tooltip';
import { blurOnBubbling } from './script';
import Text from '../text/Text';
const IconButton = React.forwardRef(({
variant, size, type,
tooltip, tooltipPlacement, src,
onClick, tabIndex, disabled, isImage,
className,
}, ref) => {
const btn = (
<button
ref={ref}
className={`ic-btn ic-btn-${variant} ${className}`}
onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
onClick={onClick}
// eslint-disable-next-line react/button-has-type
type={type}
tabIndex={tabIndex}
disabled={disabled}
>
<RawIcon size={size} src={src} isImage={isImage} />
</button>
);
if (tooltip === null) return btn;
return (
<Tooltip
placement={tooltipPlacement}
content={<Text variant="b2">{tooltip}</Text>}
>
{btn}
</Tooltip>
);
});
IconButton.defaultProps = {
variant: 'surface',
size: 'normal',
type: 'button',
tooltip: null,
tooltipPlacement: 'top',
onClick: null,
tabIndex: 0,
disabled: false,
isImage: false,
className: '',
};
IconButton.propTypes = {
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
type: PropTypes.oneOf(['button', 'submit', 'reset']),
tooltip: PropTypes.string,
tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
src: PropTypes.string.isRequired,
onClick: PropTypes.func,
tabIndex: PropTypes.number,
disabled: PropTypes.bool,
isImage: PropTypes.bool,
className: PropTypes.string,
};
export default IconButton;

56
src/app/atoms/button/IconButton.scss
View file

@ -1,56 +0,0 @@
@use 'state';
.ic-btn {
padding: var(--sp-extra-tight);
border: none;
border-radius: var(--bo-radius);
background-color: transparent;
font-size: 0;
line-height: 0;
cursor: pointer;
@include state.disabled;
}
@mixin color($color) {
.ic-raw {
background-color: $color;
}
}
@mixin focus($color) {
&:focus {
outline: none;
background-color: $color;
}
}
.ic-btn-surface {
@include color(var(--ic-surface-normal));
@include state.hover(var(--bg-surface-hover));
@include focus(var(--bg-surface-hover));
@include state.active(var(--bg-surface-active));
}
.ic-btn-primary {
@include color(var(--ic-primary-normal));
@include state.hover(var(--bg-primary-hover));
@include focus(var(--bg-primary-hover));
@include state.active(var(--bg-primary-active));
background-color: var(--bg-primary);
}
.ic-btn-positive {
@include color(var(--ic-positive-normal));
@include state.hover(var(--bg-positive-hover));
@include focus(var(--bg-positive-hover));
@include state.active(var(--bg-positive-active));
}
.ic-btn-caution {
@include color(var(--ic-caution-normal));
@include state.hover(var(--bg-caution-hover));
@include focus(var(--bg-caution-hover));
@include state.active(var(--bg-caution-active));
}
.ic-btn-danger {
@include color(var(--ic-danger-normal));
@include state.hover(var(--bg-danger-hover));
@include focus(var(--bg-danger-hover));
@include state.active(var(--bg-danger-active));
}

30
src/app/atoms/button/RadioButton.jsx
View file

@ -1,30 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './RadioButton.scss';
function RadioButton({ isActive, onToggle, disabled }) {
if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
return (
// eslint-disable-next-line jsx-a11y/control-has-associated-label
<button
onClick={() => onToggle(!isActive)}
className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
type="button"
disabled={disabled}
/>
);
}
RadioButton.defaultProps = {
isActive: false,
onToggle: null,
disabled: false,
};
RadioButton.propTypes = {
isActive: PropTypes.bool,
onToggle: PropTypes.func,
disabled: PropTypes.bool,
};
export default RadioButton;

28
src/app/atoms/button/RadioButton.scss
View file

@ -1,28 +0,0 @@
@use '../../partials/flex';
@use './state';
.radio-btn {
@extend .cp-fx__row--c-c;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--bg-surface-border);
border: 2px solid var(--bg-surface-border);
cursor: pointer;
@include state.disabled;
&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: var(--bg-surface-border);
border-radius: 50%;
}
&--active {
border: 2px solid var(--bg-positive);
&::before {
background-color: var(--bg-positive);
}
}
}

31
src/app/atoms/button/Toggle.jsx
View file

@ -1,31 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Toggle.scss';
function Toggle({ isActive, onToggle, disabled }) {
const className = `toggle${isActive ? ' toggle--active' : ''}`;
if (onToggle === null) return <span className={className} />;
return (
// eslint-disable-next-line jsx-a11y/control-has-associated-label
<button
onClick={() => onToggle(!isActive)}
className={className}
type="button"
disabled={disabled}
/>
);
}
Toggle.defaultProps = {
isActive: false,
disabled: false,
onToggle: null,
};
Toggle.propTypes = {
isActive: PropTypes.bool,
onToggle: PropTypes.func,
disabled: PropTypes.bool,
};
export default Toggle;

42
src/app/atoms/button/Toggle.scss
View file

@ -1,42 +0,0 @@
@use '../../partials/dir';
@use './state';
.toggle {
width: 44px;
height: 24px;
padding: 0 var(--sp-ultra-tight);
display: flex;
align-items: center;
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
cursor: pointer;
background-color: var(--bg-surface-low);
@include state.disabled;
transition: background 200ms ease-in-out;
&::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-color: var(--tc-surface-low);
border-radius: calc(var(--bo-radius) / 2);
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
opacity: 0.6;
}
&--active {
background-color: var(--bg-positive);
&::before {
--ltr: translateX(calc(125%));
--rtl: translateX(calc(-125%));
@include dir.prop(transform, var(--ltr), var(--rtl));
transform: translateX(calc(125%));
background-color: var(--bg-surface);
opacity: 1;
}
}
}

25
src/app/atoms/button/_state.scss
View file

@ -1,25 +0,0 @@
@mixin hover($color) {
@media (hover: hover) {
&:hover {
background-color: $color;
}
}
}
@mixin focus($outline) {
&:focus {
outline: none;
box-shadow: $outline;
}
}
@mixin active($color) {
&:active {
background-color: $color !important;
}
}
@mixin disabled {
&:disabled {
opacity: 0.4;
cursor: no-drop;
}
}

23
src/app/atoms/button/script.js
View file

@ -1,23 +0,0 @@
/**
* blur [selector] element in bubbling path.
* @param {Event} e Event
* @param {string} selector element selector for Element.matches([selector])
* @return {boolean} if blured return true, else return false with warning in console
*/
function blurOnBubbling(e, selector) {
const bubblingPath = e.nativeEvent.composedPath();
for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
if (bubblingPath[elIndex] === document) {
console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
break;
}
if (bubblingPath[elIndex].matches(selector)) {
setTimeout(() => bubblingPath[elIndex].blur(), 50);
return true;
}
}
return false;
}
export { blurOnBubbling };

59
src/app/atoms/card/InfoCard.jsx
View file

@ -1,59 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './InfoCard.scss';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
import IconButton from '../button/IconButton';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
function InfoCard({
className, style,
variant, iconSrc,
title, content,
rounded, requestClose,
}) {
const classes = [`info-card info-card--${variant}`];
if (rounded) classes.push('info-card--rounded');
if (className) classes.push(className);
return (
<div className={classes.join(' ')} style={style}>
{iconSrc && (
<div className="info-card__icon">
<RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
</div>
)}
<div className="info-card__content">
<Text>{title}</Text>
{content}
</div>
{requestClose && (
<IconButton src={CrossIC} variant={variant} onClick={requestClose} />
)}
</div>
);
}
InfoCard.defaultProps = {
className: null,
style: null,
variant: 'surface',
iconSrc: null,
content: null,
rounded: false,
requestClose: null,
};
InfoCard.propTypes = {
className: PropTypes.string,
style: PropTypes.shape({}),
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
iconSrc: PropTypes.string,
title: PropTypes.string.isRequired,
content: PropTypes.node,
rounded: PropTypes.bool,
requestClose: PropTypes.func,
};
export default InfoCard;

79
src/app/atoms/card/InfoCard.scss
View file

@ -1,79 +0,0 @@
@use '.././../partials/flex';
@use '.././../partials/dir';
.info-card {
display: flex;
align-items: flex-start;
line-height: 0;
padding: var(--sp-tight);
@include dir.prop(border-left, 4px solid transparent, none);
@include dir.prop(border-right, none, 4px solid transparent);
& > .ic-btn {
padding: 0;
border-radius: 4;
}
&__content {
margin: 0 var(--sp-tight);
@extend .cp-fx__item-one;
& > *:nth-child(2) {
margin-top: var(--sp-ultra-tight);
}
}
&--rounded {
@include dir.prop(
border-radius,
0 var(--bo-radius) var(--bo-radius) 0,
var(--bo-radius) 0 0 var(--bo-radius)
);
}
&--surface {
border-color: var(--bg-surface-border);
background-color: var(--bg-surface-hover);
}
&--primary {
border-color: var(--bg-primary);
background-color: var(--bg-primary-hover);
& .text {
color: var(--tc-primary-high);
&-b3 {
color: var(--tc-primary-normal);
}
}
}
&--positive {
border-color: var(--bg-positive-border);
background-color: var(--bg-positive-hover);
& .text {
color: var(--tc-positive-high);
&-b3 {
color: var(--tc-positive-normal);
}
}
}
&--caution {
border-color: var(--bg-caution-border);
background-color: var(--bg-caution-hover);
& .text {
color: var(--tc-caution-high);
&-b3 {
color: var(--tc-caution-normal);
}
}
}
&--danger {
border-color: var(--bg-danger-border);
background-color: var(--bg-danger-hover);
& .text {
color: var(--tc-danger-high);
&-b3 {
color: var(--tc-danger-normal);
}
}
}
}

37
src/app/atoms/chip/Chip.jsx
View file

@ -1,37 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Chip.scss';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
function Chip({
iconSrc, iconColor, text, children,
onClick,
}) {
return (
<button className="chip" type="button" onClick={onClick}>
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
{(text != null && text !== '') && <Text variant="b3">{text}</Text>}
{children}
</button>
);
}
Chip.propTypes = {
iconSrc: PropTypes.string,
iconColor: PropTypes.string,
text: PropTypes.string,
children: PropTypes.element,
onClick: PropTypes.func,
};
Chip.defaultProps = {
iconSrc: null,
iconColor: null,
text: null,
children: null,
onClick: null,
};
export default Chip;

31
src/app/atoms/chip/Chip.scss
View file

@ -1,31 +0,0 @@
@use '../../partials/dir';
.chip {
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
display: inline-flex;
flex-direction: row;
align-items: center;
background: var(--bg-surface-low);
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
cursor: pointer;
@media (hover: hover) {
&:hover {
background-color: var(--bg-surface-hover);
}
}
& > .text {
flex: 1;
color: var(--tc-surface-high);
}
& > .ic-raw {
width: 16px;
height: 16px;
@include dir.side(margin, 0, var(--sp-ultra-tight));
}
}

115
src/app/atoms/context-menu/ContextMenu.jsx
View file

@ -1,115 +0,0 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './ContextMenu.scss';
import Tippy from '@tippyjs/react';
import 'tippy.js/animations/scale-extreme.css';
import Text from '../text/Text';
import Button from '../button/Button';
import ScrollView from '../scroll/ScrollView';
function ContextMenu({
content, placement, maxWidth, render, afterToggle,
}) {
const [isVisible, setVisibility] = useState(false);
const showMenu = () => setVisibility(true);
const hideMenu = () => setVisibility(false);
useEffect(() => {
if (afterToggle !== null) afterToggle(isVisible);
}, [isVisible]);
return (
<Tippy
animation="scale-extreme"
className="context-menu"
visible={isVisible}
onClickOutside={hideMenu}
content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
placement={placement}
interactive
arrow={false}
maxWidth={maxWidth}
duration={200}
>
{render(isVisible ? hideMenu : showMenu)}
</Tippy>
);
}
ContextMenu.defaultProps = {
maxWidth: 'unset',
placement: 'right',
afterToggle: null,
};
ContextMenu.propTypes = {
content: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
]).isRequired,
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
maxWidth: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
render: PropTypes.func.isRequired,
afterToggle: PropTypes.func,
};
function MenuHeader({ children }) {
return (
<div className="context-menu__header">
<Text variant="b3">{ children }</Text>
</div>
);
}
MenuHeader.propTypes = {
children: PropTypes.node.isRequired,
};
function MenuItem({
variant, iconSrc, type,
onClick, children, disabled,
}) {
return (
<div className="context-menu__item">
<Button
variant={variant}
iconSrc={iconSrc}
type={type}
onClick={onClick}
disabled={disabled}
>
{ children }
</Button>
</div>
);
}
MenuItem.defaultProps = {
variant: 'surface',
iconSrc: null,
type: 'button',
disabled: false,
onClick: null,
};
MenuItem.propTypes = {
variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit']),
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
};
function MenuBorder() {
return <div style={{ borderBottom: '1px solid var(--bg-surface-border)' }}> </div>;
}
export {
ContextMenu as default, MenuHeader, MenuItem, MenuBorder,
};

81
src/app/atoms/context-menu/ContextMenu.scss
View file

@ -1,81 +0,0 @@
@use '../../partials/flex';
@use '../../partials/text';
@use '../../partials/dir';
.context-menu {
background-color: var(--bg-surface);
box-shadow: var(--bs-popup);
border-radius: var(--bo-radius);
overflow: hidden;
&:focus {
outline: none;
}
& .tippy-content > div > .scrollbar {
max-height: 90vh;
}
}
.context-menu__click-wrapper {
display: inline-flex;
&:focus {
outline: none;
}
}
.context-menu__header {
height: 34px;
padding: 0 var(--sp-normal);
margin-bottom: var(--sp-ultra-tight);
display: flex;
align-items: center;
border-bottom: 1px solid var(--bg-surface-border);
.text {
@extend .cp-txt__ellipsis;
color: var(--tc-surface-low);
}
&:not(:first-child) {
margin-top: var(--sp-extra-tight);
border-top: 1px solid var(--bg-surface-border);
}
}
.context-menu__item {
display: flex;
button[class^="btn"] {
@extend .cp-fx__item-one;
justify-content: flex-start;
border-radius: 0;
box-shadow: none;
white-space: nowrap;
padding: var(--sp-extra-tight) var(--sp-normal);
& > .ic-raw {
@include dir.side(margin, 0, var(--sp-tight));
}
// if item doesn't have icon
.text:first-child {
@include dir.side(
margin,
calc(var(--ic-small) + var(--sp-tight)),
0
);
}
}
.btn-surface:focus {
background-color: var(--bg-surface-hover);
}
.btn-positive:focus {
background-color: var(--bg-positive-hover);
}
.btn-caution:focus {
background-color: var(--bg-caution-hover);
}
.btn-danger:focus {
background-color: var(--bg-danger-hover);
}
}

87
src/app/atoms/context-menu/ReusableContextMenu.jsx
View file

@ -1,87 +0,0 @@
import React, { useState, useEffect, useRef } from 'react';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import ContextMenu from './ContextMenu';
let key = null;
function ReusableContextMenu() {
const [data, setData] = useState(null);
const openerRef = useRef(null);
const closeMenu = () => {
key = null;
if (data) openerRef.current.click();
};
useEffect(() => {
if (data) {
const { cords } = data;
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
openerRef.current.style.width = `${cords.width}px`;
openerRef.current.style.height = `${cords.height}px`;
openerRef.current.click();
}
const handleContextMenuOpen = (placement, cords, render, afterClose) => {
if (key) {
closeMenu();
return;
}
setData({
placement, cords, render, afterClose,
});
};
navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
return () => {
navigation.removeListener(
cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
handleContextMenuOpen,
);
};
}, [data]);
const handleAfterToggle = (isVisible) => {
if (isVisible) {
key = Math.random();
return;
}
data?.afterClose?.();
if (setData) setData(null);
if (key === null) return;
const copyKey = key;
setTimeout(() => {
if (key === copyKey) key = null;
}, 200);
};
return (
<ContextMenu
afterToggle={handleAfterToggle}
placement={data?.placement || 'right'}
content={data?.render(closeMenu) ?? ''}
render={(toggleMenu) => (
<input
ref={openerRef}
onClick={toggleMenu}
type="button"
style={{
width: '32px',
height: '32px',
backgroundColor: 'transparent',
position: 'fixed',
top: 0,
left: 0,
padding: 0,
border: 'none',
visibility: 'hidden',
appearance: 'none',
}}
/>
)}
/>
);
}
export default ReusableContextMenu;

28
src/app/atoms/divider/Divider.jsx
View file

@ -1,28 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Divider.scss';
import Text from '../text/Text';
function Divider({ text, variant, align }) {
const dividerClass = ` divider--${variant} divider--${align}`;
return (
<div className={`divider${dividerClass}`}>
{text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
</div>
);
}
Divider.defaultProps = {
text: null,
variant: 'surface',
align: 'center',
};
Divider.propTypes = {
text: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
align: PropTypes.oneOf(['left', 'center', 'right']),
};
export default Divider;

68
src/app/atoms/divider/Divider.scss
View file

@ -1,68 +0,0 @@
.divider-line {
content: '';
display: inline-block;
flex: 1;
border-bottom: 1px solid var(--local-divider-color);
opacity: var(--local-divider-opacity);
}
.divider {
display: flex;
align-items: center;
&--center::before,
&--right::before {
@extend .divider-line;
}
&--center::after,
&--left::after {
@extend .divider-line;
}
&__text {
padding: 2px var(--sp-extra-tight);
border-radius: calc(var(--bo-radius) / 2);
}
}
.divider--surface {
--local-divider-color: var(--bg-divider);
--local-divider-opacity: 1;
.divider__text {
color: var(--tc-surface-low);
border: 1px solid var(--bg-divider);
}
}
.divider--primary {
--local-divider-color: var(--bg-primary);
--local-divider-opacity: .8;
.divider__text {
color: var(--tc-primary-high);
background-color: var(--bg-primary);
}
}
.divider--positive {
--local-divider-color: var(--bg-positive);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-surface);
background-color: var(--bg-positive);
}
}
.divider--danger {
--local-divider-color: var(--bg-danger);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-surface);
background-color: var(--bg-danger);
}
}
.divider--caution {
--local-divider-color: var(--bg-caution);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-surface);
background-color: var(--bg-caution);
}
}

29
src/app/atoms/header/Header.jsx
View file

@ -1,29 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Header.scss';
function Header({ children }) {
return (
<div className="header">
{children}
</div>
);
}
Header.propTypes = {
children: PropTypes.node.isRequired,
};
function TitleWrapper({ children }) {
return (
<div className="header__title-wrapper">
{children}
</div>
);
}
TitleWrapper.propTypes = {
children: PropTypes.node.isRequired,
};
export { Header as default, TitleWrapper };

43
src/app/atoms/header/Header.scss
View file

@ -1,43 +0,0 @@
@use '../../partials/text';
@use '../../partials/dir';
.header {
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
width: 100%;
height: var(--header-height);
border-bottom: 1px solid var(--bg-surface-border);
display: flex;
align-items: center;
&__title-wrapper {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
margin: 0 var(--sp-tight);
&:first-child {
@include dir.side(margin, 0, var(--sp-tight));
}
& > .text:first-child {
@extend .cp-txt__ellipsis;
min-width: 0;
}
& > .text-b3{
flex: 1;
min-width: 0;
margin-top: var(--sp-ultra-tight);
@include dir.side(margin, var(--sp-tight), 0);
@include dir.side(padding, var(--sp-tight), 0);
@include dir.side(border, 1px solid var(--bg-surface-border), none);
max-height: calc(2 * var(--lh-b3));
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
}
}
}

97
src/app/atoms/input/Input.jsx
View file

@ -1,97 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Input.scss';
import TextareaAutosize from 'react-autosize-textarea';
function Input({
id, label, name, value, placeholder,
required, type, onChange, forwardRef,
resizable, minHeight, onResize, state,
onKeyDown, disabled, autoFocus,
}) {
return (
<div className="input-container">
{ label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
{ resizable
? (
<TextareaAutosize
dir="auto"
style={{ minHeight: `${minHeight}px` }}
name={name}
id={id}
className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
ref={forwardRef}
type={type}
placeholder={placeholder}
required={required}
defaultValue={value}
autoComplete="off"
onChange={onChange}
onResize={onResize}
onKeyDown={onKeyDown}
disabled={disabled}
autoFocus={autoFocus}
/>
) : (
<input
dir="auto"
ref={forwardRef}
id={id}
name={name}
className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
type={type}
placeholder={placeholder}
required={required}
defaultValue={value}
autoComplete="off"
onChange={onChange}
onKeyDown={onKeyDown}
disabled={disabled}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
/>
)}
</div>
);
}
Input.defaultProps = {
id: null,
name: '',
label: '',
value: '',
placeholder: '',
type: 'text',
required: false,
onChange: null,
forwardRef: null,
resizable: false,
minHeight: 46,
onResize: null,
state: 'normal',
onKeyDown: null,
disabled: false,
autoFocus: false,
};
Input.propTypes = {
id: PropTypes.string,
name: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
placeholder: PropTypes.string,
required: PropTypes.bool,
type: PropTypes.string,
onChange: PropTypes.func,
forwardRef: PropTypes.shape({}),
resizable: PropTypes.bool,
minHeight: PropTypes.number,
onResize: PropTypes.func,
state: PropTypes.oneOf(['normal', 'success', 'error']),
onKeyDown: PropTypes.func,
disabled: PropTypes.bool,
autoFocus: PropTypes.bool,
};
export default Input;

52
src/app/atoms/input/Input.scss
View file

@ -1,52 +0,0 @@
@use '../../atoms/scroll/scrollbar';
.input {
display: block;
width: 100%;
min-width: 0px;
margin: 0;
padding: var(--sp-tight) var(--sp-normal);
background-color: var(--bg-surface-low);
color: var(--tc-surface-normal);
box-shadow: none;
border-radius: var(--bo-radius);
border: 1px solid var(--bg-surface-border);
font-size: var(--fs-b2);
letter-spacing: var(--ls-b2);
line-height: var(--lh-b2);
:disabled {
opacity: 0.4;
cursor: no-drop;
}
&__label {
display: inline-block;
margin-bottom: var(--sp-ultra-tight);
color: var(--tc-surface-low);
}
&--resizable {
resize: vertical !important;
overflow-y: auto !important;
@include scrollbar.scroll;
@include scrollbar.scroll__v;
@include scrollbar.scroll--auto-hide;
}
&--success {
border: 1px solid var(--bg-positive);
box-shadow: none !important;
}
&--error {
border: 1px solid var(--bg-danger);
box-shadow: none !important;
}
&:focus {
outline: none;
box-shadow: var(--bs-primary-border);
}
&::placeholder {
color: var(--tc-surface-low)
}
}

73
src/app/atoms/modal/RawModal.jsx
View file

@ -1,73 +0,0 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import './RawModal.scss';
import Modal from 'react-modal';
import navigation from '../../../client/state/navigation';
Modal.setAppElement('#root');
function RawModal({
className, overlayClassName,
isOpen, size, onAfterOpen, onAfterClose,
onRequestClose, closeFromOutside, children,
}) {
let modalClass = (className !== null) ? `${className} ` : '';
switch (size) {
case 'large':
modalClass += 'raw-modal__large ';
break;
case 'medium':
modalClass += 'raw-modal__medium ';
break;
case 'small':
default:
modalClass += 'raw-modal__small ';
}
useEffect(() => {
navigation.setIsRawModalVisible(isOpen);
}, [isOpen]);
const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
return (
<Modal
className={`${modalClass}raw-modal`}
overlayClassName={`${modalOverlayClass}raw-modal__overlay`}
isOpen={isOpen}
onAfterOpen={onAfterOpen}
onAfterClose={onAfterClose}
onRequestClose={onRequestClose}
shouldCloseOnEsc={closeFromOutside}
shouldCloseOnOverlayClick={closeFromOutside}
shouldReturnFocusAfterClose={false}
>
{children}
</Modal>
);
}
RawModal.defaultProps = {
className: null,
overlayClassName: null,
size: 'small',
onAfterOpen: null,
onAfterClose: null,
onRequestClose: null,
closeFromOutside: true,
};
RawModal.propTypes = {
className: PropTypes.string,
overlayClassName: PropTypes.string,
isOpen: PropTypes.bool.isRequired,
size: PropTypes.oneOf(['large', 'medium', 'small']),
onAfterOpen: PropTypes.func,
onAfterClose: PropTypes.func,
onRequestClose: PropTypes.func,
closeFromOutside: PropTypes.bool,
children: PropTypes.node.isRequired,
};
export default RawModal;

66
src/app/atoms/modal/RawModal.scss
View file

@ -1,66 +0,0 @@
.raw-modal {
--small-modal-width: 525px;
--medium-modal-width: 712px;
--large-modal-width: 1024px;
position: relative;
width: 100%;
max-height: 100%;
border-radius: var(--bo-radius);
box-shadow: var(--bs-popup);
outline: none;
overflow: hidden;
&__small {
max-width: var(--small-modal-width);
}
&__medium {
max-width: var(--medium-modal-width);
}
&__large {
max-width: var(--large-modal-width);
}
&__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
padding: var(--sp-normal);
width: 100%;
height: 100%;
background-color: var(--bg-overlay);
}
}
.ReactModal__Overlay {
animation: raw-modal--overlay 150ms;
}
.ReactModal__Content {
animation: raw-modal--content 150ms;
}
@keyframes raw-modal--content {
0% {
transform: translateY(100px);
opacity: .5;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes raw-modal--overlay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

37
src/app/atoms/scroll/ScrollView.jsx
View file

@ -1,37 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './ScrollView.scss';
const ScrollView = React.forwardRef(({
horizontal, vertical, autoHide, invisible, onScroll, children,
}, ref) => {
let scrollbarClasses = '';
if (horizontal) scrollbarClasses += ' scrollbar__h';
if (vertical) scrollbarClasses += ' scrollbar__v';
if (autoHide) scrollbarClasses += ' scrollbar--auto-hide';
if (invisible) scrollbarClasses += ' scrollbar--invisible';
return (
<div onScroll={onScroll} ref={ref} className={`scrollbar${scrollbarClasses}`}>
{children}
</div>
);
});
ScrollView.defaultProps = {
horizontal: false,
vertical: true,
autoHide: false,
invisible: false,
onScroll: null,
};
ScrollView.propTypes = {
horizontal: PropTypes.bool,
vertical: PropTypes.bool,
autoHide: PropTypes.bool,
invisible: PropTypes.bool,
onScroll: PropTypes.func,
children: PropTypes.node.isRequired,
};
export default ScrollView;

31
src/app/atoms/scroll/ScrollView.scss
View file

@ -1,31 +0,0 @@
@use '../../partials/dir';
@use '_scrollbar';
@mixin paddingForSafari($padding) {
@media not all and (min-resolution:.001dpcm) {
@include dir.side(padding, 0, $padding);
}
}
.scrollbar {
width: 100%;
height: 100%;
@include scrollbar.scroll;
@include paddingForSafari(var(--sp-extra-tight));
&__h {
@include scrollbar.scroll__h;
}
&__v {
@include scrollbar.scroll__v;
}
&--auto-hide {
@include scrollbar.scroll--auto-hide;
}
&--invisible {
@include scrollbar.scroll--invisible;
@include paddingForSafari(0);
}
}

65
src/app/atoms/scroll/_scrollbar.scss
View file

@ -1,65 +0,0 @@
.firefox-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--bg-surface-hover) transparent;
&--transparent {
scrollbar-color: transparent transparent;
}
}
.webkit-scrollbar {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
}
.webkit-scrollbar-track {
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
.webkit-scrollbar-thumb {
&::-webkit-scrollbar-thumb {
background-color: var(--bg-surface-hover);
}
&::-webkit-scrollbar-thumb:hover {
background-color: var(--bg-surface-active);
}
&--transparent {
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
}
@mixin scroll {
overflow: hidden;
// Below code stop scroll when x-scrollable content come in timeline
// overscroll-behavior: none;
@extend .firefox-scrollbar;
@extend .webkit-scrollbar;
@extend .webkit-scrollbar-track;
@extend .webkit-scrollbar-thumb;
}
@mixin scroll__h {
overflow-x: scroll;
}
@mixin scroll__v {
overflow-y: scroll;
}
@mixin scroll--auto-hide {
@extend .firefox-scrollbar--transparent;
@extend .webkit-scrollbar-thumb--transparent;
&:hover {
@extend .firefox-scrollbar;
@extend .webkit-scrollbar-thumb;
}
}
@mixin scroll--invisible {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}

55
src/app/atoms/segmented-controls/SegmentedControls.jsx
View file

@ -1,55 +0,0 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './SegmentedControls.scss';
import { blurOnBubbling } from '../button/script';
import Text from '../text/Text';
import RawIcon from '../system-icons/RawIcon';
function SegmentedControls({
selected, segments, onSelect,
}) {
const [select, setSelect] = useState(selected);
function selectSegment(segmentIndex) {
setSelect(segmentIndex);
onSelect(segmentIndex);
}
useEffect(() => {
setSelect(selected);
}, [selected]);
return (
<div className="segmented-controls">
{
segments.map((segment, index) => (
<button
key={Math.random().toString(20).substr(2, 6)}
className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
type="button"
onClick={() => selectSegment(index)}
onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
>
<div className="segment-btn__base">
{segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
{segment.text && <Text variant="b2">{segment.text}</Text>}
</div>
</button>
))
}
</div>
);
}
SegmentedControls.propTypes = {
selected: PropTypes.number.isRequired,
segments: PropTypes.arrayOf(PropTypes.shape({
iconSrc: PropTypes.string,
text: PropTypes.string,
})).isRequired,
onSelect: PropTypes.func.isRequired,
};
export default SegmentedControls;

57
src/app/atoms/segmented-controls/SegmentedControls.scss
View file

@ -1,57 +0,0 @@
@use '../button/state';
@use '../../partials/dir';
.segmented-controls {
background-color: var(--bg-surface-low);
border-radius: var(--bo-radius);
border: 1px solid var(--bg-surface-border);
display: inline-flex;
overflow: hidden;
}
.segment-btn {
padding: var(--sp-extra-tight) 0;
cursor: pointer;
@include state.hover(var(--bg-surface-hover));
@include state.active(var(--bg-surface-active));
&__base {
padding: 0 var(--sp-normal);
display: flex;
align-items: center;
justify-content: center;
@include dir.side(border, 1px solid var(--bg-surface-border), none);
& .text:nth-child(2) {
margin: 0 var(--sp-extra-tight);
}
}
&:first-child &__base {
border: none;
}
&--active {
background-color: var(--bg-surface);
border: 1px solid var(--bg-surface-border);
border-width: 0 1px 0 1px;
& .segment-btn__base,
& + .segment-btn .segment-btn__base {
border: none;
}
&:first-child{
border-left: none;
}
&:last-child {
border-right: none;
}
[dir=rtl] & {
border-left: 1px solid var(--bg-surface-border);
border-right: 1px solid var(--bg-surface-border);
&:first-child { border-right: none;}
&:last-child { border-left: none;}
}
}
}

19
src/app/atoms/spinner/Spinner.jsx
View file

@ -1,19 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Spinner.scss';
function Spinner({ size }) {
return (
<div className={`donut-spinner donut-spinner--${size}`}> </div>
);
}
Spinner.defaultProps = {
size: 'normal',
};
Spinner.propTypes = {
size: PropTypes.oneOf(['normal', 'small']),
};
export default Spinner;

22
src/app/atoms/spinner/Spinner.scss
View file

@ -1,22 +0,0 @@
.donut-spinner {
display: inline-block;
border: 4px solid var(--bg-surface-border);
border-left-color: var(--tc-surface-normal);
border-radius: 50%;
animation: donut-spin 1.2s cubic-bezier(0.73, 0.32, 0.67, 0.86) infinite;
&--normal {
width: 40px;
height: 40px;
}
&--small {
width: 28px;
height: 28px;
}
}
@keyframes donut-spin {
to {
transform: rotate(1turn);
}
}

32
src/app/atoms/system-icons/RawIcon.jsx
View file

@ -1,32 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './RawIcon.scss';
function RawIcon({ color, size, src, isImage }) {
const style = {};
if (color !== null) style.backgroundColor = color;
if (isImage) {
style.backgroundColor = 'transparent';
style.backgroundImage = `url("${src}")`;
} else {
style.WebkitMaskImage = `url("${src}")`;
style.maskImage = `url("${src}")`;
}
return <span className={`ic-raw ic-raw-${size}`} style={style} />;
}
RawIcon.defaultProps = {
color: null,
size: 'normal',
isImage: false,
};
RawIcon.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
src: PropTypes.string.isRequired,
isImage: PropTypes.bool,
};
export default RawIcon;

28
src/app/atoms/system-icons/RawIcon.scss
View file

@ -1,28 +0,0 @@
@mixin icSize($size) {
width: $size;
height: $size;
}
.ic-raw {
display: inline-block;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--ic-surface-normal);
background-size: cover;
background-repeat: no-repeat;
}
.ic-raw-large {
@include icSize(var(--ic-large));
}
.ic-raw-normal {
@include icSize(var(--ic-normal));
}
.ic-raw-small {
@include icSize(var(--ic-small));
}
.ic-raw-extra-small {
@include icSize(var(--ic-extra-small));
}

88
src/app/atoms/tabs/Tabs.jsx
View file

@ -1,88 +0,0 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Tabs.scss';
import Button from '../button/Button';
import ScrollView from '../scroll/ScrollView';
function TabItem({
selected, iconSrc,
onClick, children, disabled,
}) {
const isSelected = selected ? 'tab-item--selected' : '';
return (
<Button
className={`tab-item ${isSelected}`}
iconSrc={iconSrc}
onClick={onClick}
disabled={disabled}
>
{children}
</Button>
);
}
TabItem.defaultProps = {
selected: false,
iconSrc: null,
onClick: null,
disabled: false,
};
TabItem.propTypes = {
selected: PropTypes.bool,
iconSrc: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
};
function Tabs({ items, defaultSelected, onSelect }) {
const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
const handleTabSelection = (item, index, target) => {
if (selectedItem === item) return;
target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
setSelectedItem(item);
onSelect(item, index);
};
return (
<div className="tabs">
<ScrollView horizontal vertical={false} invisible>
<div className="tabs__content">
{items.map((item, index) => (
<TabItem
key={item.text}
selected={selectedItem.text === item.text}
iconSrc={item.iconSrc}
disabled={item.disabled}
onClick={(e) => handleTabSelection(item, index, e.currentTarget)}
>
{item.text}
</TabItem>
))}
</div>
</ScrollView>
</div>
);
}
Tabs.defaultProps = {
defaultSelected: 0,
};
Tabs.propTypes = {
items: PropTypes.arrayOf(
PropTypes.shape({
iconSrc: PropTypes.string,
text: PropTypes.string,
disabled: PropTypes.bool,
}),
).isRequired,
defaultSelected: PropTypes.number,
onSelect: PropTypes.func.isRequired,
};
export default Tabs;

45
src/app/atoms/tabs/Tabs.scss
View file

@ -1,45 +0,0 @@
@use '../../partials/dir';
.tabs {
height: var(--header-height);
box-shadow: inset 0 -1px 0 var(--bg-surface-border);
&__content {
min-width: 100%;
height: 100%;
display: flex;
}
}
.tab-item {
flex-shrink: 0;
@include dir.side(padding, var(--sp-normal), 24px);
border-radius: 0;
height: 100%;
box-shadow: none;
border-radius: var(--bo-radius) var(--bo-radius) 0 0;
&:focus,
&:active {
background-color: var(--bg-surface-active);
box-shadow: none;
}
&--selected {
--bs-tab-selected: inset 0 -2px 0 var(--tc-surface-high);
box-shadow: var(--bs-tab-selected);
& .ic-raw {
background-color: var(--ic-surface-high);
}
& .text {
font-weight: var(--fw-medium);
}
&:focus,
&:active {
background-color: var(--bg-surface-active);
box-shadow: var(--bs-tab-selected);
}
}
}

42
src/app/atoms/text/Text.jsx
View file

@ -1,42 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Text.scss';
function Text({
className, style, variant, weight,
primary, span, children,
}) {
const classes = [];
if (className) classes.push(className);
classes.push(`text text-${variant} text-${weight}`);
if (primary) classes.push('font-primary');
const textClass = classes.join(' ');
if (span) return <span className={textClass} style={style}>{ children }</span>;
if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
return <p className={textClass} style={style}>{ children }</p>;
}
Text.defaultProps = {
className: null,
style: null,
variant: 'b1',
weight: 'normal',
primary: false,
span: false,
};
Text.propTypes = {
className: PropTypes.string,
style: PropTypes.shape({}),
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
primary: PropTypes.bool,
span: PropTypes.bool,
children: PropTypes.node.isRequired,
};
export default Text;

61
src/app/atoms/text/Text.scss
View file

@ -1,61 +0,0 @@
@mixin font($type) {
font-size: var(--fs-#{$type});
letter-spacing: var(--ls-#{$type});
line-height: var(--lh-#{$type});
& img.emoji,
& img[data-mx-emoticon] {
height: calc(var(--lh-#{$type}) - .25rem);
}
}
.text {
margin: 0;
padding: 0;
color: var(--tc-surface-high);
& img.emoji,
& img[data-mx-emoticon] {
margin: 0 !important;
margin-right: 2px !important;
padding: 0 !important;
position: relative;
top: -.1rem;
vertical-align: middle;
}
}
.text-light {
font-weight: var(--fw-light);
}
.text-normal {
font-weight: var(--fw-normal);
}
.text-medium {
font-weight: var(--fw-medium);
}
.text-bold {
font-weight: var(--fw-bold);
}
.text-h1 {
@include font(h1);
}
.text-h2 {
@include font(h2);
}
.text-s1 {
@include font(s1);
}
.text-b1 {
@include font(b1);
color: var(--tc-surface-normal);
}
.text-b2 {
@include font(b2);
color: var(--tc-surface-normal);
}
.text-b3 {
@include font(b3);
color: var(--tc-surface-low);
}

44
src/app/atoms/time/Time.jsx
View file

@ -1,44 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import dateFormat from 'dateformat';
import { isInSameDay } from '../../../util/common';
function Time({ timestamp, fullTime }) {
const date = new Date(timestamp);
const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
let formattedDate = formattedFullTime;
if (!fullTime) {
const compareDate = new Date();
const isToday = isInSameDay(date, compareDate);
compareDate.setDate(compareDate.getDate() - 1);
const isYesterday = isInSameDay(date, compareDate);
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
if (isYesterday) {
formattedDate = `Yesterday, ${formattedDate}`;
}
}
return (
<time
dateTime={date.toISOString()}
title={formattedFullTime}
>
{formattedDate}
</time>
);
}
Time.defaultProps = {
fullTime: false,
};
Time.propTypes = {
timestamp: PropTypes.number.isRequired,
fullTime: PropTypes.bool,
};
export default Time;

39
src/app/atoms/tooltip/Tooltip.jsx
View file

@ -1,39 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import './Tooltip.scss';
import Tippy from '@tippyjs/react';
function Tooltip({
className, placement, content, delay, children,
}) {
return (
<Tippy
content={content}
className={`tooltip ${className}`}
touch="hold"
arrow={false}
maxWidth={250}
placement={placement}
delay={delay}
duration={[100, 0]}
>
{children}
</Tippy>
);
}
Tooltip.defaultProps = {
placement: 'top',
className: '',
delay: [200, 0],
};
Tooltip.propTypes = {
className: PropTypes.string,
placement: PropTypes.string,
content: PropTypes.node.isRequired,
delay: PropTypes.arrayOf(PropTypes.number),
children: PropTypes.node.isRequired,
};
export default Tooltip;

10
src/app/atoms/tooltip/Tooltip.scss
View file

@ -1,10 +0,0 @@
.tooltip {
padding: var(--sp-extra-tight) var(--sp-normal);
background-color: var(--bg-tooltip);
border-radius: var(--bo-radius);
box-shadow: var(--bs-popup);
.text {
color: var(--tc-tooltip);
}
}

36
src/app/components/CapabilitiesAndMediaConfigLoader.tsx
View file

@ -1,36 +0,0 @@
import { ReactNode, useCallback, useEffect } from 'react';
import { Capabilities } from 'matrix-js-sdk';
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
import { useMatrixClient } from '../hooks/useMatrixClient';
import { MediaConfig } from '../hooks/useMediaConfig';
import { promiseFulfilledResult } from '../utils/common';
type CapabilitiesAndMediaConfigLoaderProps = {
children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
};
export function CapabilitiesAndMediaConfigLoader({
children,
}: CapabilitiesAndMediaConfigLoaderProps) {
const mx = useMatrixClient();
const [state, load] = useAsyncCallback<
[Capabilities | undefined, MediaConfig | undefined],
unknown,
[]
>(
useCallback(async () => {
const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
const capabilities = promiseFulfilledResult(result[0]);
const mediaConfig = promiseFulfilledResult(result[1]);
return [capabilities, mediaConfig];
}, [mx])
);
useEffect(() => {
load();
}, [load]);
const [capabilities, mediaConfig] =
state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
return children(capabilities, mediaConfig);
}

2
src/app/components/DeviceVerificationSetup.tsx
View file

@ -20,7 +20,7 @@ import { PasswordInput } from './password-input';
import { ContainerColor } from '../styles/ContainerColor.css';
import { copyToClipboard } from '../utils/dom';
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
import { clearSecretStorageKeys } from '../../client/secretStorageKeys';
import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
import { useMatrixClient } from '../hooks/useMatrixClient';
import { useAlive } from '../hooks/useAlive';

2
src/app/components/ManualVerification.tsx
View file

@ -19,7 +19,7 @@ import { SecretStorageKeyContent } from '../../types/matrix/accountData';
import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
import { useMatrixClient } from '../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
import { storePrivateKey } from '../../client/state/secretStorageKeys';
import { storePrivateKey } from '../../client/secretStorageKeys';
export enum ManualVerificationMethod {
RecoveryPassphrase = 'passphrase',

52
src/app/components/ServerConfigsLoader.tsx Normal file
View file

@ -0,0 +1,52 @@
import { ReactNode, useCallback, useMemo } from 'react';
import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
import { useMatrixClient } from '../hooks/useMatrixClient';
import { MediaConfig } from '../hooks/useMediaConfig';
import { promiseFulfilledResult } from '../utils/common';
export type ServerConfigs = {
capabilities?: Capabilities;
mediaConfig?: MediaConfig;
authMetadata?: ValidatedAuthMetadata;
};
type ServerConfigsLoaderProps = {
children: (configs: ServerConfigs) => ReactNode;
};
export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
const mx = useMatrixClient();
const fallbackConfigs = useMemo(() => ({}), []);
const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
useCallback(async () => {
const result = await Promise.allSettled([
mx.getCapabilities(),
mx.getMediaConfig(),
mx.getAuthMetadata(),
]);
const capabilities = promiseFulfilledResult(result[0]);
const mediaConfig = promiseFulfilledResult(result[1]);
const authMetadata = promiseFulfilledResult(result[2]);
let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
try {
validatedAuthMetadata = validateAuthMetadata(authMetadata);
} catch (e) {
console.error(e);
}
return {
capabilities,
mediaConfig,
authMetadata: validatedAuthMetadata,
};
}, [mx])
);
const configs: ServerConfigs =
configsState.status === AsyncStatus.Success ? configsState.data : fallbackConfigs;
return children(configs);
}

55
src/app/components/UserRoomProfileRenderer.tsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import { Menu, PopOut, toRem } from 'folds';
import FocusTrap from 'focus-trap-react';
import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
import { UserRoomProfile } from './user-profile';
import { UserRoomProfileState } from '../state/userRoomProfile';
import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
import { stopPropagation } from '../utils/keyboard';
import { SpaceProvider } from '../hooks/useSpace';
import { RoomProvider } from '../hooks/useRoom';
function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
const { roomId, spaceId, userId, cords, position } = state;
const allJoinedRooms = useAllJoinedRoomsSet();
const getRoom = useGetRoom(allJoinedRooms);
const room = getRoom(roomId);
const space = spaceId ? getRoom(spaceId) : undefined;
const close = useCloseUserRoomProfile();
if (!room) return null;
return (
<PopOut
anchor={cords}
position={position ?? 'Top'}
align="Start"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Menu style={{ width: toRem(340) }}>
<SpaceProvider value={space ?? null}>
<RoomProvider value={room}>
<UserRoomProfile userId={userId} />
</RoomProvider>
</SpaceProvider>
</Menu>
</FocusTrap>
}
/>
);
}
export function UserRoomProfileRenderer() {
const state = useUserRoomProfileState();
if (!state) return null;
return <UserRoomProfileContextMenu state={state} />;
}

294
src/app/components/create-room/AdditionalCreatorInput.tsx Normal file
View file

@ -0,0 +1,294 @@
import {
Box,
Button,
Chip,
config,
Icon,
Icons,
Input,
Line,
Menu,
MenuItem,
PopOut,
RectCords,
Scroll,
Text,
toRem,
} from 'folds';
import { isKeyHotkey } from 'is-hotkey';
import FocusTrap from 'focus-trap-react';
import React, {
ChangeEventHandler,
KeyboardEventHandler,
MouseEventHandler,
useMemo,
useState,
} from 'react';
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
import { useDirectUsers } from '../../hooks/useDirectUsers';
import { SettingTile } from '../setting-tile';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { stopPropagation } from '../../utils/keyboard';
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
export const useAdditionalCreators = (defaultCreators?: string[]) => {
const mx = useMatrixClient();
const [additionalCreators, setAdditionalCreators] = useState<string[]>(
() => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
);
const addAdditionalCreator = (userId: string) => {
if (userId === mx.getSafeUserId()) return;
setAdditionalCreators((creators) => {
const creatorsSet = new Set(creators);
creatorsSet.add(userId);
return Array.from(creatorsSet);
});
};
const removeAdditionalCreator = (userId: string) => {
setAdditionalCreators((creators) => {
const creatorsSet = new Set(creators);
creatorsSet.delete(userId);
return Array.from(creatorsSet);
});
};
return {
additionalCreators,
addAdditionalCreator,
removeAdditionalCreator,
};
};
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 1000,
matchOptions: {
contain: true,
},
};
const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
type AdditionalCreatorInputProps = {
additionalCreators: string[];
onSelect: (userId: string) => void;
onRemove: (userId: string) => void;
disabled?: boolean;
};
export function AdditionalCreatorInput({
additionalCreators,
onSelect,
onRemove,
disabled,
}: AdditionalCreatorInputProps) {
const mx = useMatrixClient();
const [menuCords, setMenuCords] = useState<RectCords>();
const directUsers = useDirectUsers();
const [validUserId, setValidUserId] = useState<string>();
const filteredUsers = useMemo(
() => directUsers.filter((userId) => !additionalCreators.includes(userId)),
[directUsers, additionalCreators]
);
const [result, search, resetSearch] = useAsyncSearch(
filteredUsers,
getUserIdString,
SEARCH_OPTIONS
);
const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
const suggestionUsers = result
? result.items
: filteredUsers.sort((a, b) => (a.toLocaleLowerCase() >= b.toLocaleLowerCase() ? 1 : -1));
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuCords(evt.currentTarget.getBoundingClientRect());
};
const handleCloseMenu = () => {
setMenuCords(undefined);
setValidUserId(undefined);
resetSearch();
};
const handleCreatorChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
const creatorInput = evt.currentTarget;
const creator = creatorInput.value.trim();
if (isUserId(creator)) {
setValidUserId(creator);
} else {
setValidUserId(undefined);
const term =
getMxIdLocalPart(creator) ?? (creator.startsWith('@') ? creator.slice(1) : creator);
if (term) {
search(term);
} else {
resetSearch();
}
}
};
const handleSelectUserId = (userId?: string) => {
if (userId && isUserId(userId)) {
onSelect(userId);
handleCloseMenu();
}
};
const handleCreatorKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
if (isKeyHotkey('enter', evt)) {
evt.preventDefault();
const creator = evt.currentTarget.value.trim();
handleSelectUserId(isUserId(creator) ? creator : suggestionUsers[0]);
}
};
const handleEnterClick = () => {
handleSelectUserId(validUserId);
};
return (
<SettingTile
title="Founders"
description="Special privileged users can be assigned during creation. These users have elevated control and can only be modified during a upgrade."
>
<Box shrink="No" direction="Column" gap="100">
<Box gap="200" wrap="Wrap">
<Chip type="button" variant="Primary" radii="Pill" outlined>
<Text size="B300">{mx.getSafeUserId()}</Text>
</Chip>
{additionalCreators.map((creator) => (
<Chip
type="button"
key={creator}
variant="Secondary"
radii="Pill"
after={<Icon size="50" src={Icons.Cross} />}
onClick={() => onRemove(creator)}
disabled={disabled}
>
<Text size="B300">{creator}</Text>
</Chip>
))}
<PopOut
anchor={menuCords}
position="Bottom"
align="Center"
content={
<FocusTrap
focusTrapOptions={{
onDeactivate: handleCloseMenu,
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<Menu
style={{
width: '100vw',
maxWidth: toRem(300),
height: toRem(250),
display: 'flex',
}}
>
<Box grow="Yes" direction="Column">
<Box shrink="No" gap="100" style={{ padding: config.space.S100 }}>
<Box grow="Yes" direction="Column" gap="100">
<Input
size="400"
variant="Background"
radii="300"
outlined
placeholder="@username:server"
onChange={handleCreatorChange}
onKeyDown={handleCreatorKeyDown}
/>
</Box>
<Button
type="button"
variant="Success"
radii="300"
onClick={handleEnterClick}
disabled={!validUserId}
>
<Text size="B400">Enter</Text>
</Button>
</Box>
<Line size="300" />
<Box grow="Yes" direction="Column">
{!validUserId && suggestionUsers.length > 0 ? (
<Scroll size="300" hideTrack>
<Box
grow="Yes"
direction="Column"
gap="100"
style={{ padding: config.space.S200, paddingRight: 0 }}
>
{suggestionUsers.map((userId) => (
<MenuItem
key={userId}
size="300"
variant="Surface"
radii="300"
onClick={() => handleSelectUserId(userId)}
after={
<Text size="T200" truncate>
{getMxIdServer(userId)}
</Text>
}
>
<Box grow="Yes">
<Text size="T200" truncate>
<b>
{queryHighlighRegex
? highlightText(queryHighlighRegex, [
getMxIdLocalPart(userId) ?? userId,
])
: getMxIdLocalPart(userId)}
</b>
</Text>
</Box>
</MenuItem>
))}
</Box>
</Scroll>
) : (
<Box
grow="Yes"
alignItems="Center"
justifyContent="Center"
direction="Column"
gap="100"
>
<Text size="H6" align="Center">
No Suggestions
</Text>
<Text size="T200" align="Center">
Please provide the user ID and hit Enter.
</Text>
</Box>
)}
</Box>
</Box>
</Menu>
</FocusTrap>
}
>
<Chip
type="button"
variant="Secondary"
radii="Pill"
onClick={handleOpenMenu}
aria-pressed={!!menuCords}
disabled={disabled}
>
<Icon size="50" src={Icons.Plus} />
</Chip>
</PopOut>
</Box>
</Box>
</SettingTile>
);
}

118
src/app/components/create-room/CreateRoomAliasInput.tsx Normal file
View file

@ -0,0 +1,118 @@
import React, {
FormEventHandler,
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { MatrixError } from 'matrix-js-sdk';
import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
import { isKeyHotkey } from 'is-hotkey';
import { getMxIdServer } from '../../utils/matrix';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { replaceSpaceWithDash } from '../../utils/common';
import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
import { useDebounce } from '../../hooks/useDebounce';
export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
const mx = useMatrixClient();
const aliasInputRef = useRef<HTMLInputElement>(null);
const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
status: AsyncStatus.Idle,
});
useEffect(() => {
if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
setAliasAvail({ status: AsyncStatus.Idle });
}
}, [aliasAvail]);
const checkAliasAvail = useAsync(
useCallback(
async (aliasLocalPart: string) => {
const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
try {
const result = await mx.getRoomIdForAlias(roomAlias);
return typeof result.room_id !== 'string';
} catch (e) {
if (e instanceof MatrixError && e.httpStatus === 404) {
return true;
}
throw e;
}
},
[mx]
),
setAliasAvail
);
const aliasAvailable: boolean | undefined =
aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
const aliasInput = evt.currentTarget;
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
if (aliasLocalPart) {
aliasInput.value = aliasLocalPart;
debounceCheckAliasAvail(aliasLocalPart);
} else {
setAliasAvail({ status: AsyncStatus.Idle });
}
};
const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
if (isKeyHotkey('enter', evt)) {
evt.preventDefault();
const aliasInput = evt.currentTarget;
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
if (aliasLocalPart) {
checkAliasAvail(aliasLocalPart);
} else {
setAliasAvail({ status: AsyncStatus.Idle });
}
}
};
return (
<Box shrink="No" direction="Column" gap="100">
<Text size="L400">Address (Optional)</Text>
<Text size="T200" priority="300">
Pick an unique address to make it discoverable.
</Text>
<Input
ref={aliasInputRef}
onChange={handleAliasChange}
before={
aliasAvail.status === AsyncStatus.Loading ? (
<Spinner size="100" variant="Secondary" />
) : (
<Icon size="100" src={Icons.Hash} />
)
}
after={
<Text style={{ maxWidth: toRem(150) }} truncate>
:{getMxIdServer(mx.getSafeUserId())}
</Text>
}
onKeyDown={handleAliasKeyDown}
name="aliasInput"
size="500"
variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
radii="400"
autoComplete="off"
disabled={disabled}
/>
{aliasAvailable === false && (
<Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
<Icon src={Icons.Warning} filled size="50" />
<Text size="T200">
<b>This address is already taken. Please select a different one.</b>
</Text>
</Box>
)}
</Box>
);
}

94
src/app/components/create-room/CreateRoomKindSelector.tsx Normal file
View file

@ -0,0 +1,94 @@
import React from 'react';
import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
import { SequenceCard } from '../sequence-card';
import { SettingTile } from '../setting-tile';
export enum CreateRoomKind {
Private = 'private',
Restricted = 'restricted',
Public = 'public',
}
type CreateRoomKindSelectorProps = {
value?: CreateRoomKind;
onSelect: (value: CreateRoomKind) => void;
canRestrict?: boolean;
disabled?: boolean;
getIcon: (kind: CreateRoomKind) => IconSrc;
};
export function CreateRoomKindSelector({
value,
onSelect,
canRestrict,
disabled,
getIcon,
}: CreateRoomKindSelectorProps) {
return (
<Box shrink="No" direction="Column" gap="100">
{canRestrict && (
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Restricted}
onClick={() => onSelect(CreateRoomKind.Restricted)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
>
<Text size="H6">Restricted</Text>
<Text size="T300" priority="300">
Only member of parent space can join.
</Text>
</SettingTile>
</SequenceCard>
)}
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Private}
onClick={() => onSelect(CreateRoomKind.Private)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
>
<Text size="H6">Private</Text>
<Text size="T300" priority="300">
Only people with invite can join.
</Text>
</SettingTile>
</SequenceCard>
<SequenceCard
style={{ padding: config.space.S300 }}
variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
direction="Column"
gap="100"
as="button"
type="button"
aria-pressed={value === CreateRoomKind.Public}
onClick={() => onSelect(CreateRoomKind.Public)}
disabled={disabled}
>
<SettingTile
before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
>
<Text size="H6">Public</Text>
<Text size="T300" priority="300">
Anyone with the address can join.
</Text>
</SettingTile>
</SequenceCard>
</Box>
);
}

117
src/app/components/create-room/RoomVersionSelector.tsx Normal file
View file

@ -0,0 +1,117 @@
import React, { MouseEventHandler, useState } from 'react';
import {
Box,
Button,
Chip,
config,
Icon,
Icons,
Menu,
PopOut,
RectCords,
Text,
toRem,
} from 'folds';
import FocusTrap from 'focus-trap-react';
import { SettingTile } from '../setting-tile';
import { SequenceCard } from '../sequence-card';
import { stopPropagation } from '../../utils/keyboard';
export function RoomVersionSelector({
versions,
value,
onChange,
disabled,
}: {
versions: string[];
value: string;
onChange: (value: string) => void;
disabled?: boolean;
}) {
const [menuCords, setMenuCords] = useState<RectCords>();
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuCords(evt.currentTarget.getBoundingClientRect());
};
const handleSelect = (version: string) => {
setMenuCords(undefined);
onChange(version);
};
return (
<SequenceCard
style={{ padding: config.space.S300 }}
variant="SurfaceVariant"
direction="Column"
gap="500"
>
<SettingTile
title="Version"
after={
<PopOut
anchor={menuCords}
offset={5}
position="Bottom"
align="End"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenuCords(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) =>
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
escapeDeactivates: stopPropagation,
}}
>
<Menu>
<Box
direction="Column"
gap="200"
style={{ padding: config.space.S200, maxWidth: toRem(300) }}
>
<Text size="L400">Versions</Text>
<Box wrap="Wrap" gap="100">
{versions.map((version) => (
<Chip
key={version}
variant={value === version ? 'Primary' : 'SurfaceVariant'}
aria-pressed={value === version}
outlined={value === version}
radii="300"
onClick={() => handleSelect(version)}
type="button"
>
<Text truncate size="T300">
{version}
</Text>
</Chip>
))}
</Box>
</Box>
</Menu>
</FocusTrap>
}
>
<Button
type="button"
onClick={handleMenu}
size="300"
variant="Secondary"
fill="Soft"
radii="300"
aria-pressed={!!menuCords}
before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
disabled={disabled}
>
<Text size="B300">{value}</Text>
</Button>
</PopOut>
}
/>
</SequenceCard>
);
}

5
src/app/components/create-room/index.ts Normal file
View file

@ -0,0 +1,5 @@
export * from './CreateRoomKindSelector';
export * from './CreateRoomAliasInput';
export * from './RoomVersionSelector';
export * from './utils';
export * from './AdditionalCreatorInput';

140
src/app/components/create-room/utils.ts Normal file
View file

@ -0,0 +1,140 @@
import {
ICreateRoomOpts,
ICreateRoomStateEvent,
JoinRule,
MatrixClient,
RestrictedAllowType,
Room,
} from 'matrix-js-sdk';
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import { CreateRoomKind } from './CreateRoomKindSelector';
import { RoomType, StateEvent } from '../../../types/matrix/room';
import { getViaServers } from '../../plugins/via-servers';
import { getMxIdServer } from '../../utils/matrix';
export const createRoomCreationContent = (
type: RoomType | undefined,
allowFederation: boolean,
additionalCreators: string[] | undefined
): object => {
const content: Record<string, any> = {};
if (typeof type === 'string') {
content.type = type;
}
if (allowFederation === false) {
content['m.federate'] = false;
}
if (Array.isArray(additionalCreators)) {
content.additional_creators = additionalCreators;
}
return content;
};
export const createRoomJoinRulesState = (
kind: CreateRoomKind,
parent: Room | undefined,
knock: boolean
) => {
let content: RoomJoinRulesEventContent = {
join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
};
if (kind === CreateRoomKind.Public) {
content = {
join_rule: JoinRule.Public,
};
}
if (kind === CreateRoomKind.Restricted && parent) {
content = {
join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
allow: [
{
type: RestrictedAllowType.RoomMembership,
room_id: parent.roomId,
},
],
};
}
return {
type: StateEvent.RoomJoinRules,
state_key: '',
content,
};
};
export const createRoomParentState = (parent: Room) => ({
type: StateEvent.SpaceParent,
state_key: parent.roomId,
content: {
canonical: true,
via: getViaServers(parent),
},
});
export const createRoomEncryptionState = () => ({
type: 'm.room.encryption',
state_key: '',
content: {
algorithm: 'm.megolm.v1.aes-sha2',
},
});
export type CreateRoomData = {
version: string;
type?: RoomType;
parent?: Room;
kind: CreateRoomKind;
name: string;
topic?: string;
aliasLocalPart?: string;
encryption?: boolean;
knock: boolean;
allowFederation: boolean;
additionalCreators?: string[];
};
export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
const initialState: ICreateRoomStateEvent[] = [];
if (data.encryption) {
initialState.push(createRoomEncryptionState());
}
if (data.parent) {
initialState.push(createRoomParentState(data.parent));
}
initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
const options: ICreateRoomOpts = {
room_version: data.version,
name: data.name,
topic: data.topic,
room_alias_name: data.aliasLocalPart,
creation_content: createRoomCreationContent(
data.type,
data.allowFederation,
data.additionalCreators
),
initial_state: initialState,
};
const result = await mx.createRoom(options);
if (data.parent) {
await mx.sendStateEvent(
data.parent.roomId,
StateEvent.SpaceChild as any,
{
auto_join: false,
suggested: false,
via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
},
result.room_id
);
}
return result.room_id;
};

18
src/app/components/editor/Editor.css.ts
View file

@ -41,21 +41,21 @@ export const EditorTextarea = style([
},
]);
export const EditorPlaceholder = style([
export const EditorPlaceholderContainer = style([
DefaultReset,
{
position: 'absolute',
zIndex: 1,
width: '100%',
opacity: config.opacity.Placeholder,
pointerEvents: 'none',
userSelect: 'none',
},
]);
selectors: {
'&:not(:first-child)': {
display: 'none',
},
},
export const EditorPlaceholderTextVisual = style([
DefaultReset,
{
display: 'block',
paddingTop: toRem(13),
paddingLeft: toRem(1),
},
]);

27
src/app/components/editor/Editor.tsx
View file

@ -106,22 +106,17 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
[editor, onKeyDown]
);
const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
// drop style attribute as we use our custom placeholder css.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { style, ...props } = attributes;
return (
<Text
as="span"
{...props}
className={css.EditorPlaceholder}
contentEditable={false}
truncate
>
{children}
</Text>
);
}, []);
const renderPlaceholder = useCallback(
({ attributes, children }: RenderPlaceholderProps) => (
<span {...attributes} className={css.EditorPlaceholderContainer}>
{/* Inner component to style the actual text position and appearance */}
<Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
{children}
</Text>
</span>
),
[]
);
return (
<div className={css.Editor} ref={ref}>

2
src/app/components/editor/Elements.tsx
View file

@ -157,7 +157,7 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
<Text as="pre" className={css.CodeBlock} {...attributes}>
<Scroll
direction="Horizontal"
variant="Secondary"
variant="SurfaceVariant"
size="300"
visibility="Hover"
hideTrack

2
src/app/components/editor/Toolbar.tsx
View file

@ -339,7 +339,7 @@ export function Toolbar() {
<Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
<TooltipProvider
align="End"
tooltip={<BtnTooltip text="Toggle Markdown" />}
tooltip={<BtnTooltip text={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'} />}
delay={500}
>
{(triggerRef) => (

4
src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
View file

@ -9,7 +9,7 @@ import { getDirectRoomAvatarUrl } from '../../../utils/room';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu';
import { getMxIdServer, validMxId } from '../../../utils/matrix';
import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard';
import { useKeyDown } from '../../../hooks/useKeyDown';
@ -22,7 +22,7 @@ import { getViaServers } from '../../../plugins/via-servers';
type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
validMxId(`#${text}`)
isRoomAlias(`#${text}`)
? `#${text}`
: `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;

4
src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
View file

@ -15,7 +15,7 @@ import {
import { onTabPress } from '../../../utils/keyboard';
import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
import { useKeyDown } from '../../../hooks/useKeyDown';
import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
import { UserAvatar } from '../../user-avatar';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@ -24,7 +24,7 @@ import { Membership } from '../../../../types/matrix/room';
type MentionAutoCompleteHandler = (userId: string, name: string) => void;
const userIdFromQueryText = (mx: MatrixClient, text: string) =>
validMxId(`@${text}`)
isUserId(`@${text}`)
? `@${text}`
: `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;

33
src/app/components/event-readers/EventReaders.tsx
View file

@ -19,9 +19,11 @@ import { getMemberDisplayName } from '../../utils/room';
import { getMxIdLocalPart } from '../../utils/matrix';
import * as css from './EventReaders.css';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { openProfileViewer } from '../../../client/action/navigation';
import { UserAvatar } from '../user-avatar';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { getMouseEventCords } from '../../utils/dom';
export type EventReadersProps = {
room: Room;
@ -33,6 +35,8 @@ export const EventReaders = as<'div', EventReadersProps>(
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const latestEventReaders = useRoomEventReaders(room, eventId);
const openProfile = useOpenUserRoomProfile();
const space = useSpaceOptionally();
const getName = (userId: string) =>
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@ -57,19 +61,32 @@ export const EventReaders = as<'div', EventReadersProps>(
<Box className={css.Content} direction="Column">
{latestEventReaders.map((readerId) => {
const name = getName(readerId);
const avatarMxcUrl = room
.getMember(readerId)
?.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl
? mx.mxcUrlToHttp(
avatarMxcUrl,
100,
100,
'crop',
undefined,
false,
useAuthentication
)
: undefined;
return (
<MenuItem
key={readerId}
style={{ padding: `0 ${config.space.S200}` }}
radii="400"
onClick={() => {
requestClose();
openProfileViewer(readerId, room.roomId);
onClick={(event) => {
openProfile(
room.roomId,
space?.roomId,
readerId,
getMouseEventCords(event.nativeEvent),
'Bottom'
);
}}
before={
<Avatar size="200">

9
src/app/components/image-pack-view/RoomImagePack.tsx
View file

@ -1,12 +1,14 @@
import React, { useCallback, useMemo } from 'react';
import { Room } from 'matrix-js-sdk';
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
import { usePowerLevels } from '../../hooks/usePowerLevels';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { ImagePackContent } from './ImagePackContent';
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
import { StateEvent } from '../../../types/matrix/room';
import { useRoomImagePack } from '../../hooks/useImagePacks';
import { randomStr } from '../../utils/common';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useRoomCreators } from '../../hooks/useRoomCreators';
type RoomImagePackProps = {
room: Room;
@ -17,9 +19,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
const mx = useMatrixClient();
const userId = mx.getUserId()!;
const powerLevels = usePowerLevels(room);
const creators = useRoomCreators(room);
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
const permissions = useRoomPermissions(creators, powerLevels);
const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
const fallbackPack = useMemo(() => {
const fakePackId = randomStr(4);

291
src/app/components/invite-user-prompt/InviteUserPrompt.tsx Normal file
View file

@ -0,0 +1,291 @@
import React, {
ChangeEventHandler,
FormEventHandler,
KeyboardEventHandler,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import {
Overlay,
OverlayBackdrop,
OverlayCenter,
Box,
Header,
config,
Text,
IconButton,
Icon,
Icons,
Input,
Button,
Spinner,
color,
TextArea,
Dialog,
Menu,
toRem,
Scroll,
MenuItem,
} from 'folds';
import { Room } from 'matrix-js-sdk';
import { isKeyHotkey } from 'is-hotkey';
import FocusTrap from 'focus-trap-react';
import { stopPropagation } from '../../utils/keyboard';
import { useDirectUsers } from '../../hooks/useDirectUsers';
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
import { Membership } from '../../../types/matrix/room';
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { BreakWord } from '../../styles/Text.css';
import { useAlive } from '../../hooks/useAlive';
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 1000,
matchOptions: {
contain: true,
},
};
const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
type InviteUserProps = {
room: Room;
requestClose: () => void;
};
export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
const mx = useMatrixClient();
const alive = useAlive();
const inputRef = useRef<HTMLInputElement>(null);
const directUsers = useDirectUsers();
const [validUserId, setValidUserId] = useState<string>();
const filteredUsers = useMemo(
() =>
directUsers.filter((userId) => {
const membership = room.getMember(userId)?.membership;
return membership !== Membership.Join;
}),
[directUsers, room]
);
const [result, search, resetSearch] = useAsyncSearch(
filteredUsers,
getUserIdString,
SEARCH_OPTIONS
);
const queryHighlighRegex = result?.query
? makeHighlightRegex(result.query.split(' '))
: undefined;
const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
useCallback(
async (userId, reason) => {
await mx.invite(room.roomId, userId, reason);
},
[mx, room]
)
);
const inviting = inviteState.status === AsyncStatus.Loading;
const handleReset = () => {
if (inputRef.current) inputRef.current.value = '';
setValidUserId(undefined);
resetSearch();
};
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
const target = evt.target as HTMLFormElement | undefined;
if (inviting || !validUserId) return;
const reasonInput = target?.reasonInput as HTMLTextAreaElement | undefined;
const reason = reasonInput?.value.trim();
invite(validUserId, reason || undefined).then(() => {
if (alive()) {
handleReset();
if (reasonInput) reasonInput.value = '';
}
});
};
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
const value = evt.currentTarget.value.trim();
if (isUserId(value)) {
setValidUserId(value);
} else {
setValidUserId(undefined);
const term = getMxIdLocalPart(value) ?? (value.startsWith('@') ? value.slice(1) : value);
if (term) {
search(term);
} else {
resetSearch();
}
}
};
const handleUserId = (userId: string) => {
if (inputRef.current) {
inputRef.current.value = userId;
setValidUserId(userId);
resetSearch();
inputRef.current.focus();
}
};
const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
if (isKeyHotkey('escape', evt)) {
resetSearch();
return;
}
if (isKeyHotkey('tab', evt) && result && result.items.length > 0) {
evt.preventDefault();
const userId = result.items[0];
handleUserId(userId);
}
};
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: () => inputRef.current,
clickOutsideDeactivates: true,
onDeactivate: requestClose,
escapeDeactivates: stopPropagation,
}}
>
<Dialog>
<Box grow="Yes" direction="Column">
<Header
size="500"
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
>
<Box grow="Yes">
<Text size="H4" truncate>
Invite
</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={requestClose}>
<Icon src={Icons.Cross} />
</IconButton>
</Box>
</Header>
<Box
as="form"
onSubmit={handleSubmit}
shrink="No"
style={{ padding: config.space.S400 }}
direction="Column"
gap="400"
>
<Box direction="Column" gap="100">
<Text size="L400">User ID</Text>
<div>
<Input
size="500"
ref={inputRef}
onChange={handleSearchChange}
onKeyDown={handleKeyDown}
placeholder="@username:server"
name="userIdInput"
variant="Background"
disabled={inviting}
autoComplete="off"
required
/>
{result && result.items.length > 0 && (
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: resetSearch,
returnFocusOnDeactivate: false,
clickOutsideDeactivates: true,
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
escapeDeactivates: stopPropagation,
}}
>
<Box style={{ position: 'relative' }}>
<Menu style={{ position: 'absolute', top: 0, zIndex: 1, width: '100%' }}>
<Scroll size="300" style={{ maxHeight: toRem(100) }}>
<div style={{ padding: config.space.S100 }}>
{result.items.map((userId) => {
const username = `${getMxIdLocalPart(userId)}`;
const userServer = getMxIdServer(userId);
return (
<MenuItem
key={userId}
type="button"
size="300"
variant="Surface"
radii="300"
onClick={() => handleUserId(userId)}
after={
<Text size="T200" truncate>
{userServer}
</Text>
}
disabled={inviting}
>
<Box grow="Yes">
<Text size="T300" truncate>
<b>
{queryHighlighRegex
? highlightText(queryHighlighRegex, [
username ?? userId,
])
: username}
</b>
</Text>
</Box>
</MenuItem>
);
})}
</div>
</Scroll>
</Menu>
</Box>
</FocusTrap>
)}
</div>
</Box>
<Box direction="Column" gap="100">
<Text size="L400">Reason (Optional)</Text>
<TextArea
size="500"
name="reasonInput"
variant="Background"
rows={4}
resize="None"
/>
</Box>
{inviteState.status === AsyncStatus.Error && (
<Text size="T200" style={{ color: color.Critical.Main }} className={BreakWord}>
<b>{inviteState.error.message}</b>
</Text>
)}
<Button
type="submit"
disabled={!validUserId || inviting}
before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
>
<Text size="B400">Invite</Text>
</Button>
</Box>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/components/invite-user-prompt/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './InviteUserPrompt';

131
src/app/components/join-address-prompt/JoinAddressPrompt.tsx Normal file
View file

@ -0,0 +1,131 @@
import React, { FormEventHandler, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Dialog,
Overlay,
OverlayCenter,
OverlayBackdrop,
Header,
config,
Box,
Text,
IconButton,
Icon,
Icons,
Button,
Input,
color,
} from 'folds';
import { stopPropagation } from '../../utils/keyboard';
import { isRoomAlias, isRoomId } from '../../utils/matrix';
import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
import { tryDecodeURIComponent } from '../../utils/dom';
type JoinAddressProps = {
onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
onCancel: () => void;
};
export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
const [invalid, setInvalid] = useState(false);
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
setInvalid(false);
const target = evt.target as HTMLFormElement | undefined;
const addressInput = target?.addressInput as HTMLInputElement | undefined;
const address = addressInput?.value.trim();
if (!address) return;
if (isRoomId(address) || isRoomAlias(address)) {
onOpen(address);
return;
}
if (testMatrixTo(address)) {
const decodedAddress = tryDecodeURIComponent(address);
const toRoom = parseMatrixToRoom(decodedAddress);
if (toRoom) {
onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
return;
}
const toEvent = parseMatrixToRoomEvent(decodedAddress);
if (toEvent) {
onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
return;
}
}
setInvalid(true);
};
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
}}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Join with Address</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box
as="form"
onSubmit={handleSubmit}
style={{ padding: config.space.S400, paddingTop: 0 }}
direction="Column"
gap="400"
>
<Box direction="Column" gap="200">
<Text priority="400" size="T300">
Enter public address to join the community. Addresses looks like:
</Text>
<Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
<li>#community:server</li>
<li>https://matrix.to/#/#community:server</li>
<li>https://matrix.to/#/!xYzAj?via=server</li>
</Text>
</Box>
<Box direction="Column" gap="100">
<Text size="L400">Address</Text>
<Input
size="500"
autoFocus
name="addressInput"
variant="Background"
placeholder="#community:server"
required
/>
{invalid && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>Invalid Address</b>
</Text>
)}
</Box>
<Button type="submit" variant="Primary">
<Text size="B400">Open</Text>
</Button>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

1
src/app/components/join-address-prompt/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './JoinAddressPrompt';

6
src/app/components/message/Reply.css.ts
View file

@ -7,7 +7,6 @@ export const ReplyBend = style({
export const ThreadIndicator = style({
opacity: config.opacity.P300,
gap: toRem(2),
selectors: {
'button&': {
@ -19,11 +18,6 @@ export const ThreadIndicator = style({
},
});
export const ThreadIndicatorIcon = style({
width: toRem(14),
height: toRem(14),
});
export const Reply = style({
marginBottom: toRem(1),
minWidth: 0,

26
src/app/components/message/Reply.tsx
View file

@ -10,8 +10,8 @@ import * as css from './Reply.css';
import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
import { useRoomEvent } from '../../hooks/useRoomEvent';
import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
import colorMXID from '../../../util/colorMXID';
import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
type ReplyLayoutProps = {
userColor?: string;
@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
);
export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
<Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
<Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
<Text size="T200">Threaded reply</Text>
<Box
shrink="No"
className={css.ThreadIndicator}
alignItems="Center"
gap="100"
{...props}
ref={ref}
>
<Icon size="50" src={Icons.Thread} />
<Text size="L400">Thread</Text>
</Box>
));
@ -50,8 +57,7 @@ type ReplyProps = {
replyEventId: string;
threadRootId?: string | undefined;
onClick?: MouseEventHandler | undefined;
getPowerLevel?: (userId: string) => number;
getPowerLevelTag?: GetPowerLevelTag;
getMemberPowerTag?: GetMemberPowerTag;
accessibleTagColors?: Map<string, string>;
legacyUsernameColor?: boolean;
};
@ -64,8 +70,7 @@ export const Reply = as<'div', ReplyProps>(
replyEventId,
threadRootId,
onClick,
getPowerLevel,
getPowerLevelTag,
getMemberPowerTag,
accessibleTagColors,
legacyUsernameColor,
...props
@ -81,8 +86,7 @@ export const Reply = as<'div', ReplyProps>(
const { body } = replyEvent?.getContent() ?? {};
const sender = replyEvent?.getSender();
const senderPL = sender && getPowerLevel?.(sender);
const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
@ -97,7 +101,7 @@ export const Reply = as<'div', ReplyProps>(
const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
return (
<Box direction="Column" alignItems="Start" {...props} ref={ref}>
<Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
{threadRootId && (
<ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
)}

26
src/app/components/message/Time.tsx
View file

@ -5,19 +5,35 @@ import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/ti
export type TimeProps = {
compact?: boolean;
ts: number;
hour24Clock: boolean;
dateFormatString: string;
};
/**
* Renders a formatted timestamp, supporting compact and full display modes.
*
* Displays the time in hour:minute format if the message is from today, yesterday, or if `compact` is true.
* For older messages, it shows the date and time.
*
* @param {number} ts - The timestamp to display.
* @param {boolean} [compact=false] - If true, always show only the time.
* @param {boolean} hour24Clock - Whether to use 24-hour time format.
* @param {string} dateFormatString - Format string for the date part.
* @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
*/
export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
({ compact, ts, ...props }, ref) => {
({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
const formattedTime = timeHourMinute(ts, hour24Clock);
let time = '';
if (compact) {
time = timeHourMinute(ts);
time = formattedTime;
} else if (today(ts)) {
time = timeHourMinute(ts);
time = formattedTime;
} else if (yesterday(ts)) {
time = `Yesterday ${timeHourMinute(ts)}`;
time = `Yesterday ${formattedTime}`;
} else {
time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
}
return (

3
src/app/components/message/content/VideoContent.tsx
View file

@ -22,8 +22,7 @@ import {
import * as css from './style.css';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { bytesToSize } from '../../../../util/common';
import { millisecondsToMinutesAndSeconds } from '../../../utils/common';
import { bytesToSize, millisecondsToMinutesAndSeconds } from '../../../utils/common';
import {
decryptFile,
downloadEncryptedMedia,

1
src/app/components/message/content/style.css.ts
View file

@ -25,6 +25,7 @@ export const AbsoluteFooter = style([
DefaultReset,
{
position: 'absolute',
pointerEvents: 'none',
bottom: config.space.S100,
left: config.space.S100,
right: config.space.S100,

2
src/app/components/message/layout/layout.css.ts
View file

@ -124,7 +124,7 @@ export const AvatarBase = style({
selectors: {
'&:hover': {
transform: `translateY(${toRem(-4)})`,
transform: `translateY(${toRem(-2)})`,
},
},
});

80
src/app/components/presence/Presence.tsx Normal file
View file

@ -0,0 +1,80 @@
import {
as,
Badge,
Box,
color,
ContainerColor,
MainColor,
Text,
Tooltip,
TooltipProvider,
toRem,
} from 'folds';
import React, { ReactNode, useId } from 'react';
import * as css from './styles.css';
import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
const PresenceToColor: Record<Presence, MainColor> = {
[Presence.Online]: 'Success',
[Presence.Unavailable]: 'Warning',
[Presence.Offline]: 'Secondary',
};
type PresenceBadgeProps = {
presence: Presence;
status?: string;
size?: '200' | '300' | '400' | '500';
};
export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
const label = usePresenceLabel();
const badgeLabelId = useId();
return (
<TooltipProvider
position="Right"
align="Center"
offset={4}
delay={200}
tooltip={
<Tooltip id={badgeLabelId}>
<Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
<Text size="L400">{label[presence]}</Text>
{status && <Text size="T200">•</Text>}
{status && <Text size="T200">{status}</Text>}
</Box>
</Tooltip>
}
>
{(triggerRef) => (
<Badge
aria-labelledby={badgeLabelId}
ref={triggerRef}
size={size}
variant={PresenceToColor[presence]}
fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
radii="Pill"
/>
)}
</TooltipProvider>
);
}
type AvatarPresenceProps = {
badge: ReactNode;
variant?: ContainerColor;
};
export const AvatarPresence = as<'div', AvatarPresenceProps>(
({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
<Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
{badge && (
<div
className={css.AvatarPresenceBadge}
style={{ backgroundColor: color[variant].Container }}
>
{badge}
</div>
)}
{children}
</Box>
)
);

1
src/app/components/presence/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './Presence';

22
src/app/components/presence/styles.css.ts Normal file
View file

@ -0,0 +1,22 @@
import { style } from '@vanilla-extract/css';
import { config } from 'folds';
export const AvatarPresence = style({
display: 'flex',
position: 'relative',
flexShrink: 0,
});
export const AvatarPresenceBadge = style({
position: 'absolute',
bottom: 0,
right: 0,
transform: 'translate(25%, 25%)',
zIndex: 1,
display: 'flex',
padding: config.borderWidth.B600,
backgroundColor: 'inherit',
borderRadius: config.radii.Pill,
overflow: 'hidden',
});

24
src/app/components/room-intro/RoomIntro.tsx
View file

@ -1,8 +1,7 @@
import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
import { Room } from 'matrix-js-sdk';
import { useAtomValue } from 'jotai';
import { openInviteUser } from '../../../client/action/navigation';
import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
import { getMemberDisplayName, getStateEvent } from '../../utils/room';
import { useMatrixClient } from '../../hooks/useMatrixClient';
@ -15,6 +14,9 @@ import { nameInitials } from '../../utils/common';
import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
import { mDirectAtom } from '../../state/mDirectList';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { InviteUserPrompt } from '../invite-user-prompt';
export type RoomIntroProps = {
room: Room;
@ -25,6 +27,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
const useAuthentication = useMediaAuthentication();
const { navigateRoom } = useRoomNavigate();
const mDirects = useAtomValue(mDirectAtom);
const [invitePrompt, setInvitePrompt] = useState(false);
const createEvent = getStateEvent(room, StateEvent.RoomCreate);
const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
@ -43,6 +46,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
);
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
return (
<Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
<Box>
@ -67,23 +72,22 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
<Text size="T200" priority="300">
{'Created by '}
<b>@{creatorName}</b>
{` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
{` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
</Text>
)}
</Box>
<Box gap="200" wrap="Wrap">
<Button
onClick={() => openInviteUser(room.roomId)}
variant="Secondary"
size="300"
radii="300"
>
<Button onClick={() => setInvitePrompt(true)} variant="Secondary" size="300" radii="300">
<Text size="B300">Invite Member</Text>
</Button>
{invitePrompt && (
<InviteUserPrompt room={room} requestClose={() => setInvitePrompt(false)} />
)}
{typeof prevRoomId === 'string' &&
(mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
<Button
onClick={() => navigateRoom(prevRoomId)}
onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
variant="Success"
size="300"
fill="Soft"

37
src/app/components/sequence-card/SequenceCard.tsx
View file

@ -7,12 +7,31 @@ import * as css from './style.css';
export const SequenceCard = as<
'div',
ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
>(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
<Box
className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
data-first-child={firstChild}
data-last-child={lastChild}
{...props}
ref={ref}
/>
));
>(
(
{
as: AsSequenceCard = 'div',
className,
variant,
radii,
firstChild,
lastChild,
outlined,
...props
},
ref
) => (
<Box
as={AsSequenceCard}
className={classNames(
css.SequenceCard({ radii, outlined }),
ContainerColor({ variant }),
className
)}
data-first-child={firstChild}
data-last-child={lastChild}
{...props}
ref={ref}
/>
)
);

46
src/app/components/sequence-card/style.css.ts
View file

@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { config } from 'folds';
const outlinedWidth = createVar('0');
const radii = createVar(config.radii.R400);
export const SequenceCard = recipe({
base: {
vars: {
@ -13,33 +14,59 @@ export const SequenceCard = recipe({
borderBottomWidth: 0,
selectors: {
'&:first-child, :not(&) + &': {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
borderTopLeftRadius: [radii],
borderTopRightRadius: [radii],
},
'&:last-child, &:not(:has(+&))': {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomLeftRadius: [radii],
borderBottomRightRadius: [radii],
borderBottomWidth: outlinedWidth,
},
[`&[data-first-child="true"]`]: {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
borderTopLeftRadius: [radii],
borderTopRightRadius: [radii],
},
[`&[data-first-child="false"]`]: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
[`&[data-last-child="true"]`]: {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomLeftRadius: [radii],
borderBottomRightRadius: [radii],
},
[`&[data-last-child="false"]`]: {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
'button&': {
cursor: 'pointer',
},
},
},
variants: {
radii: {
'0': {
vars: {
[radii]: config.radii.R0,
},
},
'300': {
vars: {
[radii]: config.radii.R300,
},
},
'400': {
vars: {
[radii]: config.radii.R400,
},
},
'500': {
vars: {
[radii]: config.radii.R500,
},
},
},
outlined: {
true: {
vars: {
@ -48,5 +75,8 @@ export const SequenceCard = recipe({
},
},
},
defaultVariants: {
radii: '400',
},
});
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;

129
src/app/components/time-date/DatePicker.tsx Normal file
View file

@ -0,0 +1,129 @@
import React, { forwardRef } from 'react';
import { Menu, Box, Text, Chip } from 'folds';
import dayjs from 'dayjs';
import * as css from './styles.css';
import { PickerColumn } from './PickerColumn';
import { dateFor, daysInMonth, daysToMs } from '../../utils/time';
type DatePickerProps = {
min: number;
max: number;
value: number;
onChange: (value: number) => void;
};
export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
({ min, max, value, onChange }, ref) => {
const selectedYear = dayjs(value).year();
const selectedMonth = dayjs(value).month() + 1;
const selectedDay = dayjs(value).date();
const handleSubmit = (newValue: number) => {
onChange(Math.min(Math.max(min, newValue), max));
};
const handleDay = (day: number) => {
const seconds = daysToMs(day);
const lastSeconds = daysToMs(selectedDay);
const newValue = value + (seconds - lastSeconds);
handleSubmit(newValue);
};
const handleMonthAndYear = (month: number, year: number) => {
const mDays = daysInMonth(month, year);
const currentDate = dateFor(selectedYear, selectedMonth, selectedDay);
const time = value - currentDate;
const newDate = dateFor(year, month, mDays < selectedDay ? mDays : selectedDay);
const newValue = newDate + time;
handleSubmit(newValue);
};
const handleMonth = (month: number) => {
handleMonthAndYear(month, selectedYear);
};
const handleYear = (year: number) => {
handleMonthAndYear(selectedMonth, year);
};
const minYear = dayjs(min).year();
const maxYear = dayjs(max).year();
const yearsRange = maxYear - minYear + 1;
const minMonth = dayjs(min).month() + 1;
const maxMonth = dayjs(max).month() + 1;
const minDay = dayjs(min).date();
const maxDay = dayjs(max).date();
return (
<Menu className={css.PickerMenu} ref={ref}>
<Box direction="Row" gap="200" className={css.PickerContainer}>
<PickerColumn title="Day">
{Array.from(Array(daysInMonth(selectedMonth, selectedYear)).keys())
.map((i) => i + 1)
.map((day) => (
<Chip
key={day}
size="500"
variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
fill="None"
radii="300"
aria-selected={selectedDay === day}
onClick={() => handleDay(day)}
disabled={
(selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
(selectedYear === maxYear && selectedMonth === maxMonth && day > maxDay)
}
>
<Text size="T300">{day}</Text>
</Chip>
))}
</PickerColumn>
<PickerColumn title="Month">
{Array.from(Array(12).keys())
.map((i) => i + 1)
.map((month) => (
<Chip
key={month}
size="500"
variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
fill="None"
radii="300"
aria-selected={selectedMonth === month}
onClick={() => handleMonth(month)}
disabled={
(selectedYear === minYear && month < minMonth) ||
(selectedYear === maxYear && month > maxMonth)
}
>
<Text size="T300">
{dayjs()
.month(month - 1)
.format('MMM')}
</Text>
</Chip>
))}
</PickerColumn>
<PickerColumn title="Year">
{Array.from(Array(yearsRange).keys())
.map((i) => minYear + i)
.map((year) => (
<Chip
key={year}
size="500"
variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
fill="None"
radii="300"
aria-selected={selectedYear === year}
onClick={() => handleYear(year)}
>
<Text size="T300">{year}</Text>
</Chip>
))}
</PickerColumn>
</Box>
</Menu>
);
}
);

23
src/app/components/time-date/PickerColumn.tsx Normal file
View file

@ -0,0 +1,23 @@
import React, { ReactNode } from 'react';
import { Box, Text, Scroll } from 'folds';
import { CutoutCard } from '../cutout-card';
import * as css from './styles.css';
export function PickerColumn({ title, children }: { title: string; children: ReactNode }) {
return (
<Box direction="Column" gap="100">
<Text className={css.PickerColumnLabel} size="L400">
{title}
</Text>
<Box grow="Yes">
<CutoutCard variant="Background">
<Scroll variant="Background" size="300" hideTrack>
<Box className={css.PickerColumnContent} direction="Column" gap="100">
{children}
</Box>
</Scroll>
</CutoutCard>
</Box>
</Box>
);
}

153
src/app/components/time-date/TimePicker.tsx Normal file
View file

@ -0,0 +1,153 @@
import React, { forwardRef } from 'react';
import { Menu, Box, Text, Chip } from 'folds';
import dayjs from 'dayjs';
import * as css from './styles.css';
import { PickerColumn } from './PickerColumn';
import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
type TimePickerProps = {
min: number;
max: number;
value: number;
onChange: (value: number) => void;
};
export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
({ min, max, value, onChange }, ref) => {
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const hour24 = dayjs(value).hour();
const selectedHour = hour24Clock ? hour24 : hour24to12(hour24);
const selectedMinute = dayjs(value).minute();
const selectedPM = hour24 >= 12;
const handleSubmit = (newValue: number) => {
onChange(Math.min(Math.max(min, newValue), max));
};
const handleHour = (hour: number) => {
const seconds = hoursToMs(hour24Clock ? hour : hour12to24(hour, selectedPM));
const lastSeconds = hoursToMs(hour24);
const newValue = value + (seconds - lastSeconds);
handleSubmit(newValue);
};
const handleMinute = (minute: number) => {
const seconds = minutesToMs(minute);
const lastSeconds = minutesToMs(selectedMinute);
const newValue = value + (seconds - lastSeconds);
handleSubmit(newValue);
};
const handlePeriod = (pm: boolean) => {
const seconds = hoursToMs(hour12to24(selectedHour, pm));
const lastSeconds = hoursToMs(hour24);
const newValue = value + (seconds - lastSeconds);
handleSubmit(newValue);
};
const minHour24 = dayjs(min).hour();
const maxHour24 = dayjs(max).hour();
const minMinute = dayjs(min).minute();
const maxMinute = dayjs(max).minute();
const minPM = minHour24 >= 12;
const maxPM = maxHour24 >= 12;
const minDay = inSameDay(min, value);
const maxDay = inSameDay(max, value);
return (
<Menu className={css.PickerMenu} ref={ref}>
<Box direction="Row" gap="200" className={css.PickerContainer}>
<PickerColumn title="Hour">
{hour24Clock
? Array.from(Array(24).keys()).map((hour) => (
<Chip
key={hour}
size="500"
variant={hour === selectedHour ? 'Primary' : 'Background'}
fill="None"
radii="300"
aria-selected={hour === selectedHour}
onClick={() => handleHour(hour)}
disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
>
<Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
</Chip>
))
: Array.from(Array(12).keys())
.map((i) => {
if (i === 0) return 12;
return i;
})
.map((hour) => (
<Chip
key={hour}
size="500"
variant={hour === selectedHour ? 'Primary' : 'Background'}
fill="None"
radii="300"
aria-selected={hour === selectedHour}
onClick={() => handleHour(hour)}
disabled={
(minDay && hour12to24(hour, selectedPM) < minHour24) ||
(maxDay && hour12to24(hour, selectedPM) > maxHour24)
}
>
<Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
</Chip>
))}
</PickerColumn>
<PickerColumn title="Minutes">
{Array.from(Array(60).keys()).map((minute) => (
<Chip
key={minute}
size="500"
variant={minute === selectedMinute ? 'Primary' : 'Background'}
fill="None"
radii="300"
aria-selected={minute === selectedMinute}
onClick={() => handleMinute(minute)}
disabled={
(minDay && hour24 === minHour24 && minute < minMinute) ||
(maxDay && hour24 === maxHour24 && minute > maxMinute)
}
>
<Text size="T300">{minute < 10 ? `0${minute}` : minute}</Text>
</Chip>
))}
</PickerColumn>
{!hour24Clock && (
<PickerColumn title="Period">
<Chip
size="500"
variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
fill="None"
radii="300"
aria-selected={!selectedPM}
onClick={() => handlePeriod(false)}
disabled={minDay && minPM}
>
<Text size="T300">AM</Text>
</Chip>
<Chip
size="500"
variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
fill="None"
radii="300"
aria-selected={selectedPM}
onClick={() => handlePeriod(true)}
disabled={maxDay && !maxPM}
>
<Text size="T300">PM</Text>
</Chip>
</PickerColumn>
)}
</Box>
</Menu>
);
}
);

2
src/app/components/time-date/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from './TimePicker';
export * from './DatePicker';

16
src/app/components/time-date/styles.css.ts Normal file
View file

@ -0,0 +1,16 @@
import { style } from '@vanilla-extract/css';
import { config, toRem } from 'folds';
export const PickerMenu = style({
padding: config.space.S200,
});
export const PickerContainer = style({
maxHeight: toRem(250),
});
export const PickerColumnLabel = style({
padding: config.space.S200,
});
export const PickerColumnContent = style({
padding: config.space.S200,
paddingRight: 0,
});

22
src/app/components/upload-card/CompactUploadCardRenderer.tsx
View file

@ -4,7 +4,8 @@ import { UploadCard, UploadCardError, CompactUploadCardProgress } from './Upload
import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common';
import { bytesToSize, getFileTypeIcon } from '../../utils/common';
import { useMediaConfig } from '../../hooks/useMediaConfig';
type CompactUploadCardRendererProps = {
isEncrypted?: boolean;
@ -19,10 +20,16 @@ export function CompactUploadCardRenderer({
onComplete,
}: CompactUploadCardRendererProps) {
const mx = useMatrixClient();
const mediaConfig = useMediaConfig();
const allowSize = mediaConfig['m.upload.size'] || Infinity;
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
const { file } = upload;
const fileSizeExceeded = file.size >= allowSize;
if (upload.status === UploadStatus.Idle) startUpload();
if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
startUpload();
}
const removeUpload = () => {
cancelUpload();
@ -76,7 +83,7 @@ export function CompactUploadCardRenderer({
</>
) : (
<>
{upload.status === UploadStatus.Idle && (
{upload.status === UploadStatus.Idle && !fileSizeExceeded && (
<CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
)}
{upload.status === UploadStatus.Loading && (
@ -87,6 +94,15 @@ export function CompactUploadCardRenderer({
<Text size="T200">{upload.error.message}</Text>
</UploadCardError>
)}
{upload.status === UploadStatus.Idle && fileSizeExceeded && (
<UploadCardError>
<Text size="T200">
The file size exceeds the limit. Maximum allowed size is{' '}
<b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
<b>{bytesToSize(file.size)}</b>.
</Text>
</UploadCardError>
)}
</>
)}
</UploadCard>

22
src/app/components/upload-card/UploadCardRenderer.tsx
View file

@ -4,13 +4,14 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common';
import { bytesToSize, getFileTypeIcon } from '../../utils/common';
import {
roomUploadAtomFamily,
TUploadItem,
TUploadMetadata,
} from '../../state/room/roomInputDrafts';
import { useObjectURL } from '../../hooks/useObjectURL';
import { useMediaConfig } from '../../hooks/useMediaConfig';
type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
@ -75,12 +76,18 @@ export function UploadCardRenderer({
onComplete,
}: UploadCardRendererProps) {
const mx = useMatrixClient();
const mediaConfig = useMediaConfig();
const allowSize = mediaConfig['m.upload.size'] || Infinity;
const uploadAtom = roomUploadAtomFamily(fileItem.file);
const { metadata } = fileItem;
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
const { file } = upload;
const fileSizeExceeded = file.size >= allowSize;
if (upload.status === UploadStatus.Idle) startUpload();
if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
startUpload();
}
const handleSpoiler = (marked: boolean) => {
setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
@ -131,7 +138,7 @@ export function UploadCardRenderer({
{fileItem.originalFile.type.startsWith('image') && (
<ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
)}
{upload.status === UploadStatus.Idle && (
{upload.status === UploadStatus.Idle && !fileSizeExceeded && (
<UploadCardProgress sentBytes={0} totalBytes={file.size} />
)}
{upload.status === UploadStatus.Loading && (
@ -142,6 +149,15 @@ export function UploadCardRenderer({
<Text size="T200">{upload.error.message}</Text>
</UploadCardError>
)}
{upload.status === UploadStatus.Idle && fileSizeExceeded && (
<UploadCardError>
<Text size="T200">
The file size exceeds the limit. Maximum allowed size is{' '}
<b>{bytesToSize(allowSize)}</b>, but the uploaded file is{' '}
<b>{bytesToSize(file.size)}</b>.
</Text>
</UploadCardError>
)}
</>
}
>

8
src/app/components/user-avatar/UserAvatar.tsx
View file

@ -1,15 +1,17 @@
import { AvatarFallback, AvatarImage, color } from 'folds';
import React, { ReactEventHandler, ReactNode, useState } from 'react';
import classNames from 'classnames';
import * as css from './UserAvatar.css';
import colorMXID from '../../../util/colorMXID';
type UserAvatarProps = {
className?: string;
userId: string;
src?: string;
alt?: string;
renderFallback: () => ReactNode;
};
export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps) {
export function UserAvatar({ className, userId, src, alt, renderFallback }: UserAvatarProps) {
const [error, setError] = useState(false);
const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
@ -20,7 +22,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
return (
<AvatarFallback
style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
className={css.UserAvatar}
className={classNames(css.UserAvatar, className)}
>
{renderFallback()}
</AvatarFallback>
@ -29,7 +31,7 @@ export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps
return (
<AvatarImage
className={css.UserAvatar}
className={classNames(css.UserAvatar, className)}
src={src}
alt={alt}
onError={() => setError(true)}

101
src/app/components/user-profile/CreatorChip.tsx Normal file
View file

@ -0,0 +1,101 @@
import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
import React, { MouseEventHandler, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import { isKeyHotkey } from 'is-hotkey';
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
import { PowerColorBadge, PowerIcon } from '../power';
import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { stopPropagation } from '../../utils/keyboard';
import { useRoom } from '../../hooks/useRoom';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
import { SpaceSettingsPage } from '../../state/spaceSettings';
import { RoomSettingsPage } from '../../state/roomSettings';
export function CreatorChip() {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const room = useRoom();
const space = useSpaceOptionally();
const openRoomSettings = useOpenRoomSettings();
const openSpaceSettings = useOpenSpaceSettings();
const [cords, setCords] = useState<RectCords>();
const tag = useRoomCreatorsTag();
const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
return (
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu>
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
if (room.isSpaceRoom()) {
openSpaceSettings(
room.roomId,
space?.roomId,
SpaceSettingsPage.PermissionsPage
);
} else {
openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
}
close();
}}
>
<Text size="B300">Manage Powers</Text>
</MenuItem>
</div>
</Menu>
</FocusTrap>
}
>
<Chip
variant="Success"
outlined
radii="Pill"
before={
cords ? (
<Icon size="50" src={Icons.ChevronBottom} />
) : (
<PowerColorBadge color={tag.color} />
)
}
after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
onClick={open}
aria-pressed={!!cords}
>
<Text size="B300" truncate>
{tag.name}
</Text>
</Chip>
</PopOut>
);
}

357
src/app/components/user-profile/PowerChip.tsx Normal file
View file

@ -0,0 +1,357 @@
import {
Box,
Button,
Chip,
config,
Dialog,
Header,
Icon,
IconButton,
Icons,
Line,
Menu,
MenuItem,
Overlay,
OverlayBackdrop,
OverlayCenter,
PopOut,
RectCords,
Spinner,
Text,
toRem,
} from 'folds';
import React, { MouseEventHandler, useCallback, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import { isKeyHotkey } from 'is-hotkey';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { PowerColorBadge, PowerIcon } from '../power';
import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
import { stopPropagation } from '../../utils/keyboard';
import { StateEvent } from '../../../types/matrix/room';
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
import { RoomSettingsPage } from '../../state/roomSettings';
import { useRoom } from '../../hooks/useRoom';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { CutoutCard } from '../cutout-card';
import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
import { SpaceSettingsPage } from '../../state/spaceSettings';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { BreakWord } from '../../styles/Text.css';
import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
type SelfDemoteAlertProps = {
power: number;
onCancel: () => void;
onChange: (power: number) => void;
};
function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Self Demotion</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
<Box direction="Column" gap="200">
<Text priority="400">
You are about to demote yourself! You will not be able to regain this power
yourself. Are you sure?
</Text>
</Box>
<Box direction="Column" gap="200">
<Button type="submit" variant="Warning" onClick={() => onChange(power)}>
<Text size="B400">Demote</Text>
</Button>
</Box>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}
type SharedPowerAlertProps = {
power: number;
onCancel: () => void;
onChange: (power: number) => void;
};
function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps) {
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Shared Power</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box style={{ padding: config.space.S400, paddingTop: 0 }} direction="Column" gap="500">
<Box direction="Column" gap="200">
<Text priority="400">
You are promoting the user to have the same power as yourself! You will not be
able to change their power afterward. Are you sure?
</Text>
</Box>
<Box direction="Column" gap="200">
<Button type="submit" variant="Warning" onClick={() => onChange(power)}>
<Text size="B400">Promote</Text>
</Button>
</Box>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}
export function PowerChip({ userId }: { userId: string }) {
const mx = useMatrixClient();
const room = useRoom();
const space = useSpaceOptionally();
const useAuthentication = useMediaAuthentication();
const openRoomSettings = useOpenRoomSettings();
const openSpaceSettings = useOpenSpaceSettings();
const powerLevels = usePowerLevels(room);
const creators = useRoomCreators(room);
const permissions = useRoomPermissions(creators, powerLevels);
const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
const powerLevelTags = usePowerLevelTags(room, powerLevels);
const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
const myUserId = mx.getSafeUserId();
const canChangePowers =
permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
(myUserId === userId ? true : hasMorePower(myUserId, userId));
const tag = getMemberPowerTag(userId);
const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
const [cords, setCords] = useState<RectCords>();
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
const [powerState, changePower] = useAsyncCallback<undefined, Error, [number]>(
useCallback(
async (power: number) => {
await mx.setPowerLevel(room.roomId, userId, power);
},
[mx, userId, room]
)
);
const changing = powerState.status === AsyncStatus.Loading;
const error = powerState.status === AsyncStatus.Error;
const [selfDemote, setSelfDemote] = useState<number>();
const [sharedPower, setSharedPower] = useState<number>();
const handlePowerSelect = (power: number): void => {
close();
if (!canChangePowers) return;
if (power === getMemberPowerLevel(userId)) return;
if (userId === mx.getSafeUserId()) {
setSelfDemote(power);
return;
}
if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
setSharedPower(power);
return;
}
changePower(power);
};
const handleSelfDemote = (power: number) => {
setSelfDemote(undefined);
changePower(power);
};
const handleSharedPower = (power: number) => {
setSharedPower(undefined);
changePower(power);
};
return (
<>
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu>
<Box
direction="Column"
gap="100"
style={{ padding: config.space.S100, maxWidth: toRem(200) }}
>
{error && (
<CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
<Text size="L400">Error: {powerState.error.name}</Text>
<Text className={BreakWord} size="T200">
{powerState.error.message}
</Text>
</CutoutCard>
)}
{getPowers(powerLevelTags).map((power) => {
const powerTag = powerLevelTags[power];
const powerTagIconSrc =
powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
const selected = getMemberPowerLevel(userId) === power;
const canAssignPower = creators.has(myUserId)
? true
: power <= getMemberPowerLevel(myUserId);
return (
<MenuItem
key={power}
variant={selected ? 'Primary' : 'Surface'}
fill="None"
size="300"
radii="300"
aria-disabled={changing || !canChangePowers || !canAssignPower}
aria-pressed={selected}
before={<PowerColorBadge color={powerTag.color} />}
after={
powerTagIconSrc ? (
<PowerIcon size="50" iconSrc={powerTagIconSrc} />
) : undefined
}
onClick={
canChangePowers && canAssignPower
? () => handlePowerSelect(power)
: undefined
}
>
<Text size="B300">{powerTag.name}</Text>
</MenuItem>
);
})}
</Box>
<Line size="300" />
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
if (room.isSpaceRoom()) {
openSpaceSettings(
room.roomId,
space?.roomId,
SpaceSettingsPage.PermissionsPage
);
} else {
openRoomSettings(
room.roomId,
space?.roomId,
RoomSettingsPage.PermissionsPage
);
}
close();
}}
>
<Text size="B300">Manage Powers</Text>
</MenuItem>
</div>
</Menu>
</FocusTrap>
}
>
<Chip
variant={error ? 'Critical' : 'SurfaceVariant'}
radii="Pill"
before={
cords ? (
<Icon size="50" src={Icons.ChevronBottom} />
) : (
<>
{!changing && <PowerColorBadge color={tag.color} />}
{changing && <Spinner size="50" variant="Secondary" fill="Soft" />}
</>
)
}
after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
onClick={open}
aria-pressed={!!cords}
>
<Text size="B300" truncate>
{tag.name}
</Text>
</Chip>
</PopOut>
{typeof selfDemote === 'number' ? (
<SelfDemoteAlert
power={selfDemote}
onCancel={() => setSelfDemote(undefined)}
onChange={handleSelfDemote}
/>
) : null}
{typeof sharedPower === 'number' ? (
<SharedPowerAlert
power={sharedPower}
onCancel={() => setSharedPower(undefined)}
onChange={handleSharedPower}
/>
) : null}
</>
);
}

514
src/app/components/user-profile/UserChips.tsx Normal file
View file

@ -0,0 +1,514 @@
import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import FocusTrap from 'focus-trap-react';
import { isKeyHotkey } from 'is-hotkey';
import { Room } from 'matrix-js-sdk';
import {
PopOut,
Menu,
MenuItem,
config,
Text,
Line,
Chip,
Icon,
Icons,
RectCords,
Spinner,
toRem,
Box,
Scroll,
Avatar,
} from 'folds';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { getMxIdServer } from '../../utils/matrix';
import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { stopPropagation } from '../../utils/keyboard';
import { copyToClipboard } from '../../utils/dom';
import { getExploreServerPath } from '../../pages/pathUtils';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { factoryRoomIdByAtoZ } from '../../utils/sort';
import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
import { RoomAvatar, RoomIcon } from '../room-avatar';
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
import { nameInitials } from '../../utils/common';
import { getMatrixToUser } from '../../plugins/matrix-to';
import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { CutoutCard } from '../cutout-card';
import { SettingTile } from '../setting-tile';
export function ServerChip({ server }: { server: string }) {
const mx = useMatrixClient();
const myServer = getMxIdServer(mx.getSafeUserId());
const navigate = useNavigate();
const closeProfile = useCloseUserRoomProfile();
const [copied, setCopied] = useTimeoutToggle();
const [cords, setCords] = useState<RectCords>();
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
return (
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu>
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
copyToClipboard(server);
setCopied();
close();
}}
>
<Text size="B300">Copy Server</Text>
</MenuItem>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
navigate(getExploreServerPath(server));
closeProfile();
}}
>
<Text size="B300">Explore Community</Text>
</MenuItem>
</div>
<Line size="300" />
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant={myServer === server ? 'Surface' : 'Critical'}
fill="None"
size="300"
radii="300"
onClick={() => {
window.open(`https://${server}`, '_blank');
close();
}}
>
<Text size="B300">Open in Browser</Text>
</MenuItem>
</div>
</Menu>
</FocusTrap>
}
>
<Chip
variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
radii="Pill"
before={
cords ? (
<Icon size="50" src={Icons.ChevronBottom} />
) : (
<Icon size="50" src={copied ? Icons.Check : Icons.Server} />
)
}
onClick={open}
aria-pressed={!!cords}
>
<Text size="B300" truncate>
{server}
</Text>
</Chip>
</PopOut>
);
}
export function ShareChip({ userId }: { userId: string }) {
const [cords, setCords] = useState<RectCords>();
const [copied, setCopied] = useTimeoutToggle();
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
return (
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu>
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
copyToClipboard(userId);
setCopied();
close();
}}
>
<Text size="B300">Copy User ID</Text>
</MenuItem>
<MenuItem
variant="Surface"
fill="None"
size="300"
radii="300"
onClick={() => {
copyToClipboard(getMatrixToUser(userId));
setCopied();
close();
}}
>
<Text size="B300">Copy User Link</Text>
</MenuItem>
</div>
</Menu>
</FocusTrap>
}
>
<Chip
variant={copied ? 'Success' : 'SurfaceVariant'}
radii="Pill"
before={
cords ? (
<Icon size="50" src={Icons.ChevronBottom} />
) : (
<Icon size="50" src={copied ? Icons.Check : Icons.Link} />
)
}
onClick={open}
aria-pressed={!!cords}
>
<Text size="B300" truncate>
Share
</Text>
</Chip>
</PopOut>
);
}
type MutualRoomsData = {
rooms: Room[];
spaces: Room[];
directs: Room[];
};
export function MutualRoomsChip({ userId }: { userId: string }) {
const mx = useMatrixClient();
const mutualRoomSupported = useMutualRoomsSupport();
const mutualRoomsState = useMutualRooms(userId);
const { navigateRoom, navigateSpace } = useRoomNavigate();
const closeUserRoomProfile = useCloseUserRoomProfile();
const directs = useDirectRooms();
const useAuthentication = useMediaAuthentication();
const allJoinedRooms = useAllJoinedRoomsSet();
const getRoom = useGetRoom(allJoinedRooms);
const [cords, setCords] = useState<RectCords>();
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
const mutual: MutualRoomsData = useMemo(() => {
const data: MutualRoomsData = {
rooms: [],
spaces: [],
directs: [],
};
if (mutualRoomsState.status === AsyncStatus.Success) {
const mutualRooms = mutualRoomsState.data
.sort(factoryRoomIdByAtoZ(mx))
.map(getRoom)
.filter((room) => !!room);
mutualRooms.forEach((room) => {
if (room.isSpaceRoom()) {
data.spaces.push(room);
return;
}
if (directs.includes(room.roomId)) {
data.directs.push(room);
return;
}
data.rooms.push(room);
});
}
return data;
}, [mutualRoomsState, getRoom, directs, mx]);
if (
userId === mx.getSafeUserId() ||
!mutualRoomSupported ||
mutualRoomsState.status === AsyncStatus.Error
) {
return null;
}
const renderItem = (room: Room) => {
const { roomId } = room;
const dm = directs.includes(roomId);
return (
<MenuItem
key={roomId}
variant="Surface"
fill="None"
size="300"
radii="300"
style={{ paddingLeft: config.space.S100 }}
onClick={() => {
if (room.isSpaceRoom()) {
navigateSpace(roomId);
} else {
navigateRoom(roomId);
}
closeUserRoomProfile();
}}
before={
<Avatar size="200" radii={dm ? '400' : '300'}>
{dm || room.isSpaceRoom() ? (
<RoomAvatar
roomId={room.roomId}
src={
dm
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication)
}
alt={room.name}
renderFallback={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon size="100" joinRule={room.getJoinRule()} />
)}
</Avatar>
}
>
<Text size="B300" truncate>
{room.name}
</Text>
</MenuItem>
);
};
return (
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
mutualRoomsState.status === AsyncStatus.Success ? (
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu
style={{
display: 'flex',
maxWidth: toRem(200),
maxHeight: '80vh',
}}
>
<Box grow="Yes">
<Scroll size="300" hideTrack>
<Box
direction="Column"
gap="400"
style={{ padding: config.space.S200, paddingRight: 0 }}
>
{mutual.spaces.length > 0 && (
<Box direction="Column" gap="100">
<Text style={{ paddingLeft: config.space.S100 }} size="L400">
Spaces
</Text>
{mutual.spaces.map(renderItem)}
</Box>
)}
{mutual.rooms.length > 0 && (
<Box direction="Column" gap="100">
<Text style={{ paddingLeft: config.space.S100 }} size="L400">
Rooms
</Text>
{mutual.rooms.map(renderItem)}
</Box>
)}
{mutual.directs.length > 0 && (
<Box direction="Column" gap="100">
<Text style={{ paddingLeft: config.space.S100 }} size="L400">
Direct Messages
</Text>
{mutual.directs.map(renderItem)}
</Box>
)}
</Box>
</Scroll>
</Box>
</Menu>
</FocusTrap>
) : null
}
>
<Chip
variant="SurfaceVariant"
radii="Pill"
before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
disabled={
mutualRoomsState.status !== AsyncStatus.Success || mutualRoomsState.data.length === 0
}
onClick={open}
aria-pressed={!!cords}
>
<Text size="B300">
{mutualRoomsState.status === AsyncStatus.Success &&
`${mutualRoomsState.data.length} Mutual Rooms`}
{mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
</Text>
</Chip>
</PopOut>
);
}
export function IgnoredUserAlert() {
return (
<CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
<SettingTile>
<Box direction="Column" gap="200">
<Box gap="200" justifyContent="SpaceBetween">
<Text size="L400">Blocked User</Text>
</Box>
<Box direction="Column">
<Text size="T200">You do not receive any messages or invites from this user.</Text>
</Box>
</Box>
</SettingTile>
</CutoutCard>
);
}
export function OptionsChip({ userId }: { userId: string }) {
const mx = useMatrixClient();
const [cords, setCords] = useState<RectCords>();
const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
setCords(evt.currentTarget.getBoundingClientRect());
};
const close = () => setCords(undefined);
const ignoredUsers = useIgnoredUsers();
const ignored = ignoredUsers.includes(userId);
const [ignoreState, toggleIgnore] = useAsyncCallback(
useCallback(async () => {
const users = ignoredUsers.filter((u) => u !== userId);
if (!ignored) users.push(userId);
await mx.setIgnoredUsers(users);
}, [mx, ignoredUsers, userId, ignored])
);
const ignoring = ignoreState.status === AsyncStatus.Loading;
return (
<PopOut
anchor={cords}
position="Bottom"
align="Start"
offset={4}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: close,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu>
<div style={{ padding: config.space.S100 }}>
<MenuItem
variant="Critical"
fill="None"
size="300"
radii="300"
onClick={() => {
toggleIgnore();
close();
}}
before={
ignoring ? (
<Spinner variant="Critical" size="50" />
) : (
<Icon size="50" src={Icons.Prohibited} />
)
}
disabled={ignoring}
>
<Text size="B300">{ignored ? 'Unblock User' : 'Block User'}</Text>
</MenuItem>
</div>
</Menu>
</FocusTrap>
}
>
<Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
{ignoring ? (
<Spinner variant="Secondary" size="50" />
) : (
<Icon size="50" src={Icons.HorizontalDots} />
)}
</Chip>
</PopOut>
);
}

120
src/app/components/user-profile/UserHero.tsx Normal file
View file

@ -0,0 +1,120 @@
import React, { useState } from 'react';
import {
Avatar,
Box,
Icon,
Icons,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
Text,
} from 'folds';
import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
import * as css from './styles.css';
import { UserAvatar } from '../user-avatar';
import colorMXID from '../../../util/colorMXID';
import { getMxIdLocalPart } from '../../utils/matrix';
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
import { UserPresence } from '../../hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '../presence';
import { ImageViewer } from '../image-viewer';
import { stopPropagation } from '../../utils/keyboard';
type UserHeroProps = {
userId: string;
avatarUrl?: string;
presence?: UserPresence;
};
export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
const [viewAvatar, setViewAvatar] = useState<string>();
return (
<Box direction="Column" className={css.UserHero}>
<div
className={css.UserHeroCoverContainer}
style={{
backgroundColor: colorMXID(userId),
filter: avatarUrl ? undefined : 'brightness(50%)',
}}
>
{avatarUrl && (
<img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
)}
</div>
<div className={css.UserHeroAvatarContainer}>
<AvatarPresence
className={css.UserAvatarContainer}
badge={
presence && <PresenceBadge presence={presence.presence} status={presence.status} />
}
>
<Avatar
as={avatarUrl ? 'button' : 'div'}
onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
className={css.UserHeroAvatar}
size="500"
>
<UserAvatar
className={css.UserHeroAvatarImg}
userId={userId}
src={avatarUrl}
alt={userId}
renderFallback={() => <Icon size="500" src={Icons.User} filled />}
/>
</Avatar>
</AvatarPresence>
{viewAvatar && (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setViewAvatar(undefined),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
<ImageViewer
src={viewAvatar}
alt={userId}
requestClose={() => setViewAvatar(undefined)}
/>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
)}
</div>
</Box>
);
}
type UserHeroNameProps = {
displayName?: string;
userId: string;
};
export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
const username = getMxIdLocalPart(userId);
return (
<Box grow="Yes" direction="Column" gap="0">
<Box alignItems="Baseline" gap="200" wrap="Wrap">
<Text
size="H4"
className={classNames(BreakWord, LineClamp3)}
title={displayName ?? username}
>
{displayName ?? username ?? userId}
</Text>
</Box>
<Box alignItems="Center" gap="100" wrap="Wrap">
<Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
@{username}
</Text>
</Box>
</Box>
);
}

349
src/app/components/user-profile/UserModeration.tsx Normal file
View file

@ -0,0 +1,349 @@
import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
import React, { useCallback, useRef } from 'react';
import { useRoom } from '../../hooks/useRoom';
import { CutoutCard } from '../cutout-card';
import { SettingTile } from '../setting-tile';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { BreakWord } from '../../styles/Text.css';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { timeDayMonYear, timeHourMinute } from '../../utils/time';
type UserKickAlertProps = {
reason?: string;
kickedBy?: string;
ts?: number;
};
export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
return (
<CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
<SettingTile>
<Box direction="Column" gap="200">
<Box gap="200" justifyContent="SpaceBetween">
<Text size="L400">Kicked User</Text>
{time && date && (
<Text size="T200">
{date} {time}
</Text>
)}
</Box>
<Box direction="Column">
{kickedBy && (
<Text size="T200">
Kicked by: <b>{kickedBy}</b>
</Text>
)}
<Text size="T200">
{reason ? (
<>
Reason: <b>{reason}</b>
</>
) : (
<i>No Reason Provided.</i>
)}
</Text>
</Box>
</Box>
</SettingTile>
</CutoutCard>
);
}
type UserBanAlertProps = {
userId: string;
reason?: string;
canUnban?: boolean;
bannedBy?: string;
ts?: number;
};
export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
const mx = useMatrixClient();
const room = useRoom();
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
useCallback(async () => {
await mx.unban(room.roomId, userId);
}, [mx, room, userId])
);
const banning = unbanState.status === AsyncStatus.Loading;
const error = unbanState.status === AsyncStatus.Error;
return (
<CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
<SettingTile>
<Box direction="Column" gap="200">
<Box gap="200" justifyContent="SpaceBetween">
<Text size="L400">Banned User</Text>
{time && date && (
<Text size="T200">
{date} {time}
</Text>
)}
</Box>
<Box direction="Column">
{bannedBy && (
<Text size="T200">
Banned by: <b>{bannedBy}</b>
</Text>
)}
<Text size="T200">
{reason ? (
<>
Reason: <b>{reason}</b>
</>
) : (
<i>No Reason Provided.</i>
)}
</Text>
</Box>
{error && (
<Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
<b>{unbanState.error.message}</b>
</Text>
)}
{canUnban && (
<Button
size="300"
variant="Critical"
radii="300"
onClick={unban}
before={banning && <Spinner size="100" variant="Critical" fill="Solid" />}
disabled={banning}
>
<Text size="B300">Unban</Text>
</Button>
)}
</Box>
</SettingTile>
</CutoutCard>
);
}
type UserInviteAlertProps = {
userId: string;
reason?: string;
canKick?: boolean;
invitedBy?: string;
ts?: number;
};
export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
const mx = useMatrixClient();
const room = useRoom();
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
useCallback(async () => {
await mx.kick(room.roomId, userId);
}, [mx, room, userId])
);
const kicking = kickState.status === AsyncStatus.Loading;
const error = kickState.status === AsyncStatus.Error;
return (
<CutoutCard style={{ padding: config.space.S200 }} variant="Success">
<SettingTile>
<Box direction="Column" gap="200">
<Box gap="200" justifyContent="SpaceBetween">
<Text size="L400">Invited User</Text>
{time && date && (
<Text size="T200">
{date} {time}
</Text>
)}
</Box>
<Box direction="Column">
{invitedBy && (
<Text size="T200">
Invited by: <b>{invitedBy}</b>
</Text>
)}
<Text size="T200">
{reason ? (
<>
Reason: <b>{reason}</b>
</>
) : (
<i>No Reason Provided.</i>
)}
</Text>
</Box>
{error && (
<Text className={BreakWord} size="T200" style={{ color: color.Critical.Main }}>
<b>{kickState.error.message}</b>
</Text>
)}
{canKick && (
<Button
size="300"
variant="Success"
fill="Soft"
outlined
radii="300"
onClick={kick}
before={kicking && <Spinner size="100" variant="Success" fill="Soft" />}
disabled={kicking}
>
<Text size="B300">Cancel Invite</Text>
</Button>
)}
</Box>
</SettingTile>
</CutoutCard>
);
}
type UserModerationProps = {
userId: string;
canKick: boolean;
canBan: boolean;
canInvite: boolean;
};
export function UserModeration({ userId, canKick, canBan, canInvite }: UserModerationProps) {
const mx = useMatrixClient();
const room = useRoom();
const reasonInputRef = useRef<HTMLInputElement>(null);
const getReason = useCallback((): string | undefined => {
const reason = reasonInputRef.current?.value.trim() || undefined;
if (reasonInputRef.current) {
reasonInputRef.current.value = '';
}
return reason;
}, []);
const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
useCallback(async () => {
await mx.kick(room.roomId, userId, getReason());
}, [mx, room, userId, getReason])
);
const [banState, ban] = useAsyncCallback<undefined, Error, []>(
useCallback(async () => {
await mx.ban(room.roomId, userId, getReason());
}, [mx, room, userId, getReason])
);
const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
useCallback(async () => {
await mx.invite(room.roomId, userId, getReason());
}, [mx, room, userId, getReason])
);
const disabled =
kickState.status === AsyncStatus.Loading ||
banState.status === AsyncStatus.Loading ||
inviteState.status === AsyncStatus.Loading;
if (!canBan && !canKick && !canInvite) return null;
return (
<Box direction="Column" gap="400">
<Box direction="Column" gap="200">
<Box grow="Yes" direction="Column" gap="100">
<Text size="L400">Moderation</Text>
<Input
ref={reasonInputRef}
placeholder="Reason"
size="300"
variant="Background"
radii="300"
disabled={disabled}
/>
{kickState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
<b>{kickState.error.message}</b>
</Text>
)}
{banState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
<b>{banState.error.message}</b>
</Text>
)}
{inviteState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
<b>{inviteState.error.message}</b>
</Text>
)}
</Box>
<Box shrink="No" gap="200">
{canInvite && (
<Button
style={{ flexGrow: 1 }}
size="300"
variant="Secondary"
fill="Soft"
radii="300"
before={
inviteState.status === AsyncStatus.Loading ? (
<Spinner size="50" variant="Secondary" fill="Soft" />
) : (
<Icon size="50" src={Icons.ArrowRight} />
)
}
onClick={invite}
disabled={disabled}
>
<Text size="B300">Invite</Text>
</Button>
)}
{canKick && (
<Button
style={{ flexGrow: 1 }}
size="300"
variant="Critical"
fill="Soft"
radii="300"
before={
kickState.status === AsyncStatus.Loading ? (
<Spinner size="50" variant="Critical" fill="Soft" />
) : (
<Icon size="50" src={Icons.ArrowLeft} />
)
}
onClick={kick}
disabled={disabled}
>
<Text size="B300">Kick</Text>
</Button>
)}
{canBan && (
<Button
style={{ flexGrow: 1 }}
size="300"
variant="Critical"
fill="Solid"
radii="300"
before={
banState.status === AsyncStatus.Loading ? (
<Spinner size="50" variant="Critical" fill="Solid" />
) : (
<Icon size="50" src={Icons.Prohibited} />
)
}
onClick={ban}
disabled={disabled}
>
<Text size="B300">Ban</Text>
</Button>
)}
</Box>
</Box>
</Box>
);
}

142
src/app/components/user-profile/UserRoomProfile.tsx Normal file
View file

@ -0,0 +1,142 @@
import { Box, Button, config, Icon, Icons, Text } from 'folds';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { UserHero, UserHeroName } from './UserHero';
import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { usePowerLevels } from '../../hooks/usePowerLevels';
import { useRoom } from '../../hooks/useRoom';
import { useUserPresence } from '../../hooks/useUserPresence';
import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
import { PowerChip } from './PowerChip';
import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { useMembership } from '../../hooks/useMembership';
import { Membership } from '../../../types/matrix/room';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
import { CreatorChip } from './CreatorChip';
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
import { DirectCreateSearchParams } from '../../pages/paths';
type UserRoomProfileProps = {
userId: string;
};
export function UserRoomProfile({ userId }: UserRoomProfileProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const navigate = useNavigate();
const closeUserRoomProfile = useCloseUserRoomProfile();
const ignoredUsers = useIgnoredUsers();
const ignored = ignoredUsers.includes(userId);
const room = useRoom();
const powerLevels = usePowerLevels(room);
const creators = useRoomCreators(room);
const permissions = useRoomPermissions(creators, powerLevels);
const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
const myUserId = mx.getSafeUserId();
const creator = creators.has(userId);
const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
const canUnban = permissions.action('ban', myUserId);
const canInvite = permissions.action('invite', myUserId);
const member = room.getMember(userId);
const membership = useMembership(room, userId);
const server = getMxIdServer(userId);
const displayName = getMemberDisplayName(room, userId);
const avatarMxc = getMemberAvatarMxc(room, userId);
const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
const presence = useUserPresence(userId);
const handleMessage = () => {
closeUserRoomProfile();
const directSearchParam: DirectCreateSearchParams = {
userId,
};
navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
};
return (
<Box direction="Column">
<UserHero
userId={userId}
avatarUrl={avatarUrl}
presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
/>
<Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
<Box direction="Column" gap="400">
<Box gap="400" alignItems="Start">
<UserHeroName displayName={displayName} userId={userId} />
{userId !== myUserId && (
<Box shrink="No">
<Button
size="300"
variant="Primary"
fill="Solid"
radii="300"
before={<Icon size="50" src={Icons.Message} filled />}
onClick={handleMessage}
>
<Text size="B300">Message</Text>
</Button>
</Box>
)}
</Box>
<Box alignItems="Center" gap="200" wrap="Wrap">
{server && <ServerChip server={server} />}
<ShareChip userId={userId} />
{creator ? <CreatorChip /> : <PowerChip userId={userId} />}
{userId !== myUserId && <MutualRoomsChip userId={userId} />}
{userId !== myUserId && <OptionsChip userId={userId} />}
</Box>
</Box>
{ignored && <IgnoredUserAlert />}
{member && membership === Membership.Ban && (
<UserBanAlert
userId={userId}
reason={member.events.member?.getContent().reason}
canUnban={canUnban}
bannedBy={member.events.member?.getSender()}
ts={member.events.member?.getTs()}
/>
)}
{member &&
membership === Membership.Leave &&
member.events.member &&
member.events.member.getSender() !== userId && (
<UserKickAlert
reason={member.events.member?.getContent().reason}
kickedBy={member.events.member?.getSender()}
ts={member.events.member?.getTs()}
/>
)}
{member && membership === Membership.Invite && (
<UserInviteAlert
userId={userId}
reason={member.events.member?.getContent().reason}
canKick={canKickUser}
invitedBy={member.events.member?.getSender()}
ts={member.events.member?.getTs()}
/>
)}
<UserModeration
userId={userId}
canInvite={canInvite && membership === Membership.Leave}
canKick={canKickUser && membership === Membership.Join}
canBan={canBanUser && membership !== Membership.Ban}
/>
</Box>
</Box>
);
}

1
src/app/components/user-profile/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './UserRoomProfile';

54
src/app/components/user-profile/styles.css.ts Normal file
View file

@ -0,0 +1,54 @@
import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';
export const UserHeader = style({
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 1,
padding: config.space.S200,
});
export const UserHero = style({
position: 'relative',
});
export const UserHeroCoverContainer = style({
height: toRem(96),
overflow: 'hidden',
});
export const UserHeroCover = style({
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'blur(16px)',
transform: 'scale(2)',
});
export const UserHeroAvatarContainer = style({
position: 'relative',
height: toRem(29),
});
export const UserAvatarContainer = style({
position: 'absolute',
left: config.space.S400,
top: 0,
transform: 'translateY(-50%)',
backgroundColor: color.Surface.Container,
});
export const UserHeroAvatar = style({
outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
selectors: {
'button&': {
cursor: 'pointer',
},
},
});
export const UserHeroAvatarImg = style({
selectors: {
[`button${UserHeroAvatar}:hover &`]: {
filter: 'brightness(0.5)',
},
},
});

375
src/app/features/add-existing/AddExisting.tsx Normal file
View file

@ -0,0 +1,375 @@
import FocusTrap from 'focus-trap-react';
import {
Avatar,
Box,
Button,
config,
Header,
Icon,
IconButton,
Icons,
Input,
Menu,
MenuItem,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
Scroll,
Spinner,
Text,
} from 'folds';
import React, {
ChangeEventHandler,
MouseEventHandler,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import { useAtomValue } from 'jotai';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Room } from 'matrix-js-sdk';
import { stopPropagation } from '../../utils/keyboard';
import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { allRoomsAtom } from '../../state/room-list/roomList';
import { mDirectAtom } from '../../state/mDirectList';
import { roomToParentsAtom } from '../../state/room/roomToParents';
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
import { VirtualTile } from '../../components/virtualizer';
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
import { nameInitials } from '../../utils/common';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { factoryRoomIdByAtoZ } from '../../utils/sort';
import {
SearchItemStrGetter,
useAsyncSearch,
UseAsyncSearchOptions,
} from '../../hooks/useAsyncSearch';
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { StateEvent } from '../../../types/matrix/room';
import { getViaServers } from '../../plugins/via-servers';
import { rateLimitedActions } from '../../utils/matrix';
import { useAlive } from '../../hooks/useAlive';
const SEARCH_OPTS: UseAsyncSearchOptions = {
limit: 500,
matchOptions: {
contain: true,
},
normalizeOptions: {
ignoreWhitespace: false,
},
};
type AddExistingModalProps = {
parentId: string;
space?: boolean;
requestClose: () => void;
};
export function AddExistingModal({ parentId, space, requestClose }: AddExistingModalProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const alive = useAlive();
const mDirects = useAtomValue(mDirectAtom);
const spaces = useSpaces(mx, allRoomsAtom);
const rooms = useRooms(mx, allRoomsAtom, mDirects);
const directs = useDirects(mx, allRoomsAtom, mDirects);
const roomIdToParents = useAtomValue(roomToParentsAtom);
const scrollRef = useRef<HTMLDivElement>(null);
const [selected, setSelected] = useState<string[]>([]);
const allRoomsSet = useAllJoinedRoomsSet();
const getRoom = useGetRoom(allRoomsSet);
const allItems: string[] = useMemo(() => {
const rIds = space ? [...spaces] : [...rooms, ...directs];
return rIds
.filter((rId) => rId !== parentId && !roomIdToParents.get(rId)?.has(parentId))
.sort(factoryRoomIdByAtoZ(mx));
}, [spaces, rooms, directs, space, parentId, roomIdToParents, mx]);
const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
(rId) => getRoom(rId)?.name ?? rId,
[getRoom]
);
const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
allItems,
getRoomNameStr,
SEARCH_OPTS
);
const queryHighlighRegex = searchResult?.query
? makeHighlightRegex(searchResult.query.split(' '))
: undefined;
const items = searchResult ? searchResult.items : allItems;
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => 32,
overscan: 5,
});
const vItems = virtualizer.getVirtualItems();
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
const value = evt.currentTarget.value.trim();
if (!value) {
resetSearch();
return;
}
searchRoom(value);
};
const [applyState, applyChanges] = useAsyncCallback<undefined, Error, [Room[]]>(
useCallback(
async (selectedRooms) => {
await rateLimitedActions(selectedRooms, async (room) => {
const via = getViaServers(room);
await mx.sendStateEvent(
parentId,
StateEvent.SpaceChild as any,
{
auto_join: false,
suggested: false,
via,
},
room.roomId
);
});
},
[mx, parentId]
)
);
const applyingChanges = applyState.status === AsyncStatus.Loading;
const handleRoomClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
const roomId = evt.currentTarget.getAttribute('data-room-id');
if (!roomId) return;
if (selected?.includes(roomId)) {
setSelected(selected?.filter((rId) => rId !== roomId));
return;
}
const addedRooms = [...(selected ?? [])];
addedRooms.push(roomId);
setSelected(addedRooms);
};
const handleApplyChanges = () => {
const selectedRooms = selected.map((rId) => getRoom(rId)).filter((room) => room !== undefined);
applyChanges(selectedRooms).then(() => {
if (alive()) {
setSelected([]);
requestClose();
}
});
};
const resetChanges = () => {
setSelected([]);
};
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: requestClose,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300">
<Box grow="Yes" direction="Column">
<Header
size="500"
style={{
padding: config.space.S200,
paddingLeft: config.space.S400,
}}
>
<Box grow="Yes">
<Text size="H4">Add Existing</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={requestClose}>
<Icon src={Icons.Cross} />
</IconButton>
</Box>
</Header>
<Box grow="Yes">
<Scroll ref={scrollRef} size="300" hideTrack>
<Box
style={{ padding: config.space.S300, paddingRight: 0 }}
direction="Column"
gap="500"
>
<Box
direction="Column"
style={{ position: 'sticky', top: config.space.S300, zIndex: 1 }}
>
<Input
onChange={handleSearchChange}
before={<Icon size="200" src={Icons.Search} />}
placeholder="Search"
size="400"
variant="Background"
outlined
/>
</Box>
{vItems.length === 0 && (
<Box
style={{ paddingTop: config.space.S700 }}
grow="Yes"
alignItems="Center"
justifyContent="Center"
direction="Column"
gap="100"
>
<Text size="H6" align="Center">
{searchResult ? 'No Match Found' : `No ${space ? 'Spaces' : 'Rooms'}`}
</Text>
<Text size="T200" align="Center">
{searchResult
? `No match found for "${searchResult.query}".`
: `You do not have any ${space ? 'Spaces' : 'Rooms'} to display yet.`}
</Text>
</Box>
)}
<Box
style={{
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
{vItems.map((vItem) => {
const roomId = items[vItem.index];
const room = getRoom(roomId);
if (!room) return null;
const selectedItem = selected?.includes(roomId);
const dm = mDirects.has(room.roomId);
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S100 }}
ref={virtualizer.measureElement}
key={vItem.index}
>
<MenuItem
data-room-id={roomId}
onClick={handleRoomClick}
variant={selectedItem ? 'Success' : 'Surface'}
size="400"
radii="400"
disabled={applyingChanges}
aria-pressed={selectedItem}
before={
<Avatar size="200" radii={dm ? '400' : '300'}>
{dm || room.isSpaceRoom() ? (
<RoomAvatar
roomId={room.roomId}
src={
dm
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication)
}
alt={room.name}
renderFallback={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon size="200" joinRule={room.getJoinRule()} />
)}
</Avatar>
}
after={selectedItem && <Icon size="200" src={Icons.Check} />}
>
<Box grow="Yes">
<Text truncate size="T400">
{queryHighlighRegex
? highlightText(queryHighlighRegex, [room.name])
: room.name}
</Text>
</Box>
</MenuItem>
</VirtualTile>
);
})}
</Box>
{selected.length > 0 && (
<Menu
style={{
position: 'sticky',
padding: config.space.S200,
paddingLeft: config.space.S400,
bottom: config.space.S400,
left: config.space.S400,
right: 0,
zIndex: 1,
}}
variant="Success"
>
<Box alignItems="Center" gap="400">
<Box grow="Yes" direction="Column">
{applyState.status === AsyncStatus.Error ? (
<Text size="T200">
<b>Failed to apply changes! Please try again.</b>
</Text>
) : (
<Text size="T200">
<b>Apply when ready. ({selected.length} Selected)</b>
</Text>
)}
</Box>
<Box shrink="No" gap="200">
<Button
size="300"
variant="Success"
fill="None"
radii="300"
disabled={applyingChanges}
onClick={resetChanges}
>
<Text size="B300">Reset</Text>
</Button>
<Button
size="300"
variant="Success"
radii="300"
disabled={applyingChanges}
before={
applyingChanges && (
<Spinner variant="Success" fill="Solid" size="100" />
)
}
onClick={handleApplyChanges}
>
<Text size="B300">Apply Changes</Text>
</Button>
</Box>
</Box>
</Menu>
)}
</Box>
</Scroll>
</Box>
</Box>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
);
}

Some files were not shown because too many files have changed in this diff Show more