custom shortcut support in popup

interface/src/App.tsx

@@ -1,31 +1,18 @@
-// App.tsx
-import React, { useState } from 'react';
+import React 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 About from './pages/About';
-
-import type { SettingsState } from './types/AppProps';
-import useSettingsState from './hooks/settingsState';
+import { SettingsContextProvider } from './SettingsContext';
 
 const App: React.FC = () => {
-  const [settingsState, setSettingsState] = useState<SettingsState>({
-    notificationCollector: false,
-    lessonAlerts: false,
-    animatedBackground: false,
-    animatedBackgroundSpeed: "0",
-    customThemeColor: "#db6969",
-    betterSEQTAPlus: true
-  });
-
-  useSettingsState({ settingsState, setSettingsState });
 
   const tabs = [
     {
       title: 'Settings',
-      content: <Settings settingsState={settingsState} setSettingsState={setSettingsState} />
+      content: <Settings />
     },
     {
       title: 'Shortcuts',
@@ -38,13 +25,15 @@ const App: React.FC = () => {
   ];
 
   return (
-    <div className="flex flex-col w-[384px] shadow-2xl gap-2 bg-white rounded-xl h-[590px] 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" />
+    <SettingsContextProvider>
+      <div className="flex flex-col w-[384px] shadow-2xl gap-2 bg-white rounded-xl h-[590px] 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" />
+        </div>
+        <TabbedContainer tabs={tabs} />
       </div>
-      <TabbedContainer themeColor={settingsState.customThemeColor} tabs={tabs} />
-    </div>
+    </SettingsContextProvider>
   );
 };
 

interface/src/SettingsContext.tsx

@@ -0,0 +1,39 @@
+// SettingsContext.tsx
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { SettingsState } from './types/AppProps';
+import useSettingsState from './hooks/settingsState';
+
+// Create a context with an initial state
+const SettingsContext = createContext<{
+  settingsState: SettingsState;
+  setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
+} | undefined>(undefined);
+
+export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [settingsState, setSettingsState] = useState<SettingsState>({
+    notificationCollector: false,
+    lessonAlerts: false,
+    animatedBackground: false,
+    animatedBackgroundSpeed: "0",
+    customThemeColor: "#db6969",
+    betterSEQTAPlus: true,
+    shortcuts: []
+  });
+
+  useSettingsState({ settingsState, setSettingsState });
+
+  return (
+    <SettingsContext.Provider value={{ settingsState, setSettingsState }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+// eslint-disable-next-line
+export const useSettingsContext = () => {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error('useSettingsContext must be used within a SettingsContextProvider');
+  }
+  return context;
+};

interface/src/components/ColorPicker.tsx

@@ -22,18 +22,20 @@ const Picker = ({ color, onChange }: ColorPickerProps) => {
   }, [showPicker]);
 
   return (
-    <div className="">
+    <>
       <button
         onClick={() => setShowPicker(!showPicker)}
         style={{ background: color }}
         className="w-16 h-8 rounded-md"
       ></button>
       {showPicker && (
-        <div ref={ref} className="fixed top-0 left-0 z-50 p-4 bg-white border rounded-lg shadow-lg border-zinc-00">
-          <ColorPicker value={color} onChange={onChange} />
+        <div className="absolute top-0 left-0 w-full h-full bg-black/20">
+          <div ref={ref} className="fixed top-0 left-0 z-50 p-4 bg-white border rounded-lg shadow-lg border-zinc-00">
+            <ColorPicker value={color} onChange={onChange} />
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

interface/src/components/TabbedContainer.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
+import { useSettingsContext } from '../SettingsContext';
 
-const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) => {
+const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState(0);
   const [hoveredTab, setHoveredTab] = useState<number | null>(null);
   const [tabWidth, setTabWidth] = useState(0);
   const [position, setPosition] = useState(0);
   const positionRef = useRef(position);
+  const themeColor = useSettingsContext().settingsState.customThemeColor;
 
   useEffect(() => {
     const newPosition = -activeTab * 100;
@@ -59,24 +61,22 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) =
       </div>
     </div>
     <div className="h-full px-4 overflow-y-scroll overflow-x-clip">
-      <div className="-mt-4">
-        <motion.div
-          initial={false}
-          animate={{ x: `${position}%` }}
-          transition={springTransition}
-        >
-          <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
-            {tabs.map((tab, index) => (
-              <div
-                key={index}
-                className={`w-full ${activeTab === index ? '' : 'hidden'}`}
-              >
-                {tab.content}
-              </div>
-            ))}
-          </div>
-        </motion.div>
-      </div>
+      <motion.div
+        initial={false}
+        animate={{ x: `${position}%` }}
+        transition={springTransition}
+      >
+        <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
+          {tabs.map((tab, index) => (
+            <div
+              key={index}
+              className={`w-full ${activeTab === index ? '' : 'hidden'}`}
+            >
+              {tab.content}
+            </div>
+          ))}
+        </div>
+      </motion.div>
     </div>
     </>
   );

interface/src/hooks/settingsState.ts

@@ -7,20 +7,22 @@ let RanOnce = false;
 let previousSettingsState: SettingsState
 
 const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => {
-  // run the following code once
   useEffect(() => {
     if (RanOnce) return;
     RanOnce = true;
 
     // get the current settings state
     chrome.storage.local.get(function(result: MainConfig) {
+      console.log(result);
       setSettingsState({
         notificationCollector: result.notificationcollector,
         lessonAlerts: result.lessonalert,
         animatedBackground: result.animatedbk,
         animatedBackgroundSpeed: result.bksliderinput,
         customThemeColor: result.selectedColor,
-        betterSEQTAPlus: result.onoff
+        betterSEQTAPlus: result.onoff,
+        shortcuts: result.shortcuts,
+        customshortcuts: result.customshortcuts,
       });
       
       if (result.DarkMode) {
@@ -36,10 +38,12 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "bksliderinput": "animatedBackgroundSpeed",
     "selectedColor": "customThemeColor",
     "onoff": "betterSEQTAPlus",
+    "shortcuts": "shortcuts",
+    "customshortcuts": "customshortcuts",
   }), []);
   
   const storageChangeListener = (changes: chrome.storage.StorageChange) => {
-    console.log(changes);
+    console.log(settingsState);
     for (const [key, { newValue }] of Object.entries(changes)) {
       if (key === "DarkMode") {
         if (key === "DarkMode" && newValue) {

interface/src/pages/Settings.tsx

@@ -1,8 +1,10 @@
 import Switch from '../components/Switch';
 import ColorPicker from '../components/ColorPicker';
-import { SettingsProps, SettingsList } from '../types/SettingsProps';
+import { SettingsList } from '../types/SettingsProps';
+import { useSettingsContext } from '../SettingsContext';
 
-const Settings: React.FC<SettingsProps> = ({ settingsState, setSettingsState }) => {
+const Settings: React.FC = () => {
+  const { settingsState, setSettingsState } = useSettingsContext();
 
   const switchChange = (key: string, isOn: boolean) => {
     setSettingsState({
@@ -52,7 +54,7 @@ const Settings: React.FC<SettingsProps> = ({ settingsState, setSettingsState })
   ];
 
   return (
-    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100">
+    <div className="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100">
       {settings.map((setting, index) => (
         <div className="flex items-center justify-between px-4 py-3" key={index}>
           <div className="pr-4">

interface/src/pages/Shortcuts.tsx

@@ -1,95 +1,96 @@
 import { useState } from "react";
 import Switch from "../components/Switch";
+import { useSettingsContext } from "../SettingsContext";
+
+interface Shortcut {
+  name: string;
+  url: string;
+  enabled?: boolean;
+}
 
 export default function Shortcuts() {
-  const [shortcutState, setShortcutState] = useState({
-    youtube: false,
-    outlook: false,
-    office: false,
-    spotify: false,
-    google: false,
-    duckduckgo: false,
-    coolmathgames: false,
-    sace: false,
-    googlescholar: false,
-    gmail: false,
-    netflix: false
-  });
+  const { settingsState, setSettingsState } = useSettingsContext();
 
-  // Handler for Switches
-  const switchChange = (key: string, isOn: boolean) => {
-    setShortcutState({
-      ...shortcutState,
-      [key]: isOn,
+  const switchChange = (shortcutName: string, isOn: boolean): void => {
+    const updatedShortcuts = settingsState.shortcuts.map((shortcut) => {
+      if (shortcut.name === shortcutName) {
+        return { ...shortcut, enabled: isOn };
+      }
+      return shortcut;
     });
+
+    setSettingsState({ ...settingsState, shortcuts: updatedShortcuts });
   };
 
-  const DefaultShortcuts = [
-    {
-      title: "YouTube",
-      link: "https://youtube.com",
-      modifyElement: <Switch state={shortcutState.youtube} onChange={(isOn: boolean) => switchChange('youtube', isOn)} />
-    },
-    {
-      title: "Outlook",
-      link: "https://outlook.office.com/mail/inbox",
-      modifyElement: <Switch state={shortcutState.outlook} onChange={(isOn: boolean) => switchChange('outlook', isOn)} />
-    },
-    {
-      title: "Office",
-      link: "https://www.office.com/",
-      modifyElement: <Switch state={shortcutState.office} onChange={(isOn: boolean) => switchChange('office', isOn)} />
-    },
-    {
-      title: "Spotify",
-      link: "https://www.spotify.com/",
-      modifyElement: <Switch state={shortcutState.spotify} onChange={(isOn: boolean) => switchChange('spotify', isOn)} />
-    },
-    {
-      title: "Google",
-      link: "https://www.google.com/",
-      modifyElement: <Switch state={shortcutState.google} onChange={(isOn: boolean) => switchChange('google', isOn)} />
-    },
-    {
-      title: "DuckDuckGo",
-      link: "https://duckduckgo.com/",
-      modifyElement: <Switch state={shortcutState.duckduckgo} onChange={(isOn: boolean) => switchChange('duckduckgo', isOn)} />
-    },
-    {
-      title: "Cool Math Games",
-      link: "https://www.coolmathgames.com/",
-      modifyElement: <Switch state={shortcutState.coolmathgames} onChange={(isOn: boolean) => switchChange('coolmathgames', isOn)} />
-    },
-    {
-      title: "SACE",
-      link: "https://www.sace.sa.edu.au/",
-      modifyElement: <Switch state={shortcutState.sace} onChange={(isOn: boolean) => switchChange('sace', isOn)} />
-    },
-    {
-      title: "Google Scholar",
-      link: "https://scholar.google.com/",
-      modifyElement: <Switch state={shortcutState.googlescholar} onChange={(isOn: boolean) => switchChange('googlescholar', isOn)} />
-    },
-    {
-      title: "Gmail",
-      link: "https://mail.google.com/",
-      modifyElement: <Switch state={shortcutState.gmail} onChange={(isOn: boolean) => switchChange('gmail', isOn)} />
-    },
-    {
-      title: "Netflix",
-      link: "https://www.netflix.com/",
-      modifyElement: <Switch state={shortcutState.netflix} onChange={(isOn: boolean) => switchChange('netflix', isOn)} />
+  const [newTitle, setNewTitle] = useState<string>("");
+  const [newURL, setNewURL] = useState<string>("");
+
+  const isValidTitle = (title: string): boolean => title.trim() !== "";
+  
+  const isValidURL = (url: string): boolean => {
+    const pattern = new RegExp("^(https?:\\/\\/)?[\\w.-]+[\\w.-]+$", "i");
+    return pattern.test(url);
+  };
+
+  const addNewCustomShortcut = (): void => {
+    if (isValidTitle(newTitle) && isValidURL(newURL)) {
+      const newShortcut: Shortcut = { name: newTitle.trim(), url: newURL.trim() };
+      const updatedCustomShortcuts = [...settingsState.customshortcuts, newShortcut];
+      setSettingsState({ ...settingsState, customshortcuts: updatedCustomShortcuts });
+      setNewTitle("");
+      setNewURL("");
+    } else {
+      // Replace with a more user-friendly way to display errors
+      console.error("Please enter a valid title and URL.");
     }
-  ];
+  };
+
+  const deleteCustomShortcut = (index: number): void => {
+    const updatedCustomShortcuts = settingsState.customshortcuts.filter((_, i) => i !== index);
+    setSettingsState({ ...settingsState, customshortcuts: updatedCustomShortcuts });
+  };
 
   return (
     <div className="flex flex-col divide-y divide-zinc-100">
-      {DefaultShortcuts.map((shortcut, index) => (
-        <div className="flex items-center justify-between px-4 py-3" key={index}>
-          {shortcut.title}
-          {shortcut.modifyElement}
-        </div>
-      ))}
+      {/* Form Section */}
+      <div className="flex items-center justify-between px-4 py-3">
+        <input
+          type="text"
+          placeholder="Title"
+          value={newTitle}
+          onChange={(e) => setNewTitle(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="URL"
+          value={newURL}
+          onChange={(e) => setNewURL(e.target.value)}
+        />
+        <button onClick={addNewCustomShortcut}>Add</button>
+      </div>
+            {/* Shortcuts Section */}
+            {settingsState.shortcuts ? (
+        settingsState.shortcuts.map((shortcut) => (
+          <div className="flex items-center justify-between px-4 py-3" key={shortcut.name}>
+            {shortcut.name}
+            <Switch state={shortcut.enabled} onChange={(isOn) => switchChange(shortcut.name, isOn)} />
+          </div>
+        ))
+      ) : (
+        <p>Loading shortcuts...</p>
+      )}
+      
+      {/* Custom Shortcuts Section */}
+      {settingsState.customshortcuts ? (
+        settingsState.customshortcuts.map((shortcut, index) => (
+          <div className="flex items-center justify-between px-4 py-3" key={shortcut.name}>
+            {shortcut.name}
+            <button onClick={() => deleteCustomShortcut(index)}>Delete</button>
+          </div>
+        ))
+      ) : (
+        <p>Loading custom shortcuts...</p>
+      )}
     </div>
   );
 }

interface/src/types/AppProps.ts

@@ -5,25 +5,29 @@ export interface SettingsState {
   animatedBackgroundSpeed: string;
   customThemeColor: string;
   betterSEQTAPlus: boolean;
+  shortcuts: Shortcut[];
+  customshortcuts: CustomShortcut[];
 }
 
-// Define the ToggleItem interface for the nested objects in menuitems
 interface ToggleItem {
   toggle: boolean;
 }
 
-// Define the Shortcut interface for the objects in the shortcuts array
 interface Shortcut {
   enabled: boolean;
   name: string;
 }
 
-// Define the MainConfig interface for the top-level object
+interface CustomShortcut {
+  name: string;
+  url: string;
+}
+
 export interface MainConfig {
   DarkMode: boolean;
   animatedbk: boolean;
   bksliderinput: string;
-  customshortcuts: any[];
+  customshortcuts: CustomShortcut[];
   defaultmenuorder: any[];
   lessonalert: boolean;
   menuitems: {
@@ -49,5 +53,5 @@ export interface MainConfig {
   onoff: boolean;
   selectedColor: string;
   shortcuts: Shortcut[];
-  subjectfilters: Record<string, any>; // Could be more specific based on what types are allowed
+  subjectfilters: Record<string, any>;
 }

interface/src/types/TabbedContainerProps.ts

@@ -5,7 +5,6 @@ export interface Tab {
 }
 export interface TabbedContainerProps {
     tabs: Tab[];
-    themeColor: string;
 }
 declare const TabbedContainer: React.FC<TabbedContainerProps>;
 export default TabbedContainer;