murdle/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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 69 additions and 18 deletions
Show Stats 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' && (

28
fluxer_app/src/stores/SettingsSidebarStore.tsx
View File

@ -24,6 +24,7 @@ class SettingsSidebarStore {
ownerId: string | null = null;
overrideContent: React.ReactNode | null = null;
useOverride = false;
dismissedOwnerId: string | null = null;
constructor() {
makeAutoObservable(this, {overrideContent: observable.ref}, {autoBind: true});
@ -36,7 +37,8 @@ class SettingsSidebarStore {
setOverride(ownerId: string, content: React.ReactNode, options?: {defaultOn?: boolean}): void {
this.ownerId = ownerId;
this.overrideContent = content;
if (options?.defaultOn) this.useOverride = true;
this.dismissedOwnerId = null;
this.useOverride = options?.defaultOn ?? false;
}
updateOverride(ownerId: string, content: React.ReactNode): void {
@ -48,16 +50,40 @@ class SettingsSidebarStore {
if (ownerId && this.ownerId && this.ownerId !== ownerId) return;
this.ownerId = null;
this.overrideContent = null;
this.dismissedOwnerId = null;
this.useOverride = false;
}
dismissOverride(ownerId?: string): void {
if (ownerId && this.ownerId && this.ownerId !== ownerId) return;
const targetOwnerId = ownerId ?? this.ownerId;
this.useOverride = false;
this.dismissedOwnerId = targetOwnerId;
}
setUseOverride(value: boolean): void {
if (!this.hasOverride) {
this.useOverride = false;
return;
}
if (value) {
this.dismissedOwnerId = null;
}
this.useOverride = value;
}
activateOverride(ownerId?: string): void {
if (!this.hasOverride) return;
if (ownerId && this.ownerId && this.ownerId !== ownerId) return;
this.useOverride = true;
this.dismissedOwnerId = null;
}
isDismissed(ownerId?: string): boolean {
if (!this.dismissedOwnerId) return false;
if (!ownerId) return this.ownerId === this.dismissedOwnerId;
return ownerId === this.dismissedOwnerId;
}
}
export default new SettingsSidebarStore();