feat: add default page option

package.json

@@ -38,6 +38,7 @@
     "@codemirror/lang-less": "^6.0.2",
     "@heroicons/react": "^2.1.3",
     "@million/lint": "latest",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/color": "^3.0.6",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.4",

src/SEQTA.ts

@@ -571,8 +571,17 @@ async function handleSublink(sublink: string | undefined): Promise<void> {
     case 'news':
       await handleNewsPage();
       break;
-    case 'home':
     case undefined:
+      window.location.replace(`${location.origin}/#?page=/${settingsState.defaultPage}`);
+      if (settingsState.defaultPage === 'home') loadHomePage()
+      if (settingsState.defaultPage === 'timetable') handleTimetable()
+      if (settingsState.defaultPage === 'documents') handleDocuments(document.querySelector('.documents')!)
+      if (settingsState.defaultPage === 'reports') handleReports(document.querySelector('.reports')!)
+      if (settingsState.defaultPage === 'messages') handleMessages(document.querySelector('.messages')!)
+
+      finishLoad();
+      break;
+    case 'home':
       window.location.replace(`${location.origin}/#?page=/home`);
       console.log('[BetterSEQTA+] Started Init')
       if (settingsState.onoff) loadHomePage()
@@ -640,7 +649,7 @@ async function handleMessages(node: Element): Promise<void> {
 
   if (!settingsState.animations) return;
 
-  await waitForElm('[data-message]');
+  await waitForElm('[data-message]', true, 20);
   const messages = Array.from(document.querySelectorAll('[data-message]')).slice(0, 35);
   animate(
     messages,
@@ -657,7 +666,7 @@ async function handleDashboard(node: Element): Promise<void> {
   if (!(node instanceof HTMLElement)) return;
   if (!settingsState.animations) return;
 
-  await waitForElm('.dashlet');
+  await waitForElm('.dashlet', true, 20);
   animate(
     '.dashboard > *',
     { opacity: [0, 1], y: [10, 0] },
@@ -673,7 +682,7 @@ async function handleDocuments(node: Element): Promise<void> {
   if (!(node instanceof HTMLElement)) return;
   if (!settingsState.animations) return;
 
-  await waitForElm('.document');
+  await waitForElm('.document', true, 20);
   animate(
     '.documents tbody tr.document',
     { opacity: [0, 1], y: [10, 0] },
@@ -689,7 +698,7 @@ async function handleReports(node: Element): Promise<void> {
   if (!(node instanceof HTMLElement)) return;
   if (!settingsState.animations) return;
 
-  await waitForElm('.report');
+  await waitForElm('.report', true, 20);
   animate(
     '.reports .item',
     { opacity: [0, 1], y: [10, 0] },

src/background.ts

@@ -178,6 +178,7 @@ const DefaultValues: SettingsState = {
   originalSelectedColor: '',
   DarkMode: true,
   animations: true,
+  defaultPage: 'home',
   shortcuts: [
     {
       name: 'YouTube',

src/interface/SettingsContext.tsx

@@ -24,7 +24,8 @@ export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ chi
     customshortcuts: [],
     transparencyEffects: false,
     selectedTheme: '',
-    animations: true
+    animations: true,
+    defaultPage: 'home'
   });
 
   const [showPicker, setShowPicker] = useState<boolean>(false);

src/interface/components/Select.tsx

@@ -0,0 +1,7 @@
+export default function Select({ state, onChange, options }: { state: string, onChange: (value: string) => void, options: { value: string, label: string }[] }) {
+  return (
+    <select className='px-4 py-1.5 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white focus:border-none rounded-md mt-2 block w-full border-0 pl-3 pr-10 text-gray-900 focus:outline-none sm:text-sm sm:leading-6' value={state} onChange={(e) => onChange(e.target.value)}>
+    {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+  </select>
+  )
+}

src/interface/hooks/settingsState.ts

@@ -26,7 +26,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
         transparencyEffects: result.transparencyEffects,
         selectedTheme: result.selectedTheme,
         timeFormat: result.timeFormat,
-        animations: result.animations
+        animations: result.animations,
+        defaultPage: result.defaultPage
       });
     });
   });
@@ -43,11 +44,13 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "transparencyEffects": "transparencyEffects",
     "selectedTheme": "selectedTheme",
     "timeFormat": "timeFormat",
-    "animations": "animations"
+    "animations": "animations",
+    "defaultPage": "defaultPage"
   }), []);
   
   const storageChangeListener = (changes: browser.Storage.StorageChange) => {
     for (const [key, { newValue }] of Object.entries(changes)) {
+      console.log(key, newValue)
       if (key === "DarkMode") {
         if (key === "DarkMode" && newValue) {
           document.body.classList.add('dark');

src/interface/pages/SettingsPage/Settings.tsx

@@ -8,6 +8,7 @@ import { useSettingsContext } from '../../SettingsContext';
 import browser from 'webextension-polyfill'
 import { memo, useState } from 'react';
 import { toast } from 'react-toastify';
+import Select from '../../components/Select';
 
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
@@ -92,6 +93,19 @@ const Settings: React.FC = () => {
       description: "Prefer 12 hour time format for SEQTA",
       modifyElement: <Switch state={settingsState.timeFormat == "12"} onChange={(isOn: boolean) => switchChange('timeFormat', isOn ? "12" : "24")} />
     },
+    {
+      title: "Default Page",
+      description: "The page to load when SEQTA Learn is opened.",
+      modifyElement: <Select state={settingsState.defaultPage} onChange={(value: string) => switchChange('defaultPage', value)} options={[
+        { value: 'home', label: 'Home' },
+        { value: 'dashboard', label: 'Dashboard' },
+        { value: 'timetable', label: 'Timetable' },
+        { value: 'welcome', label: 'Welcome' },
+        { value: 'messages', label: 'Messages' },
+        { value: 'documents', label: 'Documents' },
+        { value: 'reports', label: 'Reports' },
+      ]} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",

src/interface/types/AppProps.ts

@@ -11,10 +11,7 @@ export interface SettingsState {
   transparencyEffects: boolean;
   timeFormat?: string;
   animations: boolean;
-}
-
-interface ToggleItem {
-  toggle: boolean;
+  defaultPage: string;
 }
 
 interface Shortcut {
@@ -27,38 +24,3 @@ export interface CustomShortcut {
   url: string;
   icon: string;
 }
-
-/* export interface MainConfig {
-  DarkMode: boolean;
-  animatedbk: boolean;
-  bksliderinput: string;
-  customshortcuts: CustomShortcut[];
-  defaultmenuorder: any[];
-  lessonalert: boolean;
-  menuitems: {
-    assessments: ToggleItem;
-    courses: ToggleItem;
-    dashboard: ToggleItem;
-    documents: ToggleItem;
-    forums: ToggleItem;
-    goals: ToggleItem;
-    home: ToggleItem;
-    messages: ToggleItem;
-    myed: ToggleItem;
-    news: ToggleItem;
-    notices: ToggleItem;
-    portals: ToggleItem;
-    reports: ToggleItem;
-    settings: ToggleItem;
-    timetable: ToggleItem;
-    welcome: ToggleItem;
-  };
-  menuorder: any[];
-  notificationcollector: boolean;
-  onoff: boolean;
-  selectedColor: string;
-  shortcuts: Shortcut[];
-  subjectfilters: Record<string, any>;
-  transparencyEffects: boolean;
-  selectedTheme: string;
-} */

src/seqta/utils/listeners/SettingsState.ts

@@ -21,7 +21,8 @@ class StorageManager {
         return Reflect.get(target.data, prop);
       },
       set: (target, prop: keyof SettingsState, value) => {
-        Reflect.set(target, prop, value);
+        console.log(target)
+        Reflect.set(target.data, prop, value);
         target.saveToStorage();
         return true;
       },

src/types/storage.ts

@@ -35,6 +35,7 @@ export interface SettingsState {
   justupdated?: boolean;
   timeFormat?: string;
   animations: boolean;
+  defaultPage: string;
 }
 
 interface ToggleItem {

tailwind.config.js

@@ -39,7 +39,10 @@ export default {
       }
     }
   },
-  plugins: [addVariablesForColors],
+  plugins: [
+    require('@tailwindcss/forms'),
+    addVariablesForColors,
+  ],
 };
 
 function addVariablesForColors({ addBase, theme }) {