Skip to content

Commit

Permalink
Refactor Settings into separate dialogs
Browse files Browse the repository at this point in the history 
- now all the subsettings dialogs are stacking, so you can go back with
  escape
- resolves 3868
  • Loading branch information
@maxphilippov
maxphilippov committed Oct 10, 2024
1 parent bdc4c16 commit 31906b5
Showing 1 changed file with 149 additions and 136 deletions.
285 changes: 149 additions & 136 deletions packages/frontend/src/components/Settings/Settings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useEffect } from 'react'

import { useSettingsStore } from '../../stores/settings'
import { SendBackupDialog } from '../dialogs/SetupMultiDevice'
Expand All @@ -20,19 +20,11 @@ import useTranslationFunction from '../../hooks/useTranslationFunction'

import type { DialogProps } from '../../contexts/DialogContext'

type SettingsView =
| 'main'
| 'chats_and_media'
| 'notifications'
| 'appearance'
| 'advanced'

export default function Settings({ onClose }: DialogProps) {
const { openDialog } = useDialog()
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const settingsStore = useSettingsStore()[0]!
const tx = useTranslationFunction()
const [settingsMode, setSettingsMode] = useState<SettingsView>('main')

useEffect(() => {
if (window.__settingsOpened) {
Expand All @@ -48,133 +40,154 @@ export default function Settings({ onClose }: DialogProps) {

return (
<Dialog onClose={onClose} fixed width={400}>
{settingsMode === 'main' && (
<>
<DialogHeader title={tx('menu_settings')} onClose={onClose} />
<DialogBody>
<Profile settingsStore={settingsStore} />
<SettingsIconButton
icon='person'
onClick={() => {
openDialog(EditProfileDialog, {
settingsStore,
})
}}
>
{tx('pref_edit_profile')}
</SettingsIconButton>
<SettingsSeparator />
<SettingsIconButton
icon='forum'
onClick={() => setSettingsMode('chats_and_media')}
>
{tx('pref_chats_and_media')}
</SettingsIconButton>
<SettingsIconButton
icon='bell'
onClick={() => setSettingsMode('notifications')}
>
{tx('pref_notifications')}
</SettingsIconButton>
<SettingsIconButton
icon='brightness-6'
onClick={() => setSettingsMode('appearance')}
>
{tx('pref_appearance')}
</SettingsIconButton>
<SettingsIconButton
icon='devices'
onClick={() => {
openDialog(SendBackupDialog)
onClose()
}}
>
{tx('multidevice_title')}
</SettingsIconButton>
<ConnectivityButton />
<SettingsIconButton
icon='code-tags'
onClick={() => setSettingsMode('advanced')}
>
{tx('menu_advanced')}
</SettingsIconButton>
<SettingsSeparator />
{!runtime.getRuntimeInfo().isMac && (
<SettingsIconButton
icon='favorite'
onClick={() => runtime.openLink(donationUrl)}
isLink
>
{tx('donate')}
</SettingsIconButton>
)}
<SettingsIconButton
icon='question_mark'
onClick={() => runtime.openHelpWindow()}
>
{tx('menu_help')}
</SettingsIconButton>
<SettingsIconButton icon='info' onClick={() => openDialog(About)}>
{tx('global_menu_help_about_desktop')}
</SettingsIconButton>
</DialogBody>
</>
)}
{settingsMode === 'chats_and_media' && (
<>
<DialogHeader
title={tx('pref_chats_and_media')}
onClickBack={() => setSettingsMode('main')}
onClose={onClose}
/>
<DialogBody>
<ChatsAndMedia
settingsStore={settingsStore}
desktopSettings={settingsStore.desktopSettings}
/>
</DialogBody>
</>
)}
{settingsMode === 'notifications' && (
<>
<DialogHeader
title={tx('pref_notifications')}
onClickBack={() => setSettingsMode('main')}
onClose={onClose}
/>
<DialogBody>
<Notifications desktopSettings={settingsStore.desktopSettings} />
</DialogBody>
</>
)}
{settingsMode === 'appearance' && (
<>
<DialogHeader
title={tx('pref_appearance')}
onClickBack={() => setSettingsMode('main')}
onClose={onClose}
/>
<DialogBody>
<Appearance
rc={settingsStore.rc}
desktopSettings={settingsStore.desktopSettings}
settingsStore={settingsStore}
/>
</DialogBody>
</>
)}
{settingsMode === 'advanced' && (
<>
<DialogHeader
title={tx('menu_advanced')}
onClickBack={() => setSettingsMode('main')}
onClose={onClose}
/>
<DialogBody>
<Advanced settingsStore={settingsStore} />
</DialogBody>
</>
)}
<DialogHeader title={tx('menu_settings')} onClose={onClose} />
<DialogBody>
<Profile settingsStore={settingsStore} />
<SettingsIconButton
icon='person'
onClick={() => {
openDialog(EditProfileDialog, {
settingsStore,
})
}}
>
{tx('pref_edit_profile')}
</SettingsIconButton>
<SettingsSeparator />
<SettingsIconButton
icon='forum'
onClick={() => openDialog(SettingsDialogChatsAndMedia)}
>
{tx('pref_chats_and_media')}
</SettingsIconButton>
<SettingsIconButton
icon='bell'
onClick={() => openDialog(SettingsDialogNotifications)}
>
{tx('pref_notifications')}
</SettingsIconButton>
<SettingsIconButton
icon='brightness-6'
onClick={() => openDialog(SettingsDialogAppearance)}
>
{tx('pref_appearance')}
</SettingsIconButton>
<SettingsIconButton
icon='devices'
onClick={() => {
openDialog(SendBackupDialog)
onClose()
}}
>
{tx('multidevice_title')}
</SettingsIconButton>
<ConnectivityButton />
<SettingsIconButton
icon='code-tags'
onClick={() => openDialog(SettingsDialogAdvanced)}
>
{tx('menu_advanced')}
</SettingsIconButton>
<SettingsSeparator />
{!runtime.getRuntimeInfo().isMac && (
<SettingsIconButton
icon='favorite'
onClick={() => runtime.openLink(donationUrl)}
isLink
>
{tx('donate')}
</SettingsIconButton>
)}
<SettingsIconButton
icon='question_mark'
onClick={() => runtime.openHelpWindow()}
>
{tx('menu_help')}
</SettingsIconButton>
<SettingsIconButton icon='info' onClick={() => openDialog(About)}>
{tx('global_menu_help_about_desktop')}
</SettingsIconButton>
</DialogBody>
</Dialog>
)
}

function SettingsDialogChatsAndMedia({ onClose }: DialogProps) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const settingsStore = useSettingsStore()[0]!
const tx = useTranslationFunction()
return (
<Dialog onClose={onClose} fixed width={400}>
<DialogHeader
title={tx('pref_chats_and_media')}
onClickBack={onClose}
onClose={onClose}
/>
<DialogBody>
<ChatsAndMedia
settingsStore={settingsStore}
desktopSettings={settingsStore.desktopSettings}
/>
</DialogBody>
</Dialog>
)
}

function SettingsDialogNotifications({ onClose }: DialogProps) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const settingsStore = useSettingsStore()[0]!
const tx = useTranslationFunction()
return (
<Dialog onClose={onClose} fixed width={400}>
<DialogHeader
title={tx('pref_notifications')}
onClickBack={onClose}
onClose={onClose}
/>
<DialogBody>
<Notifications desktopSettings={settingsStore.desktopSettings} />
</DialogBody>
</Dialog>
)
}

function SettingsDialogAppearance({ onClose }: DialogProps) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const settingsStore = useSettingsStore()[0]!
const tx = useTranslationFunction()

return (
<Dialog onClose={onClose} fixed width={400}>
<DialogHeader
title={tx('pref_appearance')}
onClickBack={onClose}
onClose={onClose}
/>
<DialogBody>
<Appearance
rc={settingsStore.rc}
desktopSettings={settingsStore.desktopSettings}
settingsStore={settingsStore}
/>
</DialogBody>
</Dialog>
)
}

function SettingsDialogAdvanced({ onClose }: DialogProps) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const settingsStore = useSettingsStore()[0]!
const tx = useTranslationFunction()
return (
<Dialog onClose={onClose} fixed width={400}>
<DialogHeader
title={tx('menu_advanced')}
onClickBack={onClose}
onClose={onClose}
/>
<DialogBody>
<Advanced settingsStore={settingsStore} />
</DialogBody>
</Dialog>
)
}

0 comments on commit 31906b5

Please sign in to comment.