Refactor React to use routing

interface/package.json

@@ -14,7 +14,8 @@
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^2.2.24",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

interface/src/SettingsPage.tsx

@@ -1,26 +1,16 @@
-import React, { useEffect } from 'react';
 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 Shortcuts from './pages/Shortcuts';
-import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
-//import About from './pages/About';
-//import About from './pages/About';
 
-const App: React.FC = () => {
-  const { standalone, setStandalone } = useSettingsContext();
-
-  useEffect(() => {
-    // if body has class standalone
-    if (document.body.classList.contains('standalone')) {
-      // set settingsContext standalone to true
-      setStandalone(true);
-    }
-  })
+interface SettingsPage {
+  standalone: boolean;
+}
 
+const SettingsPage = ({ standalone }: SettingsPage) => {
   const tabs = [
     {
       title: 'Settings',
@@ -48,4 +38,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default SettingsPage;

interface/src/main.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.js'
-import './index.css'
+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';
-
-const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
-
+import SettingsPage from './SettingsPage.js';
 const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
@@ -19,10 +17,18 @@ style.innerHTML = `
 }`;
 document.head.appendChild(style);
 
+
+const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
+
 root.render(
   <React.StrictMode>
     <SettingsContextProvider>
-      <App />
+      <HashRouter>
+        <Routes>
+          <Route path="/settings" element={<SettingsPage standalone={true} />} />
+          <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
+        </Routes>
+      </HashRouter>
     </SettingsContextProvider>
   </React.StrictMode>,
 );