Skip to content

Commit 163575d

Browse files
nusheanushea
committed
sth
Signed-off-by: Shea <nu@she-a.eu>
1 parent ba96581 commit 163575d

14 files changed

Lines changed: 128 additions & 52 deletions

File tree

‎src/app/components/user-profile/UserHero.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,10 +238,7 @@ export function UserHero({
238238
WebkitBoxOrient: 'vertical',
239239
overflow: 'hidden',
240240
fontStyle: allowEditing && !status ? 'italic' : 'normal',
241-
<<<<<<< HEAD
242241
opacity: allowEditing && !status ? config.opacity.Placeholder : 1,
243-
=======
244-
>>>>>>> f873d334 (Redesign the user menu tab)
245242
}}
246243
>
247244
{status || (allowEditing && "What's on your mind?")}

‎src/app/pages/MobileFriendly.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,57 @@
11
import type { ReactNode } from 'react';
22
import { useMatch } from 'react-router-dom';
33
import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
4-
import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from './paths';
4+
import {
5+
DIRECT_PATH,
6+
EXPLORE_PATH,
7+
HOME_PATH,
8+
INBOX_PATH,
9+
NAVIGATE_PATH,
10+
PROFILE_PATH,
11+
SPACE_PATH,
12+
} from './paths';
513

614
type MobileFriendlyClientNavProps = {
715
children: ReactNode;
816
};
9-
export function MobileFriendlyClientNav({ children }: MobileFriendlyClientNavProps) {
17+
export function MobileFriendlySidebarNav({ children }: MobileFriendlyClientNavProps) {
1018
const screenSize = useScreenSizeContext();
1119
const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
1220
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
1321
const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
1422
const exploreMatch = useMatch({ path: EXPLORE_PATH, caseSensitive: true, end: true });
1523
const inboxMatch = useMatch({ path: INBOX_PATH, caseSensitive: true, end: true });
16-
24+
const profileMatch = useMatch({ path: PROFILE_PATH, caseSensitive: true, end: true });
25+
const navigateMatch = useMatch({ path: NAVIGATE_PATH, caseSensitive: true, end: true });
1726
if (
1827
screenSize === ScreenSize.Mobile &&
19-
!(homeMatch || directMatch || spaceMatch || exploreMatch || inboxMatch)
28+
(!(homeMatch || directMatch || spaceMatch || exploreMatch) ||
29+
profileMatch ||
30+
inboxMatch ||
31+
navigateMatch)
2032
) {
2133
return null;
2234
}
2335

2436
return children;
2537
}
2638

39+
export function MobileFriendlyBottomNav({ children }: MobileFriendlyClientNavProps) {
40+
const screenSize = useScreenSizeContext();
41+
const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
42+
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
43+
const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
44+
const settingsMatch = useMatch({ path: '/settings/', caseSensitive: true, end: true });
45+
if (
46+
screenSize !== ScreenSize.Mobile ||
47+
(!homeMatch && !directMatch && !spaceMatch) ||
48+
settingsMatch
49+
) {
50+
return null;
51+
}
52+
53+
return children;
54+
}
2755
type MobileFriendlyPageNavProps = {
2856
path: string;
2957
children: ReactNode;

‎src/app/pages/Router.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,11 @@ import { Notifications, Inbox, Invites } from './client/inbox';
7575
import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
7676
import { WelcomePage } from './client/WelcomePage';
7777
import { SidebarNav } from './client/SidebarNav';
78-
import { MobileFriendlyPageNav, MobileFriendlyClientNav } from './MobileFriendly';
78+
import {
79+
MobileFriendlyPageNav,
80+
MobileFriendlySidebarNav,
81+
MobileFriendlyBottomNav,
82+
} from './MobileFriendly';
7983
import { ClientInitStorageAtom } from './client/ClientInitStorageAtom';
8084
import { AuthRouteThemeManager, UnAuthRouteThemeManager } from './ThemeManager';
8185
import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
@@ -187,18 +191,18 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
187191
<CallEmbedProvider>
188192
<ClientLayout
189193
nav={
190-
<MobileFriendlyClientNav>
194+
<MobileFriendlySidebarNav>
191195
<SidebarNav />
192-
</MobileFriendlyClientNav>
196+
</MobileFriendlySidebarNav>
193197
}
194198
>
195199
<ClientRouteOutlet />
196200
</ClientLayout>
197201
<CallStatusRenderer />
198202
</CallEmbedProvider>
199-
<MobileFriendlyClientNav>
203+
<MobileFriendlyBottomNav>
200204
<UserQuickToolsProvider />
201-
</MobileFriendlyClientNav>
205+
</MobileFriendlyBottomNav>
202206
<SearchModalRenderer />
203207
<UserRoomProfileRenderer />
204208
<CreateRoomModalRenderer />

‎src/app/pages/client/SidebarNav.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { DirectTab, DirectDMsList, HomeTab, SpaceTabs, InboxTab, UnverifiedTab }
1010
import { CreateTab } from './sidebar/CreateTab';
1111
import { NavigateTab } from './sidebar/NavigateTab';
1212
import { SettingsTab } from './sidebar/SettingsTab';
13-
import { UserQuickTools } from './sidebar/UserQuickTools';
1413
import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
1514
import { UserMenuTab } from './sidebar/UserMenuTab';
1615

@@ -22,11 +21,9 @@ export function SidebarNav() {
2221
const [showUnreadCounts, setShowUnreadCounts] = useSetting(settingsAtom, 'showUnreadCounts');
2322
const [badgeCountDMsOnly, setBadgeCountDMsOnly] = useSetting(settingsAtom, 'badgeCountDMsOnly');
2423
const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts');
25-
26-
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
27-
2824
const [roomSidebarWidth] = useSetting(settingsAtom, 'roomSidebarWidth');
2925

26+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
3027
const screenSize = useScreenSizeContext();
3128
const compact = screenSize === ScreenSize.Mobile;
3229

@@ -169,7 +166,6 @@ export function SidebarNav() {
169166
}
170167
/>
171168
</Sidebar>
172-
{!oldSidebar && !compact && <UserQuickTools width={width} compact={false} />}
173169
</>
174170
);
175171
}

‎src/app/pages/client/create/Create.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { settingsAtom } from '$state/settings';
1818
import { SidebarResizer } from '../sidebar/SidebarResizer';
1919
import { useSetAtom } from 'jotai';
2020
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
21+
import { UserQuickTools } from '../sidebar/UserQuickTools';
2122

2223
export function Create() {
2324
const { navigateSpace } = useRoomNavigate();
@@ -32,6 +33,7 @@ export function Create() {
3233
const screenSize = useScreenSizeContext();
3334
const isMobile = screenSize === ScreenSize.Mobile;
3435
const hideText = curWidth <= 80 && !isMobile;
36+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
3537

3638
return (
3739
<>
@@ -71,6 +73,7 @@ export function Create() {
7173
setAnnouncement={setIsResizingSidebar}
7274
/>
7375
</PageNav>
76+
{!oldSidebar && !isMobile && <UserQuickTools width={curWidth + 66} compact={false} />}
7477
</Box>
7578
)}
7679
<Page>

‎src/app/pages/client/direct/Direct.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import { useDirectRooms } from './useDirectRooms';
6565
import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
6666
import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
6767
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
68+
import { UserQuickTools } from '../sidebar/UserQuickTools';
6869

6970
type DirectMenuProps = {
7071
requestClose: () => void;
@@ -270,6 +271,7 @@ export function Direct() {
270271
const screenSize = useScreenSizeContext();
271272
const isMobile = screenSize === ScreenSize.Mobile;
272273
const hideText = curWidth <= 80 && !isMobile;
274+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
273275

274276
return (
275277
<Box
@@ -392,6 +394,7 @@ export function Direct() {
392394
setAnnouncement={setIsResizingSidebar}
393395
/>
394396
)}
397+
{!oldSidebar && !isMobile && <UserQuickTools width={curWidth + 66} compact={false} />}
395398
</Box>
396399
);
397400
}

‎src/app/pages/client/explore/Explore.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { isServerName } from '$utils/matrix';
5454
import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
5555
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
5656
import { useSetAtom } from 'jotai';
57+
import { UserQuickTools } from '../sidebar/UserQuickTools';
5758

5859
type AddServerProps = {
5960
hideText?: boolean;
@@ -267,6 +268,7 @@ export function Explore() {
267268
const screenSize = useScreenSizeContext();
268269
const isMobile = screenSize === ScreenSize.Mobile;
269270
const hideText = curWidth <= 80 && !isMobile;
271+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
270272

271273
return (
272274
<Box
@@ -417,6 +419,7 @@ export function Explore() {
417419
setAnnouncement={setIsResizingSidebar}
418420
/>
419421
)}
422+
{!oldSidebar && !isMobile && <UserQuickTools width={curWidth + 66} compact={false} />}
420423
</Box>
421424
);
422425
}

‎src/app/pages/client/home/Home.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
8181
import { useClientConfig } from '$hooks/useClientConfig';
8282
import { getMxIdServer } from '$utils/mxIdHelper';
8383
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
84+
import { UserQuickTools } from '../sidebar/UserQuickTools';
8485

8586
type HomeMenuProps = {
8687
requestClose: () => void;
@@ -319,6 +320,7 @@ export function Home() {
319320
const screenSize = useScreenSizeContext();
320321
const isMobile = screenSize === ScreenSize.Mobile;
321322
const hideText = curWidth <= 80 && !isMobile;
323+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
322324

323325
return (
324326
<Box
@@ -553,6 +555,7 @@ export function Home() {
553555
setAnnouncement={setIsResizingSidebar}
554556
/>
555557
)}
558+
{!oldSidebar && !isMobile && <UserQuickTools width={curWidth + 66} compact={false} />}
556559
</Box>
557560
);
558561
}

‎src/app/pages/client/inbox/Inbox.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
1414
import { useInviteCount } from '$hooks/useInviteCount';
1515
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
1616
import { useSetAtom } from 'jotai';
17+
import { UserQuickTools } from '../sidebar/UserQuickTools';
1718

1819
function InvitesNavItem({ hideText }: { hideText?: boolean }) {
1920
const invitesSelected = useInboxInvitesSelected();
@@ -58,6 +59,7 @@ export function Inbox() {
5859
const setIsResizingSidebar = useSetAtom(isResizingSidebarAtom);
5960
const [roomSidebarWidth, setRoomSidebarWidth] = useSetting(settingsAtom, 'roomSidebarWidth');
6061
const [curWidth, setCurWidth] = useState(roomSidebarWidth);
62+
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');
6163

6264
useEffect(() => {
6365
setCurWidth(roomSidebarWidth);
@@ -131,6 +133,7 @@ export function Inbox() {
131133
setAnnouncement={setIsResizingSidebar}
132134
/>
133135
)}
136+
{!oldSidebar && !isMobile && <UserQuickTools width={curWidth + 66} compact={false} />}
134137
</Box>
135138
);
136139
}

‎src/app/pages/client/profile/Profile.tsx‎

Lines changed: 60 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
import { Box, Scroll, toRem, Text, color, config } from 'folds';
1+
import { Box, Scroll, toRem, Text, color, config, Menu, Icon, Icons, Line, MenuItem } from 'folds';
22
import { SquaresFour, sizedIcon } from '$components/icons/phosphor';
3-
import {
4-
Page,
5-
PageContent,
6-
PageContentCenter,
7-
PageHeroSection,
8-
PageNav,
9-
PageNavHeader,
10-
} from '$components/page';
3+
import { Page, PageHeroSection, PageNav, PageNavHeader } from '$components/page';
114
import { useEffect, useState } from 'react';
125
import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
136
import { useSetting } from '$state/hooks/settings';
@@ -16,13 +9,33 @@ import { SidebarResizer } from '../sidebar/SidebarResizer';
169
import { useSetAtom } from 'jotai';
1710
import { isResizingSidebarAtom } from '$state/isResizingSidebar';
1811
import { AccountMenuOption, PresenceMenuOption } from '../sidebar/UserMenuTab';
19-
import { UserRoomProfile } from '$components/user-profile';
2012
import { useMatrixClient } from '$hooks/useMatrixClient';
21-
import { UserRoomProfileRenderer } from '$components/UserRoomProfileRenderer';
13+
import { GlobalUserHeroName, UserHero } from '$components/user-profile/UserHero';
14+
import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
15+
import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
16+
import { useUserPresence } from '$hooks/useUserPresence';
17+
import { useUserProfile } from '$hooks/useUserProfile';
18+
import { useOpenSettings } from '$features/settings';
2219

2320
export function ProfileMobile() {
2421
const mx = useMatrixClient();
22+
const useAuthentication = useMediaAuthentication();
23+
const openSettings = useOpenSettings();
24+
2525
const userId = mx.getUserId() ?? '';
26+
const profile = useUserProfile(userId);
27+
const presence = useUserPresence(userId);
28+
29+
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
30+
const heroAvatarUrl = profile.avatarUrl
31+
? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 160, 160, 'crop') ?? undefined)
32+
: undefined;
33+
34+
const parsedBanner =
35+
typeof profile.bannerUrl === 'string' ? profile.bannerUrl.replace(/^"|"$/g, '') : undefined;
36+
const heroBannerUrl = parsedBanner
37+
? (mxcUrlToHttp(mx, parsedBanner, useAuthentication, 640, 192, 'scale') ?? undefined)
38+
: undefined;
2639

2740
const setIsResizingSidebar = useSetAtom(isResizingSidebarAtom);
2841
const [roomSidebarWidth, setRoomSidebarWidth] = useSetting(settingsAtom, 'roomSidebarWidth');
@@ -54,7 +67,7 @@ export function ProfileMobile() {
5467
{!hideText ? (
5568
<Box grow="Yes">
5669
<Text size="H4" truncate align="Center">
57-
Navigate
70+
Profile
5871
</Text>
5972
</Box>
6073
) : (
@@ -76,18 +89,42 @@ export function ProfileMobile() {
7689
</Box>
7790
)}
7891
<Page>
79-
<Box grow="Yes">
80-
<Scroll hideTrack visibility="Hover">
81-
<PageContent style={{ height: '100%', paddingBottom: '0' }}>
82-
<PageContentCenter style={{ height: '100%' }}>
83-
<PageHeroSection style={{ height: '100%', paddingBottom: '0' }}>
84-
<Box direction="Column" gap="700" alignItems="Center" style={{ height: '100%' }}>
85-
<PresenceMenuOption/>
86-
<AccountMenuOption/>
92+
<Box grow="Yes" style={{ width: '100%', padding: '0' }}>
93+
<Scroll hideTrack visibility="Hover" style={{ width: '100%', padding: '0' }}>
94+
<PageHeroSection style={{ width: '100%', padding: '0' }}>
95+
<Box direction="Column" gap="0" alignItems="Center" style={{ width: '100%' }}>
96+
<Menu style={{ minWidth: '100%' }}>
97+
<UserHero
98+
userId={userId}
99+
avatarUrl={heroAvatarUrl}
100+
bannerUrl={heroBannerUrl}
101+
presence={presence}
102+
showColor={false}
103+
allowEditing={true}
104+
/>
105+
106+
<Box style={{ padding: `0 ${config.space.S200} ${config.space.S200}` }}>
107+
<GlobalUserHeroName displayName={displayName} userId={userId} />
87108
</Box>
88-
</PageHeroSection>
89-
</PageContentCenter>
90-
</PageContent>
109+
<Line variant="Surface" size="300" />
110+
<PresenceMenuOption initialOpen />
111+
<AccountMenuOption />
112+
113+
<Line variant="Surface" size="300" />
114+
115+
<MenuItem
116+
size="300"
117+
radii="300"
118+
before={<Icon size="100" src={Icons.Setting} />}
119+
onClick={() => openSettings()}
120+
>
121+
<Text style={{ flexGrow: 1 }} size="T300">
122+
Settings
123+
</Text>
124+
</MenuItem>
125+
</Menu>
126+
</Box>
127+
</PageHeroSection>
91128
</Scroll>
92129
</Box>
93130
</Page>

0 commit comments

Comments
 (0)