improve million application

src/interface/SettingsPage.tsx

@@ -2,12 +2,12 @@ import TabbedContainer from './components/TabbedContainer';
 import Settings from './pages/Settings';
 import logo from './assets/betterseqta-dark-full.png';
 import logoDark from './assets/betterseqta-light-full.png';
+import { SettingsContextProvider } from './SettingsContext';
 import Shortcuts from './pages/Shortcuts';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
 
 import browser from 'webextension-polyfill';
-import { memo } from 'react';
 
 interface SettingsPage {
   standalone: boolean;
@@ -30,16 +30,18 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
   ];  
 
   return (
-    <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } ${ standalone ? 'h-[600px]' : 'h-[100vh]' } overflow-clip dark:bg-zinc-800 dark:text-white`}>
-      <div className="grid border-b border-b-zinc-200/40 place-items-center">
-        <img src={logo} className="w-4/5 dark:hidden" />
-        <img src={logoDark} className="hidden w-4/5 dark:block" />
-        <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' })} className="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+    <SettingsContextProvider>
+      <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } ${ standalone ? 'h-[600px]' : 'h-[100vh]' } overflow-clip dark:bg-zinc-800 dark:text-white`}>
+        <div className="grid border-b border-b-zinc-200/40 place-items-center">
+          <img src={logo} className="w-4/5 dark:hidden" />
+          <img src={logoDark} className="hidden w-4/5 dark:block" />
+          <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' })} className="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+        </div>
+        <Picker />
+        <TabbedContainer tabs={tabs} />
       </div>
-      <Picker />
-      <TabbedContainer tabs={tabs} />
-    </div>
+    </SettingsContextProvider>
   );
 };
 
-export default memo(SettingsPage);
+export default SettingsPage;

src/interface/main.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import './index.css';
-import { SettingsContextProvider } from './SettingsContext.js';
 import SettingsPage from './SettingsPage.js';
 import browser from 'webextension-polyfill';
 import font from '../resources/fonts/IconFamily.woff'
@@ -36,13 +35,11 @@ const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
 
 root.render(
   <React.StrictMode>
-    <SettingsContextProvider>
       <HashRouter>
         <Routes>
           <Route path="/settings" element={<SettingsPage standalone={true} />} />
           <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
         </Routes>
       </HashRouter>
-    </SettingsContextProvider>
   </React.StrictMode>,
 );

src/interface/pages/Shortcuts.tsx

@@ -16,7 +16,7 @@ function formatUrl (inputUrl: string) {
   }
 }
 
-export default function Shortcuts() {
+function Shortcuts() {
   const { settingsState, setSettingsState } = useSettingsContext();
 
   const switchChange = (shortcutName: string, isOn: boolean): void => {
@@ -153,3 +153,5 @@ export default function Shortcuts() {
     </div>
   );
 }
+
+export default Shortcuts;