duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): revert to gear dropdown menu + add Gestione Account entry

Browse Source 
Bring back the purse gear dropdown (Audio/Discord/Chat/Altre/Filtro) instead of
the tabbed window, and add a 'Gestione Account' item that opens the account
settings window.
This commit is contained in:
simoleo89
2026-06-15 20:10:32 +02:00
parent 992e65cb3d
commit 340ca3e0e8
4 changed files with 170 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/purse/PurseView.tsx
+18 -2
View File
@@ -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,22 @@ 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" onClick={ () => { CreateLinkEvent('user-account-settings/show'); setSettingsMenuOpen(false); } }>Gestione Account</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 } />) }
src/components/user-settings/UserAccountSettingsView.tsx
+6 -13
View File
@@ -34,7 +34,7 @@ const passwordStrength = (value: string): { score: number; labelKey: string; col
return { score: 4, labelKey: 'usersettings.strength.strong', color: 'bg-[#00800b]' };
};
export const UserAccountSettingsView: FC<{ embedded?: boolean }> = ({ embedded = false }) =>
export const UserAccountSettingsView: FC<{}> = () =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ section, setSection ] = useState<Section>('menu');
@@ -390,10 +390,12 @@ export const UserAccountSettingsView: FC<{ embedded?: boolean }> = ({ embedded =
}
};
if(!embedded && !isVisible) return null;
if(!isVisible) return null;
return (
<NitroCardView className="user-account-settings-window w-[360px]" theme="primary-slim" uniqueKey="user-account-settings">
<NitroCardHeaderView headerText={ LocalizeText('usersettings.title') } onCloseClick={ close } />
const accountBody = (
<>
<div className="relative flex items-center gap-3 px-3 py-2 bg-[linear-gradient(180deg,#2e8fb8_0%,#1e7295_100%)] text-white">
<div className="absolute inset-0 opacity-20 pointer-events-none [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:6px_6px]" />
{ session.figure && (
@@ -751,15 +753,6 @@ export const UserAccountSettingsView: FC<{ embedded?: boolean }> = ({ embedded =
</div>
) }
</NitroCardContentView>
</>
);
if(embedded) return accountBody;
return (
<NitroCardView className="user-account-settings-window w-[360px]" theme="primary-slim" uniqueKey="user-account-settings">
<NitroCardHeaderView headerText={ LocalizeText('usersettings.title') } onCloseClick={ close } />
{ accountBody }
</NitroCardView>
);
};
src/components/user-settings/UserSettingsView.tsx
+73 -61
View File
@@ -1,11 +1,10 @@
import { AddLinkEventTracker, ILinkEventTracker, NitroSettingsEvent, RemoveLinkEventTracker, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
import { AddLinkEventTracker, CreateLinkEvent, ILinkEventTracker, NitroSettingsEvent, RemoveLinkEventTracker, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
import { FaUserCog, FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
import { classNames } from '../../layout';
import { UserAccountSettingsView } from './UserAccountSettingsView';
const localizeWithFallback = (key: string, fallback: string) =>
{
@@ -13,12 +12,14 @@ const localizeWithFallback = (key: string, fallback: string) =>
return (text && text !== key) ? text : fallback;
};
type SettingsTab = 'audio' | 'chat' | 'other' | 'account';
// 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 [ activeTab, setActiveTab ] = useState<SettingsTab>('audio');
const [ section, setSection ] = useState<SettingsSection>(null);
const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
@@ -107,19 +108,17 @@ export const UserSettingsView: FC<{}> = props =>
if(parts.length < 2) return;
const tab = parts[2] as SettingsTab;
switch(parts[1])
{
case 'show':
if(tab) setActiveTab(tab);
setSection((parts[2] as SettingsSection) || null);
setIsVisible(true);
return;
case 'hide':
setIsVisible(false);
return;
case 'toggle':
if(tab) setActiveTab(tab);
setSection((parts[2] as SettingsSection) || null);
setIsVisible(prevValue => !prevValue);
return;
}
@@ -141,64 +140,58 @@ 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 w-[340px]" theme="primary-slim" uniqueKey="user-settings">
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
<NitroCardTabsView>
<NitroCardTabsItemView isActive={ activeTab === 'audio' } onClick={ () => setActiveTab('audio') }>
{ localizeWithFallback('widget.memenu.settings.volume', 'Audio') }
</NitroCardTabsItemView>
<NitroCardTabsItemView isActive={ activeTab === 'chat' } onClick={ () => setActiveTab('chat') }>
{ localizeWithFallback('room.chat.settings.title', 'Chat') }
</NitroCardTabsItemView>
<NitroCardTabsItemView isActive={ activeTab === 'other' } onClick={ () => setActiveTab('other') }>
{ localizeWithFallback('memenu.settings.other', 'Altre') }
</NitroCardTabsItemView>
<NitroCardTabsItemView isActive={ activeTab === 'account' } onClick={ () => setActiveTab('account') }>
{ localizeWithFallback('usersettings.account.label', 'Account') }
</NitroCardTabsItemView>
</NitroCardTabsView>
{ (activeTab === 'account')
? <UserAccountSettingsView embedded />
: (
<NitroCardContentView className="flex flex-col gap-2 text-black">
{ (activeTab === 'chat') &&
<>
<Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('room.chat.settings.title', 'Chat') }</Text>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
<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>
</label>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
</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>
</label>
</> }
{ (activeTab === 'other') &&
<>
<Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('memenu.settings.other', 'Altre') }</Text>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
</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>
</label>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
</div>
<div className="flex items-center gap-1">
<input checked={ userSettings.cameraFollow } className="form-check-input" type="checkbox" onChange={ event => processAction('camera_follow', event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
</label>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
</div>
<div className="flex items-center gap-1">
<input checked={ catalogPlaceMultipleObjects } className="form-check-input" type="checkbox" onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text>
</label>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
</div>
<div className="flex items-center gap-1">
<input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
</label>
</> }
{ (activeTab === 'audio') &&
<>
<Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('widget.memenu.settings.volume', 'Audio') }</Text>
<div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text bold>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
</div>
</div> }
{ showAudio &&
<div className="flex flex-col">
<Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
<div className="flex items-center gap-1">
{ (userSettings.volumeSystem === 0) && <FaVolumeMute className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeSystem > 0) && <FaVolumeDown className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -206,8 +199,8 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeSystem < 50) && 'text-muted', 'fa-icon') } />
</div>
</div>
<div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text bold>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
<div className="flex items-center gap-1">
{ (userSettings.volumeFurni === 0) && <FaVolumeMute className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeFurni > 0) && <FaVolumeDown className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -215,8 +208,8 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeFurni < 50) && 'text-muted', 'fa-icon') } />
</div>
</div>
<div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text bold>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
<div className="flex items-center gap-1">
{ (userSettings.volumeTrax === 0) && <FaVolumeMute className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeTrax > 0) && <FaVolumeDown className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -224,9 +217,28 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } />
</div>
</div>
</> }
</div> }
{ showAccountLink &&
<div className="flex flex-col pt-2 mt-1 border-t border-black/10">
<button
type="button"
onClick={ () => CreateLinkEvent('user-account-settings/show') }
className="group flex items-center gap-2 rounded-md border border-black/10 bg-white px-2 py-1.5 hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors cursor-pointer text-left">
<div className="flex items-center justify-center w-7 h-7 rounded-full bg-[#1e7295] text-white shadow-[inset_0_2px_#ffffff26,inset_0_-2px_#0000001a]">
<FaUserCog size={ 12 } />
</div>
<div className="flex flex-col flex-1 leading-tight">
<Text bold>{ LocalizeText('usersettings.open.title') }</Text>
<Text small className="text-black/60">{ LocalizeText('usersettings.open.subtitle') }</Text>
</div>
<span className="text-black/30 group-hover:text-[#1e7295] text-[10px]">›</span>
</button>
</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>
);
};
src/css/purse/PurseView.css
+39
View File
@@ -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%;