fluxerapp/fluxer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(app): improve UX for nested sidebars (#50)

Browse Source
This commit is contained in:
hampus-fluxer
2026-01-06 04:27:05 +01:00
committed by GitHub
parent 21e489638b
commit abd17f5d49
3 changed files with 69 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
fluxer_app/src/components/modals/components/DesktopChannelSettingsView.tsx
View File

@@ -66,12 +66,24 @@ export const DesktopChannelSettingsView: React.FC<DesktopChannelSettingsViewProp
contentRef.current?.focus();
}, []);
const channelPermissionsOverrideOwnerId = React.useMemo(
() => `channel-permissions-${channel.id}`,
[channel.id],
);
const handleTabSelect = React.useCallback(
(tabType: ChannelSettingsTabType) => {
if (checkUnsavedChanges()) return;
if (
tabType === 'permissions' &&
SettingsSidebarStore.ownerId === channelPermissionsOverrideOwnerId &&
SettingsSidebarStore.isDismissed(channelPermissionsOverrideOwnerId)
) {
SettingsSidebarStore.activateOverride(channelPermissionsOverrideOwnerId);
}
onTabSelect(tabType);
},
[checkUnsavedChanges, onTabSelect],
[checkUnsavedChanges, onTabSelect, channelPermissionsOverrideOwnerId],
);
const handleDeleteChannel = React.useCallback(() => {
@@ -119,7 +131,7 @@ export const DesktopChannelSettingsView: React.FC<DesktopChannelSettingsViewProp
<Button
variant="secondary"
leftIcon={<ArrowLeftIcon className={styles.sidebarButtonIcon} />}
onClick={() => SettingsSidebarStore.setUseOverride(false)}
onClick={() => SettingsSidebarStore.dismissOverride()}
>
{t`Back to Settings`}
</Button>
@@ -134,12 +146,14 @@ export const DesktopChannelSettingsView: React.FC<DesktopChannelSettingsViewProp
exit={prefersReducedMotion ? {opacity: 1} : {opacity: 0}}
transition={prefersReducedMotion ? {duration: 0} : {duration: 0.2, ease: 'easeOut'}}
>
{SettingsSidebarStore.hasOverride && (
{SettingsSidebarStore.hasOverride &&
SettingsSidebarStore.ownerId === channelPermissionsOverrideOwnerId &&
!SettingsSidebarStore.isDismissed(channelPermissionsOverrideOwnerId) && (
<div className={styles.sidebarButtonWrapper}>
<Button
variant="secondary"
rightIcon={<ArrowRightIcon className={styles.sidebarButtonIcon} />}
onClick={() => SettingsSidebarStore.setUseOverride(true)}
onClick={() => SettingsSidebarStore.activateOverride(channelPermissionsOverrideOwnerId)}
>
{t`Back to Overrides`}
</Button>

37
fluxer_app/src/components/modals/components/DesktopGuildSettingsView.tsx
View File

@@ -69,12 +69,21 @@ export const DesktopGuildSettingsView: React.FC<DesktopGuildSettingsViewProps> =
contentRef.current?.focus();
}, []);
const guildOverrideOwnerId = React.useMemo(() => `guild-roles-${guild.id}`, [guild.id]);
const handleTabSelect = React.useCallback(
(tabType: GuildSettingsTabType) => {
if (checkUnsavedChanges()) return;
if (
tabType === 'roles' &&
SettingsSidebarStore.ownerId === guildOverrideOwnerId &&
SettingsSidebarStore.isDismissed(guildOverrideOwnerId)
) {
SettingsSidebarStore.activateOverride(guildOverrideOwnerId);
}
onTabSelect(tabType);
},
[checkUnsavedChanges, onTabSelect],
[checkUnsavedChanges, onTabSelect, guildOverrideOwnerId],
);
const handleDeleteGuild = React.useCallback(() => {
@@ -134,7 +143,7 @@ export const DesktopGuildSettingsView: React.FC<DesktopGuildSettingsViewProps> =
<Button
variant="secondary"
leftIcon={<ArrowLeftIcon className={styles.sidebarButtonIcon} />}
onClick={() => SettingsSidebarStore.setUseOverride(false)}
onClick={() => SettingsSidebarStore.dismissOverride()}
>
{t`Back to Settings`}
</Button>
@@ -149,17 +158,19 @@ export const DesktopGuildSettingsView: React.FC<DesktopGuildSettingsViewProps> =
exit={prefersReducedMotion ? {opacity: 1} : {opacity: 0}}
transition={prefersReducedMotion ? {duration: 0} : {duration: 0.2, ease: 'easeOut'}}
>
{SettingsSidebarStore.hasOverride && (
<div className={styles.sidebarButtonWrapper}>
<Button
variant="secondary"
rightIcon={<ArrowRightIcon className={styles.sidebarButtonIcon} />}
onClick={() => SettingsSidebarStore.setUseOverride(true)}
>
{selectedTab === 'roles' ? t`Back to Roles` : t`Back to Overrides`}
</Button>
</div>
)}
{SettingsSidebarStore.hasOverride &&
SettingsSidebarStore.ownerId === guildOverrideOwnerId &&
!SettingsSidebarStore.isDismissed(guildOverrideOwnerId) && (
<div className={styles.sidebarButtonWrapper}>
<Button
variant="secondary"
rightIcon={<ArrowRightIcon className={styles.sidebarButtonIcon} />}
onClick={() => SettingsSidebarStore.activateOverride(guildOverrideOwnerId)}
>
{selectedTab === 'roles' ? t`Back to Roles` : t`Back to Overrides`}
</Button>
</div>
)}
{Object.entries(groupedSettingsTabs).map(([category, tabs]) => (
<SettingsModalSidebarCategory key={category}>
{category !== 'guild_settings' && (