refactor: better organise options orders

2026-07-03 05:03:19 +02:00 · 2024-08-19 22:48:33 +01:00
parent ccff5d3f6a
commit f48b7044ac
10 changed files with 236 additions and 188 deletions
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -7,6 +7,71 @@
@import 'settings/main';
@import 'marketplace/main';

+.Overlay {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+.Modal {
+  @include themed {
+    color: t($color);
+  }
+
+  box-shadow: 0 0 20px rgb(0 0 0 / 30%);
+  opacity: 1;
+  z-index: -2;
+  transition-timing-function: ease-in;
+  border-radius: map-get($modal, 'border-radius');
+  user-select: none;
+  overflow-y: auto;
+  transform: scale(0);
+  transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
+
+  &:focus {
+    outline: 0;
+  }
+
+  .modalInfoPage {
+    user-select: text;
+  }
+}
+
+.closePositioning {
+  position: absolute;
+  top: 3rem;
+  right: 3rem;
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+/* modal transition */
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
+}
+
+#modal {
+  height: 80vh;
+  width: clamp(60vw, 1400px, 90vw);
+
+  @include themed {
+    background-color: t($modal-background);
+  }
+}
+
 .closePositioning {
  position: absolute;
  top: 3rem;
--- a/src/components/Layout/Settings/Section/Section.jsx
+++ b/src/components/Layout/Settings/Section/Section.jsx
@@ -11,15 +11,14 @@ function Section({ id, title, subtitle, icon, onClick, children }) {
      onClick();
    }
  };
-  

  return (
    <div className="moreSettings" onClick={handleClick}>
      <div className="left">
        {icon}
        <div className="content">
-          <span className="title">{title}</span>
-          <span className="subtitle">{subtitle}</span>
+          <span className="text-xl font-semibold">{title}</span>
+          <span className="text-neutral-800 dark:text-neutral-300 ">{subtitle}</span>
        </div>
      </div>
      <div className="action">
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -320,6 +320,13 @@ const GreetingOptions = () => {
        </>
      ) : (
        <>
+          <Section
+            id="events"
+            title={variables.getMessage(`${GREETING_SECTION}.events`)}
+            subtitle={variables.getMessage(`${GREETING_SECTION}.events_description`)}
+            onClick={() => setEvents(true)}
+            icon={<MdEventNote />}
+          />
          <PreferencesWrapper
            setting="greeting"
            zoomSetting="zoomGreeting"
@@ -328,13 +335,6 @@ const GreetingOptions = () => {
          >
            <AdditionalOptions />
          </PreferencesWrapper>
-          <Section
-            id="events"
-            title={variables.getMessage(`${GREETING_SECTION}.events`)}
-            subtitle={variables.getMessage(`${GREETING_SECTION}.events_description`)}
-            onClick={() => setEvents(true)}
-            icon={<MdEventNote />}
-          />
        </>
      )}
    </>
--- a/src/features/misc/sections/Advanced.jsx
+++ b/src/features/misc/sections/Advanced.jsx
@@ -7,6 +7,7 @@ import {
  MdRestartAlt as ResetIcon,
  MdDataUsage,
  MdError,
+  MdBrush,
 } from 'react-icons/md';

 import { exportSettings, importSettings } from 'utils/settings';
@@ -14,7 +15,14 @@ import { exportSettings, importSettings } from 'utils/settings';
 import { FileUpload, Text, Switch, Dropdown } from 'components/Form/Settings';
 import { ResetModal, Button } from 'components/Elements';

-import { Header, Section, Row, Content, Action } from 'components/Layout/Settings';
+import {
+  Header,
+  Section,
+  Row,
+  Content,
+  Action,
+  PreferencesWrapper,
+} from 'components/Layout/Settings';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';

 import time_zones from 'features/time/timezones.json';
@@ -63,14 +71,10 @@ function AdvancedOptions() {
            <MdError />

            <span className="title">
-              {variables.getMessage(
-                'settings:sections.advanced.preview_data_disabled.title',
-              )}
+              {variables.getMessage('settings:sections.advanced.preview_data_disabled.title')}
            </span>
            <span className="subtitle">
-              {variables.getMessage(
-                'settings:sections.advanced.preview_data_disabled.description',
-              )}
+              {variables.getMessage('settings:sections.advanced.preview_data_disabled.description')}
            </span>
          </div>
        </div>
@@ -94,8 +98,8 @@ function AdvancedOptions() {

  return (
    <>
-      {header}
-      {subSection === "data" ? (
+      {/*{header}*/}
+      {subSection === 'data' && (
        <>
          <Data />
          <Modal
@@ -109,87 +113,82 @@ function AdvancedOptions() {
            <ResetModal modalClose={() => setResetModal(false)} />
          </Modal>
        </>
-      ) : (
+      )}
+      {subSection === 'custom-css' && (
+        <PreferencesWrapper>
+          <span className="text-3xl font-semibold tracking-tight">
+            {variables.getMessage('settings:sections.advanced.custom_css')}
+          </span>
+          <Text name="customcss" textarea={true} category="other" customcss={true} />
+        </PreferencesWrapper>
+      )}
+      {subSection === '' && (
        <>
          <Section
            id="data"
            title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
            subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
-            onClick={() => setData(true)}
            icon={<MdDataUsage />}
          />
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.offline_mode')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.offline_subtitle',
-              )}
-            />
-            <Action>
-              <Switch name="offlineMode" element=".other" />
-            </Action>
-          </Row>
+          <Section
+            id="custom-css"
+            title={variables.getMessage('settings:sections.advanced.custom_css')}
+            subtitle={variables.getMessage('settings:sections.advanced.custom_css_subtitle')}
+            icon={<MdBrush />}
+          />
+          <PreferencesWrapper>
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.offline_mode')}
+                subtitle={variables.getMessage('settings:sections.advanced.offline_subtitle')}
+              />
+              <Action>
+                <Switch name="offlineMode" element=".other" />
+              </Action>
+            </Row>

-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.timezone.title')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.timezone.subtitle',
-              )}
-            />
-            <Action>
-              <Dropdown
-                name="timezone"
-                category="timezone"
-                items={[
-                  {
-                    value: 'auto',
-                    text: variables.getMessage(
-                      'settings:sections.advanced.timezone.automatic',
-                    ),
-                  },
-                  ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
-                ]}
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.timezone.title')}
+                subtitle={variables.getMessage('settings:sections.advanced.timezone.subtitle')}
              />
-            </Action>
-          </Row>
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.tab_name')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.tab_name_subtitle',
-              )}
-            />
-            <Action>
-              <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
-            </Action>
-          </Row>
-          <Row>
-            <Content
-              title={variables.getMessage('settings:sections.advanced.custom_css')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.custom_css_subtitle',
-              )}
-            />
-            <Action>
-              <Text name="customcss" textarea={true} category="other" customcss={true} />
-            </Action>
-          </Row>
-          <Row final={true}>
-            <Content
-              title={variables.getMessage('settings:sections.experimental.title')}
-              subtitle={variables.getMessage(
-                'settings:sections.advanced.experimental_warning',
-              )}
-            />
-            <Action>
-              <Switch
-                name="experimental"
-                text={variables.getMessage('settings:enabled')}
-                element=".other"
+              <Action>
+                <Dropdown
+                  name="timezone"
+                  category="timezone"
+                  items={[
+                    {
+                      value: 'auto',
+                      text: variables.getMessage('settings:sections.advanced.timezone.automatic'),
+                    },
+                    ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
+                  ]}
+                />
+              </Action>
+            </Row>
+            <Row>
+              <Content
+                title={variables.getMessage('settings:sections.advanced.tab_name')}
+                subtitle={variables.getMessage('settings:sections.advanced.tab_name_subtitle')}
              />
-            </Action>
-          </Row>
+              <Action>
+                <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
+              </Action>
+            </Row>
+            <Row final={true}>
+              <Content
+                title={variables.getMessage('settings:sections.experimental.title')}
+                subtitle={variables.getMessage('settings:sections.advanced.experimental_warning')}
+              />
+              <Action>
+                <Switch
+                  name="experimental"
+                  text={variables.getMessage('settings:enabled')}
+                  element=".other"
+                />
+              </Action>
+            </Row>
+          </PreferencesWrapper>
        </>
      )}
    </>
--- a/src/features/misc/sections/Appearance.jsx
+++ b/src/features/misc/sections/Appearance.jsx
@@ -3,7 +3,14 @@ import { memo, useState } from 'react';
 import variables from 'config/variables';

 import { Checkbox, Dropdown, Radio, Slider, Text } from 'components/Form/Settings';
-import { Header, Section, Row, Content, Action } from 'components/Layout/Settings';
+import {
+  Header,
+  Section,
+  Row,
+  Content,
+  Action,
+  PreferencesWrapper,
+} from 'components/Layout/Settings';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';

 import { MdAccessibility } from 'react-icons/md';
@@ -19,9 +26,7 @@ function AppearanceOptions() {
      <Row>
        <Content
          title={variables.getMessage('settings:sections.appearance.theme.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.theme.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.theme.description')}
        />
        <Action>
          <Radio
@@ -53,9 +58,7 @@ function AppearanceOptions() {
      <Row>
        <Content
          title={variables.getMessage('settings:sections.appearance.font.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.font.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.font.description')}
        />
        <Action>
          <Checkbox
@@ -71,9 +74,7 @@ function AppearanceOptions() {
          />
          {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
          <Dropdown
-            label={variables.getMessage(
-              'settings:sections.appearance.font.weight.title',
-            )}
+            label={variables.getMessage('settings:sections.appearance.font.weight.title')}
            name="fontweight"
            category="other"
            items={[
@@ -112,29 +113,21 @@ function AppearanceOptions() {
            ]}
          />
          <Dropdown
-            label={variables.getMessage(
-              'settings:sections.appearance.font.style.title',
-            )}
+            label={variables.getMessage('settings:sections.appearance.font.style.title')}
            name="fontstyle"
            category="other"
            items={[
              {
                value: 'normal',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.normal',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.normal'),
              },
              {
                value: 'italic',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.italic',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.italic'),
              },
              {
                value: 'oblique',
-                text: variables.getMessage(
-                  'settings:sections.appearance.font.style.oblique',
-                ),
+                text: variables.getMessage('settings:sections.appearance.font.style.oblique'),
              },
            ]}
          />
@@ -148,9 +141,7 @@ function AppearanceOptions() {
      <Row final={true}>
        <Content
          title={variables.getMessage('settings:sections.appearance.style.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.style.description',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.style.description')}
        />
        <Action>
          <Radio
@@ -177,12 +168,8 @@ function AppearanceOptions() {
    return (
      <Row final={true}>
        <Content
-          title={variables.getMessage(
-            'settings:sections.appearance.accessibility.title',
-          )}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.accessibility.description',
-          )}
+          title={variables.getMessage('settings:sections.appearance.accessibility.title')}
+          subtitle={variables.getMessage('settings:sections.appearance.accessibility.description')}
        />
        <Action>
          <Dropdown
@@ -213,9 +200,7 @@ function AppearanceOptions() {
            ]}
          />
          <Checkbox
-            text={variables.getMessage(
-              'settings:sections.appearance.accessibility.animations',
-            )}
+            text={variables.getMessage('settings:sections.appearance.accessibility.animations')}
            name="animations"
            category="other"
          />
@@ -230,10 +215,7 @@ function AppearanceOptions() {
            max="5000"
            marks={values.toast}
            display={
-              ' ' +
-              variables.getMessage(
-                'settings:sections.appearance.accessibility.milliseconds',
-              )
+              ' ' + variables.getMessage('settings:sections.appearance.accessibility.milliseconds')
            }
          />
        </Action>
@@ -246,42 +228,37 @@ function AppearanceOptions() {
    header = (
      <Header
        title={variables.getMessage('settings:sections.appearance.title')}
-        secondaryTitle={variables.getMessage(
-          'settings:sections.appearance.accessibility.title',
-        )}
+        secondaryTitle={variables.getMessage('settings:sections.appearance.accessibility.title')}
        goBack={() => setAccessibility(false)}
        report={false}
      />
    );
  } else {
    header = (
-      <Header
-        title={variables.getMessage('settings:sections.appearance.title')}
-        report={false}
-      />
+      <Header title={variables.getMessage('settings:sections.appearance.title')} report={false} />
    );
  }
  return (
    <>
      {header}
-      {subSection === "accessibility" ? (
+      {subSection === 'accessibility' ? (
        <AccessibilityOptions />
      ) : (
        <>
          <Section
            id="accessibility"
-            title={variables.getMessage(
-              'settings:sections.appearance.accessibility.title',
-            )}
+            title={variables.getMessage('settings:sections.appearance.accessibility.title')}
            subtitle={variables.getMessage(
              'settings:sections.appearance.accessibility.description',
            )}
            icon={<MdAccessibility />}
            onClick={() => setAccessibility(true)}
          />
-          <ThemeSelection />
-          <FontOptions />
-          <WidgetStyle />
+          <PreferencesWrapper>
+            <ThemeSelection />
+            <FontOptions />
+            <WidgetStyle />
+          </PreferencesWrapper>
        </>
      )}
    </>
--- a/src/features/misc/sections/Language.jsx
+++ b/src/features/misc/sections/Language.jsx
@@ -4,8 +4,9 @@ import { useState, useEffect } from 'react';
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import { Radio } from 'components/Form/Settings';
 import { languages } from 'lib/i18n';
+import { PreferencesWrapper } from 'components/Layout';

-const options = languages.map(id => {
+const options = languages.map((id) => {
  const native = new Intl.DisplayNames([id], { type: 'language' });
  // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
  const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
@@ -14,8 +15,8 @@ const options = languages.map(id => {
    subname: current.of(id),
    value: id,
  };
-})
-console.log(options)
+});
+console.log(options);

 function LanguageOptions() {
  const [quoteLanguages, setQuoteLanguages] = useState([
@@ -43,7 +44,7 @@ function LanguageOptions() {
  }, []);

  return (
-    <>
+    <PreferencesWrapper>
      <div className="modalHeader">
        <span className="mainTitle">
          {variables.getMessage('settings:sections.language.title')}
@@ -63,9 +64,7 @@ function LanguageOptions() {
      <div className="languageSettings">
        <Radio name="language" options={options} element=".other" />
      </div>
-      <span className="mainTitle">
-        {variables.getMessage('settings:sections.language.quote')}
-      </span>
+      {/*<span className="mainTitle">{variables.getMessage('settings:sections.language.quote')}</span>
      <div className="languageSettings">
        <Radio
          name="quoteLanguage"
@@ -75,8 +74,8 @@ function LanguageOptions() {
          defaultValue={quoteLanguages[0].name}
          category="quote"
        />
-      </div>
-    </>
+      </div>*/}
+    </PreferencesWrapper>
  );
 }

--- a/src/features/misc/sections/Overview.jsx
+++ b/src/features/misc/sections/Overview.jsx
@@ -14,6 +14,7 @@ import Message from './overview_skeletons/Message';
 import EventBus from 'utils/eventbus';

 import defaults from 'config/default';
+import { PreferencesWrapper } from 'components/Layout';

 const widget_name = {
  greeting: variables.getMessage('settings:sections.greeting.title'),
@@ -31,15 +32,13 @@ const SortableItem = sortableElement(({ value }) => (
  </li>
 ));

-
 const SortableContainer = sortableContainer(({ children }) => (
  <ul className="sortableContainer">{children}</ul>
 ));

 const Overview = () => {
  const [items, setItems] = useState(
-    () =>
-      JSON.parse(localStorage.getItem('order')) || defaults.order
+    () => JSON.parse(localStorage.getItem('order')) || defaults.order,
  );

  const arrayMove = (array, oldIndex, newIndex) => {
@@ -94,10 +93,8 @@ const Overview = () => {
  }, [items]);

  return (
-    <>
-      <span className="mainTitle">
-        {variables.getMessage('marketplace:product.overview')}
-      </span>
+    <PreferencesWrapper>
+      <span className="mainTitle">{variables.getMessage('marketplace:product.overview')}</span>
      <div className="overviewGrid">
        <div>
          <span className="title">{variables.getMessage('welcome:buttons.preview')}</span>
@@ -117,9 +114,7 @@ const Overview = () => {
          </div>
        </div>
        <div>
-          <span className="title">
-            {variables.getMessage('settings:sections.order.title')}
-          </span>
+          <span className="title">{variables.getMessage('settings:sections.order.title')}</span>
          <SortableContainer
            onSortEnd={onSortEnd}
            lockAxis="y"
@@ -135,7 +130,7 @@ const Overview = () => {
          </SortableContainer>
        </div>
      </div>
-    </>
+    </PreferencesWrapper>
  );
 };

--- a/src/features/navbar/options/NavbarOptions.jsx
+++ b/src/features/navbar/options/NavbarOptions.jsx
@@ -8,7 +8,8 @@ import { Checkbox, Dropdown } from 'components/Form';
 import EventBus from 'utils/eventbus';

 import { Row, Content, Action } from 'components/Layout/Settings/Item';
-import { Header, PreferencesWrapper } from 'components/Layout/Settings';
+import { Header, PreferencesWrapper, Section } from 'components/Layout/Settings';
+import { useTab } from 'components/Elements/MainModal/backend/TabContext';

 import AppsOptions from './AppsOptions';
 import defaults from './default';
@@ -21,6 +22,8 @@ function NavbarOptions() {
    localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled,
  );

+  const { subSection } = useTab();
+
  const NAVBAR_SECTION = 'settings:sections.appearance.navbar';

  const AdditionalSettings = () => {
@@ -158,19 +161,32 @@ function NavbarOptions() {

  return (
    <>
-      <Header
-        title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
-        setting="navbar"
-        category="widgets"
-        zoomSetting="zoomNavbar"
-        zoomCategory="navbar"
-      />
-      <PreferencesWrapper visibilityToggle={false}>
-        <AdditionalSettings />
-        <NavbarOptions />
-        <RefreshOptions />
-        <AppsOptions appsEnabled={appsEnabled} />
-      </PreferencesWrapper>
+      {subSection !== 'apps' ? (
+        <>
+          <Header
+            title={variables.getMessage(`${NAVBAR_SECTION}.title`)}
+            setting="navbar"
+            category="widgets"
+            zoomSetting="zoomNavbar"
+            zoomCategory="navbar"
+          />
+          <Section
+            id="apps"
+            icon={<MdOutlineApps />}
+            title={variables.getMessage('widgets.navbar.apps.title')}
+            subtitle={variables.getMessage('settings:sections.appearance.navbar.apps_subtitle')}
+          />
+          <PreferencesWrapper visibilityToggle={false}>
+            <AdditionalSettings />
+            <NavbarOptions />
+            <RefreshOptions />
+          </PreferencesWrapper>
+        </>
+      ) : (
+        <PreferencesWrapper>
+          <AppsOptions appsEnabled={appsEnabled} />
+        </PreferencesWrapper>
+      )}
    </>
  );
 }
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -137,6 +137,14 @@ const QuoteOptions = () => {

      {subSection !== 'source' && (
        <>
+          <Section
+            id="source"
+            icon={<MdSource />}
+            title={variables.getMessage('settings:sections.background.source.title')}
+            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
+          >
+            <SourceDropdown />
+          </Section>
          <PreferencesWrapper
            setting="quote"
            default={defaults.quote}
@@ -147,14 +155,6 @@ const QuoteOptions = () => {
            <ButtonOptions />
            <AdditionalOptions />
          </PreferencesWrapper>
-          <Section
-            id="source"
-            icon={<MdSource />}
-            title={variables.getMessage('settings:sections.background.source.title')}
-            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
-          >
-            <SourceDropdown />
-          </Section>
        </>
      )}

--- a/src/features/search/options/SearchOptions.jsx
+++ b/src/features/search/options/SearchOptions.jsx
@@ -96,9 +96,7 @@ function SearchOptions() {
      <Row final={!customEnabled}>
        <Content
          title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
-          subtitle={variables.getMessage(
-            'settings:sections.search.search_engine_subtitle',
-          )}
+          subtitle={variables.getMessage('settings:sections.search.search_engine_subtitle')}
        />
        <Action>
          <Dropdown
@@ -151,8 +149,8 @@ function SearchOptions() {
        visibilityToggle={true}
      />
      <PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
-        <AdditionalOptions />
        <SearchEngineSelection />
+        <AdditionalOptions />
        {customEnabled && CustomOptions()}
      </PreferencesWrapper>
    </>