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

URL navigation in interface and other improvements (#1633)

Browse source 
* 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 2024-05-31 19:49:46 +05:30 • committed by GitHub
parent 2b7d825694
commit 4c76a7fd18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
290 changed files with 17447 additions and 3224 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/components/nav/NavCategory.tsx Normal file
View file

@ -0,0 +1,11 @@
import React, { ReactNode } from 'react';
import { as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
type NavCategoryProps = {
children: ReactNode;
};
export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
<div className={classNames(css.NavCategory, className)} {...props} ref={ref} />
));

19
src/app/components/nav/NavCategoryHeader.tsx Normal file
View file

@ -0,0 +1,19 @@
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import { Header, as } from 'folds';
import * as css from './styles.css';
export type NavCategoryHeaderProps = {
children: ReactNode;
};
export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
({ className, ...props }, ref) => (
<Header
className={classNames(css.NavCategoryHeader, className)}
variant="Background"
size="300"
{...props}
ref={ref}
/>
)
);

40
src/app/components/nav/NavEmptyLayout.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Box, config } from 'folds';
import React, { ReactNode } from 'react';
export function NavEmptyCenter({ children }: { children: ReactNode }) {
return (
<Box
style={{
padding: config.space.S500,
}}
grow="Yes"
direction="Column"
justifyContent="Center"
>
{children}
</Box>
);
}
type NavEmptyLayoutProps = {
icon?: ReactNode;
title?: ReactNode;
content?: ReactNode;
options?: ReactNode;
};
export function NavEmptyLayout({ icon, title, content, options }: NavEmptyLayoutProps) {
return (
<Box direction="Column" gap="400">
<Box direction="Column" alignItems="Center" gap="200">
{icon}
</Box>
<Box direction="Column" gap="100" alignItems="Center">
{title}
{content}
</Box>
<Box direction="Column" gap="200">
{options}
</Box>
</Box>
);
}

33
src/app/components/nav/NavItem.tsx Normal file
View file

@ -0,0 +1,33 @@
import classNames from 'classnames';
import React, { ComponentProps, forwardRef } from 'react';
import { Link } from 'react-router-dom';
import { as } from 'folds';
import * as css from './styles.css';
export const NavItem = as<
'div',
{
highlight?: boolean;
} & css.RoomSelectorVariants
>(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
<AsNavItem
className={classNames(css.NavItem({ variant, radii }), className)}
data-highlight={highlight}
{...props}
ref={ref}
>
{children}
</AsNavItem>
));
export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
({ className, ...props }, ref) => (
<Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
)
);
export const NavButton = as<'button'>(
({ as: AsNavButton = 'button', className, ...props }, ref) => (
<AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
)
);

10
src/app/components/nav/NavItemContent.tsx Normal file
View file

@ -0,0 +1,10 @@
import React, { ComponentProps } from 'react';
import { Text, as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
({ className, ...props }, ref) => (
<Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
)
);

17
src/app/components/nav/NavItemOptions.tsx Normal file
View file

@ -0,0 +1,17 @@
import React, { ComponentProps } from 'react';
import { Box, as } from 'folds';
import classNames from 'classnames';
import * as css from './styles.css';
export const NavItemOptions = as<'div', ComponentProps<typeof Box>>(
({ className, ...props }, ref) => (
<Box
className={classNames(css.NavItemOptions, className)}
alignItems="Center"
shrink="No"
gap="0"
{...props}
ref={ref}
/>
)
);

6
src/app/components/nav/index.ts Normal file
View file

@ -0,0 +1,6 @@
export * from './NavCategory';
export * from './NavCategoryHeader';
export * from './NavEmptyLayout';
export * from './NavItem';
export * from './NavItemContent';
export * from './NavItemOptions';

127
src/app/components/nav/styles.css.ts Normal file
View file

@ -0,0 +1,127 @@
import { ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
export const NavCategory = style([
DefaultReset,
{
position: 'relative',
},
]);
export const NavCategoryHeader = style({
gap: config.space.S100,
});
export const NavLink = style({
color: 'inherit',
minWidth: 0,
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
flexGrow: 1,
':hover': {
textDecoration: 'unset',
},
':focus': {
outline: 'none',
},
});
const Container = createVar();
const ContainerHover = createVar();
const ContainerActive = createVar();
const ContainerLine = createVar();
const OnContainer = createVar();
const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
vars: {
[Container]: color[variant].Container,
[ContainerHover]: color[variant].ContainerHover,
[ContainerActive]: color[variant].ContainerActive,
[ContainerLine]: color[variant].ContainerLine,
[OnContainer]: color[variant].OnContainer,
},
});
const NavItemBase = style({
width: '100%',
display: 'flex',
justifyContent: 'start',
cursor: 'pointer',
backgroundColor: Container,
color: OnContainer,
outline: 'none',
minHeight: toRem(38),
selectors: {
'&:hover, &:focus-visible': {
backgroundColor: ContainerHover,
},
'&[data-hover=true]': {
backgroundColor: ContainerHover,
},
[`&:has(.${NavLink}:active)`]: {
backgroundColor: ContainerActive,
},
'&[aria-selected=true]': {
backgroundColor: ContainerActive,
},
[`&:has(.${NavLink}:focus-visible)`]: {
outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
},
},
'@supports': {
[`not selector(:has(.${NavLink}:focus-visible))`]: {
':focus-within': {
outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
},
},
},
});
export const NavItem = recipe({
base: [DefaultReset, NavItemBase, Disabled],
variants: {
variant: {
Background: getVariant('Background'),
Surface: getVariant('Surface'),
SurfaceVariant: getVariant('SurfaceVariant'),
Primary: getVariant('Primary'),
Secondary: getVariant('Secondary'),
Success: getVariant('Success'),
Warning: getVariant('Warning'),
Critical: getVariant('Critical'),
},
radii: RadiiVariant,
},
defaultVariants: {
variant: 'Surface',
radii: '400',
},
});
export type RoomSelectorVariants = RecipeVariants<typeof NavItem>;
export const NavItemContent = style({
paddingLeft: config.space.S200,
paddingRight: config.space.S300,
height: 'inherit',
minWidth: 0,
flexGrow: 1,
display: 'flex',
alignItems: 'center',
selectors: {
'&:hover': {
textDecoration: 'unset',
},
[`.${NavItemBase}[data-highlight=true] &`]: {
fontWeight: config.fontWeight.W600,
},
},
});
export const NavItemOptions = style({
paddingRight: config.space.S200,
});