84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { IconType } from '@/components/Icon';
|
|
import { makeAutoObservable, observable } from 'mobx';
|
|
|
|
const PREFERENCE_IDS = [
|
|
'general',
|
|
'account',
|
|
'appearance',
|
|
'security',
|
|
'extensions',
|
|
'listed',
|
|
'shortcuts',
|
|
'accessibility',
|
|
'get-free-month',
|
|
'help-feedback',
|
|
] as const;
|
|
|
|
export type PreferenceId = typeof PREFERENCE_IDS[number];
|
|
interface PreferencesMenuItem {
|
|
readonly id: PreferenceId;
|
|
readonly icon: IconType;
|
|
readonly label: string;
|
|
}
|
|
|
|
/**
|
|
* Items are in order of appearance
|
|
*/
|
|
const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
|
|
{ id: 'account', label: 'Account', icon: 'user' },
|
|
{ id: 'general', label: 'General', icon: 'settings' },
|
|
// { id: 'appearance', label: 'Appearance', icon: 'themes' },
|
|
{ id: 'security', label: 'Security', icon: 'security' },
|
|
{ id: 'extensions', label: 'Extensions', icon: 'tune' },
|
|
{ id: 'listed', label: 'Listed', icon: 'listed' },
|
|
// { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
|
|
// { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
|
|
// { id: 'get-free-month', label: 'Get a free month', icon: 'star' },
|
|
{ id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
|
|
];
|
|
|
|
const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
|
|
{ id: 'general', label: 'General', icon: 'settings' },
|
|
{ id: 'account', label: 'Account', icon: 'user' },
|
|
{ id: 'security', label: 'Security', icon: 'security' },
|
|
{ id: 'listed', label: 'Listed', icon: 'listed' },
|
|
{ id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
|
|
];
|
|
|
|
export class PreferencesMenu {
|
|
private _selectedPane: PreferenceId = 'account';
|
|
private _menu: PreferencesMenuItem[];
|
|
|
|
constructor(
|
|
private readonly _enableUnfinishedFeatures: boolean,
|
|
) {
|
|
this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS;
|
|
makeAutoObservable<PreferencesMenu, '_selectedPane' | '_twoFactorAuth'>(
|
|
this,
|
|
{
|
|
_twoFactorAuth: observable,
|
|
_selectedPane: observable,
|
|
}
|
|
);
|
|
}
|
|
|
|
get menuItems(): (PreferencesMenuItem & {
|
|
selected: boolean;
|
|
})[] {
|
|
return this._menu.map((p) => ({
|
|
...p,
|
|
selected: p.id === this._selectedPane,
|
|
}));
|
|
}
|
|
|
|
get selectedPaneId(): PreferenceId {
|
|
return (
|
|
this._menu.find((item) => item.id === this._selectedPane)?.id ?? 'account'
|
|
);
|
|
}
|
|
|
|
selectPane(key: PreferenceId): void {
|
|
this._selectedPane = key;
|
|
}
|
|
}
|