feat(settings): add interface settings category

src/components/settings-modal/interface-settings/index.ts

@@ -0,0 +1 @@
+export { default } from './interface-settings';

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -0,0 +1,21 @@
+.languageSettings {
+  display: inline-block;
+}
+
+.setting {
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.version {
+  margin-left: 10px;
+}
+
+.version a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.version a:hover {
+  text-decoration: underline;
+}

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useTheme from '../../../hooks/use-theme';
+import styles from './interface-settings.module.css';
+import packageJson from '../../../../package.json';
+
+const commitRef = process.env.REACT_APP_COMMIT_REF;
+const isElectron = window.isElectron === true;
+
+const CheckForUpdates = () => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const checkForUpdates = async () => {
+    try {
+      setLoading(true);
+      const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' });
+      const packageData = await packageRes.json();
+      let updateAvailable = false;
+
+      if (packageJson.version !== packageData.version) {
+        const newVersionText = t('new_stable_version', { newVersion: packageData.version, oldVersion: packageJson.version });
+        const updateActionText = isElectron
+          ? t('download_latest_desktop', { link: 'https://github.com/plebbit/plebchan/releases/latest', interpolation: { escapeValue: false } })
+          : t('refresh_to_update');
+        alert(newVersionText + ' ' + updateActionText);
+        updateAvailable = true;
+      }
+
+      if (commitRef && commitRef.length > 0) {
+        const commitRes = await fetch('https://api.github.com/repos/plebbit/plebchan/commits?per_page=1&sha=development', { cache: 'no-cache' });
+        const commitData = await commitRes.json();
+
+        const latestCommitHash = commitData[0].sha;
+
+        if (latestCommitHash.trim() !== commitRef.trim()) {
+          const newVersionText =
+            t('new_development_version', { newCommit: latestCommitHash.slice(0, 7), oldCommit: commitRef.slice(0, 7) }) + ' ' + t('refresh_to_update');
+          alert(newVersionText);
+          updateAvailable = true;
+        }
+      }
+
+      if (!updateAvailable) {
+        alert(
+          commitRef
+            ? `${t('latest_development_version', { commit: commitRef.slice(0, 7), link: 'https://plebchan.eth.limo/#/', interpolation: { escapeValue: false } })}`
+            : `${t('latest_stable_version', { version: packageJson.version })}`,
+        );
+      }
+    } catch (error) {
+      alert('Failed to fetch latest version info: ' + error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
+      {t('check')}
+    </button>
+  );
+};
+
+const Style = () => {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <select className={styles.themeSettings} value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value='yotsuba'>Yotsuba</option>
+      <option value='yotsuba-b'>Yotsuba B</option>
+      <option value='futaba'>Futaba</option>
+      <option value='burichan'>Burichan</option>
+      <option value='tomorrow'>Tomorrow</option>
+      <option value='photon'>Photon</option>
+    </select>
+  );
+};
+
+// prettier-ignore
+const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
+
+const InterfaceLanguage = () => {
+  const { i18n } = useTranslation();
+  const { changeLanguage, language } = i18n;
+
+  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    changeLanguage(e.target.value);
+  };
+
+  return (
+    <div className={styles.languageSettings}>
+      <select value={language} onChange={onSelectLanguage}>
+        {availableLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+const InterfaceSettings = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.interfaceSettings}>
+      <div className={styles.version}>
+        Version:{' '}
+        <a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
+          {packageJson.version}
+        </a>
+        {commitRef && (
+          <a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
+            #{commitRef.slice(0, 7)}
+          </a>
+        )}
+      </div>
+      <div className={styles.setting}>
+        {t('update')}: <CheckForUpdates />
+      </div>
+      <div className={styles.setting}>
+        {t('style')}: <Style />
+      </div>
+      <div className={styles.setting}>
+        {t('interface_language')}: <InterfaceLanguage />
+      </div>
+    </div>
+  );
+};
+
+export default InterfaceSettings;

src/components/settings-modal/settings-modal.module.css

@@ -61,22 +61,6 @@
   text-transform: capitalize;
 }
 
-.version {
-  font-size: 11px;
-  position: absolute;
-  display: block;
-  margin-left: 5px;
-}
-
-.version a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.version a:hover {
-  text-decoration: underline;
-}
-
 .closeButton {
   right: 5px;
   width: 18px;
@@ -102,10 +86,6 @@
   cursor: pointer;
 }
 
-.languageSettings {
-  display: inline-block;
-}
-
 .setting {
   margin-bottom: 8px;
   text-transform: capitalize;

src/components/settings-modal/settings-modal.tsx

@@ -2,116 +2,10 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
-import useTheme from '../../hooks/use-theme';
-import packageJson from '../../../package.json';
 import AccountSettings from './account-settings';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
-
+import InterfaceSettings from './interface-settings';
-const commitRef = process.env.REACT_APP_COMMIT_REF;
-const isElectron = window.isElectron === true;
-
-const CheckForUpdates = () => {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-
-  const checkForUpdates = async () => {
-    try {
-      setLoading(true);
-      const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' });
-      const packageData = await packageRes.json();
-      let updateAvailable = false;
-
-      if (packageJson.version !== packageData.version) {
-        const newVersionText = t('new_stable_version', { newVersion: packageData.version, oldVersion: packageJson.version });
-        const updateActionText = isElectron
-          ? t('download_latest_desktop', { link: 'https://github.com/plebbit/plebchan/releases/latest', interpolation: { escapeValue: false } })
-          : t('refresh_to_update');
-        alert(newVersionText + ' ' + updateActionText);
-        updateAvailable = true;
-      }
-
-      if (commitRef && commitRef.length > 0) {
-        const commitRes = await fetch('https://api.github.com/repos/plebbit/plebchan/commits?per_page=1&sha=development', { cache: 'no-cache' });
-        const commitData = await commitRes.json();
-
-        const latestCommitHash = commitData[0].sha;
-
-        if (latestCommitHash.trim() !== commitRef.trim()) {
-          const newVersionText =
-            t('new_development_version', { newCommit: latestCommitHash.slice(0, 7), oldCommit: commitRef.slice(0, 7) }) + ' ' + t('refresh_to_update');
-          alert(newVersionText);
-          updateAvailable = true;
-        }
-      }
-
-      if (!updateAvailable) {
-        alert(
-          commitRef
-            ? `${t('latest_development_version', { commit: commitRef.slice(0, 7), link: 'https://plebchan.eth.limo/#/', interpolation: { escapeValue: false } })}`
-            : `${t('latest_stable_version', { version: packageJson.version })}`,
-        );
-      }
-    } catch (error) {
-      alert('Failed to fetch latest version info: ' + error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <button className={styles.checkForUpdatesButton} onClick={checkForUpdates} disabled={loading}>
-      {t('check')}
-    </button>
-  );
-};
-
-const Style = () => {
-  const [theme, setTheme] = useTheme();
-
-  return (
-    <select className={styles.themeSettings} value={theme} onChange={(e) => setTheme(e.target.value)}>
-      <option value='yotsuba'>Yotsuba</option>
-      <option value='yotsuba-b'>Yotsuba B</option>
-      <option value='futaba'>Futaba</option>
-      <option value='burichan'>Burichan</option>
-      <option value='tomorrow'>Tomorrow</option>
-      <option value='photon'>Photon</option>
-    </select>
-  );
-};
-
-// prettier-ignore
-const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
-
-const InterfaceLanguage = () => {
-  const { i18n } = useTranslation();
-  const { changeLanguage, language } = i18n;
-
-  const onSelectLanguage = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    changeLanguage(e.target.value);
-  };
-
-  return (
-    <div className={styles.languageSettings}>
-      <select value={language} onChange={onSelectLanguage}>
-        {availableLanguages.map((lang) => (
-          <option key={lang} value={lang}>
-            {lang}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-// const PlebbitOptionsSettings = () => {
-//   return (
-//     <>
-//       <div className={styles.setting}></div>
-//     </>
-//   );
-// };
 
 const SettingsModal = () => {
   const { t } = useTranslation();
@@ -121,6 +15,7 @@ const SettingsModal = () => {
     navigate(-1);
   };
 
+  const [showInterfaceSettings, setShowInterfaceSettings] = useState(false);
   const [showAccountSettings, setShowAccountSettings] = useState(false);
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
@@ -129,6 +24,7 @@ const SettingsModal = () => {
   const handleExpandAll = () => {
     const newExpandState = !expandAll;
     setExpandAll(newExpandState);
+    setShowInterfaceSettings(newExpandState);
     setShowAccountSettings(newExpandState);
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
@@ -139,31 +35,19 @@ const SettingsModal = () => {
       <div className={styles.overlay} onClick={closeModal}></div>
       <div className={styles.settingsModal}>
         <div className={styles.header}>
-          <span className={styles.version}>
-            <a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
-              v{packageJson.version}
-            </a>
-            {commitRef && (
-              <a href={`https://github.com/plebbit/plebchan/commit/${commitRef}`} target='_blank' rel='noopener noreferrer'>
-                #{commitRef.slice(0, 7)}
-              </a>
-            )}
-          </span>
           <span className={styles.title}>{t('settings')}</span>
           <span className={styles.closeButton} title='close' onClick={closeModal} />
         </div>
         <div className={styles.expandAllSettings}>
           [<span onClick={handleExpandAll}>{expandAll ? 'Collapse All Settings' : 'Expand All Settings'}</span>]
         </div>
-        <div className={styles.setting}>
+        <div className={`${styles.setting} ${styles.category}`}>
-          {t('update')}: <CheckForUpdates />
+          <label onClick={() => setShowInterfaceSettings(!showInterfaceSettings)}>
-        </div>
+            <span className={showInterfaceSettings ? styles.hideButton : styles.showButton} />
-        <div className={styles.setting}>
+            Interface
-          {t('style')}: <Style />
+          </label>
-        </div>
-        <div className={styles.setting}>
-          {t('interface_language')}: <InterfaceLanguage />
         </div>
+        {showInterfaceSettings && <InterfaceSettings />}
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowAccountSettings(!showAccountSettings)}>
             <span className={showAccountSettings ? styles.hideButton : styles.showButton} />
@@ -185,13 +69,6 @@ const SettingsModal = () => {
           </label>
         </div>
         {showCryptoWalletSettings && <CryptoWalletsSetting />}
-        {/* <div className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => setShowPlebbitOptionsSettings(!showPlebbitOptionsSettings)}>
-            <span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
-            {t('plebbit_options')}
-          </label>
-        </div>
-        {showPlebbitOptionsSettings && <PlebbitOptionsSettings />} */}
       </div>
     </>
   );