refacotr: settings options layout

2026-07-22 00:07:23 +02:00 · 2024-08-18 18:58:02 +01:00
parent e5cfb6042a
commit 74fd732c40
11 changed files with 116 additions and 109 deletions
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@@ -58,7 +58,7 @@ const MainModalContent = ({ modalClose }) => {
  };

  return (
-    <div className="flex flex-col w-full min-w-full">
+    <div className="flex flex-col w-full min-w-full ">
      <Navbar modalClose={modalClose} />
      <AnimatePresence initial={false} custom={direction}>
        <motion.div
--- a/src/components/Elements/MainModal/backend/newTabs.jsx
+++ b/src/components/Elements/MainModal/backend/newTabs.jsx
@@ -14,22 +14,6 @@ const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
    [setSubTab, setSubSection],
  );

-  return (
-    <div className="modalSidebar">
-      {sections.map((section, index) => (
-        <Tab
-          key={index}
-          currentTab={subTab}
-          label={variables.getMessage(section.label)}
-          onClick={handleClick(section.label)}
-          navbarTab={section.navbar || false}
-        />
-      ))}
-    </div>
-  );
-});
-
-const Content = memo(({ sections, currentTab }) => {
  const hideReminder = () => {
    localStorage.setItem('showReminder', false);
    document.querySelector('.reminder-info').style.display = 'none';
@@ -65,18 +49,39 @@ const Content = memo(({ sections, currentTab }) => {
    [],
  );

+  return (
+    <div className="modalSidebar">
+      {sections.map((section, index) => (
+        <Tab
+          key={index}
+          currentTab={subTab}
+          label={variables.getMessage(section.label)}
+          onClick={handleClick(section.label)}
+          navbarTab={section.navbar || false}
+        />
+      ))}
+      {reminderInfo}
+    </div>
+  );
+});
+
+const Content = memo(({ sections, currentTab }) => {
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
  return (
    <>
      {sections.map(
        ({ label, name, component: Component }) =>
          variables.getMessage(label) === currentTab && (
            <div
-              className="w-full rounded h-[calc(78vh-80px)] flex flex-col overflow-scroll pr-2 gap-3"
+              className="w-full rounded h-[calc(78vh-80px)] flex flex-col pr-10 gap-3 lg:overflow-x-hidden overflow-y-auto overflow-x-auto"
              key={name}
              label={variables.getMessage(label)}
              name={name}
            >
-              {reminderInfo}
              <Component />
            </div>
          ),
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -206,13 +206,12 @@ h5 {
  flex-flow: row;
  justify-content: space-between;
  padding: 25px;
-  margin-top: 20px;
  transition: 0.5s;

  @include themed {
    background: t($modal-sidebar);
    border-radius: t($borderRadius);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    //box-shadow: 0 0 0 1px t($modal-sidebarActive);

    &:hover {
      background: t($modal-sidebarActive);
--- a/src/components/Form/Settings/Checkbox/Checkbox.jsx
+++ b/src/components/Form/Settings/Checkbox/Checkbox.jsx
@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { useEffect, useState } from 'react';
 import { Checkbox as CheckboxUI, Field, Label } from '@headlessui/react';
-import { MdCheckBox } from "react-icons/md";
+import { MdCheckBox } from 'react-icons/md';
 import EventBus from 'utils/eventbus';

 const Checkbox = (props) => {
@@ -21,10 +21,7 @@ const Checkbox = (props) => {
      props.onChange(value);
    }

-    variables.stats.postEvent(
-      'setting',
-      `${props.name} ${value ? 'enabled' : 'disabled'}`,
-    );
+    variables.stats.postEvent('setting', `${props.name} ${value ? 'enabled' : 'disabled'}`);

    if (props.element) {
      if (!document.querySelector(props.element)) {
@@ -42,13 +39,13 @@ const Checkbox = (props) => {
        checked={checked}
        onChange={handleChange}
        disabled={props.disabled || false}
-        className="border border-[#484848] bg-white/5 group size-4 rounded data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
+        className="border border-[#484848] bg-white/5 group size-4 rounded-sm data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
      >
-          <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
+        <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
      </CheckboxUI>
      <Label>{props.text}</Label>
    </Field>
  );
 };

-export { Checkbox as default, Checkbox };
+export { Checkbox as default, Checkbox };
--- a/src/components/Layout/Settings/Item/SettingsItem.jsx
+++ b/src/components/Layout/Settings/Item/SettingsItem.jsx
@@ -1,5 +1,5 @@
 const Row = (props) => {
-  const classes = `${props.final ? 'border-b-0' : 'border-b border-gray-500'} ${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
+  const classes = `${props.inactive ? 'opacity-50 pointer-events-none transition duration-400 ease-in-out' : ''} flex items-center min-h-[100px] justify-between py-4 transition duration-400 ease-in-out`;
  return <div className={classes}>{props.children}</div>;
 };

--- a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
+++ b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import variables from 'config/variables';
 import Slider from '../../../Form/Settings/Slider/Slider';
@@ -7,23 +7,33 @@ import values from 'utils/data/slider_values.json';
 import EventBus from 'utils/eventbus';

 const PreferencesWrapper = ({ children, ...props }) => {
-  const [shown, setShown] = useState(
-    localStorage.getItem(props.setting) === 'true' || props.default || false,
-  );
-  console.log(props.default);
-
-  EventBus.on('toggle', (setting) => {
-    if (setting === props.setting) {
-      setShown(!shown);
+  const [shown, setShown] = useState(() => {
+    if (!props.setting) {
+      return true;
    }
+    return localStorage.getItem(props.setting) === 'true' || props.default || false;
  });

+  useEffect(() => {
+    const handleToggle = (setting) => {
+      if (setting === props.setting) {
+        setShown((prevShown) => !prevShown);
+      }
+    };
+
+    EventBus.on('toggle', handleToggle);
+
+    return () => {
+      EventBus.off('toggle', handleToggle);
+    };
+  }, [props.setting]);
+
  return (
    <div
      className={
        shown
-          ? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
-          : 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded'
+          ? 'preferences bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
+          : 'opacity-50 pointer-events-none transition-400 ease-in-out bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500'
      }
    >
      {props.zoomSetting && (
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -23,12 +23,12 @@ import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
 const GreetingOptions = () => {
  const { subSection } = useTab();
  const [customEvents, setCustomEvents] = useState(
-    JSON.parse(localStorage.getItem('customEvents')) || defaultEvents
+    JSON.parse(localStorage.getItem('customEvents')) || defaultEvents,
  );
  const [events, setEvents] = useState(false);

  const [birthday, setBirthday] = useState(
-    new Date(localStorage.getItem('birthday')) || defaults.birthday
+    new Date(localStorage.getItem('birthday')) || defaults.birthday,
  );

  const [enableBirthday, setEnableBirthday] = useState(
@@ -133,9 +133,7 @@ const GreetingOptions = () => {
      <Row>
        <Content
          title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
-          subtitle={variables.getMessage(
-            'settings:sections.greeting.birthday_subtitle',
-          )}
+          subtitle={variables.getMessage('settings:sections.greeting.birthday_subtitle')}
        />
        <Action>
          <Switch
@@ -298,8 +296,8 @@ const GreetingOptions = () => {

  return (
    <>
-      {header}
-      {subSection === "events" ? (
+      {/*{header}*/}
+      {subSection === 'events' ? (
        <>
          <Row>
            <Content
@@ -321,13 +319,15 @@ const GreetingOptions = () => {
          {CustomEventsSection()}
        </>
      ) : (
-        <PreferencesWrapper
-          setting="greeting"
-          zoomSetting="zoomGreeting"
-          category="greeting"
-          visibilityToggle={true}
-        >
-          <AdditionalOptions />
+        <>
+          <PreferencesWrapper
+            setting="greeting"
+            zoomSetting="zoomGreeting"
+            category="greeting"
+            visibilityToggle={true}
+          >
+            <AdditionalOptions />
+          </PreferencesWrapper>
          <Section
            id="events"
            title={variables.getMessage(`${GREETING_SECTION}.events`)}
@@ -335,7 +335,7 @@ const GreetingOptions = () => {
            onClick={() => setEvents(true)}
            icon={<MdEventNote />}
          />
-        </PreferencesWrapper>
+        </>
      )}
    </>
  );
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -49,7 +49,7 @@ function Changelog() {
    setTitle(changelog.name);
    setContent(changelog.body);
    setDate(new Date(changelog.published_at).toLocaleDateString());
-  }
+  };

  useEffect(() => {
    if (navigator.onLine === false || offlineMode) {
@@ -77,9 +77,7 @@ function Changelog() {
      <>
        <MdOutlineWifiOff />
        <h1>{variables.getMessage('marketplace:offline.title')}</h1>
-        <p className="description">
-          {variables.getMessage('marketplace:offline.description')}
-        </p>
+        <p className="description">{variables.getMessage('marketplace:offline.description')}</p>
      </>,
    );
  }
@@ -106,14 +104,15 @@ function Changelog() {
  }

  return (
-    <article className="changelogtab prose dark:prose-invert" ref={changelog}>
-      <div className="not-prose">
-        <span className="mainTitle">{title}</span>
-        <span className="subtitle">Released on {date}</span>
+    <article
+      className="bg-modal-content-light dark:bg-modal-content-dark w-full rounded p-10 prose dark:prose-invert"
+      ref={changelog}
+    >
+      <div>
+        <h1 class="leading-tight mb-1">{title}</h1>
+        <p class="leading-none mt-0">Published on {date}</p>
      </div>
-      <Markdown options={{ overrides: { a: { props: { target: '_blank' } } } }}>
-        {content}
-      </Markdown>
+      <Markdown options={{ overrides: { a: { props: { target: '_blank' } } } }}>{content}</Markdown>
    </article>
  );
 }
--- a/src/features/navbar/options/AppsOptions.jsx
+++ b/src/features/navbar/options/AppsOptions.jsx
@@ -110,9 +110,7 @@ function AppsOptions({ appsEnabled }) {
      <Row final={true} inactive={!appsEnabled}>
        <Content
          title={variables.getMessage('widgets.navbar.apps.title')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.navbar.apps_subtitle',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.apps_subtitle')}
        />
        <Action>
          <Button
@@ -123,17 +121,18 @@ function AppsOptions({ appsEnabled }) {
          />
        </Action>
      </Row>
-
-      <div className="messagesContainer">
-        {appsModalInfo.items.map((item, i) => (
-          <QuickLink
-            key={i}
-            item={item}
-            startEditLink={() => startEditLink(item)}
-            deleteLink={(key, e) => deleteLink(key, e)}
-          />
-        ))}
-      </div>
+      {appsModalInfo.items.length > 0 && (
+        <div className="messagesContainer">
+          {appsModalInfo.items.map((item, i) => (
+            <QuickLink
+              key={i}
+              item={item}
+              startEditLink={() => startEditLink(item)}
+              deleteLink={(key, e) => deleteLink(key, e)}
+            />
+          ))}
+        </div>
+      )}

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

 import { Row, Content, Action } from 'components/Layout/Settings/Item';
-import { Header } from 'components/Layout/Settings';
+import { Header, PreferencesWrapper } from 'components/Layout/Settings';

 import AppsOptions from './AppsOptions';
 import defaults from './default';
@@ -17,7 +17,9 @@ function NavbarOptions() {
  const [showRefreshOptions, setShowRefreshOptions] = useState(
    localStorage.getItem('refresh') === 'true',
  );
-  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled);
+  const [appsEnabled, setAppsEnabled] = useState(
+    localStorage.getItem('appsEnabled') === 'true' || defaults.appsEnabled,
+  );

  const NAVBAR_SECTION = 'settings:sections.appearance.navbar';

@@ -26,9 +28,7 @@ function NavbarOptions() {
      <Row final={false}>
        <Content
          title={variables.getMessage('settings:additional_settings')}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.navbar.additional',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.additional')}
        />
        <Action>
          <Checkbox
@@ -104,9 +104,7 @@ function NavbarOptions() {

    return (
      <Row>
-        <Content
-          title={variables.getMessage('settings:sections.appearance.navbar.widgets')}
-        />
+        <Content title={variables.getMessage('settings:sections.appearance.navbar.widgets')} />
        <Action>
          <div className="navbarButtonOptions">
            {buttons.map((button, index) => (
@@ -123,9 +121,7 @@ function NavbarOptions() {
      <Row final={false} inactive={!showRefreshOptions}>
        <Content
          title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
-          subtitle={variables.getMessage(
-            'settings:sections.appearance.navbar.refresh_subtitle',
-          )}
+          subtitle={variables.getMessage('settings:sections.appearance.navbar.refresh_subtitle')}
        />
        <Action>
          <Dropdown
@@ -169,10 +165,12 @@ function NavbarOptions() {
        zoomSetting="zoomNavbar"
        zoomCategory="navbar"
      />
-      <AdditionalSettings />
-      <NavbarOptions />
-      <RefreshOptions />
-      <AppsOptions appsEnabled={appsEnabled} />
+      <PreferencesWrapper visibilityToggle={false}>
+        <AdditionalSettings />
+        <NavbarOptions />
+        <RefreshOptions />
+        <AppsOptions appsEnabled={appsEnabled} />
+      </PreferencesWrapper>
    </>
  );
 }
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -110,9 +110,7 @@ const QuoteOptions = () => {
      {subSection === 'source' ? (
        <Header
          title={variables.getMessage(`${QUOTE_SECTION}.title`)}
-          secondaryTitle={variables.getMessage(
-            'settings:sections.background.source.title',
-          )}
+          secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
          report={false}
        />
      ) : (
@@ -138,13 +136,17 @@ const QuoteOptions = () => {
      )}

      {subSection !== 'source' && (
-        <PreferencesWrapper
-          setting="quote"
-          default={defaults.quote}
-          zoomSetting="zoomQuote"
-          category="quote"
-          visibilityToggle={true}
-        >
+        <>
+          <PreferencesWrapper
+            setting="quote"
+            default={defaults.quote}
+            zoomSetting="zoomQuote"
+            category="quote"
+            visibilityToggle={true}
+          >
+            <ButtonOptions />
+            <AdditionalOptions />
+          </PreferencesWrapper>
          <Section
            id="source"
            icon={<MdSource />}
@@ -153,9 +155,7 @@ const QuoteOptions = () => {
          >
            <SourceDropdown />
          </Section>
-          <ButtonOptions />
-          <AdditionalOptions />
-        </PreferencesWrapper>
+        </>
      )}

      {quoteType === 'custom' && subSection === 'source' && <CustomSettings />}