URL navigation in interface and other improvements (#1633)
* load room on url change * add direct room list * render space room list * fix css syntax error * update scroll virtualizer * render subspaces room list * improve sidebar notification badge perf * add nav category components * add space recursive direct component * use nav category component in home, direct and space room list * add empty home and direct list layout * fix unread room menu ref * add more navigation items in room, direct and space tab * add more navigation * fix unread room menu to links * fix space lobby and search link * add explore navigation section * add notifications navigation menu * redirect to initial path after login * include unsupported room in rooms * move router hooks in hooks/router folder * add featured explore - WIP * load featured room with room summary * fix room card topic line clamp * add react query * load room summary using react query * add join button in room card * add content component * use content component in featured community content * fix content width * add responsive room card grid * fix async callback error status * add room card error button * fix client drawer shrink * add room topic viewer * open room card topic in viewer * fix room topic close btn * add get orphan parent util * add room card error dialog * add view featured room or space btn * refactor orphanParent to orphanParents * WIP - explore server * show space hint in room card * add room type filters * add per page item limit popout * reset scroll on public rooms load * refactor explore ui * refactor public rooms component * reset search on server change * fix typo * add empty featured section info * display user server on top * make server room card view btn clickable * add user server as default redirect for explore path * make home empty btn clickable * add thirdparty instance filter in server explore * remove since param on instance change * add server button in explore menu * rename notifications path to inbox * update react-virtual * Add notification messages inbox - WIP * add scroll top container component * add useInterval hook * add visibility change callback prop to scroll top container component * auto refresh notifications every 10 seconds * make message related component reusable * refactor matrix event renderer hoook * render notification message content * refactor matrix event renderer hook * update sequence card styles * move room navigate hook in global hooks * add open message button in notifications * add mark room as read button in notification group * show error in notification messages * add more featured spaces * render reply in notification messages * make notification message reply clickable * add outline prop for attachments * make old settings dialog viewable * add open featured communities as default config option * add invite count notification badge in sidebar and inbox menu * add element size observer hook * improve element size observer hook props * improve screen size hook * fix room avatar util function * allow Text props in Time component * fix dm room util function * add invitations * add no invites and notification cards * fix inbox tab unread badge visible without invite count * update folds and change inbox icon * memo search param construction * add message search in home * fix default message search order * fix display edited message new content * highlight search text in search messages * fix message search loading * disable log in production * add use space context * add useRoom context * fix space room list * fix inbox tab active state * add hook to get space child room recursive * add search for space * add virtual tile component * virtualize home and directs room list * update nav category component * use virtual tile component in more places * fix message highlight when click on reply twice * virtualize space room list * fix space room list lag issue * update folds * add room nav item component in space room list * use room nav item in home and direct room list * make space categories closable and save it in local storage * show unread room when category is collapsed * make home and direct room list category closable * rename room nav item show avatar prop * fix explore server category text alignment * rename closedRoomCategories to closedNavCategories * add nav category handler hook * save and restore last navigation path on space select * filter space rooms category by activity when it is closed * save and restore home and direct nav path state * save and restore inbox active path on open * save and restore explore tab active path * remove notification badge unread menu * add join room or space before navigate screen * move room component to features folder and add new room header * update folds * add room header menu * fix home room list activity sorting * do not hide selected room item on category closed in home and direct tab * replace old select room/tab call with navigate hook * improve state event hooks * show room card summary for joined rooms * prevent room from opening in wrong tab * only show message sender id on hover in modern layout * revert state event hooks changes * add key prop to room provider components * add welcome page * prevent excessive redirects * fix sidebar style with no spaces * move room settings in popup window * remove invite option from room settings * fix open room list search * add leave room prompt * standardize room and user avatar * fix avatar text size * add new reply layout * rename space hierarchy hook * add room topic hook * add room name hook * add room avatar hook and add direct room avatar util * space lobby - WIP * hide invalid space child event from space hierarchy in lobby * move lobby to features * fix element size observer hook width and height * add lobby header and hero section * add hierarchy room item error and loading state * add first and last child prop in sequence card * redirect to lobby from index path * memo and retry hierarchy room summary error * fix hierarchy room item styles * rename lobby hierarchy item card to room item card * show direct room avatar in space lobby * add hierarchy space item * add space item unknown room join button * fix space hierarchy hook refresh after new space join * change user avatar color and fallback render to user icon * change room avatar fallback to room icon * rename room/user avatar renderInitial prop to renderFallback * add room join and view button in space lobby * make power level api more reusable * fix space hierarchy not updating on child update * add menu to suggest or remove space children * show reply arrow in place of reply bend in message * fix typeerror in search because of wrong js-sdk t.ds * do not refetch hierarchy room summary on window focus * make room/user avatar un-draggable * change welcome page support button copy * drag-and-drop ordering of lobby spaces/rooms - WIP * add ASCIILexicalTable algorithms * fix wrong power level check in lobby items options * fix lobby can drop checks * fix join button error crash * fix reply spacing * fix m direct updated with other account data * add option to open room/space settings from lobby * add option in lobby to add new or existing room/spaces * fix room nav item selected styles * add space children reorder mechanism * fix space child reorder bug * fix hierarchy item sort function * Apply reorder of lobby into room list * add and improve space lobby menu items * add existing spaces menu in lobby * change restricted room allow params when dragging outside space * move featured servers config from homeserver list * removed unused features from space settings * add canonical alias as name fallback in lobby item * fix unreliable unread count update bug * fix after login redirect * fix room card topic hover style * Add dnd and folders in sidebar spaces * fix orphan space not visible in sidebar * fix sso login has mix of icon and button * fix space children not visible in home upon leaving space * recalculate notification on updating any space child * fix user color saturation/lightness * add user color to user avatar * add background colors to room avatar * show 2 length initial in sidebar space avatar * improve link color * add nav button component * open legacy create room and create direct * improve page route structure * handle hash router in path utils * mobile friendly router and navigation * make room header member drawer icon mobile friendly * setup index redirect for inbox and explore server route * add leave space prompt * improve member drawer filter menu * add space context menu * add context menu in home * add leave button in lobby items * render user tab avatar on sidebar * force overwrite netlify - test * netlify test * fix reset-password path without server redirected to login * add message link copy button in message menu * reset unread on sync prepared * fix stuck typing notifications * show typing indication in room nav item * refactor closedNavCategories atom to use userId in store key * refactor closedLobbyCategoriesAtom to include userId in store key * refactor navToActivePathAtom to use userId in storage key * remove unused file * refactor openedSidebarFolderAtom to include userId in storage key * add context menu for sidebar space tab * fix eslint not working * add option to pin/unpin child spaces * add context menu for directs tab * add context menu for direct and home tab * show lock icon for non-public space in header * increase matrix max listener count * wrap lobby add space room in callback hook
This commit is contained in:
Ajay Bura
GitHub
@@ -1,6 +1,7 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
||||
import { color, config, DefaultReset, toRem } from 'folds';
|
||||
import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
|
||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||
|
||||
export const Sidebar = style([
|
||||
DefaultReset,
|
||||
@@ -28,13 +29,49 @@ export const SidebarStack = style([
|
||||
},
|
||||
]);
|
||||
|
||||
const DropLineDist = createVar();
|
||||
export const DropTarget = style({
|
||||
vars: {
|
||||
[DropLineDist]: toRem(-8),
|
||||
},
|
||||
|
||||
selectors: {
|
||||
'&[data-inside-folder=true]': {
|
||||
vars: {
|
||||
[DropLineDist]: toRem(-6),
|
||||
},
|
||||
},
|
||||
'&[data-drop-child=true]': {
|
||||
outline: `${config.borderWidth.B700} solid ${color.Success.Main}`,
|
||||
borderRadius: config.radii.R400,
|
||||
},
|
||||
'&[data-drop-above=true]::after, &[data-drop-below=true]::after': {
|
||||
content: '',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
left: toRem(0),
|
||||
width: '100%',
|
||||
height: config.borderWidth.B700,
|
||||
backgroundColor: color.Success.Main,
|
||||
},
|
||||
'&[data-drop-above=true]::after': {
|
||||
top: DropLineDist,
|
||||
},
|
||||
'&[data-drop-below=true]::after': {
|
||||
bottom: DropLineDist,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const PUSH_X = 2;
|
||||
export const SidebarAvatarBox = recipe({
|
||||
export const SidebarItem = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
minWidth: toRem(42),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
|
||||
|
||||
@@ -59,6 +96,8 @@ export const SidebarAvatarBox = recipe({
|
||||
},
|
||||
},
|
||||
},
|
||||
Disabled,
|
||||
DropTarget,
|
||||
],
|
||||
variants: {
|
||||
active: {
|
||||
@@ -76,26 +115,27 @@ export const SidebarAvatarBox = recipe({
|
||||
},
|
||||
},
|
||||
});
|
||||
export type SidebarItemVariants = RecipeVariants<typeof SidebarItem>;
|
||||
|
||||
export type SidebarAvatarBoxVariants = RecipeVariants<typeof SidebarAvatarBox>;
|
||||
|
||||
export const SidebarBadgeBox = recipe({
|
||||
export const SidebarItemBadge = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
lineHeight: 0,
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
hasCount: {
|
||||
true: {
|
||||
top: toRem(-6),
|
||||
right: toRem(-6),
|
||||
left: toRem(-6),
|
||||
},
|
||||
false: {
|
||||
top: toRem(-2),
|
||||
right: toRem(-2),
|
||||
left: toRem(-2),
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -103,9 +143,107 @@ export const SidebarBadgeBox = recipe({
|
||||
hasCount: false,
|
||||
},
|
||||
});
|
||||
export type SidebarItemBadgeVariants = RecipeVariants<typeof SidebarItemBadge>;
|
||||
|
||||
export type SidebarBadgeBoxVariants = RecipeVariants<typeof SidebarBadgeBox>;
|
||||
|
||||
export const SidebarBadgeOutline = style({
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B500} ${color.Background.Container}`,
|
||||
export const SidebarAvatar = recipe({
|
||||
base: [
|
||||
{
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
size: {
|
||||
'200': {
|
||||
width: toRem(16),
|
||||
height: toRem(16),
|
||||
fontSize: toRem(10),
|
||||
lineHeight: config.lineHeight.T200,
|
||||
letterSpacing: config.letterSpacing.T200,
|
||||
},
|
||||
'300': {
|
||||
width: toRem(34),
|
||||
height: toRem(34),
|
||||
},
|
||||
'400': {
|
||||
width: toRem(42),
|
||||
height: toRem(42),
|
||||
},
|
||||
},
|
||||
outlined: {
|
||||
true: {
|
||||
border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: '400',
|
||||
},
|
||||
});
|
||||
export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
|
||||
|
||||
export const SidebarFolder = recipe({
|
||||
base: [
|
||||
ContainerColor({ variant: 'Background' }),
|
||||
{
|
||||
padding: config.space.S100,
|
||||
width: toRem(42),
|
||||
minHeight: toRem(42),
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
outline: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
||||
position: 'relative',
|
||||
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
},
|
||||
FocusOutline,
|
||||
DropTarget,
|
||||
],
|
||||
variants: {
|
||||
state: {
|
||||
Close: {
|
||||
gap: toRem(2),
|
||||
borderRadius: config.radii.R400,
|
||||
},
|
||||
Open: {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: config.space.S200,
|
||||
borderRadius: config.radii.R500,
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
state: 'Close',
|
||||
},
|
||||
});
|
||||
export type SidebarFolderVariants = RecipeVariants<typeof SidebarFolder>;
|
||||
|
||||
export const SidebarFolderDropTarget = recipe({
|
||||
base: {
|
||||
width: '100%',
|
||||
height: toRem(8),
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
},
|
||||
variants: {
|
||||
position: {
|
||||
Top: {
|
||||
top: toRem(-4),
|
||||
},
|
||||
Bottom: {
|
||||
bottom: toRem(-4),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
export type SidebarFolderDropTargetVariants = RecipeVariants<typeof SidebarFolderDropTarget>;
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { as, Avatar, Box, color, config, Text, Tooltip, TooltipProvider } from 'folds';
|
||||
import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
|
||||
import * as css from './Sidebar.css';
|
||||
|
||||
const SidebarAvatarBox = as<'div', css.SidebarAvatarBoxVariants>(
|
||||
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
|
||||
<AsSidebarAvatarBox
|
||||
className={classNames(css.SidebarAvatarBox({ active }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const SidebarAvatar = forwardRef<
|
||||
HTMLDivElement,
|
||||
css.SidebarAvatarBoxVariants &
|
||||
css.SidebarBadgeBoxVariants & {
|
||||
outlined?: boolean;
|
||||
avatarChildren: ReactNode;
|
||||
tooltip: ReactNode | string;
|
||||
notificationBadge?: (badgeClassName: string) => ReactNode;
|
||||
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
onContextMenu?: MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
hasCount,
|
||||
outlined,
|
||||
avatarChildren,
|
||||
tooltip,
|
||||
notificationBadge,
|
||||
onClick,
|
||||
onContextMenu,
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<SidebarAvatarBox active={active} ref={ref}>
|
||||
<TooltipProvider
|
||||
delay={0}
|
||||
position="Right"
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text size="T300">{tooltip}</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(avRef) => (
|
||||
<Avatar
|
||||
ref={avRef}
|
||||
as="button"
|
||||
onClick={onClick}
|
||||
onContextMenu={onContextMenu}
|
||||
style={{
|
||||
border: outlined
|
||||
? `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`
|
||||
: undefined,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{avatarChildren}
|
||||
</Avatar>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
{notificationBadge && (
|
||||
<Box className={css.SidebarBadgeBox({ hasCount })}>
|
||||
{notificationBadge(css.SidebarBadgeOutline)}
|
||||
</Box>
|
||||
)}
|
||||
</SidebarAvatarBox>
|
||||
)
|
||||
);
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Box, Scroll } from 'folds';
|
||||
import { Box } from 'folds';
|
||||
|
||||
type SidebarContentProps = {
|
||||
scrollable: ReactNode;
|
||||
@@ -9,9 +9,7 @@ export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
|
||||
return (
|
||||
<>
|
||||
<Box direction="Column" grow="Yes">
|
||||
<Scroll variant="Background" size="0">
|
||||
{scrollable}
|
||||
</Scroll>
|
||||
{scrollable}
|
||||
</Box>
|
||||
<Box direction="Column" shrink="No">
|
||||
{sticky}
|
||||
|
||||
81
src/app/components/sidebar/SidebarItem.tsx
Normal file
81
src/app/components/sidebar/SidebarItem.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import classNames from 'classnames';
|
||||
import { as, Avatar, Text, Tooltip, TooltipProvider, toRem } from 'folds';
|
||||
import React, { ComponentProps, ReactNode, RefCallback } from 'react';
|
||||
import * as css from './Sidebar.css';
|
||||
|
||||
export const SidebarItem = as<'div', css.SidebarItemVariants>(
|
||||
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
|
||||
<AsSidebarAvatarBox
|
||||
className={classNames(css.SidebarItem({ active }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
|
||||
({ as: AsSidebarBadgeBox = 'div', className, hasCount, ...props }, ref) => (
|
||||
<AsSidebarBadgeBox
|
||||
className={classNames(css.SidebarItemBadge({ hasCount }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export function SidebarItemTooltip({
|
||||
tooltip,
|
||||
children,
|
||||
}: {
|
||||
tooltip?: ReactNode | string;
|
||||
children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
|
||||
}) {
|
||||
if (!tooltip) {
|
||||
return children(() => undefined);
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider
|
||||
delay={400}
|
||||
position="Right"
|
||||
tooltip={
|
||||
<Tooltip style={{ maxWidth: toRem(280) }}>
|
||||
<Text size="H5">{tooltip}</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProps<typeof Avatar>>(
|
||||
({ className, size, outlined, radii, ...props }, ref) => (
|
||||
<Avatar
|
||||
className={classNames(css.SidebarAvatar({ size, outlined }), className)}
|
||||
radii={radii}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
|
||||
({ as: AsSidebarFolder = 'div', className, state, ...props }, ref) => (
|
||||
<AsSidebarFolder
|
||||
className={classNames(css.SidebarFolder({ state }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVariants>(
|
||||
({ as: AsSidebarFolderDropTarget = 'div', className, position, ...props }, ref) => (
|
||||
<AsSidebarFolderDropTarget
|
||||
className={classNames(css.SidebarFolderDropTarget({ position }), className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@@ -1,5 +1,5 @@
|
||||
export * from './Sidebar';
|
||||
export * from './SidebarAvatar';
|
||||
export * from './SidebarItem';
|
||||
export * from './SidebarContent';
|
||||
export * from './SidebarStack';
|
||||
export * from './SidebarStackSeparator';
|
||||
|
||||
Reference in New Issue
Block a user