refactor: move settings dialog to global dialogs

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/global-dialogs/settings-dialog/editor/editor-settings-tab-content.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { SettingLine } from '../utils/setting-line'
+import { LigatureSettingButtonGroup } from './ligature-setting-button-group'
+import { LineWrappingSettingButtonGroup } from './line-wrapping-setting-button-group'
+import { SmartPasteSettingButtonGroup } from './smart-paste-setting-button-group'
+import { SyncScrollSettingButtonGroup } from './sync-scroll-setting-button-group'
+import React from 'react'
+import { ListGroup } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Shows the editor specific settings.
+ */
+export const EditorSettingsTabContent: React.FC = () => {
+  useTranslation()
+
+  return (
+    <ListGroup>
+      <SettingLine i18nKey={'editor.ligatures'}>
+        <LigatureSettingButtonGroup />
+      </SettingLine>
+      <SettingLine i18nKey={'editor.smartPaste'}>
+        <SmartPasteSettingButtonGroup />
+      </SettingLine>
+      <SettingLine i18nKey={'editor.syncScroll'}>
+        <SyncScrollSettingButtonGroup />
+      </SettingLine>
+      <SettingLine i18nKey={'editor.lineWrapping'}>
+        <LineWrappingSettingButtonGroup />
+      </SettingLine>
+    </ListGroup>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorLigatures } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change if ligatures should be used or not in the editor.
+ */
+export const LigatureSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.ligatures)
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} />
+}

frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorLineWrapping } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change if line wrapping should be used or not in the editor.
+ */
+export const LineWrappingSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.lineWrapping)
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} />
+}

frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorSmartPaste } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change if smart paste should be used in the editor.
+ */
+export const SmartPasteSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.smartPaste)
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} />
+}

frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setEditorSyncScroll } from '../../../../redux/editor/methods'
+import { OnOffButtonGroup } from '../utils/on-off-button-group'
+import React from 'react'
+
+/**
+ * Allows to change if editor and rendering should scroll in sync.
+ */
+export const SyncScrollSettingButtonGroup: React.FC = () => {
+  const enabled = useApplicationState((state) => state.editorConfig.syncScroll)
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} />
+}

frontend/src/components/global-dialogs/settings-dialog/global/__snapshots__/language-picker.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`language picker renders all languages 1`] = `
+<div>
+  <select
+    as="select"
+    class="w-auto form-select"
+    data-testid="language-picker"
+  >
+    <option
+      value="de"
+    >
+      Deutsch
+    </option>
+    <option
+      value="en"
+    >
+      English
+    </option>
+  </select>
+</div>
+`;

frontend/src/components/global-dialogs/settings-dialog/global/available-languages.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const availableLanguages = () => ['en']

frontend/src/components/global-dialogs/settings-dialog/global/dark-mode-setting-button-group.tsx

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { setDarkModePreference } from '../../../../redux/dark-mode/methods'
+import { DarkModePreference } from '../../../../redux/dark-mode/types'
+import { SettingsToggleButton } from '../utils/settings-toggle-button'
+import React, { useCallback } from 'react'
+import { ToggleButtonGroup } from 'react-bootstrap'
+
+/**
+ * Allows to change if the app should enforce dark mode, light mode or let the browser decide.
+ */
+const DarkModeSettingButtonGroup: React.FC = () => {
+  const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
+
+  const onSelect = useCallback((value: DarkModePreference) => setDarkModePreference(value), [])
+
+  return (
+    <ToggleButtonGroup type='radio' name='dark-mode'>
+      <SettingsToggleButton
+        onSelect={onSelect}
+        value={DarkModePreference.DARK}
+        selected={darkModePreference === DarkModePreference.DARK}
+        i18nKeyLabel={'settings.global.darkMode.dark.label'}
+        i18nKeyTooltip={'settings.global.darkMode.dark.tooltip'}
+      />
+      <SettingsToggleButton
+        onSelect={onSelect}
+        value={DarkModePreference.LIGHT}
+        selected={darkModePreference === DarkModePreference.LIGHT}
+        i18nKeyLabel={'settings.global.darkMode.light.label'}
+        i18nKeyTooltip={'settings.global.darkMode.light.tooltip'}
+      />
+      <SettingsToggleButton
+        onSelect={onSelect}
+        value={DarkModePreference.AUTO}
+        selected={darkModePreference === DarkModePreference.AUTO}
+        i18nKeyLabel={'settings.global.darkMode.browser.label'}
+        i18nKeyTooltip={'settings.global.darkMode.browser.tooltip'}
+      />
+    </ToggleButtonGroup>
+  )
+}
+
+export { DarkModeSettingButtonGroup }

frontend/src/components/global-dialogs/settings-dialog/global/global-settings-tab-content.tsx

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { SettingLine } from '../utils/setting-line'
+import { DarkModeSettingButtonGroup } from './dark-mode-setting-button-group'
+import { LanguagePicker } from './language-picker'
+import React from 'react'
+import { ListGroup } from 'react-bootstrap'
+
+/**
+ * Contains global settings that influence every page of the app.
+ */
+export const GlobalSettingsTabContent: React.FC = () => {
+  return (
+    <ListGroup>
+      <SettingLine i18nKey={'global.darkMode'}>
+        <DarkModeSettingButtonGroup />
+      </SettingLine>
+      <SettingLine i18nKey={'global.language'}>
+        <LanguagePicker />
+      </SettingLine>
+    </ListGroup>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useMemo } from 'react'
+
+interface LanguageOptionProps {
+  languageCode: string
+}
+
+/**
+ * Displays a select option for a language. The display name is determined using the browser API.
+ *
+ * @param languageCode the language code to display
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
+ */
+export const LanguageOption: React.FC<LanguageOptionProps> = ({ languageCode }) => {
+  const displayName = useMemo(
+    () => new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode),
+    [languageCode]
+  )
+
+  return <option value={languageCode}>{displayName}</option>
+}

frontend/src/components/global-dialogs/settings-dialog/global/language-picker.spec.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { mockI18n } from '../../../../test-utils/mock-i18n'
+import { LanguagePicker } from './language-picker'
+import { fireEvent, render, screen } from '@testing-library/react'
+import i18n from 'i18next'
+
+jest.mock('./available-languages', () => ({
+  availableLanguages: jest.fn(() => ['de', 'en'])
+}))
+
+describe('language picker', () => {
+  beforeAll(() => mockI18n())
+
+  it('renders all languages', () => {
+    const view = render(<LanguagePicker />)
+    expect(view.container).toMatchSnapshot()
+    expect(i18n.language).toBe('en')
+  })
+
+  it('can change the language', async () => {
+    render(<LanguagePicker />)
+
+    const option: HTMLOptionElement = await screen.findByText('Deutsch')
+
+    expect(option.selected).toBeFalsy()
+    expect(i18n.language).toBe('en')
+
+    fireEvent.change(screen.getByTestId('language-picker'), { target: { value: 'de' } })
+
+    expect(option.selected).toBeTruthy()
+    expect(i18n.language).toBe('de')
+  })
+})

frontend/src/components/global-dialogs/settings-dialog/global/language-picker.tsx

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { cypressId } from '../../../../utils/cypress-attribute'
+import { Logger } from '../../../../utils/logger'
+import { testId } from '../../../../utils/test-id'
+import { availableLanguages } from './available-languages'
+import { LanguageOption } from './language-option'
+import React, { useCallback, useMemo } from 'react'
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+const log = new Logger('LanguagePicker')
+
+/**
+ * This function checks if the wanted language code is supported by our translations.
+ * The language code that is provided by the browser can (but don't need to) contain the region.
+ * Some of our translations are region dependent (e.g. chinese-traditional and chinese-simplified).
+ * Therefore, we first need to check if the complete wanted language code is supported by our translations.
+ * If not, then we look if we at least have a region independent translation.
+ *
+ * @param allLanguages all available languages as ISO-639-1 codes
+ * @param wantedLanguage an ISO 639-1 standard language code
+ * @return The supported language code
+ */
+const findLanguageCode = (allLanguages: string[], wantedLanguage: string): string =>
+  allLanguages.find((supportedLanguage) => wantedLanguage === supportedLanguage) ??
+  allLanguages.find((supportedLanguage) => wantedLanguage.slice(0, 2) === supportedLanguage) ??
+  ''
+
+/**
+ * Renders the language picker.
+ */
+export const LanguagePicker: React.FC = () => {
+  const { i18n } = useTranslation()
+
+  const onChangeLang = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      i18n
+        .changeLanguage(event.currentTarget.value)
+        .catch((error: Error) => log.error('Error while switching language', error))
+    },
+    [i18n]
+  )
+
+  const allLanguages = useMemo(() => availableLanguages(), [])
+
+  const languageCode = useMemo(() => findLanguageCode(allLanguages, i18n.language), [allLanguages, i18n.language])
+
+  const languageOptions = useMemo(
+    () => allLanguages.map((language) => <LanguageOption languageCode={language} key={language} />),
+    [allLanguages]
+  )
+
+  return (
+    <Form.Select
+      as='select'
+      className='w-auto'
+      value={languageCode}
+      onChange={onChangeLang}
+      {...testId('language-picker')}
+      {...cypressId('language-picker')}>
+      {languageOptions}
+    </Form.Select>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/settings-button.tsx

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useBooleanState } from '../../../hooks/common/use-boolean-state'
+import { useOutlineButtonVariant } from '../../../hooks/dark-mode/use-outline-button-variant'
+import { cypressId } from '../../../utils/cypress-attribute'
+import { IconButton } from '../../common/icon-button/icon-button'
+import { SettingsModal } from './settings-modal'
+import React, { Fragment } from 'react'
+import type { ButtonProps } from 'react-bootstrap'
+import { Gear as IconGear } from 'react-bootstrap-icons'
+
+export type SettingsButtonProps = Omit<ButtonProps, 'onClick'>
+/**
+ * Renders a button that opens a settings modal.
+ */
+export const SettingsButton: React.FC<SettingsButtonProps> = (props) => {
+  const [show, showModal, hideModal] = useBooleanState(false)
+  const buttonVariant = useOutlineButtonVariant()
+
+  return (
+    <Fragment>
+      <IconButton
+        {...props}
+        {...cypressId('settingsButton')}
+        onClick={showModal}
+        icon={IconGear}
+        variant={buttonVariant}
+      />
+      <SettingsModal show={show} onHide={hideModal} />
+    </Fragment>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/settings-modal.tsx

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useTranslatedText } from '../../../hooks/common/use-translated-text'
+import type { CommonModalProps } from '../../common/modals/common-modal'
+import { CommonModal } from '../../common/modals/common-modal'
+import { EditorSettingsTabContent } from './editor/editor-settings-tab-content'
+import { GlobalSettingsTabContent } from './global/global-settings-tab-content'
+import React from 'react'
+import { Modal, Tab, Tabs } from 'react-bootstrap'
+import { Gear as IconGear } from 'react-bootstrap-icons'
+
+/**
+ * Shows global and scope specific settings
+ *
+ * @param show if the modal should be visible
+ * @param onHide callback that is executed if the modal should be closed
+ */
+export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
+  const globalLabelTitle = useTranslatedText('settings.global.label')
+  const editorLabelTitle = useTranslatedText('settings.editor.label')
+
+  return (
+    <CommonModal
+      show={show}
+      modalSize={'lg'}
+      onHide={onHide}
+      titleIcon={IconGear}
+      titleI18nKey={'settings.title'}
+      showCloseButton={true}>
+      <Modal.Body>
+        <Tabs navbar={false} variant={'tabs'} defaultActiveKey={'global'}>
+          <Tab title={globalLabelTitle} eventKey={'global'}>
+            <GlobalSettingsTabContent />
+          </Tab>
+          <Tab title={editorLabelTitle} eventKey={'editor'}>
+            <EditorSettingsTabContent />
+          </Tab>
+        </Tabs>
+      </Modal.Body>
+    </CommonModal>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings On-Off Button Group can switch value 1`] = `
+<div>
+  <div
+    class="btn-group"
+    role="group"
+  >
+    <button
+      class="btn btn-outline-secondary"
+      data-testid="onOffButtonGroupOn"
+      name="dark-mode"
+      title="common.on"
+      type="radio"
+    >
+      common.on
+    </button>
+    <button
+      class="btn btn-secondary"
+      data-testid="onOffButtonGroupOff"
+      name="dark-mode"
+      title="common.off"
+      type="radio"
+    >
+      common.off
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Settings On-Off Button Group can switch value 2`] = `
+<div>
+  <div
+    class="btn-group"
+    role="group"
+  >
+    <button
+      class="btn btn-secondary"
+      data-testid="onOffButtonGroupOn"
+      name="dark-mode"
+      title="common.on"
+      type="radio"
+    >
+      common.on
+    </button>
+    <button
+      class="btn btn-outline-secondary"
+      data-testid="onOffButtonGroupOff"
+      name="dark-mode"
+      title="common.off"
+      type="radio"
+    >
+      common.off
+    </button>
+  </div>
+</div>
+`;

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { mockI18n } from '../../../../test-utils/mock-i18n'
+import { OnOffButtonGroup } from './on-off-button-group'
+import { act, render, screen } from '@testing-library/react'
+
+describe('Settings On-Off Button Group', () => {
+  beforeAll(mockI18n)
+
+  it('can switch value', async () => {
+    let value = false
+    const onSelect = (newValue: boolean) => (value = newValue)
+
+    const view = render(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    expect(view.container).toMatchSnapshot()
+    const onButton = await screen.findByTestId('onOffButtonGroupOn')
+    await act<void>(() => {
+      onButton.click()
+    })
+    expect(value).toBeTruthy()
+
+    view.rerender(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    expect(view.container).toMatchSnapshot()
+    const offButton = await screen.findByTestId('onOffButtonGroupOff')
+    await act<void>(() => {
+      offButton.click()
+    })
+    expect(value).toBeFalsy()
+  })
+})

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { testId } from '../../../../utils/test-id'
+import { SettingsToggleButton } from './settings-toggle-button'
+import React, { useCallback, useMemo } from 'react'
+import { ToggleButtonGroup } from 'react-bootstrap'
+
+enum OnOffState {
+  ON,
+  OFF
+}
+
+export interface OnOffButtonGroupProps {
+  value: boolean
+  onSelect: (value: boolean) => void
+}
+
+/**
+ * Shows a button group that is used to toggle a setting on or off.
+ *
+ * @param onSelect callback that is executed if the on/off value has changed
+ * @param value the current on/off value that should be visible
+ */
+export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, value }) => {
+  const buttonGroupValue = useMemo(() => (value ? OnOffState.ON : OnOffState.OFF), [value])
+  const onButtonSelect = useCallback(
+    (value: number) => {
+      onSelect(value === OnOffState.ON)
+    },
+    [onSelect]
+  )
+
+  return (
+    <ToggleButtonGroup type='radio' name='dark-mode' value={buttonGroupValue}>
+      <SettingsToggleButton
+        onSelect={onButtonSelect}
+        selected={buttonGroupValue === OnOffState.ON}
+        value={OnOffState.ON}
+        i18nKeyTooltip={'common.on'}
+        i18nKeyLabel={'common.on'}
+        {...testId('onOffButtonGroupOn')}
+      />
+      <SettingsToggleButton
+        onSelect={onButtonSelect}
+        selected={buttonGroupValue === OnOffState.OFF}
+        value={OnOffState.OFF}
+        i18nKeyTooltip={'common.off'}
+        i18nKeyLabel={'common.off'}
+        {...testId('onOffButtonGroupOff')}
+      />
+    </ToggleButtonGroup>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/utils/setting-line.tsx

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { PropsWithChildren } from 'react'
+import React from 'react'
+import { Col, ListGroup, Row } from 'react-bootstrap'
+import { Trans } from 'react-i18next'
+
+export interface SettingLineProps {
+  i18nKey: string
+}
+
+/**
+ * Renders one setting with label and help text
+ *
+ * @param i18nKey The i18n key that is used as namespace for label and help
+ * @param children The setting control that should be placed in this line
+ */
+export const SettingLine: React.FC<PropsWithChildren<SettingLineProps>> = ({ i18nKey, children }) => {
+  return (
+    <ListGroup.Item>
+      <Row>
+        <Col md={3}>
+          <Trans i18nKey={`settings.${i18nKey}.label`} />
+        </Col>
+        <Col md={4}>{children}</Col>
+        <Col md={5}>
+          <Trans i18nKey={`settings.${i18nKey}.help`} />
+        </Col>
+      </Row>
+    </ListGroup.Item>
+  )
+}

frontend/src/components/global-dialogs/settings-dialog/utils/settings-toggle-button.tsx

@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useTranslatedText } from '../../../../hooks/common/use-translated-text'
+import type { PropsWithDataTestId } from '../../../../utils/test-id'
+import React, { useCallback } from 'react'
+import type { ButtonProps } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
+import { Trans } from 'react-i18next'
+
+type DarkModeToggleButtonProps = Omit<ButtonProps, 'onSelect'> &
+  PropsWithDataTestId & {
+    onSelect: (value: number) => void
+    selected: boolean
+    value: number
+    i18nKeyLabel: string
+    i18nKeyTooltip: string
+  }
+
+/**
+ * A button that is used in a toggle group to change settings.
+ *
+ * @param settingI18nKey The partial i18n key in the "settings" namespace for the setting
+ * @param selected Defines if the button should be rendered as selected
+ * @param onSelect Callback that is executed when the button is selected
+ * @param value The value of the button that is sent back through the onSelect callback
+ * @param props Other button props
+ * @constructor
+ */
+export const SettingsToggleButton = ({
+  i18nKeyLabel,
+  i18nKeyTooltip,
+  selected,
+  onSelect,
+  value,
+  ...props
+}: DarkModeToggleButtonProps) => {
+  const title = useTranslatedText(i18nKeyTooltip)
+
+  const onChange = useCallback(() => {
+    if (!selected) {
+      onSelect(value)
+    }
+  }, [onSelect, selected, value])
+
+  return (
+    <Button {...props} variant={selected ? 'secondary' : 'outline-secondary'} title={title} onClick={onChange}>
+      <Trans i18nKey={i18nKeyLabel} />
+    </Button>
+  )
+}