diff --git a/interface/package.json b/interface/package.json
index d49a90a9..b54a223e 100644
--- a/interface/package.json
+++ b/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",
diff --git a/interface/src/App.tsx b/interface/src/SettingsPage.tsx
similarity index 67%
rename from interface/src/App.tsx
rename to interface/src/SettingsPage.tsx
index 3499d785..ee3f1f95 100644
--- a/interface/src/App.tsx
+++ b/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;
\ No newline at end of file
+export default SettingsPage;
\ No newline at end of file
diff --git a/interface/src/main.tsx b/interface/src/main.tsx
index e932a711..1e38f4da 100644
--- a/interface/src/main.tsx
+++ b/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(
-
+
+
+ } />
+ } />
+
+
,
);
\ No newline at end of file
diff --git a/public/popup/popup.css b/public/interface/popup.css
similarity index 100%
rename from public/popup/popup.css
rename to public/interface/popup.css
diff --git a/public/manifest.json b/public/manifest.json
index 8a631baf..540df20e 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -10,7 +10,7 @@
},
"action": {
"browser_style": true,
- "default_popup": "popup/info.html",
+ "default_popup": "interface/index.html#settings",
"default_icon": {
"32": "icons/icon-32.png",
"48": "icons/icon-48.png",
diff --git a/public/popup/info.html b/public/popup/info.html
deleted file mode 100644
index 824b448a..00000000
--- a/public/popup/info.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
- Vite + React + TS
-
-
-
-
-
-
-
-
diff --git a/src/SEQTA.js b/src/SEQTA.js
index 8b66bf01..311e360e 100644
--- a/src/SEQTA.js
+++ b/src/SEQTA.js
@@ -820,7 +820,7 @@ export function closeSettings() {
function addExtensionSettings() {
const link = document.createElement('link');
- link.href = chrome.runtime.getURL('popup/popup.css');
+ link.href = chrome.runtime.getURL('interface/popup.css');
link.type = 'text/css';
link.rel = 'stylesheet';
document.querySelector('html').appendChild(link);
@@ -831,7 +831,7 @@ function addExtensionSettings() {
document.body.appendChild(extensionPopup);
const extensionIframe = document.createElement('iframe');
- extensionIframe.src = chrome.runtime.getURL('interface/index.html');
+ extensionIframe.src = `${chrome.runtime.getURL('interface/index.html')}#settings/embedded`;
extensionIframe.id = 'ExtensionIframe';
extensionIframe.allowTransparency = true;
extensionIframe.style.width = '384px';