feat(settings): gear opens a multi-tab settings window with account management

Replace the gear dropdown with a single tabbed window: Audio / Chat / Altre /
Account. Audio/Chat/Altre reuse the existing volume + preference controls;
Account recovers UserAccountSettingsView (now embeddable via an 'embedded' prop
that renders its body without its own card). Removes the dropdown menu + dead css.
This commit is contained in:
simoleo89
2026-06-15 20:01:17 +02:00
parent c2be4dbed3
commit 63b92a4e65
4 changed files with 108 additions and 169 deletions
+2 -17
View File
@@ -1,5 +1,5 @@
import { CreateLinkEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo, useState } from 'react';
import { FC, useCallback, useMemo } from 'react';
import { FaChartBar, FaCog, FaSignOutAlt } from 'react-icons/fa';
import { ClearRememberLogin, GetConfigurationValue, GetRememberLogin, LocalizeText } from '../../api';
import { Column, LayoutCurrencyIcon } from '../../common';
@@ -16,13 +16,6 @@ const localizeWithFallback = (key: string, fallback: string) =>
export const PurseView: FC<{}> = props =>
{
const { purse = null, hcDisabled = false } = usePurse();
const [ settingsMenuOpen, setSettingsMenuOpen ] = useState(false);
const openSettingsSection = useCallback((section: string) =>
{
CreateLinkEvent('user-settings/show/' + section);
setSettingsMenuOpen(false);
}, []);
const displayedCurrencies = useMemo(() => GetConfigurationValue<number[]>('system.currency.types', []), []);
const currencyDisplayNumberShort = useMemo(() => GetConfigurationValue<boolean>('currency.display.number.short', false), []);
@@ -130,21 +123,13 @@ export const PurseView: FC<{}> = props =>
</button>
<button type="button" className="nitro-purse__btn nitro-purse__btn--icon nitro-purse__btn--settings" onClick={ event =>
{
event.stopPropagation(); setSettingsMenuOpen(value => !value);
event.stopPropagation(); CreateLinkEvent('user-settings/toggle');
} } title={ LocalizeText('widget.memenu.settings.title') }>
<FaCog />
</button>
</div>
</div>
</div>
{ settingsMenuOpen &&
<div className="nitro-purse-menu">
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('audio') }>Impostazioni Audio</button>
<button type="button" className="nitro-purse-menu__item nitro-purse-menu__item--disabled" disabled>Impostazioni Discord</button>
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('chat') }>Impostazioni Chat</button>
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('other') }>Altre Impostazioni</button>
<button type="button" className="nitro-purse-menu__item nitro-purse-menu__item--disabled" disabled>Filtro Parole</button>
</div> }
{ otherCurrencies.length > 0 &&
<div className="nitro-purse__other">
{ otherCurrencies.map(type => <SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) || 0 } />) }