feat(settings): gear dropdown opening focused settings sections

The purse gear now opens a dropdown (Audio / Discord / Chat / Altre / Filtro Parole). Audio/Chat/Altre open UserSettingsView focused on that section (reusing the existing volume + preference controls) with a Back button; Discord and Filtro Parole are placeholders for now.
2026-06-19 15:06:20 +00:00 · 2026-06-14 22:25:55 +02:00
parent 28df1da69b
commit c2be4dbed3
3 changed files with 155 additions and 65 deletions
@@ -1,5 +1,5 @@
 import { CreateLinkEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
 import { FaChartBar, FaCog, FaSignOutAlt } from 'react-icons/fa';
 import { ClearRememberLogin, GetConfigurationValue, GetRememberLogin, LocalizeText } from '../../api';
 import { Column, LayoutCurrencyIcon } from '../../common';
@@ -16,6 +16,13 @@ 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), []);
@@ -123,13 +130,21 @@ 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(); CreateLinkEvent('user-settings/toggle');
+                            event.stopPropagation(); setSettingsMenuOpen(value => !value);
                        } } 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 } />) }
@@ -2,13 +2,24 @@ import { AddLinkEventTracker, CreateLinkEvent, ILinkEventTracker, NitroSettingsE
 import { FC, useEffect, useState } from 'react';
 import { FaUserCog, FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
 import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
 import { classNames } from '../../layout';

+const localizeWithFallback = (key: string, fallback: string) =>
+{
+    const text = LocalizeText(key);
+    return (text && text !== key) ? text : fallback;
+};
+
+// null = full window (legacy). 'audio' | 'chat' | 'other' = focused section
+// opened from the purse gear dropdown.
+type SettingsSection = null | 'audio' | 'chat' | 'other';
+
 export const UserSettingsView: FC<{}> = props =>
 {
    const [ isVisible, setIsVisible ] = useState(false);
+    const [ section, setSection ] = useState<SettingsSection>(null);
    const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
    const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
    const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
@@ -100,12 +111,14 @@ export const UserSettingsView: FC<{}> = props =>
                switch(parts[1])
                {
                    case 'show':
+                        setSection((parts[2] as SettingsSection) || null);
                        setIsVisible(true);
                        return;
                    case 'hide':
                        setIsVisible(false);
                        return;
                    case 'toggle':
+                        setSection((parts[2] as SettingsSection) || null);
                        setIsVisible(prevValue => !prevValue);
                        return;
                }
@@ -127,15 +140,36 @@ export const UserSettingsView: FC<{}> = props =>

    if(!isVisible || !userSettings) return null;

+    const showChat = (section === null || section === 'chat');
+    const showOther = (section === null || section === 'other');
+    const showAudio = (section === null || section === 'audio');
+    const showAccountLink = (section === null);
+
+    const headerText = (section === 'audio')
+        ? localizeWithFallback('widget.memenu.settings.volume', 'Audio settings')
+        : (section === 'chat')
+            ? localizeWithFallback('room.chat.settings.title', 'Chat settings')
+            : (section === 'other')
+                ? localizeWithFallback('memenu.settings.other', 'Other settings')
+                : LocalizeText('widget.memenu.settings.title');
+
    return (
        <NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
-            <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
+            <NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close_view') } />
            <NitroCardContentView className="text-black">
+                { showChat &&
                    <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-1">
                            <input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
                            <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
                        </div>
+                        <div className="flex items-center gap-1">
+                            <input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
+                        </div>
+                    </div> }
+                { showOther &&
+                    <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-1">
                            <input checked={ userSettings.roomInvites } className="form-check-input" type="checkbox" onChange={ event => processAction('room_invites', event.target.checked) } />
                            <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
@@ -152,11 +186,8 @@ export const UserSettingsView: FC<{}> = props =>
                            <input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
                            <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
                        </div>
-                    <div className="flex items-center gap-1">
-                        <input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
-                    </div>
-                </div>
+                    </div> }
+                { showAudio &&
                    <div className="flex flex-col">
                        <Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
                        <div className="flex flex-col gap-1">
@@ -186,7 +217,8 @@ export const UserSettingsView: FC<{}> = props =>
                                <FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } />
                            </div>
                        </div>
-                </div>
+                    </div> }
+                { showAccountLink &&
                    <div className="flex flex-col pt-2 mt-1 border-t border-black/10">
                        <button
                            type="button"
@@ -201,7 +233,11 @@ export const UserSettingsView: FC<{}> = props =>
                            </div>
                            <span className="text-black/30 group-hover:text-[#1e7295] text-[10px]">›</span>
                        </button>
-                </div>
+                    </div> }
+                { (section !== null) &&
+                    <div className="flex pt-2 mt-1 border-t border-black/10">
+                        <Button variant="secondary" onClick={ event => processAction('close_view') }>{ localizeWithFallback('generic.back', 'Indietro') }</Button>
+                    </div> }
            </NitroCardContentView>
        </NitroCardView>
    );
@@ -230,6 +230,45 @@
    object-fit: contain;
 }

+/* ---- Settings dropdown (gear menu) ---- */
+.nitro-purse-menu {
+    width: 100%;
+    max-width: 200px;
+    margin-top: 4px;
+    margin-left: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 2px solid #41403c;
+    border-radius: 8px;
+    background: rgba(10, 10, 12, 0.92);
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
+    pointer-events: all;
+}
+
+.nitro-purse-menu__item {
+    padding: 6px 10px;
+    text-align: left;
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background 0.12s ease;
+}
+
+.nitro-purse-menu__item:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.nitro-purse-menu__item--disabled,
+.nitro-purse-menu__item--disabled:hover {
+    color: rgba(255, 255, 255, 0.35);
+    background: transparent;
+    cursor: default;
+}
+
@media (max-width: 640px) {
    .nitro-purse {
        max-width: 100%;