Add back extension popup files

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

interface/src/App.d.ts

@@ -0,0 +1,10 @@
+export interface SettingsState {
+    notificationCollector: boolean;
+    lessonAlerts: boolean;
+    animatedBackground: boolean;
+    animatedBackgroundSpeed: boolean;
+    customThemeColor: string;
+    betterSEQTAPlus: boolean;
+}
+declare const App: React.FC;
+export default App;

interface/src/components/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+}
+declare const Picker: ({ color, onChange }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default Picker;

interface/src/components/Slider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import "./Slider.css";
+interface Slider {
+    onValueChange: (value: number) => void;
+}
+declare const Slider: React.FC<Slider>;
+export default Slider;

interface/src/components/Switch.d.ts

@@ -0,0 +1,7 @@
+import "./Switch.css";
+interface SwitchProps {
+    onChange: (isOn: boolean) => void;
+    state: boolean;
+}
+export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};

interface/src/components/TabbedContainer.d.ts

@@ -0,0 +1,11 @@
+import React, { JSX } from 'react';
+interface Tab {
+    title: string;
+    content: JSX.Element;
+}
+interface TabbedContainerProps {
+    tabs: Tab[];
+    themeColor: string;
+}
+declare const TabbedContainer: React.FC<TabbedContainerProps>;
+export default TabbedContainer;

interface/src/declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

interface/src/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

interface/src/main.d.ts

@@ -0,0 +1 @@
+import './index.css';

interface/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.js'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('ExtensionPopup')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

interface/src/pages/About.d.ts

@@ -0,0 +1,2 @@
+declare const About: React.FC;
+export default About;

interface/src/pages/Settings.d.ts

@@ -0,0 +1,8 @@
+import { SettingsState } from '../App';
+interface SettingsProps {
+    settingsState: SettingsState;
+    switchChange: (key: string, isOn: boolean) => void;
+    colorChange: (color: string) => void;
+}
+declare const Settings: React.FC<SettingsProps>;
+export default Settings;

interface/src/pages/Settings.tsx

@@ -1,6 +1,6 @@
 import Switch from '../components/Switch';
 import ColorPicker from '../components/ColorPicker';
-import { SettingsState } from '../App';
+import { SettingsState } from '../../../src/popup/App';
 
 interface ISetting {
   title: string;

interface/src/pages/Shortcuts.d.ts

@@ -0,0 +1 @@
+export default function Shortcuts(): import("react/jsx-runtime").JSX.Element;

interface/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

src/popup/main.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.js'
-import './index.css'
-
-const mountNode = document.getElementById("ExtensionPopup");
-const shadowRoot = mountNode!.attachShadow({ mode: "open" });
-
-// Step 2: Inject styles into the shadow DOM
-const styleLink = document.createElement('link');
-styleLink.setAttribute('rel', 'stylesheet');
-styleLink.setAttribute('href', 'chrome-extension://adkchjaapbfjofglfpenifpahonbnehk/index.css');
-shadowRoot.appendChild(styleLink);
-
-// Step 3: Create a div inside shadow root to serve as the React root
-const reactRoot = document.createElement('div');
-shadowRoot.appendChild(reactRoot);
-
-const root = ReactDOM.createRoot(reactRoot);
-
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)