feat(SettingsModal): add button to create an account and automatically switching to it, update setting description and modal width

src/components/modals/SettingsModal.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Modal from 'react-modal';
 import {
+  createAccount,
   deleteAccount,
   deleteCaches,
   importAccount,
@@ -31,6 +32,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const [copyStatus, setCopyStatus] = useState(false);
   const [ensName, setEnsName] = useState('');
   const [checkedENS, setCheckedENS] = useState(false);
+  const [triggerSwitchAccount, setTriggerSwitchAccount] = useState(false);
 
   const [, setNewErrorMessage] = useError();
   const [, setNewSuccessMessage] = useSuccess();
@@ -382,6 +384,27 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
 
+  const handleCreateAccount = async () => {
+    try {
+      await createAccount();
+      setNewSuccessMessage('Account created successfully.');
+      setTriggerSwitchAccount(true);
+    } catch (error) {
+      setNewErrorMessage('Error creating account: ' + error.message);
+      console.error(error);
+    }
+    const lastAccount = accounts[accounts.length - 1];
+    setActiveAccount(lastAccount.name);
+  };
+
+  useEffect(() => {
+    if (triggerSwitchAccount) {
+      const lastAccount = accounts[accounts.length - 1];
+      setActiveAccount(lastAccount.name);
+      setTriggerSwitchAccount(false);
+    }
+  }, [accounts, triggerSwitchAccount]);
+
   const handleAccountChange = (e) => {
     setActiveAccount(e.target.value);
   };
@@ -463,8 +486,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             <li className='settings-tip anon-tip'>Use a newly generated u/address per thread to post.</li>
             <li className='settings-option disc'>Account Data</li>
             <li className='settings-tip'>
-              To save manual changes, click "Save". To undo changes, click "Reset". To delete the account and create a new one, click "Delete". To add another account,
-              paste its data and click "Import".
+              Save manual changes, reset changes, import another account after pasting its whole data, delete the account, create a new account.
             </li>
             <div className='settings-input'>
               <textarea
@@ -481,6 +503,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
                 <button onClick={() => setEditedAccountJson(accountJson)}>Reset</button>
                 <button onClick={handleImportAccount}>Import</button>
                 <button onClick={handleDeleteAccount}>Delete</button>
+                <button onClick={handleCreateAccount}>Create</button>
               </div>
             </div>
             <li className='settings-option disc'>Account Address: u/{account?.author.shortAddress}</li>

src/components/styled/modals/SettingsModal.styled.jsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import Modal from 'react-modal';
 
 export const StyledModal = styled(Modal)`
@@ -13,7 +13,7 @@ export const StyledModal = styled(Modal)`
     position: absolute;
     padding: 2px 5px 5px;
     font-size: 14px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   }
 
   #version {
@@ -25,9 +25,9 @@ export const StyledModal = styled(Modal)`
 
   @media (max-width: 768px) {
     .panel {
-      width: 320px !important;
+      width: 350px !important;
       max-height: 60% !important;
-      left: calc(50% + 15px) !important;
+      left: calc(50% - 2px) !important;
     }
   }
 
@@ -70,7 +70,8 @@ export const StyledModal = styled(Modal)`
     padding-left: 5px;
   }
 
-  .plus, .minus {
+  .plus,
+  .minus {
     vertical-align: text-bottom;
     margin-right: 5px;
     cursor: pointer;
@@ -82,7 +83,9 @@ export const StyledModal = styled(Modal)`
   }
 
   .settings-cat {
-    display: ${({ expanded }) => index => (expanded?.includes(index) ? "block" : "none")};
+    display: ${({ expanded }) =>
+      (index) =>
+        expanded?.includes(index) ? 'block' : 'none'};
     margin: 5px;
   }
 
@@ -94,7 +97,7 @@ export const StyledModal = styled(Modal)`
 
   #account-data-text {
     min-width: 70%;
-    min-height: 105px;
+    min-height: 131px;
   }
 
   .account-buttons {
@@ -204,7 +207,7 @@ export const StyledModal = styled(Modal)`
   }
 
   .anon-off {
-    margin: 10px 0 5px -2px
+    margin: 10px 0 5px -2px;
   }
 
   .anon-tip {
@@ -233,7 +236,6 @@ export const StyledModal = styled(Modal)`
     top: 108px;
   }
 
-
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -425,13 +427,13 @@ export const StyledModal = styled(Modal)`
             color: #f30 !important;
           }
         }`;
-        
-        default:
-          return '';
-      }
+
+      default:
+        return '';
+    }
   }}
 
   #node-stats {
     text-decoration: none;
   }
-`;
+`;