From 7a45d5844d2132be202d4f221eae8a62c11cefae Mon Sep 17 00:00:00 2001 From: Hampus Date: Sun, 16 Aug 2026 01:36:16 +0200 Subject: [PATCH] fix(app): scale guild list selection pill with app zoom (#1670) --- .../app/components/layout/sidebar_nav/FavoritesButton.tsx | 7 ++++--- .../app/components/layout/sidebar_nav/FluxerButton.tsx | 7 ++++--- .../app/components/layout/sidebar_nav/GuildFolderItem.tsx | 7 ++++--- .../app/components/layout/sidebar_nav/GuildListDMItem.tsx | 7 ++++--- .../app/components/layout/sidebar_nav/GuildListItem.tsx | 7 ++++--- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/FavoritesButton.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/FavoritesButton.tsx index 84a61f829..bad1dd32d 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/FavoritesButton.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/FavoritesButton.tsx @@ -10,12 +10,12 @@ import {FAVORITES_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescri import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands'; import SelectedChannel from '@app/features/navigation/state/SelectedChannel'; import {useLocation} from '@app/features/platform/components/router/RouterReact'; +import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {FavoritesGuildContextMenu} from '@app/features/ui/action_menu/FavoritesGuildContextMenu'; import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands'; import FocusRing from '@app/features/ui/focus_ring/FocusRing'; import MobileLayout from '@app/features/ui/state/MobileLayout'; import {Tooltip} from '@app/features/ui/tooltip/Tooltip'; -import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils'; import {FAVORITES_GUILD_ID} from '@fluxer/constants/src/AppConstants'; import {useLingui} from '@lingui/react/macro'; import {StarIcon} from '@phosphor-icons/react'; @@ -63,12 +63,13 @@ export const FavoritesButton = observer(({className}: FavoritesButtonProps = {}) )); }; const shouldShowHoverState = isHovering || contextMenuOpen; - const indicatorHeight = + const indicatorHeight = remFromPx( (() => { if (isSelected) return 40; if (shouldShowHoverState) return 20; return 8; - })() * getAppZoomFactor(); + })(), + ); const isActive = shouldShowHoverState || isSelected; if (!Accessibility.showFavorites) { return null; diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/FluxerButton.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/FluxerButton.tsx index 0927f7189..be780d8d3 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/FluxerButton.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/FluxerButton.tsx @@ -13,6 +13,7 @@ import * as RouterUtils from '@app/features/navigation/utils/RouterUtils'; import {useLocation} from '@app/features/platform/components/router/RouterReact'; import ReadStates from '@app/features/read_state/state/ReadStates'; import Relationships from '@app/features/relationship/state/Relationships'; +import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {FluxerButtonContextMenu} from '@app/features/ui/action_menu/FluxerButtonContextMenu'; import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands'; import {FluxerSymbol} from '@app/features/ui/components/icons/FluxerSymbol'; @@ -21,7 +22,6 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing'; import MobileLayout from '@app/features/ui/state/MobileLayout'; import SidebarPreferences from '@app/features/ui/state/SidebarPreferences'; import {Tooltip} from '@app/features/ui/tooltip/Tooltip'; -import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils'; import {ME} from '@fluxer/constants/src/AppConstants'; import {RelationshipTypes} from '@fluxer/constants/src/UserConstants'; import {msg} from '@lingui/core/macro'; @@ -117,12 +117,13 @@ export const FluxerButton = observer(() => { /> )); }, []); - const indicatorHeight = + const indicatorHeight = remFromPx( (() => { if (isSelected) return 40; if (isHovering) return 20; return 8; - })() * getAppZoomFactor(); + })(), + ); const isActive = isHovering || isSelected; if (RuntimeConfig.directMessagesDisabled) { return null; diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx index 908c2d975..3cfc3ed9a 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx @@ -21,6 +21,7 @@ import GuildReadState from '@app/features/guild/state/GuildReadState'; import {truncateInitials} from '@app/features/guild/utils/GuildInitialsUtils'; import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils'; import {useLocation} from '@app/features/platform/components/router/RouterReact'; +import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import Theme from '@app/features/theme/state/Theme'; import {GuildFolderContextMenu} from '@app/features/ui/action_menu/GuildFolderContextMenu'; import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands'; @@ -28,7 +29,6 @@ import {MentionBadgeAnimated} from '@app/features/ui/components/MentionBadge'; import FocusRing from '@app/features/ui/focus_ring/FocusRing'; import MobileLayout from '@app/features/ui/state/MobileLayout'; import {Tooltip} from '@app/features/ui/tooltip/Tooltip'; -import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils'; import * as AvatarUtils from '@app/features/user/utils/AvatarUtils'; import MediaEngine from '@app/features/voice/engine/MediaEngineFacade'; import {useVoiceGatewayStateVersion} from '@app/features/voice/engine/v2/VoiceEngineV2AppVoiceStateAdapter'; @@ -408,12 +408,13 @@ export const GuildFolderItem = observer((props: GuildFolderItemProps) => { [folder, guilds], ); const shouldShowHoverState = isHovering; - const indicatorHeight = + const indicatorHeight = remFromPx( (() => { if (isSelected) return 40; if (shouldShowHoverState) return 20; return 8; - })() * getAppZoomFactor(); + })(), + ); const prefersReducedMotion = Accessibility.useReducedMotion; const firstFourGuilds = guilds.slice(0, 4); const showCollapsedIcon = shouldShowCollapsedFolderIcon(folder.flags); diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx index 888ac0021..96c00c6e4 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx @@ -16,6 +16,7 @@ import * as ChannelUtils from '@app/features/channel/utils/ChannelUtils'; import {MENTION_COUNT_ARIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors'; import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands'; import ReadStates from '@app/features/read_state/state/ReadStates'; +import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {DMContextMenu} from '@app/features/ui/action_menu/DMContextMenu'; import {GroupDMContextMenu} from '@app/features/ui/action_menu/GroupDMContextMenu'; import {AvatarStack} from '@app/features/ui/avatars/AvatarStack'; @@ -25,7 +26,6 @@ import {StatusAwareAvatar} from '@app/features/ui/components/StatusAwareAvatar'; import FocusRing from '@app/features/ui/focus_ring/FocusRing'; import KeyboardMode from '@app/features/ui/state/KeyboardMode'; import {Tooltip} from '@app/features/ui/tooltip/Tooltip'; -import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils'; import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience'; import type {User} from '@app/features/user/models/User'; import UserGuildSettings from '@app/features/user/state/UserGuildSettings'; @@ -270,12 +270,13 @@ const ResolvedDMListItem = observer(function ResolvedDMListItem({ }, [channel, isGroupDM, recipient, isMobileExperience], ); - const indicatorHeight = + const indicatorHeight = remFromPx( (() => { if (isSelected) return 40; if (isHovering) return 20; return 8; - })() * getAppZoomFactor(); + })(), + ); const tooltipContent = useMemo React.ReactNode)>(() => { if (!hasVoiceActivity) { return displayName; diff --git a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItem.tsx b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItem.tsx index df3aac763..730abb862 100644 --- a/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItem.tsx +++ b/fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItem.tsx @@ -37,6 +37,7 @@ import * as ImageCacheUtils from '@app/features/messaging/utils/ImageCacheUtils' import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands'; import SelectedChannel from '@app/features/navigation/state/SelectedChannel'; import Permission from '@app/features/permissions/state/Permission'; +import {remFromPx} from '@app/features/theme/layout/RemFromPx'; import {GuildContextMenu} from '@app/features/ui/action_menu/GuildContextMenu'; import {AvatarStack} from '@app/features/ui/avatars/AvatarStack'; import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands'; @@ -45,7 +46,6 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing'; import {KeybindHint} from '@app/features/ui/keybind_hint/KeybindHint'; import MobileLayout from '@app/features/ui/state/MobileLayout'; import {Tooltip} from '@app/features/ui/tooltip/Tooltip'; -import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils'; import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience'; import type {User} from '@app/features/user/models/User'; import UserGuildSettings from '@app/features/user/state/UserGuildSettings'; @@ -519,12 +519,13 @@ export const GuildListItem = observer( } }, [handleOpenBottomSheet, isMobileExperience, isSortingList]); const shouldShowHoverState = isHovering || contextMenuOpen; - const indicatorHeight = + const indicatorHeight = remFromPx( (() => { if (isSelected) return 40; if (shouldShowHoverState) return 20; return 8; - })() * getAppZoomFactor(); + })(), + ); const isActive = isSelected || shouldShowHoverState; const focusableRef = useRef(null); const focusRingTargetRef = useRef(null);