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

Use a consistent fallback icon in settings for users with no avatar

Browse source
This commit is contained in:
Ginger 2025-09-15 14:50:29 -04:00
parent c5b59ea122
commit d4deba6074
No known key found for this signature in database
2 changed files with 7 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/features/settings/Settings.tsx
View file

@ -21,10 +21,9 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { Account } from './account'; import { Account } from './account';
import { useUserProfile } from '../../hooks/useUserProfile'; import { useUserProfile } from '../../hooks/useUserProfile';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix'; import { mxcUrlToHttp } from '../../utils/matrix';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { UserAvatar } from '../../components/user-avatar'; import { UserAvatar } from '../../components/user-avatar';
import { nameInitials } from '../../utils/common';
import { Notifications } from './notifications'; import { Notifications } from './notifications';
import { Devices } from './devices'; import { Devices } from './devices';
import { EmojisStickers } from './emojis-stickers'; import { EmojisStickers } from './emojis-stickers';
@ -99,9 +98,8 @@ type SettingsProps = {
export function Settings({ initialPage, requestClose }: SettingsProps) { export function Settings({ initialPage, requestClose }: SettingsProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const userId = mx.getUserId()!; const userId = mx.getUserId() as string;
const profile = useUserProfile(userId); const profile = useUserProfile(userId);
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
const avatarUrl = profile.avatarUrl const avatarUrl = profile.avatarUrl
? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
: undefined; : undefined;
@ -132,7 +130,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
<UserAvatar <UserAvatar
userId={userId} userId={userId}
src={avatarUrl} src={avatarUrl}
renderFallback={() => <Text size="H6">{nameInitials(displayName)}</Text>} renderFallback={() => <Icon size="100" src={Icons.User} filled />}
/> />
</Avatar> </Avatar>
<Text size="H4" truncate> <Text size="H4" truncate>

10
src/app/pages/client/sidebar/SettingsTab.tsx
View file

@ -1,10 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Text } from 'folds'; import { Icon, Icons } from 'folds';
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar'; import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
import { UserAvatar } from '../../../components/user-avatar'; import { UserAvatar } from '../../../components/user-avatar';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix'; import { mxcUrlToHttp } from '../../../utils/matrix';
import { nameInitials } from '../../../utils/common';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { Settings } from '../../../features/settings'; import { Settings } from '../../../features/settings';
import { useUserProfile } from '../../../hooks/useUserProfile'; import { useUserProfile } from '../../../hooks/useUserProfile';
@ -13,12 +12,11 @@ import { Modal500 } from '../../../components/Modal500';
export function SettingsTab() { export function SettingsTab() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const userId = mx.getUserId()!; const userId = mx.getUserId() as string;
const profile = useUserProfile(userId); const profile = useUserProfile(userId);
const [settings, setSettings] = useState(false); const [settings, setSettings] = useState(false);
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
const avatarUrl = profile.avatarUrl const avatarUrl = profile.avatarUrl
? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
: undefined; : undefined;
@ -34,7 +32,7 @@ export function SettingsTab() {
<UserAvatar <UserAvatar
userId={userId} userId={userId}
src={avatarUrl} src={avatarUrl}
renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>} renderFallback={() => <Icon size="400" src={Icons.User} filled />}
/> />
</SidebarAvatar> </SidebarAvatar>
)} )}