imnyang/cinny
Watch
1
0
Fork
You've already forked cinny
 0
Code Issues Pull requests 2 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
commit 4c76a7fd18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
53 changed files with 17436 additions and 3213 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/app/pages/App.tsx
View file

@ -1,84 +1,43 @@
import React from 'react';
import { Provider as JotaiProvider } from 'jotai';
import {
Route,
RouterProvider,
createBrowserRouter,
createHashRouter,
createRoutesFromElements,
redirect,
} from 'react-router-dom';
import { RouterProvider } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ClientConfigLoader } from '../components/ClientConfigLoader';
import { ClientConfig, ClientConfigProvider } from '../hooks/useClientConfig';
import { AuthLayout, Login, Register, ResetPassword, authLayoutLoader } from './auth';
import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH, ROOT_PATH } from './paths';
import { isAuthenticated } from '../../client/state/auth';
import Client from '../templates/client/Client';
import { getLoginPath } from './pathUtils';
import { ClientConfigProvider } from '../hooks/useClientConfig';
import { ConfigConfigError, ConfigConfigLoading } from './ConfigConfig';
import { FeatureCheck } from './FeatureCheck';
import { createRouter } from './Router';
import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
const createRouter = (clientConfig: ClientConfig) => {
const { hashRouter } = clientConfig;
const queryClient = new QueryClient();
const routes = createRoutesFromElements(
<Route>
<Route
path={ROOT_PATH}
loader={() => {
if (isAuthenticated()) return redirect('/home');
return redirect(getLoginPath());
}}
/>
<Route loader={authLayoutLoader} element={<AuthLayout />}>
<Route path={LOGIN_PATH} element={<Login />} />
<Route path={REGISTER_PATH} element={<Register />} />
<Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
</Route>
<Route
loader={() => {
if (!isAuthenticated()) return redirect(getLoginPath());
return null;
}}
>
<Route path="/home" element={<Client />} />
<Route path="/direct" element={<p>direct</p>} />
<Route path="/:spaceIdOrAlias" element={<p>:spaceIdOrAlias</p>} />
<Route path="/explore" element={<p>explore</p>} />
</Route>
<Route path="/*" element={<p>Page not found</p>} />
</Route>
);
if (hashRouter?.enabled) {
return createHashRouter(routes, { basename: hashRouter.basename });
}
return createBrowserRouter(routes, {
basename: import.meta.env.BASE_URL,
});
};
// TODO: app crash boundary
function App() {
const screenSize = useScreenSize();
return (
<FeatureCheck>
<ClientConfigLoader
fallback={() => <ConfigConfigLoading />}
error={(err, retry, ignore) => (
<ConfigConfigError error={err} retry={retry} ignore={ignore} />
)}
>
{(clientConfig) => (
<ClientConfigProvider value={clientConfig}>
<JotaiProvider>
<RouterProvider router={createRouter(clientConfig)} />
</JotaiProvider>
</ClientConfigProvider>
)}
</ClientConfigLoader>
</FeatureCheck>
<ScreenSizeProvider value={screenSize}>
<FeatureCheck>
<ClientConfigLoader
fallback={() => <ConfigConfigLoading />}
error={(err, retry, ignore) => (
<ConfigConfigError error={err} retry={retry} ignore={ignore} />
)}
>
{(clientConfig) => (
<ClientConfigProvider value={clientConfig}>
<QueryClientProvider client={queryClient}>
<JotaiProvider>
<RouterProvider router={createRouter(clientConfig, screenSize)} />
</JotaiProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</ClientConfigProvider>
)}
</ClientConfigLoader>
</FeatureCheck>
</ScreenSizeProvider>
);
}

44
src/app/pages/MobileFriendly.tsx Normal file
View file

@ -0,0 +1,44 @@
import { ReactNode } from 'react';
import { useMatch } from 'react-router-dom';
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from './paths';
type MobileFriendlyClientNavProps = {
children: ReactNode;
};
export function MobileFriendlyClientNav({ children }: MobileFriendlyClientNavProps) {
const screenSize = useScreenSizeContext();
const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
const exploreMatch = useMatch({ path: EXPLORE_PATH, caseSensitive: true, end: true });
const inboxMatch = useMatch({ path: INBOX_PATH, caseSensitive: true, end: true });
if (
screenSize === ScreenSize.Mobile &&
!(homeMatch || directMatch || spaceMatch || exploreMatch || inboxMatch)
) {
return null;
}
return children;
}
type MobileFriendlyPageNavProps = {
path: string;
children: ReactNode;
};
export function MobileFriendlyPageNav({ path, children }: MobileFriendlyPageNavProps) {
const screenSize = useScreenSizeContext();
const exactPath = useMatch({
path,
caseSensitive: true,
end: true,
});
if (screenSize === ScreenSize.Mobile && !exactPath) {
return null;
}
return children;
}

269
src/app/pages/Router.tsx Normal file
View file

@ -0,0 +1,269 @@
import React from 'react';
import {
Outlet,
Route,
createBrowserRouter,
createHashRouter,
createRoutesFromElements,
redirect,
} from 'react-router-dom';
import { ClientConfig } from '../hooks/useClientConfig';
import { AuthLayout, Login, Register, ResetPassword } from './auth';
import {
DIRECT_PATH,
EXPLORE_PATH,
HOME_PATH,
LOGIN_PATH,
INBOX_PATH,
REGISTER_PATH,
RESET_PASSWORD_PATH,
SPACE_PATH,
_CREATE_PATH,
_FEATURED_PATH,
_INVITES_PATH,
_JOIN_PATH,
_LOBBY_PATH,
_NOTIFICATIONS_PATH,
_ROOM_PATH,
_SEARCH_PATH,
_SERVER_PATH,
} from './paths';
import { isAuthenticated } from '../../client/state/auth';
import {
getAppPathFromHref,
getExploreFeaturedPath,
getHomePath,
getInboxNotificationsPath,
getLoginPath,
getOriginBaseUrl,
getSpaceLobbyPath,
} from './pathUtils';
import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
import { Direct, DirectRouteRoomProvider } from './client/direct';
import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
import { Notifications, Inbox, Invites } from './client/inbox';
import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
import { Room } from '../features/room';
import { Lobby } from '../features/lobby';
import { WelcomePage } from './client/WelcomePage';
import { SidebarNav } from './client/SidebarNav';
import { PageRoot } from '../components/page';
import { ScreenSize } from '../hooks/useScreenSize';
import { MobileFriendlyPageNav, MobileFriendlyClientNav } from './MobileFriendly';
import { ClientInitStorageAtom } from './client/ClientInitStorageAtom';
export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
const { hashRouter } = clientConfig;
const mobile = screenSize === ScreenSize.Mobile;
const routes = createRoutesFromElements(
<Route>
<Route
index
loader={() => {
if (isAuthenticated()) return redirect(getHomePath());
const afterLoginPath = getAppPathFromHref(getOriginBaseUrl(), window.location.href);
if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
return redirect(getLoginPath());
}}
/>
<Route
loader={() => {
if (isAuthenticated()) {
return redirect(getHomePath());
}
return null;
}}
element={<AuthLayout />}
>
<Route path={LOGIN_PATH} element={<Login />} />
<Route path={REGISTER_PATH} element={<Register />} />
<Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
</Route>
<Route
loader={() => {
if (!isAuthenticated()) {
const afterLoginPath = getAppPathFromHref(
getOriginBaseUrl(hashRouter),
window.location.href
);
if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
return redirect(getLoginPath());
}
return null;
}}
element={
<ClientRoot>
<ClientInitStorageAtom>
<ClientBindAtoms>
<ClientLayout
nav={
<MobileFriendlyClientNav>
<SidebarNav />
</MobileFriendlyClientNav>
}
>
<Outlet />
</ClientLayout>
</ClientBindAtoms>
</ClientInitStorageAtom>
</ClientRoot>
}
>
<Route
path={HOME_PATH}
element={
<PageRoot
nav={
<MobileFriendlyPageNav path={HOME_PATH}>
<Home />
</MobileFriendlyPageNav>
}
>
<Outlet />
</PageRoot>
}
>
{mobile ? null : <Route index element={<WelcomePage />} />}
<Route path={_CREATE_PATH} element={<p>create</p>} />
<Route path={_JOIN_PATH} element={<p>join</p>} />
<Route path={_SEARCH_PATH} element={<HomeSearch />} />
<Route
path={_ROOM_PATH}
element={
<HomeRouteRoomProvider>
<Room />
</HomeRouteRoomProvider>
}
/>
</Route>
<Route
path={DIRECT_PATH}
element={
<PageRoot
nav={
<MobileFriendlyPageNav path={DIRECT_PATH}>
<Direct />
</MobileFriendlyPageNav>
}
>
<Outlet />
</PageRoot>
}
>
{mobile ? null : <Route index element={<WelcomePage />} />}
<Route path={_CREATE_PATH} element={<p>create</p>} />
<Route
path={_ROOM_PATH}
element={
<DirectRouteRoomProvider>
<Room />
</DirectRouteRoomProvider>
}
/>
</Route>
<Route
path={SPACE_PATH}
element={
<RouteSpaceProvider>
<PageRoot
nav={
<MobileFriendlyPageNav path={SPACE_PATH}>
<Space />
</MobileFriendlyPageNav>
}
>
<Outlet />
</PageRoot>
</RouteSpaceProvider>
}
>
{mobile ? null : (
<Route
index
loader={({ params }) => {
const { spaceIdOrAlias } = params;
if (spaceIdOrAlias) {
return redirect(getSpaceLobbyPath(spaceIdOrAlias));
}
return null;
}}
element={<WelcomePage />}
/>
)}
<Route path={_LOBBY_PATH} element={<Lobby />} />
<Route path={_SEARCH_PATH} element={<SpaceSearch />} />
<Route
path={_ROOM_PATH}
element={
<SpaceRouteRoomProvider>
<Room />
</SpaceRouteRoomProvider>
}
/>
</Route>
<Route
path={EXPLORE_PATH}
element={
<PageRoot
nav={
<MobileFriendlyPageNav path={EXPLORE_PATH}>
<Explore />
</MobileFriendlyPageNav>
}
>
<Outlet />
</PageRoot>
}
>
{mobile ? null : (
<Route
index
loader={() => redirect(getExploreFeaturedPath())}
element={<WelcomePage />}
/>
)}
<Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
<Route path={_SERVER_PATH} element={<PublicRooms />} />
</Route>
<Route
path={INBOX_PATH}
element={
<PageRoot
nav={
<MobileFriendlyPageNav path={INBOX_PATH}>
<Inbox />
</MobileFriendlyPageNav>
}
>
<Outlet />
</PageRoot>
}
>
{mobile ? null : (
<Route
index
loader={() => redirect(getInboxNotificationsPath())}
element={<WelcomePage />}
/>
)}
<Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
<Route path={_INVITES_PATH} element={<Invites />} />
</Route>
</Route>
<Route path="/*" element={<p>Page not found</p>} />
</Route>
);
if (hashRouter?.enabled) {
return createHashRouter(routes, { basename: hashRouter.basename });
}
return createBrowserRouter(routes, {
basename: import.meta.env.BASE_URL,
});
};

12
src/app/pages/afterLoginRedirectPath.ts Normal file
View file

@ -0,0 +1,12 @@
const AFTER_LOGIN_REDIRECT_PATH_KEY = 'after_login_redirect_url';
export const setAfterLoginRedirectPath = (url: string): void => {
localStorage.setItem(AFTER_LOGIN_REDIRECT_PATH_KEY, url);
};
export const getAfterLoginRedirectPath = (): string | undefined => {
const url = localStorage.getItem(AFTER_LOGIN_REDIRECT_PATH_KEY);
return url ?? undefined;
};
export const deleteAfterLoginRedirectPath = (): void => {
localStorage.removeItem(AFTER_LOGIN_REDIRECT_PATH_KEY);
};

17
src/app/pages/auth/AuthLayout.tsx
View file

@ -1,11 +1,9 @@
import React, { useCallback, useEffect } from 'react';
import { Box, Header, Scroll, Spinner, Text, color } from 'folds';
import {
LoaderFunction,
Outlet,
generatePath,
matchPath,
redirect,
useLocation,
useNavigate,
useParams,
@ -15,14 +13,13 @@ import classNames from 'classnames';
import { AuthFooter } from './AuthFooter';
import * as css from './styles.css';
import * as PatternsCss from '../../styles/Patterns.css';
import { isAuthenticated } from '../../../client/state/auth';
import {
clientAllowedServer,
clientDefaultServer,
useClientConfig,
} from '../../hooks/useClientConfig';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { LOGIN_PATH, REGISTER_PATH } from '../paths';
import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
import { ServerPicker } from './ServerPicker';
import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
@ -33,18 +30,13 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
import { AuthServerProvider } from '../../hooks/useAuthServer';
export const authLayoutLoader: LoaderFunction = () => {
if (isAuthenticated()) {
return redirect('/');
}
return null;
};
const currentAuthPath = (pathname: string): string => {
if (matchPath(LOGIN_PATH, pathname)) {
return LOGIN_PATH;
}
if (matchPath(RESET_PASSWORD_PATH, pathname)) {
return RESET_PASSWORD_PATH;
}
if (matchPath(REGISTER_PATH, pathname)) {
return REGISTER_PATH;
}
@ -175,6 +167,7 @@ export function AuthLayout() {
<AuthServerProvider value={discoveryState.data.serverName}>
<AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
<SpecVersionsLoader
baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
fallback={() => (
<AuthLayoutLoading
message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}

6
src/app/pages/auth/SSOLogin.tsx
View file

@ -15,6 +15,10 @@ export function SSOLogin({ providers, redirectUrl, asIcons }: SSOLoginProps) {
const getSSOIdUrl = (ssoId: string): string => mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId);
const anyAsBtn = providers.find(
(provider) => !provider.icon || !mx.mxcUrlToHttp(provider.icon, 96, 96, 'crop', false)
);
return (
<Box justifyContent="Center" gap="600" wrap="Wrap">
{providers.map((provider) => {
@ -23,7 +27,7 @@ export function SSOLogin({ providers, redirectUrl, asIcons }: SSOLoginProps) {
const buttonTitle = `Continue with ${name}`;
if (iconUrl && asIcons) {
if (!anyAsBtn && iconUrl && asIcons) {
return (
<Avatar
style={{ cursor: 'pointer' }}

39
src/app/pages/auth/ServerPicker.tsx
View file

@ -15,6 +15,7 @@ import {
Menu,
MenuItem,
PopOut,
RectCords,
Text,
config,
} from 'folds';
@ -33,7 +34,7 @@ export function ServerPicker({
allowCustomServer?: boolean;
onServerChange: (server: string) => void;
}) {
const [serverMenu, setServerMenu] = useState(false);
const [serverMenuAnchor, setServerMenuAnchor] = useState<RectCords>();
const serverInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
@ -53,7 +54,7 @@ export function ServerPicker({
const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
if (evt.key === 'ArrowDown') {
evt.preventDefault();
setServerMenu(true);
setServerMenuAnchor(undefined);
}
if (evt.key === 'Enter') {
evt.preventDefault();
@ -67,7 +68,12 @@ export function ServerPicker({
if (selectedServer) {
onServerChange(selectedServer);
}
setServerMenu(false);
setServerMenuAnchor(undefined);
};
const handleOpenServerMenu: MouseEventHandler<HTMLElement> = (evt) => {
const target = evt.currentTarget.parentElement ?? evt.currentTarget;
setServerMenuAnchor(target.getBoundingClientRect());
};
return (
@ -81,11 +87,11 @@ export function ServerPicker({
onKeyDown={handleKeyDown}
size="500"
readOnly={!allowCustomServer}
onClick={allowCustomServer ? undefined : () => setServerMenu(true)}
onClick={allowCustomServer ? undefined : handleOpenServerMenu}
after={
serverList.length === 0 || (serverList.length === 1 && !allowCustomServer) ? undefined : (
<PopOut
open={serverMenu}
anchor={serverMenuAnchor}
position="Bottom"
align="End"
offset={4}
@ -93,7 +99,7 @@ export function ServerPicker({
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setServerMenu(false),
onDeactivate: () => setServerMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -120,18 +126,15 @@ export function ServerPicker({
</FocusTrap>
}
>
{(anchorRef) => (
<IconButton
ref={anchorRef}
onClick={() => setServerMenu(true)}
variant={allowCustomServer ? 'Background' : 'Surface'}
size="300"
aria-pressed={serverMenu}
radii="300"
>
<Icon src={Icons.ChevronBottom} />
</IconButton>
)}
<IconButton
onClick={handleOpenServerMenu}
variant={allowCustomServer ? 'Background' : 'Surface'}
size="300"
aria-pressed={!!serverMenuAnchor}
radii="300"
>
<Icon src={Icons.ChevronBottom} />
</IconButton>
</PopOut>
)
}

18
src/app/pages/auth/login/Login.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { Box, Text, color } from 'folds';
import { Link, useSearchParams } from 'react-router-dom';
import { useAuthFlows } from '../../../hooks/useAuthFlows';
@ -23,18 +23,22 @@ const getLoginTokenSearchParam = () => {
return loginToken ?? undefined;
};
const getLoginSearchParams = (searchParams: URLSearchParams): LoginPathSearchParams => ({
username: searchParams.get('username') ?? undefined,
email: searchParams.get('email') ?? undefined,
loginToken: searchParams.get('loginToken') ?? undefined,
});
const useLoginSearchParams = (searchParams: URLSearchParams): LoginPathSearchParams =>
useMemo(
() => ({
username: searchParams.get('username') ?? undefined,
email: searchParams.get('email') ?? undefined,
loginToken: searchParams.get('loginToken') ?? undefined,
}),
[searchParams]
);
export function Login() {
const server = useAuthServer();
const { hashRouter } = useClientConfig();
const { loginFlows } = useAuthFlows();
const [searchParams] = useSearchParams();
const loginSearchParams = getLoginSearchParams(searchParams);
const loginSearchParams = useLoginSearchParams(searchParams);
const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
const loginTokenForHashRouter = getLoginTokenSearchParam();
const absoluteLoginPath = usePathWithOrigin(getLoginPath(server));

38
src/app/pages/auth/login/PasswordLoginForm.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEventHandler, useCallback, useState } from 'react';
import React, { FormEventHandler, MouseEventHandler, useCallback, useState } from 'react';
import {
Box,
Button,
@ -12,6 +12,7 @@ import {
OverlayBackdrop,
OverlayCenter,
PopOut,
RectCords,
Spinner,
Text,
config,
@ -37,17 +38,21 @@ import { FieldError } from '../FiledError';
import { getResetPasswordPath } from '../../pathUtils';
function UsernameHint({ server }: { server: string }) {
const [open, setOpen] = useState(false);
const [anchor, setAnchor] = useState<RectCords>();
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
setAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={open}
anchor={anchor}
position="Top"
align="End"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -84,20 +89,17 @@ function UsernameHint({ server }: { server: string }) {
</FocusTrap>
}
>
{(targetRef) => (
<IconButton
tabIndex={-1}
onClick={() => setOpen(true)}
ref={targetRef}
type="button"
variant="Background"
size="300"
radii="300"
aria-pressed={open}
>
<Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
</IconButton>
)}
<IconButton
tabIndex={-1}
onClick={handleOpenMenu}
type="button"
variant="Background"
size="300"
radii="300"
aria-pressed={!!anchor}
>
<Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
</IconButton>
</PopOut>
);
}

11
src/app/pages/auth/login/loginUtil.ts
View file

@ -5,8 +5,12 @@ import { useNavigate } from 'react-router-dom';
import { ClientConfig, clientAllowedServer } from '../../../hooks/useClientConfig';
import { autoDiscovery, specVersions } from '../../../cs-api';
import { updateLocalStore } from '../../../../client/action/auth';
import { ROOT_PATH } from '../../paths';
import { ErrorCode } from '../../../cs-errorcode';
import {
deleteAfterLoginRedirectPath,
getAfterLoginRedirectPath,
} from '../../afterLoginRedirectPath';
import { getHomePath } from '../../pathUtils';
export enum GetBaseUrlError {
NotAllow = 'NotAllow',
@ -111,8 +115,9 @@ export const useLoginComplete = (data?: CustomLoginResponse) => {
if (data) {
const { response: loginRes, baseUrl: loginBaseUrl } = data;
updateLocalStore(loginRes.access_token, loginRes.device_id, loginRes.user_id, loginBaseUrl);
// TODO: add after login redirect url
navigate(ROOT_PATH, { replace: true });
const afterLoginRedirectUrl = getAfterLoginRedirectPath();
deleteAfterLoginRedirectPath();
navigate(afterLoginRedirectUrl ?? getHomePath(), { replace: true });
}
}, [data, navigate]);
};

18
src/app/pages/auth/register/Register.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { Box, Text, color } from 'folds';
import { Link, useSearchParams } from 'react-router-dom';
import { useAuthServer } from '../../../hooks/useAuthServer';
@ -12,17 +12,21 @@ import { getLoginPath } from '../../pathUtils';
import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
import { RegisterPathSearchParams } from '../../paths';
const getRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams => ({
username: searchParams.get('username') ?? undefined,
email: searchParams.get('email') ?? undefined,
token: searchParams.get('token') ?? undefined,
});
const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
useMemo(
() => ({
username: searchParams.get('username') ?? undefined,
email: searchParams.get('email') ?? undefined,
token: searchParams.get('token') ?? undefined,
}),
[searchParams]
);
export function Register() {
const server = useAuthServer();
const { loginFlows, registerFlows } = useAuthFlows();
const [searchParams] = useSearchParams();
const registerSearchParams = getRegisterSearchParams(searchParams);
const registerSearchParams = useRegisterSearchParams(searchParams);
const { sso } = useParsedLoginFlows(loginFlows.flows);
// redirect to /login because only that path handle m.login.token

23
src/app/pages/auth/register/registerUtil.ts
View file

@ -9,8 +9,14 @@ import {
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { updateLocalStore } from '../../../../client/action/auth';
import { ROOT_PATH } from '../../paths';
import { LoginPathSearchParams } from '../../paths';
import { ErrorCode } from '../../../cs-errorcode';
import {
deleteAfterLoginRedirectPath,
getAfterLoginRedirectPath,
} from '../../afterLoginRedirectPath';
import { getHomePath, getLoginPath, withSearchParam } from '../../pathUtils';
import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
export enum RegisterError {
UserTaken = 'UserTaken',
@ -114,11 +120,18 @@ export const useRegisterComplete = (data?: CustomRegisterResponse) => {
if (accessToken && deviceId) {
updateLocalStore(accessToken, deviceId, userId, baseUrl);
// TODO: add after register redirect url
navigate(ROOT_PATH, { replace: true });
const afterLoginRedirectPath = getAfterLoginRedirectPath();
deleteAfterLoginRedirectPath();
navigate(afterLoginRedirectPath ?? getHomePath(), { replace: true });
} else {
// TODO: navigate to login with userId
navigate(ROOT_PATH, { replace: true });
const username = getMxIdLocalPart(userId);
const userServer = getMxIdServer(userId);
navigate(
withSearchParam<LoginPathSearchParams>(getLoginPath(userServer), {
username,
}),
{ replace: true }
);
}
}
}, [data, navigate]);

21
src/app/pages/auth/reset-password/ResetPassword.tsx
View file

@ -1,24 +1,25 @@
import { Box, Text } from 'folds';
import React from 'react';
import React, { useMemo } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { getLoginPath } from '../../pathUtils';
import { useAuthServer } from '../../../hooks/useAuthServer';
import { PasswordResetForm } from './PasswordResetForm';
import { ResetPasswordPathSearchParams } from '../../paths';
export type ResetPasswordSearchParams = {
email?: string;
};
const getResetPasswordSearchParams = (
const useResetPasswordSearchParams = (
searchParams: URLSearchParams
): ResetPasswordSearchParams => ({
email: searchParams.get('email') ?? undefined,
});
): ResetPasswordPathSearchParams =>
useMemo(
() => ({
email: searchParams.get('email') ?? undefined,
}),
[searchParams]
);
export function ResetPassword() {
const server = useAuthServer();
const [searchParams] = useSearchParams();
const resetPasswordSearchParams = getResetPasswordSearchParams(searchParams);
const resetPasswordSearchParams = useResetPasswordSearchParams(searchParams);
return (
<Box direction="Column" gap="500">

14
src/app/pages/client/ClientBindAtoms.ts Normal file
View file

@ -0,0 +1,14 @@
import { ReactNode } from 'react';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useBindAtoms } from '../../state/hooks/useBindAtoms';
type ClientBindAtomsProps = {
children: ReactNode;
};
export function ClientBindAtoms({ children }: ClientBindAtomsProps) {
const mx = useMatrixClient();
useBindAtoms(mx);
return children;
}

38
src/app/pages/client/ClientInitStorageAtom.tsx Normal file
View file

@ -0,0 +1,38 @@
import React, { ReactNode, useMemo } from 'react';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { makeClosedNavCategoriesAtom } from '../../state/closedNavCategories';
import { ClosedNavCategoriesProvider } from '../../state/hooks/closedNavCategories';
import { makeClosedLobbyCategoriesAtom } from '../../state/closedLobbyCategories';
import { ClosedLobbyCategoriesProvider } from '../../state/hooks/closedLobbyCategories';
import { makeNavToActivePathAtom } from '../../state/navToActivePath';
import { NavToActivePathProvider } from '../../state/hooks/navToActivePath';
import { makeOpenedSidebarFolderAtom } from '../../state/openedSidebarFolder';
import { OpenedSidebarFolderProvider } from '../../state/hooks/openedSidebarFolder';
type ClientInitStorageAtomProps = {
children: ReactNode;
};
export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps) {
const mx = useMatrixClient();
const userId = mx.getUserId()!;
const closedNavCategoriesAtom = useMemo(() => makeClosedNavCategoriesAtom(userId), [userId]);
const closedLobbyCategoriesAtom = useMemo(() => makeClosedLobbyCategoriesAtom(userId), [userId]);
const navToActivePathAtom = useMemo(() => makeNavToActivePathAtom(userId), [userId]);
const openedSidebarFolderAtom = useMemo(() => makeOpenedSidebarFolderAtom(userId), [userId]);
return (
<ClosedNavCategoriesProvider value={closedNavCategoriesAtom}>
<ClosedLobbyCategoriesProvider value={closedLobbyCategoriesAtom}>
<NavToActivePathProvider value={navToActivePathAtom}>
<OpenedSidebarFolderProvider value={openedSidebarFolderAtom}>
{children}
</OpenedSidebarFolderProvider>
</NavToActivePathProvider>
</ClosedLobbyCategoriesProvider>
</ClosedNavCategoriesProvider>
);
}

15
src/app/pages/client/ClientLayout.tsx Normal file
View file

@ -0,0 +1,15 @@
import React, { ReactNode } from 'react';
import { Box } from 'folds';
type ClientLayoutProps = {
nav: ReactNode;
children: ReactNode;
};
export function ClientLayout({ nav, children }: ClientLayoutProps) {
return (
<Box style={{ height: '100%' }}>
<Box shrink="No">{nav}</Box>
<Box grow="Yes">{children}</Box>
</Box>
);
}

87
src/app/pages/client/ClientRoot.tsx Normal file
View file

@ -0,0 +1,87 @@
import { Box, Spinner, Text } from 'folds';
import React, { ReactNode, useEffect, useState } from 'react';
import initMatrix from '../../../client/initMatrix';
import { initHotkeys } from '../../../client/event/hotkeys';
import { initRoomListListener } from '../../../client/event/roomList';
import { getSecret } from '../../../client/state/auth';
import { SplashScreen } from '../../components/splash-screen';
import { CapabilitiesAndMediaConfigLoader } from '../../components/CapabilitiesAndMediaConfigLoader';
import { CapabilitiesProvider } from '../../hooks/useCapabilities';
import { MediaConfigProvider } from '../../hooks/useMediaConfig';
import { MatrixClientProvider } from '../../hooks/useMatrixClient';
import { SpecVersions } from './SpecVersions';
import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs';
import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
function SystemEmojiFeature() {
const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
if (twitterEmoji) {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
} else {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
}
return null;
}
function ClientRootLoading() {
return (
<SplashScreen>
<Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
<Spinner variant="Secondary" size="600" />
<Text>Heating up</Text>
</Box>
</SplashScreen>
);
}
type ClientRootProps = {
children: ReactNode;
};
export function ClientRoot({ children }: ClientRootProps) {
const [loading, setLoading] = useState(true);
const { baseUrl } = getSecret();
useEffect(() => {
const handleStart = () => {
initHotkeys();
initRoomListListener(initMatrix.roomList);
setLoading(false);
};
initMatrix.once('init_loading_finished', handleStart);
if (!initMatrix.matrixClient) initMatrix.init();
return () => {
initMatrix.removeListener('init_loading_finished', handleStart);
};
}, []);
return (
<SpecVersions baseUrl={baseUrl!}>
{loading ? (
<ClientRootLoading />
) : (
<MatrixClientProvider value={initMatrix.matrixClient!}>
<CapabilitiesAndMediaConfigLoader>
{(capabilities, mediaConfig) => (
<CapabilitiesProvider value={capabilities ?? {}}>
<MediaConfigProvider value={mediaConfig ?? {}}>
{children}
{/* TODO: remove these components after navigation refactor */}
<Windows />
<Dialogs />
<ReusableContextMenu />
<SystemEmojiFeature />
</MediaConfigProvider>
</CapabilitiesProvider>
)}
</CapabilitiesAndMediaConfigLoader>
</MatrixClientProvider>
)}
</SpecVersions>
);
}

76
src/app/pages/client/SidebarNav.tsx Normal file
View file

@ -0,0 +1,76 @@
import React, { useRef } from 'react';
import { Icon, Icons, Scroll } from 'folds';
import {
Sidebar,
SidebarContent,
SidebarStackSeparator,
SidebarStack,
SidebarAvatar,
SidebarItemTooltip,
SidebarItem,
} from '../../components/sidebar';
import { DirectTab, HomeTab, SpaceTabs, InboxTab, ExploreTab, UserTab } from './sidebar';
import { openCreateRoom, openSearch } from '../../../client/action/navigation';
export function SidebarNav() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<Sidebar>
<SidebarContent
scrollable={
<Scroll ref={scrollRef} variant="Background" size="0">
<SidebarStack>
<HomeTab />
<DirectTab />
</SidebarStack>
<SpaceTabs scrollRef={scrollRef} />
<SidebarStackSeparator />
<SidebarStack>
<ExploreTab />
<SidebarItem>
<SidebarItemTooltip tooltip="Create Space">
{(triggerRef) => (
<SidebarAvatar
as="button"
ref={triggerRef}
outlined
onClick={() => openCreateRoom(true)}
>
<Icon src={Icons.Plus} />
</SidebarAvatar>
)}
</SidebarItemTooltip>
</SidebarItem>
</SidebarStack>
</Scroll>
}
sticky={
<>
<SidebarStackSeparator />
<SidebarStack>
<SidebarItem>
<SidebarItemTooltip tooltip="Search">
{(triggerRef) => (
<SidebarAvatar
as="button"
ref={triggerRef}
outlined
onClick={() => openSearch()}
>
<Icon src={Icons.Search} />
</SidebarAvatar>
)}
</SidebarItemTooltip>
</SidebarItem>
<InboxTab />
<UserTab />
</SidebarStack>
</>
}
/>
</Sidebar>
);
}

46
src/app/pages/client/SpecVersions.tsx Normal file
View file

@ -0,0 +1,46 @@
import React, { ReactNode } from 'react';
import { Box, Dialog, config, Text, Button, Spinner } from 'folds';
import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
import { SpecVersionsProvider } from '../../hooks/useSpecVersions';
import { SplashScreen } from '../../components/splash-screen';
export function SpecVersions({ baseUrl, children }: { baseUrl: string; children: ReactNode }) {
return (
<SpecVersionsLoader
baseUrl={baseUrl}
fallback={() => (
<SplashScreen>
<Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
<Spinner variant="Secondary" size="600" />
<Text>Connecting to server</Text>
</Box>
</SplashScreen>
)}
error={(err, retry, ignore) => (
<SplashScreen>
<Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
<Dialog>
<Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
<Text>
Failed to connect to homeserver. Either homeserver is down or your internet.
</Text>
<Button variant="Critical" onClick={retry}>
<Text as="span" size="B400">
Retry
</Text>
</Button>
<Button variant="Critical" onClick={ignore} fill="Soft">
<Text as="span" size="B400">
Continue
</Text>
</Button>
</Box>
</Dialog>
</Box>
</SplashScreen>
)}
>
{(versions) => <SpecVersionsProvider value={versions}>{children}</SpecVersionsProvider>}
</SpecVersionsLoader>
);
}

64
src/app/pages/client/WelcomePage.tsx Normal file
View file

@ -0,0 +1,64 @@
import React from 'react';
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
import { Page, PageHero, PageHeroSection } from '../../components/page';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
export function WelcomePage() {
return (
<Page>
<Box
grow="Yes"
style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
alignItems="Center"
justifyContent="Center"
>
<PageHeroSection>
<PageHero
icon={<img width="70" height="70" src={CinnySVG} alt="Cinny Logo" />}
title="Welcome to Cinny"
subTitle={
<span>
Yet anothor matrix client.{' '}
<a
href="https://github.com/cinnyapp/cinny/releases"
target="_blank"
rel="noreferrer noopener"
>
v3.2.0
</a>
</span>
}
>
<Box justifyContent="Center">
<Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300">
<Button
as="a"
href="https://github.com/cinnyapp/cinny"
target="_blank"
rel="noreferrer noopener"
before={<Icon size="200" src={Icons.Code} />}
>
<Text as="span" size="B400" truncate>
Source Code
</Text>
</Button>
<Button
as="a"
href="https://cinny.in/#sponsor"
target="_blank"
rel="noreferrer noopener"
fill="Soft"
before={<Icon size="200" src={Icons.Heart} />}
>
<Text as="span" size="B400" truncate>
Support
</Text>
</Button>
</Box>
</Box>
</PageHero>
</PageHeroSection>
</Box>
</Page>
);
}

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