diff --git a/.changeset/feat_add_setting_strict_icons.md b/.changeset/feat_add_setting_strict_icons.md new file mode 100644 index 000000000..1357d3b6b --- /dev/null +++ b/.changeset/feat_add_setting_strict_icons.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add option for showing icons only when available and changed default to it diff --git a/.changeset/fix_icons_showing_wrongly.md b/.changeset/fix_icons_showing_wrongly.md new file mode 100644 index 000000000..becaa15fb --- /dev/null +++ b/.changeset/fix_icons_showing_wrongly.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix Collapsed mode showing the wrong icon diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index db29bf3a2..5c487edf7 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -267,6 +267,7 @@ type RoomNavItemProps = { direct?: boolean; customDMCards?: boolean; hideText?: boolean; + isStrict?: boolean; joinCallOnSingleClick?: boolean; }; @@ -279,6 +280,7 @@ export function RoomNavItem({ notificationMode, linkPath, hideText, + isStrict, joinCallOnSingleClick, }: RoomNavItemProps) { const mx = useMatrixClient(); @@ -316,6 +318,11 @@ export function RoomNavItem({ const [isChatOpen, setChatOpen] = useAtom(callChatAtom); const autoDiscoveryInfo = useAutoDiscoveryInfo(); + const avatarSrc = + ((!direct || customDMCards) && getRoomAvatarUrl(mx, room, 96, useAuthentication)) || + (direct && getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)) || + undefined; + const isActiveCall = callEmbed?.roomId === room.roomId; const handleContextMenu: MouseEventHandler = (evt) => { @@ -447,14 +454,10 @@ export function RoomNavItem({ radii="400" style={hideTextStyling(hideText)} > - {showAvatar ? ( + {showAvatar || (avatarSrc && isStrict) ? ( ( @@ -472,7 +475,7 @@ export function RoomNavItem({ : config.opacity.P300, }} filled={selected || isActiveCall} - size="200" + size={isStrict && hideText ? '300' : '200'} joinRule={room.getJoinRule()} roomType={room.getType()} withOverlay={roomIconOverlay} diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index 56fd32df1..31fa299a5 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -28,7 +28,8 @@ import { } from '$plugins/arborium'; import { ThemeKind, useActiveTheme } from '$hooks/useTheme'; import { useSetting } from '$state/hooks/settings'; -import type { PixelatedImageRenderingMode, ShowRoomIcon } from '$state/settings'; +import type { PixelatedImageRenderingMode } from '$state/settings'; +import { ShowRoomIcon } from '$state/settings'; import { settingsAtom } from '$state/settings'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { ThemeAppearanceSection } from './ThemeAppearanceSection'; @@ -809,6 +810,7 @@ export function Appearance({ const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji'); const [customDMCards, setCustomDMCards] = useSetting(settingsAtom, 'customDMCards'); const [showEasterEggs, setShowEasterEggs] = useSetting(settingsAtom, 'showEasterEggs'); + const [showRoomIcon] = useSetting(settingsAtom, 'showRoomIcon'); const [themeBrowserOpen, setThemeBrowserOpen] = useState(false); const [closeFoldersByDefault, setCloseFoldersByDefault] = useSetting( settingsAtom, @@ -891,14 +893,6 @@ export function Appearance({ /> - - } - /> - + + + + + When do you want to show the specific room icons in the sidebar? + + {(showRoomIcon === ShowRoomIcon.Always && + 'Always show icons, and fallback to initials') || + (showRoomIcon === ShowRoomIcon.Strict && + 'Show icons when available, but fallback to hashes') || + (showRoomIcon === ShowRoomIcon.Smart && + 'Show icons only when sidebar is minimized, else icons.') || + (showRoomIcon === ShowRoomIcon.Never && + 'Never show icons, always only the hashes.') || + ''} + {' (current)'} + + } + after={} + /> + {/*THIS SHOULD BE MOVED TO A NEW SETTINGS MENU INSIDE OF THE HOME SETTINGS AS SOON AS THERE IS A REASON TO CREATE A HOME MENU SETTINGS PANEL it is currently here because it would be eerie to have an entire home settings menu for just one single setting*/} diff --git a/src/app/hooks/useShowRoomIcon.ts b/src/app/hooks/useShowRoomIcon.ts index 9c548c940..5e4c9a76b 100644 --- a/src/app/hooks/useShowRoomIcon.ts +++ b/src/app/hooks/useShowRoomIcon.ts @@ -13,9 +13,13 @@ export const useShowRoomIcon = (): MessageLayoutItem[] => layout: ShowRoomIcon.Always, name: 'Always', }, + { + layout: ShowRoomIcon.Strict, + name: 'Sometimes', + }, { layout: ShowRoomIcon.Smart, - name: 'Smart', + name: 'Collapsed', }, { layout: ShowRoomIcon.Never, @@ -36,9 +40,13 @@ export const useShowPerRoomRoomIcon = (): MessageLayoutItem[] => layout: ShowRoomIcon.Always, name: 'Always', }, + { + layout: ShowRoomIcon.Strict, + name: 'Sometimes', + }, { layout: ShowRoomIcon.Smart, - name: 'Smart', + name: 'Collapsed', }, { layout: ShowRoomIcon.Never, diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 798637ac6..0d26f1167 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -1037,6 +1037,7 @@ export function Space() { room.roomId )} joinCallOnSingleClick={joinCallOnSingleClick} + isStrict={showRoomIcon === ShowRoomIcon.Strict} /> diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 9b5a56241..2bac0e9ed 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -26,6 +26,7 @@ export enum CaptionPosition { export enum ShowRoomIcon { Always = 'always', + Strict = 'strict', Smart = 'smart', Never = 'never', } @@ -348,7 +349,7 @@ export const defaultSettings: Settings = { showPersonaSetting: false, closeFoldersByDefault: false, perRoomShowRoomIcon: [], - showRoomIcon: ShowRoomIcon.Smart, + showRoomIcon: ShowRoomIcon.Strict, roomIconOverlay: true, showRoomBanners: true, roomSidebarWidth: 256,