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

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

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