From 2f08d6ee0836822b452d06019f42183708d01e4f Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 2 Sep 2024 21:46:48 +1000 Subject: [PATCH 001/152] fix: building working, (lots of bugs) --- package.json | 8 +- src/SEQTA.ts | 27 ++-- src/manifests/manifest.json | 6 +- .../SettingsContext.tsx | 0 .../assets/presetBackgrounds.tsx | 0 .../assets/react.svg | 0 .../components/Accordian.tsx | 0 .../components/BackgroundSelector.css | 0 .../components/BackgroundSelector.tsx | 0 .../components/Checkbox.tsx | 0 .../components/CodeEditor.css | 0 .../components/CodeEditor.tsx | 0 .../components/LoadingSpinner.tsx | 0 .../components/Picker.css | 0 .../components/Picker.tsx | 0 .../components/PickerSwatch.tsx | 0 .../components/Select.tsx | 0 .../components/Slider.css | 0 .../components/Slider.tsx | 0 .../components/Switch.css | 0 .../components/Switch.tsx | 0 .../components/TabbedContainer.tsx | 0 .../components/ThemeCover.tsx | 0 .../components/ThemeSelector.tsx | 0 .../components/store/header.tsx | 0 .../components/useVisibility.tsx | 0 src/{interface => old-interface}/dark.ts | 0 .../hooks/BackgroundDataLoader.tsx | 0 .../hooks/ThemeManagment.ts | 0 .../hooks/settingsState.ts | 0 src/{interface => old-interface}/index.css | 0 src/{interface => old-interface}/index.html | 0 src/{interface => old-interface}/main.d.ts | 0 src/{interface => old-interface}/main.tsx | 0 .../pages/SettingsPage.tsx | 0 .../pages/SettingsPage/About.tsx | 0 .../pages/SettingsPage/Settings.tsx | 0 .../pages/SettingsPage/Shortcuts.tsx | 0 .../pages/SettingsPage/Themes.tsx | 0 .../pages/Store.tsx | 0 .../pages/ThemeCreator.tsx | 0 .../types/AppProps.ts | 0 .../types/ColorPickerProps.ts | 0 .../types/CustomThemes.ts | 0 .../types/SettingsProps.ts | 0 .../types/SliderProps.ts | 0 .../types/SwitchProps.ts | 0 .../types/TabbedContainerProps.ts | 0 .../types/pocketbase-types.ts | 0 .../vite-env.d.ts | 0 src/seqta/ui/themes/UpdateThemePreview.ts | 2 +- src/seqta/ui/themes/applyTheme.ts | 2 +- src/seqta/ui/themes/deleteTheme.ts | 2 +- src/seqta/ui/themes/disableTheme.ts | 2 +- src/seqta/ui/themes/downloadTheme.ts | 2 +- src/seqta/ui/themes/enableCurrent.ts | 2 +- src/seqta/ui/themes/getAvailableThemes.ts | 2 +- src/seqta/ui/themes/getTheme.ts | 2 +- src/seqta/ui/themes/removeTheme.ts | 2 +- src/seqta/ui/themes/saveTheme.ts | 2 +- src/seqta/ui/themes/setTheme.ts | 2 +- src/seqta/utils/listeners/SettingsState.ts | 2 +- src/seqta/utils/listeners/StorageChanges.ts | 2 +- src/seqta/utils/sendThemeUpdate.ts | 4 +- src/svelte-interface/+layout.svelte | 19 +++ src/svelte-interface/components/Button.svelte | 8 ++ .../components/ColorPicker.svelte | 0 .../components/PickerSwatch.svelte | 129 ++++++++++++++++++ src/svelte-interface/components/Slider.svelte | 36 +++++ src/svelte-interface/components/Switch.css | 4 + src/svelte-interface/components/Switch.svelte | 64 +++++++++ .../components/TabbedContainer.css | 3 + .../components/TabbedContainer.svelte | 83 +++++++++++ src/svelte-interface/index.css | 17 +++ src/svelte-interface/index.html | 12 ++ src/svelte-interface/main.d.ts | 6 + src/svelte-interface/main.ts | 25 ++++ src/svelte-interface/pages/settings.svelte | 35 +++++ .../pages/settings/general.svelte | 118 ++++++++++++++++ .../pages/settings/shortcuts.svelte | 1 + .../pages/settings/theme.svelte | 1 + src/svelte-interface/state/SettingsState.ts | 91 ++++++++++++ src/svelte-interface/test.svelte | 1 + src/svelte-interface/types/AppProps.ts | 64 +++++++++ .../types/ColorPickerProps.ts | 5 + src/svelte-interface/types/SettingsProps.ts | 14 ++ src/svelte-interface/types/SliderProps.ts | 7 + src/svelte-interface/types/SwitchProps.ts | 6 + .../types/TabbedContainerProps.ts | 10 ++ src/svelte.config.js | 7 + tsconfig.json | 2 + vite-project/.gitignore | 24 ++++ vite-project/README.md | 47 +++++++ vite-project/index.html | 13 ++ vite-project/package.json | 21 +++ vite-project/public/vite.svg | 1 + vite-project/src/App.svelte | 47 +++++++ vite-project/src/app.css | 79 +++++++++++ vite-project/src/assets/svelte.svg | 1 + vite-project/src/lib/Counter.svelte | 10 ++ vite-project/src/main.ts | 8 ++ vite-project/src/vite-env.d.ts | 2 + vite-project/svelte.config.js | 7 + vite-project/tsconfig.json | 21 +++ vite-project/tsconfig.node.json | 12 ++ vite-project/vite.config.ts | 7 + vite.config.ts | 11 +- 107 files changed, 1113 insertions(+), 37 deletions(-) rename src/{interface => old-interface}/SettingsContext.tsx (100%) rename src/{interface => old-interface}/assets/presetBackgrounds.tsx (100%) rename src/{interface => old-interface}/assets/react.svg (100%) rename src/{interface => old-interface}/components/Accordian.tsx (100%) rename src/{interface => old-interface}/components/BackgroundSelector.css (100%) rename src/{interface => old-interface}/components/BackgroundSelector.tsx (100%) rename src/{interface => old-interface}/components/Checkbox.tsx (100%) rename src/{interface => old-interface}/components/CodeEditor.css (100%) rename src/{interface => old-interface}/components/CodeEditor.tsx (100%) rename src/{interface => old-interface}/components/LoadingSpinner.tsx (100%) rename src/{interface => old-interface}/components/Picker.css (100%) rename src/{interface => old-interface}/components/Picker.tsx (100%) rename src/{interface => old-interface}/components/PickerSwatch.tsx (100%) rename src/{interface => old-interface}/components/Select.tsx (100%) rename src/{interface => old-interface}/components/Slider.css (100%) rename src/{interface => old-interface}/components/Slider.tsx (100%) rename src/{interface => old-interface}/components/Switch.css (100%) rename src/{interface => old-interface}/components/Switch.tsx (100%) rename src/{interface => old-interface}/components/TabbedContainer.tsx (100%) rename src/{interface => old-interface}/components/ThemeCover.tsx (100%) rename src/{interface => old-interface}/components/ThemeSelector.tsx (100%) rename src/{interface => old-interface}/components/store/header.tsx (100%) rename src/{interface => old-interface}/components/useVisibility.tsx (100%) rename src/{interface => old-interface}/dark.ts (100%) rename src/{interface => old-interface}/hooks/BackgroundDataLoader.tsx (100%) rename src/{interface => old-interface}/hooks/ThemeManagment.ts (100%) rename src/{interface => old-interface}/hooks/settingsState.ts (100%) rename src/{interface => old-interface}/index.css (100%) rename src/{interface => old-interface}/index.html (100%) rename src/{interface => old-interface}/main.d.ts (100%) rename src/{interface => old-interface}/main.tsx (100%) rename src/{interface => old-interface}/pages/SettingsPage.tsx (100%) rename src/{interface => old-interface}/pages/SettingsPage/About.tsx (100%) rename src/{interface => old-interface}/pages/SettingsPage/Settings.tsx (100%) rename src/{interface => old-interface}/pages/SettingsPage/Shortcuts.tsx (100%) rename src/{interface => old-interface}/pages/SettingsPage/Themes.tsx (100%) rename src/{interface => old-interface}/pages/Store.tsx (100%) rename src/{interface => old-interface}/pages/ThemeCreator.tsx (100%) rename src/{interface => old-interface}/types/AppProps.ts (100%) rename src/{interface => old-interface}/types/ColorPickerProps.ts (100%) rename src/{interface => old-interface}/types/CustomThemes.ts (100%) rename src/{interface => old-interface}/types/SettingsProps.ts (100%) rename src/{interface => old-interface}/types/SliderProps.ts (100%) rename src/{interface => old-interface}/types/SwitchProps.ts (100%) rename src/{interface => old-interface}/types/TabbedContainerProps.ts (100%) rename src/{interface => old-interface}/types/pocketbase-types.ts (100%) rename src/{interface => old-interface}/vite-env.d.ts (100%) create mode 100644 src/svelte-interface/+layout.svelte create mode 100644 src/svelte-interface/components/Button.svelte create mode 100644 src/svelte-interface/components/ColorPicker.svelte create mode 100644 src/svelte-interface/components/PickerSwatch.svelte create mode 100644 src/svelte-interface/components/Slider.svelte create mode 100644 src/svelte-interface/components/Switch.css create mode 100644 src/svelte-interface/components/Switch.svelte create mode 100644 src/svelte-interface/components/TabbedContainer.css create mode 100644 src/svelte-interface/components/TabbedContainer.svelte create mode 100644 src/svelte-interface/index.css create mode 100644 src/svelte-interface/index.html create mode 100644 src/svelte-interface/main.d.ts create mode 100644 src/svelte-interface/main.ts create mode 100644 src/svelte-interface/pages/settings.svelte create mode 100644 src/svelte-interface/pages/settings/general.svelte create mode 100644 src/svelte-interface/pages/settings/shortcuts.svelte create mode 100644 src/svelte-interface/pages/settings/theme.svelte create mode 100644 src/svelte-interface/state/SettingsState.ts create mode 100644 src/svelte-interface/test.svelte create mode 100644 src/svelte-interface/types/AppProps.ts create mode 100644 src/svelte-interface/types/ColorPickerProps.ts create mode 100644 src/svelte-interface/types/SettingsProps.ts create mode 100644 src/svelte-interface/types/SliderProps.ts create mode 100644 src/svelte-interface/types/SwitchProps.ts create mode 100644 src/svelte-interface/types/TabbedContainerProps.ts create mode 100644 src/svelte.config.js create mode 100644 vite-project/.gitignore create mode 100644 vite-project/README.md create mode 100644 vite-project/index.html create mode 100644 vite-project/package.json create mode 100644 vite-project/public/vite.svg create mode 100644 vite-project/src/App.svelte create mode 100644 vite-project/src/app.css create mode 100644 vite-project/src/assets/svelte.svg create mode 100644 vite-project/src/lib/Counter.svelte create mode 100644 vite-project/src/main.ts create mode 100644 vite-project/src/vite-env.d.ts create mode 100644 vite-project/svelte.config.js create mode 100644 vite-project/tsconfig.json create mode 100644 vite-project/tsconfig.node.json create mode 100644 vite-project/vite.config.ts diff --git a/package.json b/package.json index 95e2d010..b63e874e 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "sass": "^1.70.0", "sass-loader": "^13.3.3", "semver": "^7.6.3", + "svelte-preprocess": "^6.0.2", "url": "^0.11.3" }, "dependencies": { @@ -53,7 +54,9 @@ "@codemirror/lang-less": "^6.0.2", "@heroicons/react": "^2.1.3", "@million/lint": "latest", + "@sveltejs/vite-plugin-svelte": "^3.1.2", "@tailwindcss/forms": "^0.5.7", + "@tsconfig/svelte": "^5.0.4", "@types/color": "^3.0.6", "@types/dompurify": "^3.0.5", "@types/lodash": "^4.17.4", @@ -85,10 +88,13 @@ "react-toastify": "^10.0.5", "rimraf": "^5.0.5", "sortablejs": "^1.15.2", + "svelte": "^4.2.19", + "svelte-hash-router": "^1.0.1", + "svelte-motion": "^0.12.2", "swiper": "latest", "tailwindcss": "^3.4.1", "ts-loader": "^9.5.1", - "typescript": "^5.3.3", + "typescript": "^5.5.4", "uuid": "^9.0.1", "vite": "^5.4.2", "webextension-polyfill": "^0.10.0" diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 0c4f18f1..b7593c7b 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -35,6 +35,7 @@ import coursesicon from '@/seqta/icons/coursesIcon' import iframeCSS from '@/css/iframe.scss?raw' import injectedCSS from '@/css/injected.scss?inline' import documentLoadCSS from '@/css/documentload.scss?inline' +import initSvelteInterface from './svelte-interface/main' let SettingsClicked = false export let MenuOptionsOpen = false @@ -936,7 +937,7 @@ export function AppendElementsToDisabledPage() { export function closeSettings() { const ExtensionSettings = document.getElementById('ExtensionPopup')! - const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement + // = document.getElementById('ExtensionIframe') as HTMLIFrameElement if (SettingsClicked == true) { ExtensionSettings!.classList.add('hide') @@ -952,9 +953,7 @@ export function closeSettings() { } SettingsClicked = false - if (ExtensionIframe.contentWindow) { - ExtensionIframe.contentWindow.postMessage('popupClosed', '*') - } + // hide extension frame } ExtensionSettings!.classList.add('hide') @@ -968,23 +967,26 @@ export function addExtensionSettings() { const extensionContainer = document.querySelector('#container') as HTMLDivElement if (extensionContainer) extensionContainer.appendChild(extensionPopup) - const extensionIframe: HTMLIFrameElement = document.createElement('iframe') - extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded` + /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe') + extensionIframe.src = `${browser.runtime.getURL('svelte-interface/index.html')}#settings/embedded` extensionIframe.id = 'ExtensionIframe' extensionIframe.setAttribute('allowTransparency', 'true') extensionIframe.setAttribute('excludeDarkCheck', 'true') extensionIframe.style.width = '384px' extensionIframe.style.height = '100%' extensionIframe.style.border = 'none' - extensionPopup.appendChild(extensionIframe) + extensionPopup.appendChild(extensionIframe) */ + + // create shadow dom and render svelte app + const shadow = extensionPopup.attachShadow({ mode: 'open' }); + const svelteApp = initSvelteInterface(shadow); + console.log(svelteApp) const container = document.getElementById('container') new SettingsResizer(); const closeExtensionPopup = () => { - const ExtensionIframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement - extensionPopup.classList.add('hide') if (settingsState.animations) { animate( @@ -996,14 +998,13 @@ export function addExtensionSettings() { extensionPopup.style.opacity = '0' extensionPopup.style.transform = 'scale(0)' } - if (ExtensionIframe.contentWindow) { - ExtensionIframe.contentWindow.postMessage('popupClosed', '*') - } + // tell it popup closed SettingsClicked = false } container!.onclick = (event) => { if ((event.target as HTMLElement).closest('#AddedSettings') == null && SettingsClicked) { + if (event.target == extensionPopup) return; closeExtensionPopup() } } @@ -1247,7 +1248,7 @@ export function setupSettingsButton() { extensionPopup!.style.opacity = '0' extensionPopup!.style.transform = 'scale(0)' } - (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); + /* (document.getElementById('ExtensionIframe')! as HTMLIFrameElement).contentWindow!.postMessage('popupClosed', '*'); */ SettingsClicked = false; } else { extensionPopup!.classList.remove('hide'); diff --git a/src/manifests/manifest.json b/src/manifests/manifest.json index a7a04d35..41f5bb08 100644 --- a/src/manifests/manifest.json +++ b/src/manifests/manifest.json @@ -10,7 +10,7 @@ }, "action": { "browser_style": true, - "default_popup": "interface/index.html#settings", + "default_popup": "svelte-interface/index.html#settings", "default_icon": { "32": "resources/icons/icon-32.png", "48": "resources/icons/icon-48.png", @@ -30,10 +30,6 @@ } ], "web_accessible_resources": [ - { - "resources": ["interface/index.html"], - "matches": ["*://*/*"] - }, { "resources": ["seqta/ui/background/background.html"], "matches": ["*://*/*"] diff --git a/src/interface/SettingsContext.tsx b/src/old-interface/SettingsContext.tsx similarity index 100% rename from src/interface/SettingsContext.tsx rename to src/old-interface/SettingsContext.tsx diff --git a/src/interface/assets/presetBackgrounds.tsx b/src/old-interface/assets/presetBackgrounds.tsx similarity index 100% rename from src/interface/assets/presetBackgrounds.tsx rename to src/old-interface/assets/presetBackgrounds.tsx diff --git a/src/interface/assets/react.svg b/src/old-interface/assets/react.svg similarity index 100% rename from src/interface/assets/react.svg rename to src/old-interface/assets/react.svg diff --git a/src/interface/components/Accordian.tsx b/src/old-interface/components/Accordian.tsx similarity index 100% rename from src/interface/components/Accordian.tsx rename to src/old-interface/components/Accordian.tsx diff --git a/src/interface/components/BackgroundSelector.css b/src/old-interface/components/BackgroundSelector.css similarity index 100% rename from src/interface/components/BackgroundSelector.css rename to src/old-interface/components/BackgroundSelector.css diff --git a/src/interface/components/BackgroundSelector.tsx b/src/old-interface/components/BackgroundSelector.tsx similarity index 100% rename from src/interface/components/BackgroundSelector.tsx rename to src/old-interface/components/BackgroundSelector.tsx diff --git a/src/interface/components/Checkbox.tsx b/src/old-interface/components/Checkbox.tsx similarity index 100% rename from src/interface/components/Checkbox.tsx rename to src/old-interface/components/Checkbox.tsx diff --git a/src/interface/components/CodeEditor.css b/src/old-interface/components/CodeEditor.css similarity index 100% rename from src/interface/components/CodeEditor.css rename to src/old-interface/components/CodeEditor.css diff --git a/src/interface/components/CodeEditor.tsx b/src/old-interface/components/CodeEditor.tsx similarity index 100% rename from src/interface/components/CodeEditor.tsx rename to src/old-interface/components/CodeEditor.tsx diff --git a/src/interface/components/LoadingSpinner.tsx b/src/old-interface/components/LoadingSpinner.tsx similarity index 100% rename from src/interface/components/LoadingSpinner.tsx rename to src/old-interface/components/LoadingSpinner.tsx diff --git a/src/interface/components/Picker.css b/src/old-interface/components/Picker.css similarity index 100% rename from src/interface/components/Picker.css rename to src/old-interface/components/Picker.css diff --git a/src/interface/components/Picker.tsx b/src/old-interface/components/Picker.tsx similarity index 100% rename from src/interface/components/Picker.tsx rename to src/old-interface/components/Picker.tsx diff --git a/src/interface/components/PickerSwatch.tsx b/src/old-interface/components/PickerSwatch.tsx similarity index 100% rename from src/interface/components/PickerSwatch.tsx rename to src/old-interface/components/PickerSwatch.tsx diff --git a/src/interface/components/Select.tsx b/src/old-interface/components/Select.tsx similarity index 100% rename from src/interface/components/Select.tsx rename to src/old-interface/components/Select.tsx diff --git a/src/interface/components/Slider.css b/src/old-interface/components/Slider.css similarity index 100% rename from src/interface/components/Slider.css rename to src/old-interface/components/Slider.css diff --git a/src/interface/components/Slider.tsx b/src/old-interface/components/Slider.tsx similarity index 100% rename from src/interface/components/Slider.tsx rename to src/old-interface/components/Slider.tsx diff --git a/src/interface/components/Switch.css b/src/old-interface/components/Switch.css similarity index 100% rename from src/interface/components/Switch.css rename to src/old-interface/components/Switch.css diff --git a/src/interface/components/Switch.tsx b/src/old-interface/components/Switch.tsx similarity index 100% rename from src/interface/components/Switch.tsx rename to src/old-interface/components/Switch.tsx diff --git a/src/interface/components/TabbedContainer.tsx b/src/old-interface/components/TabbedContainer.tsx similarity index 100% rename from src/interface/components/TabbedContainer.tsx rename to src/old-interface/components/TabbedContainer.tsx diff --git a/src/interface/components/ThemeCover.tsx b/src/old-interface/components/ThemeCover.tsx similarity index 100% rename from src/interface/components/ThemeCover.tsx rename to src/old-interface/components/ThemeCover.tsx diff --git a/src/interface/components/ThemeSelector.tsx b/src/old-interface/components/ThemeSelector.tsx similarity index 100% rename from src/interface/components/ThemeSelector.tsx rename to src/old-interface/components/ThemeSelector.tsx diff --git a/src/interface/components/store/header.tsx b/src/old-interface/components/store/header.tsx similarity index 100% rename from src/interface/components/store/header.tsx rename to src/old-interface/components/store/header.tsx diff --git a/src/interface/components/useVisibility.tsx b/src/old-interface/components/useVisibility.tsx similarity index 100% rename from src/interface/components/useVisibility.tsx rename to src/old-interface/components/useVisibility.tsx diff --git a/src/interface/dark.ts b/src/old-interface/dark.ts similarity index 100% rename from src/interface/dark.ts rename to src/old-interface/dark.ts diff --git a/src/interface/hooks/BackgroundDataLoader.tsx b/src/old-interface/hooks/BackgroundDataLoader.tsx similarity index 100% rename from src/interface/hooks/BackgroundDataLoader.tsx rename to src/old-interface/hooks/BackgroundDataLoader.tsx diff --git a/src/interface/hooks/ThemeManagment.ts b/src/old-interface/hooks/ThemeManagment.ts similarity index 100% rename from src/interface/hooks/ThemeManagment.ts rename to src/old-interface/hooks/ThemeManagment.ts diff --git a/src/interface/hooks/settingsState.ts b/src/old-interface/hooks/settingsState.ts similarity index 100% rename from src/interface/hooks/settingsState.ts rename to src/old-interface/hooks/settingsState.ts diff --git a/src/interface/index.css b/src/old-interface/index.css similarity index 100% rename from src/interface/index.css rename to src/old-interface/index.css diff --git a/src/interface/index.html b/src/old-interface/index.html similarity index 100% rename from src/interface/index.html rename to src/old-interface/index.html diff --git a/src/interface/main.d.ts b/src/old-interface/main.d.ts similarity index 100% rename from src/interface/main.d.ts rename to src/old-interface/main.d.ts diff --git a/src/interface/main.tsx b/src/old-interface/main.tsx similarity index 100% rename from src/interface/main.tsx rename to src/old-interface/main.tsx diff --git a/src/interface/pages/SettingsPage.tsx b/src/old-interface/pages/SettingsPage.tsx similarity index 100% rename from src/interface/pages/SettingsPage.tsx rename to src/old-interface/pages/SettingsPage.tsx diff --git a/src/interface/pages/SettingsPage/About.tsx b/src/old-interface/pages/SettingsPage/About.tsx similarity index 100% rename from src/interface/pages/SettingsPage/About.tsx rename to src/old-interface/pages/SettingsPage/About.tsx diff --git a/src/interface/pages/SettingsPage/Settings.tsx b/src/old-interface/pages/SettingsPage/Settings.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Settings.tsx rename to src/old-interface/pages/SettingsPage/Settings.tsx diff --git a/src/interface/pages/SettingsPage/Shortcuts.tsx b/src/old-interface/pages/SettingsPage/Shortcuts.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Shortcuts.tsx rename to src/old-interface/pages/SettingsPage/Shortcuts.tsx diff --git a/src/interface/pages/SettingsPage/Themes.tsx b/src/old-interface/pages/SettingsPage/Themes.tsx similarity index 100% rename from src/interface/pages/SettingsPage/Themes.tsx rename to src/old-interface/pages/SettingsPage/Themes.tsx diff --git a/src/interface/pages/Store.tsx b/src/old-interface/pages/Store.tsx similarity index 100% rename from src/interface/pages/Store.tsx rename to src/old-interface/pages/Store.tsx diff --git a/src/interface/pages/ThemeCreator.tsx b/src/old-interface/pages/ThemeCreator.tsx similarity index 100% rename from src/interface/pages/ThemeCreator.tsx rename to src/old-interface/pages/ThemeCreator.tsx diff --git a/src/interface/types/AppProps.ts b/src/old-interface/types/AppProps.ts similarity index 100% rename from src/interface/types/AppProps.ts rename to src/old-interface/types/AppProps.ts diff --git a/src/interface/types/ColorPickerProps.ts b/src/old-interface/types/ColorPickerProps.ts similarity index 100% rename from src/interface/types/ColorPickerProps.ts rename to src/old-interface/types/ColorPickerProps.ts diff --git a/src/interface/types/CustomThemes.ts b/src/old-interface/types/CustomThemes.ts similarity index 100% rename from src/interface/types/CustomThemes.ts rename to src/old-interface/types/CustomThemes.ts diff --git a/src/interface/types/SettingsProps.ts b/src/old-interface/types/SettingsProps.ts similarity index 100% rename from src/interface/types/SettingsProps.ts rename to src/old-interface/types/SettingsProps.ts diff --git a/src/interface/types/SliderProps.ts b/src/old-interface/types/SliderProps.ts similarity index 100% rename from src/interface/types/SliderProps.ts rename to src/old-interface/types/SliderProps.ts diff --git a/src/interface/types/SwitchProps.ts b/src/old-interface/types/SwitchProps.ts similarity index 100% rename from src/interface/types/SwitchProps.ts rename to src/old-interface/types/SwitchProps.ts diff --git a/src/interface/types/TabbedContainerProps.ts b/src/old-interface/types/TabbedContainerProps.ts similarity index 100% rename from src/interface/types/TabbedContainerProps.ts rename to src/old-interface/types/TabbedContainerProps.ts diff --git a/src/interface/types/pocketbase-types.ts b/src/old-interface/types/pocketbase-types.ts similarity index 100% rename from src/interface/types/pocketbase-types.ts rename to src/old-interface/types/pocketbase-types.ts diff --git a/src/interface/vite-env.d.ts b/src/old-interface/vite-env.d.ts similarity index 100% rename from src/interface/vite-env.d.ts rename to src/old-interface/vite-env.d.ts diff --git a/src/seqta/ui/themes/UpdateThemePreview.ts b/src/seqta/ui/themes/UpdateThemePreview.ts index b60aebc0..26002f75 100644 --- a/src/seqta/ui/themes/UpdateThemePreview.ts +++ b/src/seqta/ui/themes/UpdateThemePreview.ts @@ -1,4 +1,4 @@ -import { CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/applyTheme.ts b/src/seqta/ui/themes/applyTheme.ts index 7e2fae0f..9851c8fd 100644 --- a/src/seqta/ui/themes/applyTheme.ts +++ b/src/seqta/ui/themes/applyTheme.ts @@ -1,4 +1,4 @@ -import { CustomImage, CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomImage, CustomTheme } from '@/old-interface/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; import { applyCustomCSS } from './Themes'; diff --git a/src/seqta/ui/themes/deleteTheme.ts b/src/seqta/ui/themes/deleteTheme.ts index 2f9d1a38..03451eaf 100644 --- a/src/seqta/ui/themes/deleteTheme.ts +++ b/src/seqta/ui/themes/deleteTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/disableTheme.ts b/src/seqta/ui/themes/disableTheme.ts index cebd5983..f45d5fc0 100644 --- a/src/seqta/ui/themes/disableTheme.ts +++ b/src/seqta/ui/themes/disableTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { Mutex } from '@/seqta/utils/mutex'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts index 83ea5623..32e72eed 100644 --- a/src/seqta/ui/themes/downloadTheme.ts +++ b/src/seqta/ui/themes/downloadTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { Theme } from '@/interface/pages/Store'; +import type { Theme } from '@/old-interface/pages/Store'; import base64ToBlob from '@/seqta/utils/base64ToBlob'; type ThemeContent = { diff --git a/src/seqta/ui/themes/enableCurrent.ts b/src/seqta/ui/themes/enableCurrent.ts index 40379d2e..94a05076 100644 --- a/src/seqta/ui/themes/enableCurrent.ts +++ b/src/seqta/ui/themes/enableCurrent.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/getAvailableThemes.ts b/src/seqta/ui/themes/getAvailableThemes.ts index 429c04a3..0d86f2f0 100644 --- a/src/seqta/ui/themes/getAvailableThemes.ts +++ b/src/seqta/ui/themes/getAvailableThemes.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme, ThemeList } from '@/interface/types/CustomThemes'; +import type { CustomTheme, ThemeList } from '@/old-interface/types/CustomThemes'; import { blobToBase64 } from '@/seqta/utils/blobToBase64'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/getTheme.ts b/src/seqta/ui/themes/getTheme.ts index c698e13e..36b3cd7e 100644 --- a/src/seqta/ui/themes/getTheme.ts +++ b/src/seqta/ui/themes/getTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { blobToBase64 } from '@/seqta/utils/blobToBase64'; diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts index bfb5a613..a78cebce 100644 --- a/src/seqta/ui/themes/removeTheme.ts +++ b/src/seqta/ui/themes/removeTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; export const removeTheme = async (theme: CustomTheme) => { diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts index 060eaa6b..5be6bc3e 100644 --- a/src/seqta/ui/themes/saveTheme.ts +++ b/src/seqta/ui/themes/saveTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes'; +import type { CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; import { disableTheme } from './disableTheme'; diff --git a/src/seqta/ui/themes/setTheme.ts b/src/seqta/ui/themes/setTheme.ts index 0646408a..5e414b39 100644 --- a/src/seqta/ui/themes/setTheme.ts +++ b/src/seqta/ui/themes/setTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import { CustomTheme } from '@/interface/types/CustomThemes'; +import type { CustomTheme } from '@/old-interface/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts index ad46b139..057afb54 100644 --- a/src/seqta/utils/listeners/SettingsState.ts +++ b/src/seqta/utils/listeners/SettingsState.ts @@ -1,5 +1,5 @@ import browser from 'webextension-polyfill'; -import { SettingsState } from '@/types/storage'; +import type { SettingsState } from '@/types/storage'; type ChangeListener = (newValue: any, oldValue: any) => void; diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts index 271cd2b9..8f35ee91 100644 --- a/src/seqta/utils/listeners/StorageChanges.ts +++ b/src/seqta/utils/listeners/StorageChanges.ts @@ -12,7 +12,7 @@ import { } from '@/SEQTA'; import { updateBgDurations } from '@/seqta/ui/Animation'; import browser from 'webextension-polyfill'; -import { CustomShortcut } from '@/types/storage'; +import type { CustomShortcut } from '@/types/storage'; export class StorageChangeHandler { constructor() { diff --git a/src/seqta/utils/sendThemeUpdate.ts b/src/seqta/utils/sendThemeUpdate.ts index 0fa6f4a4..8e895b8e 100644 --- a/src/seqta/utils/sendThemeUpdate.ts +++ b/src/seqta/utils/sendThemeUpdate.ts @@ -1,6 +1,6 @@ export default function sendThemeUpdate() { - const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement + /* const iframe = document.getElementById('ExtensionIframe') as HTMLIFrameElement if (iframe) { iframe.contentWindow?.postMessage({ type: 'themeChanged' }, '*'); - } + } */ } \ No newline at end of file diff --git a/src/svelte-interface/+layout.svelte b/src/svelte-interface/+layout.svelte new file mode 100644 index 00000000..57fc0131 --- /dev/null +++ b/src/svelte-interface/+layout.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/svelte-interface/components/Button.svelte b/src/svelte-interface/components/Button.svelte new file mode 100644 index 00000000..944b98ff --- /dev/null +++ b/src/svelte-interface/components/Button.svelte @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/svelte-interface/components/ColorPicker.svelte b/src/svelte-interface/components/ColorPicker.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/svelte-interface/components/PickerSwatch.svelte b/src/svelte-interface/components/PickerSwatch.svelte new file mode 100644 index 00000000..a8d040e6 --- /dev/null +++ b/src/svelte-interface/components/PickerSwatch.svelte @@ -0,0 +1,129 @@ + + + \ No newline at end of file diff --git a/src/svelte-interface/components/Slider.svelte b/src/svelte-interface/components/Slider.svelte new file mode 100644 index 00000000..0c60c8d0 --- /dev/null +++ b/src/svelte-interface/components/Slider.svelte @@ -0,0 +1,36 @@ + + +
+ onChange(Number(e.currentTarget.value))} + class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider" + /> +
+ + \ No newline at end of file diff --git a/src/svelte-interface/components/Switch.css b/src/svelte-interface/components/Switch.css new file mode 100644 index 00000000..6be68af7 --- /dev/null +++ b/src/svelte-interface/components/Switch.css @@ -0,0 +1,4 @@ +.dark .switch[data-ison="true"], +.switch[data-ison="true"] { + background-color: #30D259; +} \ No newline at end of file diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte new file mode 100644 index 00000000..d41ca9fd --- /dev/null +++ b/src/svelte-interface/components/Switch.svelte @@ -0,0 +1,64 @@ + + +
e.key === "Enter" && toggleSwitch()} + role="switch" + aria-checked={$settingsState[setting]} + tabindex="0" +> +
+
\ No newline at end of file diff --git a/src/svelte-interface/components/TabbedContainer.css b/src/svelte-interface/components/TabbedContainer.css new file mode 100644 index 00000000..a0ce8c97 --- /dev/null +++ b/src/svelte-interface/components/TabbedContainer.css @@ -0,0 +1,3 @@ +.tab-width { + width: var(--tab-width); +} \ No newline at end of file diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte new file mode 100644 index 00000000..6b7a0b5f --- /dev/null +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -0,0 +1,83 @@ + + +
+ +
+ + {#each tabs as { title }, index} + + {/each} +
+
+
+ +
+ {#each tabs as { content }, index} +
+ +
+ {/each} +
+ +
+ + \ No newline at end of file diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css new file mode 100644 index 00000000..51d129cb --- /dev/null +++ b/src/svelte-interface/index.css @@ -0,0 +1,17 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +::-webkit-scrollbar { + display: none; +} \ No newline at end of file diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html new file mode 100644 index 00000000..165bf492 --- /dev/null +++ b/src/svelte-interface/index.html @@ -0,0 +1,12 @@ + + + + + + BetterSEQTA+ Settings + + + asdasds + + + diff --git a/src/svelte-interface/main.d.ts b/src/svelte-interface/main.d.ts new file mode 100644 index 00000000..6687dd4c --- /dev/null +++ b/src/svelte-interface/main.d.ts @@ -0,0 +1,6 @@ +import './index.css'; + +declare module "*.png"; +declare module "*.svg"; +declare module "*.jpeg"; +declare module "*.jpg"; \ No newline at end of file diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts new file mode 100644 index 00000000..fed4601c --- /dev/null +++ b/src/svelte-interface/main.ts @@ -0,0 +1,25 @@ +// @ts-expect-error - Svelte Hash Router is not typed (yet) +import { routes } from 'svelte-hash-router' +import App from './+layout.svelte'; +import Settings from './pages/settings.svelte'; +import styles from './index.css?inline'; + +export default function initSvelteInterface(shadow: ShadowRoot) { + console.log(shadow) + + routes.set({ + 'settings': Settings, + '*': Settings + }) + + const app = new App({ + target: shadow, + }); + + const style2 = document.createElement("style"); + style2.setAttribute("type", "text/css"); + style2.innerHTML = styles; + shadow.appendChild(style2); + + return app; +} \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte new file mode 100644 index 00000000..b2dbec4a --- /dev/null +++ b/src/svelte-interface/pages/settings.svelte @@ -0,0 +1,35 @@ + + +
+
+ Light logo + + +
+ + +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte new file mode 100644 index 00000000..4ff8e5ef --- /dev/null +++ b/src/svelte-interface/pages/settings/general.svelte @@ -0,0 +1,118 @@ + + +
+ {#each settings as { title, description, component: Component, props, id } (id)} +
+
+

{title}

+

{description}

+
+
+ {#if props?.state !== undefined} + + {:else} + + {/if} +
+
+ {/each} +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte new file mode 100644 index 00000000..81e784b3 --- /dev/null +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -0,0 +1 @@ +
shortcuts tab
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte new file mode 100644 index 00000000..bcd2b978 --- /dev/null +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -0,0 +1 @@ +
theme tab
\ No newline at end of file diff --git a/src/svelte-interface/state/SettingsState.ts b/src/svelte-interface/state/SettingsState.ts new file mode 100644 index 00000000..98bce624 --- /dev/null +++ b/src/svelte-interface/state/SettingsState.ts @@ -0,0 +1,91 @@ +import browser from "webextension-polyfill"; +import type { MainConfig, SettingsState } from "../types/AppProps"; +import { writable } from "svelte/store"; + +const initialState: SettingsState = { + notificationCollector: false, + lessonAlerts: false, + telemetry: false, + animatedBackground: false, + animatedBackgroundSpeed: '0', + customThemeColor: '', + betterSEQTAPlus: false, + shortcuts: [], + customshortcuts: [], + transparencyEffects: false, + theme: '' +}; + +const keyToStateMap: { [key: string]: string } = { + notificationcollector: 'notificationCollector', + lessonalert: 'lessonAlerts', + telemetry: 'telemetry', + animatedbk: 'animatedBackground', + bksliderinput: 'animatedBackgroundSpeed', + selectedColor: 'customThemeColor', + onoff: 'betterSEQTAPlus', + shortcuts: 'shortcuts', + customshortcuts: 'customshortcuts', + transparencyEffects: 'transparencyEffects' +}; + +const stateToKeyMap = Object.fromEntries( + Object.entries(keyToStateMap).map(([key, value]) => [value, key]) +); + +const storageChangeListener = async (changes: browser.Storage.StorageChange) => { + for (const [key, { newValue }] of Object.entries(changes)) { + const stateKey = keyToStateMap[key] || key; + + if (stateKey === 'DarkMode') { + if (newValue) { + document.body.classList.add('dark'); + } else { + document.body.classList.remove('dark'); + } + } + settingsState.update((prevState) => ({ ...prevState, [stateKey]: newValue })); + } +} + +const initialStorageLoad = async (storage: MainConfig) => { + for (const [key, value] of Object.entries(storage)) { + const stateKey = keyToStateMap[key] || key; + + if (stateKey === 'DarkMode') { + if (value) { + document.body.classList.add('dark'); + } else { + document.body.classList.remove('dark'); + } + } + settingsState.update((prevState) => ({ ...prevState, [stateKey]: value })); + } +} + +const settingsSubscription = (/* set: (value: SettingsState) => void */) => { + settingsState.subscribe((newState) => { + const stateToSave = Object.fromEntries( + Object.entries(newState).map(([key, value]) => [stateToKeyMap[key] || key, value]) + ); + browser.storage.local.set(stateToSave); + /* set(newState); */ + }); +} + +export const initializeListeners = async () => { + const result = await browser.storage.local.get() as MainConfig; + + await initialStorageLoad(result); + + settingsSubscription(); + + browser.storage.onChanged.addListener(storageChangeListener); +} + + +export const settingsState = writable(initialState); + +export const setSettingsValue = (key: K, value: SettingsState[K]) => { + settingsState.update((prevState) => ({ ...prevState, [key]: value })); +} \ No newline at end of file diff --git a/src/svelte-interface/test.svelte b/src/svelte-interface/test.svelte new file mode 100644 index 00000000..20d5be8c --- /dev/null +++ b/src/svelte-interface/test.svelte @@ -0,0 +1 @@ +

HI THERE!!!!

\ No newline at end of file diff --git a/src/svelte-interface/types/AppProps.ts b/src/svelte-interface/types/AppProps.ts new file mode 100644 index 00000000..0ec056c2 --- /dev/null +++ b/src/svelte-interface/types/AppProps.ts @@ -0,0 +1,64 @@ +export interface SettingsState { + notificationCollector: boolean; + theme: string; + lessonAlerts: boolean; + telemetry: boolean; + animatedBackground: boolean; + animatedBackgroundSpeed: string; + customThemeColor: string; + betterSEQTAPlus: boolean; + shortcuts: Shortcut[]; + customshortcuts: CustomShortcut[]; + transparencyEffects: boolean; +} + +interface ToggleItem { + toggle: boolean; +} + +interface Shortcut { + enabled: boolean; + name: string; +} + +export interface CustomShortcut { + name: string; + 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; + telemetry: boolean; + onoff: boolean; + selectedColor: string; + shortcuts: Shortcut[]; + subjectfilters: Record; + transparencyEffects: boolean; + theme: string; +} diff --git a/src/svelte-interface/types/ColorPickerProps.ts b/src/svelte-interface/types/ColorPickerProps.ts new file mode 100644 index 00000000..ae888971 --- /dev/null +++ b/src/svelte-interface/types/ColorPickerProps.ts @@ -0,0 +1,5 @@ +export interface ColorPickerProps { + color: string; + onChange: (color: string) => void; + id: string; +} \ No newline at end of file diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts new file mode 100644 index 00000000..418e4049 --- /dev/null +++ b/src/svelte-interface/types/SettingsProps.ts @@ -0,0 +1,14 @@ +import type { SettingsState } from './AppProps'; +import { ComponentType } from 'svelte'; + +export interface SettingsList { + title: string; + id: number; + description: string; + component: ComponentType; + props?: any; +} +export interface SettingsProps { + settingsState: SettingsState; + setSettingsState: React.Dispatch>; +} diff --git a/src/svelte-interface/types/SliderProps.ts b/src/svelte-interface/types/SliderProps.ts new file mode 100644 index 00000000..7ae50459 --- /dev/null +++ b/src/svelte-interface/types/SliderProps.ts @@ -0,0 +1,7 @@ +import React from 'react'; +import "./Slider.css"; +export interface Slider { + onValueChange: (value: number) => void; +} +declare const Slider: React.FC; +export default Slider; diff --git a/src/svelte-interface/types/SwitchProps.ts b/src/svelte-interface/types/SwitchProps.ts new file mode 100644 index 00000000..8a43742d --- /dev/null +++ b/src/svelte-interface/types/SwitchProps.ts @@ -0,0 +1,6 @@ +import "./Switch.css"; + +export interface SwitchProps { + onChange: (isOn: boolean) => void; + state: boolean; +} \ No newline at end of file diff --git a/src/svelte-interface/types/TabbedContainerProps.ts b/src/svelte-interface/types/TabbedContainerProps.ts new file mode 100644 index 00000000..cea6689d --- /dev/null +++ b/src/svelte-interface/types/TabbedContainerProps.ts @@ -0,0 +1,10 @@ +import React, { JSX } from 'react'; +export interface Tab { + title: string; + content: JSX.Element; +} +export interface TabbedContainerProps { + tabs: Tab[]; +} +declare const TabbedContainer: React.FC; +export default TabbedContainer; diff --git a/src/svelte.config.js b/src/svelte.config.js new file mode 100644 index 00000000..c099a835 --- /dev/null +++ b/src/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/tsconfig.json b/tsconfig.json index 93693431..075b026a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,5 @@ { + "extends": "@tsconfig/svelte/tsconfig.json", "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, @@ -24,4 +25,5 @@ "@/*": ["./src/*"] } }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] } diff --git a/vite-project/.gitignore b/vite-project/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/vite-project/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/vite-project/README.md b/vite-project/README.md new file mode 100644 index 00000000..e6cd94fc --- /dev/null +++ b/vite-project/README.md @@ -0,0 +1,47 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. + +## Technical considerations + +**Why use this over SvelteKit?** + +- It brings its own routing solution which might not be preferable for some users. +- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. + +This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. + +Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. + +**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** + +Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. + +**Why include `.vscode/extensions.json`?** + +Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. + +**Why enable `allowJs` in the TS template?** + +While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. + +**Why is HMR not preserving my local component state?** + +HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). + +If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. + +```ts +// store.ts +// An extremely simple external store +import { writable } from 'svelte/store' +export default writable(0) +``` diff --git a/vite-project/index.html b/vite-project/index.html new file mode 100644 index 00000000..b6c5f0af --- /dev/null +++ b/vite-project/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + TS + + +
+ + + diff --git a/vite-project/package.json b/vite-project/package.json new file mode 100644 index 00000000..7cf16f79 --- /dev/null +++ b/vite-project/package.json @@ -0,0 +1,21 @@ +{ + "name": "vite-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@tsconfig/svelte": "^5.0.4", + "svelte": "^4.2.18", + "svelte-check": "^3.8.5", + "tslib": "^2.6.3", + "typescript": "^5.5.3", + "vite": "^5.4.1" + } +} diff --git a/vite-project/public/vite.svg b/vite-project/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/vite-project/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vite-project/src/App.svelte b/vite-project/src/App.svelte new file mode 100644 index 00000000..e8b590f1 --- /dev/null +++ b/vite-project/src/App.svelte @@ -0,0 +1,47 @@ + + +
+ +

Vite + Svelte

+ +
+ +
+ +

+ Check out SvelteKit, the official Svelte app framework powered by Vite! +

+ +

+ Click on the Vite and Svelte logos to learn more +

+
+ + diff --git a/vite-project/src/app.css b/vite-project/src/app.css new file mode 100644 index 00000000..617f5e93 --- /dev/null +++ b/vite-project/src/app.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/vite-project/src/assets/svelte.svg b/vite-project/src/assets/svelte.svg new file mode 100644 index 00000000..c5e08481 --- /dev/null +++ b/vite-project/src/assets/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vite-project/src/lib/Counter.svelte b/vite-project/src/lib/Counter.svelte new file mode 100644 index 00000000..979b4dfc --- /dev/null +++ b/vite-project/src/lib/Counter.svelte @@ -0,0 +1,10 @@ + + + diff --git a/vite-project/src/main.ts b/vite-project/src/main.ts new file mode 100644 index 00000000..4d67e2ac --- /dev/null +++ b/vite-project/src/main.ts @@ -0,0 +1,8 @@ +import './app.css' +import App from './App.svelte' + +const app = new App({ + target: document.getElementById('app')!, +}) + +export default app diff --git a/vite-project/src/vite-env.d.ts b/vite-project/src/vite-env.d.ts new file mode 100644 index 00000000..4078e747 --- /dev/null +++ b/vite-project/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/vite-project/svelte.config.js b/vite-project/svelte.config.js new file mode 100644 index 00000000..b0683fd2 --- /dev/null +++ b/vite-project/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/vite-project/tsconfig.json b/vite-project/tsconfig.json new file mode 100644 index 00000000..df56300c --- /dev/null +++ b/vite-project/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "resolveJsonModule": true, + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true, + "isolatedModules": true, + "moduleDetection": "force" + }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/vite-project/tsconfig.node.json b/vite-project/tsconfig.node.json new file mode 100644 index 00000000..6c2d8703 --- /dev/null +++ b/vite-project/tsconfig.node.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite-project/vite.config.ts b/vite-project/vite.config.ts new file mode 100644 index 00000000..d7019694 --- /dev/null +++ b/vite-project/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], +}) diff --git a/vite.config.ts b/vite.config.ts index d31518f5..3a8c88fa 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,6 +8,8 @@ import react from '@vitejs/plugin-react-swc'; import million from "million/compiler"; //import MillionLint from '@million/lint'; +import { svelte } from '@sveltejs/vite-plugin-svelte' + import { chrome } from './src/manifests/chrome'; import { brave } from './src/manifests/brave'; import { edge } from './src/manifests/edge'; @@ -25,8 +27,11 @@ const mode = process.env.MODE || 'chrome'; export default defineConfig({ plugins: [ base64Loader, - react(), - million.vite({ auto: true }), + //react(), + svelte({ + emitCss: false, + }), + //million.vite({ auto: true }), //MillionLint.vite(), /* enable for testing and debugging performance */ crx({ manifest: targets.find(t => t.browser === mode.toLowerCase())?.manifest ?? chrome.manifest, @@ -53,7 +58,7 @@ export default defineConfig({ minify: false, rollupOptions: { input: { - settings: join(__dirname, 'src', 'interface', 'index.html'), + settings: join(__dirname, 'src', 'svelte-interface', 'index.html'), backgrounds: join(__dirname, 'src', 'seqta', 'ui', 'background', 'background.html') } } From e4ba89073ce788775cbcc9767d009fcf3d1e3a19 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 2 Sep 2024 21:48:17 +1000 Subject: [PATCH 002/152] fix: logo broken --- src/svelte-interface/pages/settings.svelte | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index b2dbec4a..099d2f7c 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -9,11 +9,7 @@ const openChangelog = () => { browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); }; - - - import logo from '../../resources/icons/betterseqta-dark-full.png'; - import logoDark from '../../resources/icons/betterseqta-light-full.png'; - + let standalone = false; // Define the tabs array @@ -26,8 +22,8 @@
- Light logo - + Light logo +
From c008b32efada38c270b6156eb28697a4b1aa84c9 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 4 Sep 2024 09:42:07 +1000 Subject: [PATCH 003/152] fix: svelte settings Sync --- package.json | 4 +- src/SEQTA.ts | 1 + src/background.ts | 2 +- src/seqta/utils/listeners/SettingsState.ts | 27 ++++++ .../{+layout.svelte => +layout.svel} | 0 src/svelte-interface/components/Switch.svelte | 73 +++++++-------- .../components/TabbedContainer.svelte | 83 ++++++++++------- src/svelte-interface/main.ts | 9 +- src/svelte-interface/pages/settings.svelte | 13 +-- .../pages/settings/general.svelte | 93 +++++++++---------- src/svelte-interface/state/SettingsState.ts | 91 ------------------ .../state/SettingsStore.svelte.ts | 45 +++++++++ src/svelte-interface/types/SettingsProps.ts | 4 +- tsconfig.json | 4 +- vite.config.ts | 4 +- 15 files changed, 220 insertions(+), 233 deletions(-) rename src/svelte-interface/{+layout.svelte => +layout.svel} (100%) delete mode 100644 src/svelte-interface/state/SettingsState.ts create mode 100644 src/svelte-interface/state/SettingsStore.svelte.ts diff --git a/package.json b/package.json index b63e874e..6f016cb7 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@codemirror/lang-less": "^6.0.2", "@heroicons/react": "^2.1.3", "@million/lint": "latest", - "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", "@tailwindcss/forms": "^0.5.7", "@tsconfig/svelte": "^5.0.4", "@types/color": "^3.0.6", @@ -88,7 +88,7 @@ "react-toastify": "^10.0.5", "rimraf": "^5.0.5", "sortablejs": "^1.15.2", - "svelte": "^4.2.19", + "svelte": "^5.0.0-next.243", "svelte-hash-router": "^1.0.1", "svelte-motion": "^0.12.2", "swiper": "latest", diff --git a/src/SEQTA.ts b/src/SEQTA.ts index b7593c7b..d147a86c 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -48,6 +48,7 @@ var IsSEQTAPage = false const hasSEQTAText = document.childNodes[1].textContent?.includes('Copyright (c) SEQTA Software') init() + async function init() { CheckForMenuList() const hasSEQTATitle = document.title.includes('SEQTA Learn') diff --git a/src/background.ts b/src/background.ts index 4c41dffe..e95640ce 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,5 +1,5 @@ import browser from 'webextension-polyfill' -import { SettingsState } from "@/types/storage"; +import type { SettingsState } from "@/types/storage"; export const openDB = () => { return new Promise((resolve, reject) => { diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts index 057afb54..77c02e58 100644 --- a/src/seqta/utils/listeners/SettingsState.ts +++ b/src/seqta/utils/listeners/SettingsState.ts @@ -2,15 +2,18 @@ import browser from 'webextension-polyfill'; import type { SettingsState } from '@/types/storage'; type ChangeListener = (newValue: any, oldValue: any) => void; +type GlobalChangeListener = (newValue: any, oldValue: any, key: string) => void; class StorageManager { private static instance: StorageManager; private data: SettingsState; private listeners: { [key: string]: ChangeListener[] }; + private globalListeners: GlobalChangeListener[]; private constructor() { this.data = {} as SettingsState; this.listeners = {}; + this.globalListeners = []; this.loadFromStorage(); const handler: ProxyHandler = { @@ -57,6 +60,11 @@ class StorageManager { await instance.loadFromStorage(); return instance; } + + public setKey(key: K, value: SettingsState[K]): void { + this.data[key] = value; + this.saveToStorage(); + } private async loadFromStorage(): Promise { const result = await browser.storage.local.get(); @@ -85,6 +93,9 @@ class StorageManager { listener(newValue, oldValue); } } + for (const listener of this.globalListeners) { + listener(newValue, oldValue, key); + } } } }); @@ -101,6 +112,22 @@ class StorageManager { } this.listeners[prop].push(listener); } + + /** + * Register a listener for any setting. + * @param listener The listener to call when any setting changes -> takes two arguments, (newValue, oldValue) + */ + public registerGlobal(listener: GlobalChangeListener): void { + this.globalListeners.push(listener); + } + + /** + * Get all settings. + * @returns All settings. + */ + public getAll(): SettingsState { + return this.data; + } } export const settingsState = StorageManager.getInstance(); diff --git a/src/svelte-interface/+layout.svelte b/src/svelte-interface/+layout.svel similarity index 100% rename from src/svelte-interface/+layout.svelte rename to src/svelte-interface/+layout.svel diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte index d41ca9fd..92d9b718 100644 --- a/src/svelte-interface/components/Switch.svelte +++ b/src/svelte-interface/components/Switch.svelte @@ -1,64 +1,63 @@ -
e.key === "Enter" && toggleSwitch()} + data-ison={state} + onclick={toggleSwitch} + onkeydown={(e) => e.key === "Enter" && toggleSwitch()} role="switch" - aria-checked={$settingsState[setting]} + aria-checked={state} tabindex="0" >
-
\ No newline at end of file + >
+
+ + diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte index 6b7a0b5f..339a532c 100644 --- a/src/svelte-interface/components/TabbedContainer.svelte +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -1,33 +1,41 @@ - -
+
{#each tabs as { title }, index} @@ -62,22 +75,22 @@
- {#each tabs as { content }, index} -
- -
+ {#each tabs as { Content }, index} +
+ +
{/each}
\ No newline at end of file diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts index fed4601c..009aed39 100644 --- a/src/svelte-interface/main.ts +++ b/src/svelte-interface/main.ts @@ -1,18 +1,19 @@ // @ts-expect-error - Svelte Hash Router is not typed (yet) import { routes } from 'svelte-hash-router' -import App from './+layout.svelte'; +//import App from './+layout.svelte'; import Settings from './pages/settings.svelte'; import styles from './index.css?inline'; +import { mount } from 'svelte'; export default function initSvelteInterface(shadow: ShadowRoot) { console.log(shadow) - routes.set({ + /* routes.set({ 'settings': Settings, '*': Settings - }) + }) */ - const app = new App({ + const app = mount(Settings, { target: shadow, }); diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 099d2f7c..e2ffd556 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -11,13 +11,6 @@ }; let standalone = false; - - // Define the tabs array - const tabs = [ - { title: 'Settings', content: Settings }, - { title: 'Shortcuts', content: Shortcuts }, - { title: 'Themes', content: Theme }, - ];
@@ -27,5 +20,9 @@
- +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index 4ff8e5ef..003e58f4 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -1,66 +1,62 @@
- {#each settings as { title, description, component: Component, props, id } (id)} -
-
-

{title}

-

{description}

+ settingsStore.setKey('DarkMode', isOn)} /> + {#if settings} + {#each settings as { title, description, Component, props, id } (id)} +
+
+

{title}

+

{description}

+
+
+ +
-
- {#if props?.state !== undefined} - - {:else} - - {/if} -
-
- {/each} + {/each} + {/if}
\ No newline at end of file diff --git a/src/svelte-interface/state/SettingsState.ts b/src/svelte-interface/state/SettingsState.ts deleted file mode 100644 index 98bce624..00000000 --- a/src/svelte-interface/state/SettingsState.ts +++ /dev/null @@ -1,91 +0,0 @@ -import browser from "webextension-polyfill"; -import type { MainConfig, SettingsState } from "../types/AppProps"; -import { writable } from "svelte/store"; - -const initialState: SettingsState = { - notificationCollector: false, - lessonAlerts: false, - telemetry: false, - animatedBackground: false, - animatedBackgroundSpeed: '0', - customThemeColor: '', - betterSEQTAPlus: false, - shortcuts: [], - customshortcuts: [], - transparencyEffects: false, - theme: '' -}; - -const keyToStateMap: { [key: string]: string } = { - notificationcollector: 'notificationCollector', - lessonalert: 'lessonAlerts', - telemetry: 'telemetry', - animatedbk: 'animatedBackground', - bksliderinput: 'animatedBackgroundSpeed', - selectedColor: 'customThemeColor', - onoff: 'betterSEQTAPlus', - shortcuts: 'shortcuts', - customshortcuts: 'customshortcuts', - transparencyEffects: 'transparencyEffects' -}; - -const stateToKeyMap = Object.fromEntries( - Object.entries(keyToStateMap).map(([key, value]) => [value, key]) -); - -const storageChangeListener = async (changes: browser.Storage.StorageChange) => { - for (const [key, { newValue }] of Object.entries(changes)) { - const stateKey = keyToStateMap[key] || key; - - if (stateKey === 'DarkMode') { - if (newValue) { - document.body.classList.add('dark'); - } else { - document.body.classList.remove('dark'); - } - } - settingsState.update((prevState) => ({ ...prevState, [stateKey]: newValue })); - } -} - -const initialStorageLoad = async (storage: MainConfig) => { - for (const [key, value] of Object.entries(storage)) { - const stateKey = keyToStateMap[key] || key; - - if (stateKey === 'DarkMode') { - if (value) { - document.body.classList.add('dark'); - } else { - document.body.classList.remove('dark'); - } - } - settingsState.update((prevState) => ({ ...prevState, [stateKey]: value })); - } -} - -const settingsSubscription = (/* set: (value: SettingsState) => void */) => { - settingsState.subscribe((newState) => { - const stateToSave = Object.fromEntries( - Object.entries(newState).map(([key, value]) => [stateToKeyMap[key] || key, value]) - ); - browser.storage.local.set(stateToSave); - /* set(newState); */ - }); -} - -export const initializeListeners = async () => { - const result = await browser.storage.local.get() as MainConfig; - - await initialStorageLoad(result); - - settingsSubscription(); - - browser.storage.onChanged.addListener(storageChangeListener); -} - - -export const settingsState = writable(initialState); - -export const setSettingsValue = (key: K, value: SettingsState[K]) => { - settingsState.update((prevState) => ({ ...prevState, [key]: value })); -} \ No newline at end of file diff --git a/src/svelte-interface/state/SettingsStore.svelte.ts b/src/svelte-interface/state/SettingsStore.svelte.ts new file mode 100644 index 00000000..7c253d0c --- /dev/null +++ b/src/svelte-interface/state/SettingsStore.svelte.ts @@ -0,0 +1,45 @@ +import { settingsState } from "@/seqta/utils/listeners/SettingsState"; +import type { SettingsState } from '@/types/storage'; + +export function createSettingsState() { + let settings = $state(settingsState); + + const subscribers = new Set<(value: SettingsState) => void>(); + + // Register a global listener to notify subscribers on any change + settingsState.registerGlobal((newValue, oldValue, key) => { + console.log('Global listener triggered:', { newValue, oldValue, key }); + if (newValue !== undefined) { + settings = { ...settings, [key]: newValue }; + notifySubscribers(settings); + } + }); + + function notifySubscribers(newValue: SettingsState) { + console.log('Notifying subscribers with:', newValue); + subscribers.forEach(subscriber => subscriber(newValue)); + } + + return { + get settings() { return settings; }, + set(newSettings: SettingsState) { + settings = newSettings; + notifySubscribers(settings); + }, + setKey(key: K, value: SettingsState[K]) { + settings[key] = value; + settingsState.setKey(key, value); + notifySubscribers(settings); + }, + subscribe(callback: (value: SettingsState) => void) { + subscribers.add(callback); + // Immediately call the callback with the current value + callback(settings); + + // Return an unsubscribe function + return () => { + subscribers.delete(callback); + }; + } + }; +} \ No newline at end of file diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts index 418e4049..8c598d9b 100644 --- a/src/svelte-interface/types/SettingsProps.ts +++ b/src/svelte-interface/types/SettingsProps.ts @@ -1,11 +1,11 @@ import type { SettingsState } from './AppProps'; -import { ComponentType } from 'svelte'; +import type { Component } from 'svelte'; export interface SettingsList { title: string; id: number; description: string; - component: ComponentType; + Component: Component; props?: any; } export interface SettingsProps { diff --git a/tsconfig.json b/tsconfig.json index 075b026a..fdfa5b31 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ /* Bundler mode */ "moduleResolution": "bundler", - "allowImportingTsExtensions": false, + "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, @@ -25,5 +25,5 @@ "@/*": ["./src/*"] } }, - "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/svelte-interface/+layout.sveltes"] } diff --git a/vite.config.ts b/vite.config.ts index 3a8c88fa..22d8c776 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -29,7 +29,7 @@ export default defineConfig({ base64Loader, //react(), svelte({ - emitCss: false, + emitCss: false }), //million.vite({ auto: true }), //MillionLint.vite(), /* enable for testing and debugging performance */ @@ -54,7 +54,7 @@ export default defineConfig({ }, build: { outDir: resolve(__dirname, 'dist', mode), - emptyOutDir: true, + emptyOutDir: false, minify: false, rollupOptions: { input: { From 19102f9bcd8e79c3a327d632377fd9a7ac0e48cc Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 4 Sep 2024 13:18:48 +1000 Subject: [PATCH 004/152] fix: update props and types for General Settings page --- src/seqta/utils/listeners/SettingsState.ts | 19 ++++- src/svelte-interface/components/Button.svelte | 5 +- src/svelte-interface/components/Switch.svelte | 4 -- .../pages/settings/general.svelte | 69 +++++++++---------- .../state/SettingsStore.svelte.ts | 45 ------------ src/svelte-interface/types/SettingsProps.ts | 3 +- 6 files changed, 52 insertions(+), 93 deletions(-) delete mode 100644 src/svelte-interface/state/SettingsStore.svelte.ts diff --git a/src/seqta/utils/listeners/SettingsState.ts b/src/seqta/utils/listeners/SettingsState.ts index 77c02e58..a3280c42 100644 --- a/src/seqta/utils/listeners/SettingsState.ts +++ b/src/seqta/utils/listeners/SettingsState.ts @@ -1,5 +1,6 @@ import browser from 'webextension-polyfill'; import type { SettingsState } from '@/types/storage'; +import type { Subscriber, Unsubscriber } from 'svelte/store'; type ChangeListener = (newValue: any, oldValue: any) => void; type GlobalChangeListener = (newValue: any, oldValue: any, key: string) => void; @@ -9,6 +10,7 @@ class StorageManager { private data: SettingsState; private listeners: { [key: string]: ChangeListener[] }; private globalListeners: GlobalChangeListener[]; + private subscribers: Set> = new Set(); private constructor() { this.data = {} as SettingsState; @@ -60,7 +62,7 @@ class StorageManager { await instance.loadFromStorage(); return instance; } - + public setKey(key: K, value: SettingsState[K]): void { this.data[key] = value; this.saveToStorage(); @@ -73,6 +75,7 @@ class StorageManager { private async saveToStorage(): Promise { await browser.storage.local.set(this.data); + this.notifySubscribers(); } private async removeFromStorage(key: string): Promise { @@ -128,6 +131,20 @@ class StorageManager { public getAll(): SettingsState { return this.data; } + + public subscribe(run: Subscriber): Unsubscriber { + this.subscribers.add(run); + run(this.data); + return () => { + this.subscribers.delete(run); + }; + } + + private notifySubscribers(): void { + for (const subscriber of this.subscribers) { + subscriber(this.data); + } + } } export const settingsState = StorageManager.getInstance(); diff --git a/src/svelte-interface/components/Button.svelte b/src/svelte-interface/components/Button.svelte index 944b98ff..22362c6d 100644 --- a/src/svelte-interface/components/Button.svelte +++ b/src/svelte-interface/components/Button.svelte @@ -1,8 +1,7 @@ - \ No newline at end of file diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte index 92d9b718..507c34e9 100644 --- a/src/svelte-interface/components/Switch.svelte +++ b/src/svelte-interface/components/Switch.svelte @@ -10,10 +10,6 @@ onChange(!state); }; - $effect(() => { - console.log('state', state); - }); - const springParams = { stiffness: 700, damping: 30, diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index 003e58f4..60043869 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -6,24 +6,32 @@ import browser from "webextension-polyfill" - import type { SettingsList } from "../../types/SettingsProps" - import { createSettingsState } from "../../state/SettingsStore.svelte.ts" + import type { SettingsList } from "@/svelte-interface/types/SettingsProps" + import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts" + - const settingsStore = createSettingsState(); +{#snippet Setting({ title, description, Component, props }: SettingsList) } +
+
+

{title}

+

{description}

+
+
+ +
+
+{/snippet} - let test = $state(false); - - const settings: SettingsList[] = [ +
+ {#each [ { title: "Transparency Effects", description: "Enables transparency effects on certain elements such as blur. (May impact battery life)", id: 1, Component: Switch, props: { - /* state: $settingsStore.transparencyEffects, - onChange: (isOn: boolean) => settingsStore.setKey('transparencyEffects', isOn) */ - state: test, - onChange: (isOn: boolean) => test = isOn + state: $settingsState.transparencyEffects, + onChange: (isOn: boolean) => settingsState.transparencyEffects = isOn } }, { @@ -32,8 +40,8 @@ id: 2, Component: Switch as any, props: { - state: $settingsStore.animatedbk, - onChange: (isOn: boolean) => settingsStore.setKey('animatedbk', isOn) + state: $settingsState.animatedbk, + onChange: (isOn: boolean) => settingsState.animatedbk = isOn } }, { @@ -42,8 +50,8 @@ id: 3, Component: Slider, props: { - state: $settingsStore.bksliderinput, - onChange: (value: number) => settingsStore.setKey('bksliderinput', `${value}`) + state: $settingsState.bksliderinput, + onChange: (value: number) => settingsState.bksliderinput = `${value}` } }, /* { @@ -68,8 +76,8 @@ id: 7, Component: Switch, props: { - state: $settingsStore.notificationcollector, - onChange: (isOn: boolean) => settingsStore.setKey('notificationcollector', isOn) + state: $settingsState.notificationcollector, + onChange: (isOn: boolean) => settingsState.notificationcollector = isOn } }, { @@ -78,8 +86,8 @@ id: 8, Component: Switch, props: { - state: $settingsStore.lessonalert, - onChange: (isOn: boolean) => settingsStore.setKey('lessonalert', isOn) + state: $settingsState.lessonalert, + onChange: (isOn: boolean) => settingsState.lessonalert = isOn } }, { @@ -88,26 +96,11 @@ id: 9, Component: Switch, props: { - state: $settingsStore.onoff, - onChange: (isOn: boolean) => settingsStore.setKey('onoff', isOn) + state: $settingsState.onoff, + onChange: (isOn: boolean) => settingsState.onoff = isOn } } - ]; - - -
- settingsStore.setKey('DarkMode', isOn)} /> - {#if settings} - {#each settings as { title, description, Component, props, id } (id)} -
-
-

{title}

-

{description}

-
-
- -
-
- {/each} - {/if} + ] as setting} + {@render Setting(setting)} + {/each}
\ No newline at end of file diff --git a/src/svelte-interface/state/SettingsStore.svelte.ts b/src/svelte-interface/state/SettingsStore.svelte.ts deleted file mode 100644 index 7c253d0c..00000000 --- a/src/svelte-interface/state/SettingsStore.svelte.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { settingsState } from "@/seqta/utils/listeners/SettingsState"; -import type { SettingsState } from '@/types/storage'; - -export function createSettingsState() { - let settings = $state(settingsState); - - const subscribers = new Set<(value: SettingsState) => void>(); - - // Register a global listener to notify subscribers on any change - settingsState.registerGlobal((newValue, oldValue, key) => { - console.log('Global listener triggered:', { newValue, oldValue, key }); - if (newValue !== undefined) { - settings = { ...settings, [key]: newValue }; - notifySubscribers(settings); - } - }); - - function notifySubscribers(newValue: SettingsState) { - console.log('Notifying subscribers with:', newValue); - subscribers.forEach(subscriber => subscriber(newValue)); - } - - return { - get settings() { return settings; }, - set(newSettings: SettingsState) { - settings = newSettings; - notifySubscribers(settings); - }, - setKey(key: K, value: SettingsState[K]) { - settings[key] = value; - settingsState.setKey(key, value); - notifySubscribers(settings); - }, - subscribe(callback: (value: SettingsState) => void) { - subscribers.add(callback); - // Immediately call the callback with the current value - callback(settings); - - // Return an unsubscribe function - return () => { - subscribers.delete(callback); - }; - } - }; -} \ No newline at end of file diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts index 8c598d9b..4c7f5673 100644 --- a/src/svelte-interface/types/SettingsProps.ts +++ b/src/svelte-interface/types/SettingsProps.ts @@ -1,11 +1,10 @@ import type { SettingsState } from './AppProps'; -import type { Component } from 'svelte'; export interface SettingsList { title: string; id: number; description: string; - Component: Component; + Component: any; /* TODO: Give this a type */ props?: any; } export interface SettingsProps { From 89f27434751a2e454446ab6ba9b3397730262d66 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 4 Sep 2024 13:22:17 +1000 Subject: [PATCH 005/152] fix: tabs background width 0 --- .../components/TabbedContainer.svelte | 13 +++---------- src/svelte-interface/index.css | 4 ++++ 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte index 339a532c..cd0f3c67 100644 --- a/src/svelte-interface/components/TabbedContainer.svelte +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -53,12 +53,11 @@
- +
{#each tabs as { title }, index} @@ -87,10 +86,4 @@ {/each}
-
- - \ No newline at end of file +
\ No newline at end of file diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css index 51d129cb..51263b33 100644 --- a/src/svelte-interface/index.css +++ b/src/svelte-interface/index.css @@ -14,4 +14,8 @@ ::-webkit-scrollbar { display: none; +} + +.tab-width { + width: var(--tab-width); } \ No newline at end of file From 52bbe4d7e4c29a525af872902e8c4f9ec84030fe Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 4 Sep 2024 16:27:08 +1000 Subject: [PATCH 006/152] feat(slider): update slider for Svelte 5 compatibility --- src/svelte-interface/components/Slider.svelte | 9 +++++---- src/svelte-interface/components/TabbedContainer.svelte | 7 ------- src/svelte-interface/pages/settings.svelte | 7 +++---- src/svelte-interface/pages/settings/shortcuts.svelte | 4 ++++ src/svelte-interface/pages/settings/theme.svelte | 4 ++++ 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/svelte-interface/components/Slider.svelte b/src/svelte-interface/components/Slider.svelte index 0c60c8d0..00459c70 100644 --- a/src/svelte-interface/components/Slider.svelte +++ b/src/svelte-interface/components/Slider.svelte @@ -1,15 +1,16 @@ -
+
onChange(Number(e.currentTarget.value))} + style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`} + onchange={(e) => onChange(Number(e.currentTarget.value))} class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider" />
diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte index cd0f3c67..7b7f1a8d 100644 --- a/src/svelte-interface/components/TabbedContainer.svelte +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -44,16 +44,9 @@ window.removeEventListener("message", handleMessage); }; }); - - /* $effect(() => { - if (tabs.length > 0) { - updateTabWidth(); - } - }); */
-
{ browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); }; - let standalone = false; + let standalone = $state(false);
Light logo - +
- + + + +
shortcuts tab
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte index bcd2b978..ae68c359 100644 --- a/src/svelte-interface/pages/settings/theme.svelte +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -1 +1,5 @@ + +
theme tab
\ No newline at end of file From d567c625c4514ce90c0390de5933170c3e5871d0 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 4 Sep 2024 16:30:56 +1000 Subject: [PATCH 007/152] chore(deps): update motion to latest version --- package.json | 2 +- src/svelte-interface/components/Switch.svelte | 23 ++++++++++--------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 6f016cb7..876fc087 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "localforage": "^1.10.0", "lodash": "^4.17.21", "million": "latest", - "motion": "^10.17.0", + "motion": "^10.18.0", "publish-browser-extension": "^2.2.1", "react": "^18.2.0", "react-best-gradient-color-picker": "3.0.5", diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte index 507c34e9..f97dfa51 100644 --- a/src/svelte-interface/components/Switch.svelte +++ b/src/svelte-interface/components/Switch.svelte @@ -3,7 +3,6 @@ import { onMount } from "svelte"; let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>(); - let handle: HTMLElement | null = null; const toggleSwitch = () => { @@ -11,20 +10,22 @@ }; const springParams = { - stiffness: 700, + stiffness: 600, damping: 30, }; const animateSwitch = (enabled: boolean) => { - if (handle) { - animate( - handle, - { x: enabled ? 20 : 0 }, - { - easing: spring(springParams), - } - ); - } + if (!handle) return; + animate( + handle, + { + x: enabled ? 20 : 0, + scaleX: [1, 2, 1] + }, + { + easing: spring(springParams), + } + ); }; // Trigger animation whenever state changes From c2da4c1ed5664cf0554e36a4209a24f1d9187e69 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 19:48:09 +0800 Subject: [PATCH 008/152] add chrome types --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 876fc087..94f2995c 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", "@tailwindcss/forms": "^0.5.7", "@tsconfig/svelte": "^5.0.4", + "@types/chrome": "^0.0.270", "@types/color": "^3.0.6", "@types/dompurify": "^3.0.5", "@types/lodash": "^4.17.4", From e3ec0d83ab6e1b8c887dbbe3c1f82aa106f48d39 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 19:54:46 +0800 Subject: [PATCH 009/152] fix: Icons and images not displaying correctly --- src/manifests/manifest.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/manifests/manifest.json b/src/manifests/manifest.json index 41f5bb08..b0cdec0e 100644 --- a/src/manifests/manifest.json +++ b/src/manifests/manifest.json @@ -37,6 +37,10 @@ { "resources": ["*://*/*"], "matches": ["*://*/*"] + }, + { + "resources": ["resources/icons/*"], + "matches": ["*://*/*"] } ] } From cf379c61aa27ab35f26ff9ca5b4657826a3c5509 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 19:57:33 +0800 Subject: [PATCH 010/152] remove redundant vite-project dir --- vite-project/.gitignore | 24 --------- vite-project/README.md | 47 ----------------- vite-project/index.html | 13 ----- vite-project/package.json | 21 -------- vite-project/public/vite.svg | 1 - vite-project/src/App.svelte | 47 ----------------- vite-project/src/app.css | 79 ----------------------------- vite-project/src/assets/svelte.svg | 1 - vite-project/src/lib/Counter.svelte | 10 ---- vite-project/src/main.ts | 8 --- vite-project/src/vite-env.d.ts | 2 - vite-project/svelte.config.js | 7 --- vite-project/tsconfig.json | 21 -------- vite-project/tsconfig.node.json | 12 ----- vite-project/vite.config.ts | 7 --- 15 files changed, 300 deletions(-) delete mode 100644 vite-project/.gitignore delete mode 100644 vite-project/README.md delete mode 100644 vite-project/index.html delete mode 100644 vite-project/package.json delete mode 100644 vite-project/public/vite.svg delete mode 100644 vite-project/src/App.svelte delete mode 100644 vite-project/src/app.css delete mode 100644 vite-project/src/assets/svelte.svg delete mode 100644 vite-project/src/lib/Counter.svelte delete mode 100644 vite-project/src/main.ts delete mode 100644 vite-project/src/vite-env.d.ts delete mode 100644 vite-project/svelte.config.js delete mode 100644 vite-project/tsconfig.json delete mode 100644 vite-project/tsconfig.node.json delete mode 100644 vite-project/vite.config.ts diff --git a/vite-project/.gitignore b/vite-project/.gitignore deleted file mode 100644 index a547bf36..00000000 --- a/vite-project/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/vite-project/README.md b/vite-project/README.md deleted file mode 100644 index e6cd94fc..00000000 --- a/vite-project/README.md +++ /dev/null @@ -1,47 +0,0 @@ -# Svelte + TS + Vite - -This template should help get you started developing with Svelte and TypeScript in Vite. - -## Recommended IDE Setup - -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). - -## Need an official Svelte framework? - -Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. - -## Technical considerations - -**Why use this over SvelteKit?** - -- It brings its own routing solution which might not be preferable for some users. -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. - -This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. - -Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. - -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** - -Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. - -**Why include `.vscode/extensions.json`?** - -Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. - -**Why enable `allowJs` in the TS template?** - -While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. - -**Why is HMR not preserving my local component state?** - -HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). - -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. - -```ts -// store.ts -// An extremely simple external store -import { writable } from 'svelte/store' -export default writable(0) -``` diff --git a/vite-project/index.html b/vite-project/index.html deleted file mode 100644 index b6c5f0af..00000000 --- a/vite-project/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + Svelte + TS - - -
- - - diff --git a/vite-project/package.json b/vite-project/package.json deleted file mode 100644 index 7cf16f79..00000000 --- a/vite-project/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "vite-project", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" - }, - "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^3.1.2", - "@tsconfig/svelte": "^5.0.4", - "svelte": "^4.2.18", - "svelte-check": "^3.8.5", - "tslib": "^2.6.3", - "typescript": "^5.5.3", - "vite": "^5.4.1" - } -} diff --git a/vite-project/public/vite.svg b/vite-project/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/vite-project/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/vite-project/src/App.svelte b/vite-project/src/App.svelte deleted file mode 100644 index e8b590f1..00000000 --- a/vite-project/src/App.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
- -

Vite + Svelte

- -
- -
- -

- Check out SvelteKit, the official Svelte app framework powered by Vite! -

- -

- Click on the Vite and Svelte logos to learn more -

-
- - diff --git a/vite-project/src/app.css b/vite-project/src/app.css deleted file mode 100644 index 617f5e93..00000000 --- a/vite-project/src/app.css +++ /dev/null @@ -1,79 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/vite-project/src/assets/svelte.svg b/vite-project/src/assets/svelte.svg deleted file mode 100644 index c5e08481..00000000 --- a/vite-project/src/assets/svelte.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/vite-project/src/lib/Counter.svelte b/vite-project/src/lib/Counter.svelte deleted file mode 100644 index 979b4dfc..00000000 --- a/vite-project/src/lib/Counter.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/vite-project/src/main.ts b/vite-project/src/main.ts deleted file mode 100644 index 4d67e2ac..00000000 --- a/vite-project/src/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -import './app.css' -import App from './App.svelte' - -const app = new App({ - target: document.getElementById('app')!, -}) - -export default app diff --git a/vite-project/src/vite-env.d.ts b/vite-project/src/vite-env.d.ts deleted file mode 100644 index 4078e747..00000000 --- a/vite-project/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/vite-project/svelte.config.js b/vite-project/svelte.config.js deleted file mode 100644 index b0683fd2..00000000 --- a/vite-project/svelte.config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' - -export default { - // Consult https://svelte.dev/docs#compile-time-svelte-preprocess - // for more information about preprocessors - preprocess: vitePreprocess(), -} diff --git a/vite-project/tsconfig.json b/vite-project/tsconfig.json deleted file mode 100644 index df56300c..00000000 --- a/vite-project/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "@tsconfig/svelte/tsconfig.json", - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "module": "ESNext", - "resolveJsonModule": true, - /** - * Typecheck JS in `.svelte` and `.js` files by default. - * Disable checkJs if you'd like to use dynamic types in JS. - * Note that setting allowJs false does not prevent the use - * of JS in `.svelte` files. - */ - "allowJs": true, - "checkJs": true, - "isolatedModules": true, - "moduleDetection": "force" - }, - "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], - "references": [{ "path": "./tsconfig.node.json" }] -} diff --git a/vite-project/tsconfig.node.json b/vite-project/tsconfig.node.json deleted file mode 100644 index 6c2d8703..00000000 --- a/vite-project/tsconfig.node.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "strict": true, - "noEmit": true - }, - "include": ["vite.config.ts"] -} diff --git a/vite-project/vite.config.ts b/vite-project/vite.config.ts deleted file mode 100644 index d7019694..00000000 --- a/vite-project/vite.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], -}) From e001078808c655a7f56623deafd6c27885aac427 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 20:08:43 +0800 Subject: [PATCH 011/152] easter egg --- src/svelte-interface/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html index 165bf492..0e3ab538 100644 --- a/src/svelte-interface/index.html +++ b/src/svelte-interface/index.html @@ -6,7 +6,7 @@ BetterSEQTA+ Settings - asdasds + asdasds - I (Crazypersonalph) agree with this statement. From 4a8ed32d3e9e77f4d23be374b61530f1a8d38947 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 20:45:52 +0800 Subject: [PATCH 012/152] remove redundant code --- .../pages/settings/shortcuts.svelte | 5 +- src/svelte-interface/types/AppProps.ts | 64 ------------------- .../types/ColorPickerProps.ts | 5 -- src/svelte-interface/types/SliderProps.ts | 7 -- src/svelte-interface/types/SwitchProps.ts | 6 -- .../types/TabbedContainerProps.ts | 10 --- 6 files changed, 4 insertions(+), 93 deletions(-) delete mode 100644 src/svelte-interface/types/AppProps.ts delete mode 100644 src/svelte-interface/types/ColorPickerProps.ts delete mode 100644 src/svelte-interface/types/SliderProps.ts delete mode 100644 src/svelte-interface/types/SwitchProps.ts delete mode 100644 src/svelte-interface/types/TabbedContainerProps.ts diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 181f6a8d..2d94d66f 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -1,5 +1,8 @@
shortcuts tab
\ No newline at end of file diff --git a/src/svelte-interface/types/AppProps.ts b/src/svelte-interface/types/AppProps.ts deleted file mode 100644 index 0ec056c2..00000000 --- a/src/svelte-interface/types/AppProps.ts +++ /dev/null @@ -1,64 +0,0 @@ -export interface SettingsState { - notificationCollector: boolean; - theme: string; - lessonAlerts: boolean; - telemetry: boolean; - animatedBackground: boolean; - animatedBackgroundSpeed: string; - customThemeColor: string; - betterSEQTAPlus: boolean; - shortcuts: Shortcut[]; - customshortcuts: CustomShortcut[]; - transparencyEffects: boolean; -} - -interface ToggleItem { - toggle: boolean; -} - -interface Shortcut { - enabled: boolean; - name: string; -} - -export interface CustomShortcut { - name: string; - 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; - telemetry: boolean; - onoff: boolean; - selectedColor: string; - shortcuts: Shortcut[]; - subjectfilters: Record; - transparencyEffects: boolean; - theme: string; -} diff --git a/src/svelte-interface/types/ColorPickerProps.ts b/src/svelte-interface/types/ColorPickerProps.ts deleted file mode 100644 index ae888971..00000000 --- a/src/svelte-interface/types/ColorPickerProps.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface ColorPickerProps { - color: string; - onChange: (color: string) => void; - id: string; -} \ No newline at end of file diff --git a/src/svelte-interface/types/SliderProps.ts b/src/svelte-interface/types/SliderProps.ts deleted file mode 100644 index 7ae50459..00000000 --- a/src/svelte-interface/types/SliderProps.ts +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import "./Slider.css"; -export interface Slider { - onValueChange: (value: number) => void; -} -declare const Slider: React.FC; -export default Slider; diff --git a/src/svelte-interface/types/SwitchProps.ts b/src/svelte-interface/types/SwitchProps.ts deleted file mode 100644 index 8a43742d..00000000 --- a/src/svelte-interface/types/SwitchProps.ts +++ /dev/null @@ -1,6 +0,0 @@ -import "./Switch.css"; - -export interface SwitchProps { - onChange: (isOn: boolean) => void; - state: boolean; -} \ No newline at end of file diff --git a/src/svelte-interface/types/TabbedContainerProps.ts b/src/svelte-interface/types/TabbedContainerProps.ts deleted file mode 100644 index cea6689d..00000000 --- a/src/svelte-interface/types/TabbedContainerProps.ts +++ /dev/null @@ -1,10 +0,0 @@ -import React, { JSX } from 'react'; -export interface Tab { - title: string; - content: JSX.Element; -} -export interface TabbedContainerProps { - tabs: Tab[]; -} -declare const TabbedContainer: React.FC; -export default TabbedContainer; From 428ad7569ece07677582e028e81754cf08f2adeb Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 21:32:12 +0800 Subject: [PATCH 013/152] preliminary shortcut loading --- .../pages/settings/shortcuts.svelte | 23 ++++++++++++++++++- src/svelte-interface/types/SettingsProps.ts | 3 ++- src/types/storage.ts | 2 +- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 2d94d66f..00ff3aa8 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -1,8 +1,29 @@ + -
shortcuts tab
\ No newline at end of file +{#snippet Shortcuts([string, Shortcut]) } +
+
+

{Shortcut.name}

+

{Shortcut.enabled}

+
+
+{/snippet} + + +
shortcuts tab
+ +
+ {#each Object.entries(settingsState.shortcuts) as shortcut} + {@render Shortcuts(shortcut)} + {/each} +
\ No newline at end of file diff --git a/src/svelte-interface/types/SettingsProps.ts b/src/svelte-interface/types/SettingsProps.ts index 4c7f5673..d0933b5d 100644 --- a/src/svelte-interface/types/SettingsProps.ts +++ b/src/svelte-interface/types/SettingsProps.ts @@ -1,5 +1,4 @@ import type { SettingsState } from './AppProps'; - export interface SettingsList { title: string; id: number; @@ -7,6 +6,8 @@ export interface SettingsList { Component: any; /* TODO: Give this a type */ props?: any; } + + export interface SettingsProps { settingsState: SettingsState; setSettingsState: React.Dispatch>; diff --git a/src/types/storage.ts b/src/types/storage.ts index 5d1fbfc5..2f79de5c 100644 --- a/src/types/storage.ts +++ b/src/types/storage.ts @@ -44,7 +44,7 @@ interface ToggleItem { toggle: boolean; } -interface Shortcut { +export interface Shortcut { enabled: boolean; name: string; } From 220d15ebbcfcc25c9d52b2a0fa539f607a900265 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Thu, 5 Sep 2024 21:46:21 +0800 Subject: [PATCH 014/152] refactor: add comment, remove unneeded function --- src/svelte-interface/pages/settings/shortcuts.svelte | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 00ff3aa8..14de4cdb 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -3,11 +3,6 @@ import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts" - function formatUrl(inputUrl: string) { - const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/; - return protocolRegex.test(inputUrl) ? inputUrl : `https://${inputUrl}`; - } - {#snippet Shortcuts([string, Shortcut]) } @@ -24,6 +19,7 @@
{#each Object.entries(settingsState.shortcuts) as shortcut} + {@render Shortcuts(shortcut)} {/each}
\ No newline at end of file From 7f93aef9cc9e808bdfb8a3ac319fabc5ec1ad3a2 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 6 Sep 2024 07:00:48 +1000 Subject: [PATCH 015/152] fix(popup): correct incorrect transform on switches --- src/svelte-interface/components/Switch.svelte | 21 ++++++------------- src/svelte-interface/index.html | 6 +++--- src/svelte-interface/index.ts | 16 ++++++++++++++ src/svelte-interface/main.ts | 11 +++++----- src/svelte-interface/pages/settings.svelte | 13 ++++++++++-- .../utils/standalone.svelte.ts | 14 +++++++++++++ 6 files changed, 56 insertions(+), 25 deletions(-) create mode 100644 src/svelte-interface/index.ts create mode 100644 src/svelte-interface/utils/standalone.svelte.ts diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte index f97dfa51..d45393e8 100644 --- a/src/svelte-interface/components/Switch.svelte +++ b/src/svelte-interface/components/Switch.svelte @@ -1,13 +1,10 @@
e.key === "Enter" && toggleSwitch()} + onclick={() => onChange(!state)} + onkeydown={(e) => e.key === "Enter" && onChange(!state)} role="switch" aria-checked={state} tabindex="0" diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html index 0e3ab538..93137db0 100644 --- a/src/svelte-interface/index.html +++ b/src/svelte-interface/index.html @@ -5,8 +5,8 @@ BetterSEQTA+ Settings - + + asdasds - I (Crazypersonalph) agree with this statement. - - + \ No newline at end of file diff --git a/src/svelte-interface/index.ts b/src/svelte-interface/index.ts new file mode 100644 index 00000000..d261d295 --- /dev/null +++ b/src/svelte-interface/index.ts @@ -0,0 +1,16 @@ +import { mount } from 'svelte'; +import Settings from './pages/settings.svelte'; +import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState'; +import './index.css'; + + +initializeSettingsState(); + +const app = mount(Settings, { + target: document.body, + props: { + standalone: true + } +}); + +console.log(app); diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts index 009aed39..1882f5e7 100644 --- a/src/svelte-interface/main.ts +++ b/src/svelte-interface/main.ts @@ -5,22 +5,23 @@ import Settings from './pages/settings.svelte'; import styles from './index.css?inline'; import { mount } from 'svelte'; -export default function initSvelteInterface(shadow: ShadowRoot) { - console.log(shadow) - +export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) { /* routes.set({ 'settings': Settings, '*': Settings }) */ const app = mount(Settings, { - target: shadow, + target: mountPoint, + props: { + standalone: false + } }); const style2 = document.createElement("style"); style2.setAttribute("type", "text/css"); style2.innerHTML = styles; - shadow.appendChild(style2); + mountPoint.appendChild(style2); return app; } \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 0af5ab2a..71da4a30 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -5,14 +5,23 @@ import Theme from './settings/theme.svelte'; import browser from 'webextension-polyfill'; + import { createStandalone } from '../utils/standalone.svelte'; + import { onMount } from 'svelte' + const openChangelog = () => { browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); }; - let standalone = $state(false); + let { standalone } = $props<{ standalone: boolean }>(); + + onMount(() => { + if (!standalone) return; + let globalStandalone = createStandalone(); + globalStandalone = standalone; + }); -
+
Light logo diff --git a/src/svelte-interface/utils/standalone.svelte.ts b/src/svelte-interface/utils/standalone.svelte.ts new file mode 100644 index 00000000..3a8c9461 --- /dev/null +++ b/src/svelte-interface/utils/standalone.svelte.ts @@ -0,0 +1,14 @@ +export function createStandalone() { + let standalone = $state(false); + + function setStandalone(value: boolean) { + standalone = value; + } + + return { + get standalone() { + return standalone; + }, + setStandalone + }; +} \ No newline at end of file From 9363de5fb40cf4f962f3085a8e81714da104bdb0 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 6 Sep 2024 17:29:07 +1000 Subject: [PATCH 016/152] feat(settings): add working shortcuts and custom shortcuts --- package.json | 5 +- postcss.config.js | 6 + src/SEQTA.ts | 12 +- .../components/TabbedContainer.svelte | 65 ++++----- src/svelte-interface/index.css | 6 + src/svelte-interface/pages/settings.svelte | 25 ++-- .../pages/settings/general.svelte | 2 +- .../pages/settings/shortcuts.svelte | 127 ++++++++++++++++-- tailwind.config.js | 7 +- 9 files changed, 194 insertions(+), 61 deletions(-) create mode 100644 postcss.config.js diff --git a/package.json b/package.json index 94f2995c..0de7833e 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@uiw/codemirror-extensions-color": "^4.21.25", "@uiw/codemirror-theme-github": "^4.21.25", "@uiw/react-codemirror": "^4.21.25", - "autoprefixer": "^10.4.17", + "autoprefixer": "^10.4.20", "classnames": "^2.5.1", "color": "^4.2.3", "dompurify": "^3.0.8", @@ -80,6 +80,7 @@ "lodash": "^4.17.21", "million": "latest", "motion": "^10.18.0", + "postcss": "^8.4.45", "publish-browser-extension": "^2.2.1", "react": "^18.2.0", "react-best-gradient-color-picker": "3.0.5", @@ -93,7 +94,7 @@ "svelte-hash-router": "^1.0.1", "svelte-motion": "^0.12.2", "swiper": "latest", - "tailwindcss": "^3.4.1", + "tailwindcss": "^3.4.10", "ts-loader": "^9.5.1", "typescript": "^5.5.4", "uuid": "^9.0.1", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..2e7af2b7 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/SEQTA.ts b/src/SEQTA.ts index d147a86c..b8f54cff 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -48,7 +48,6 @@ var IsSEQTAPage = false const hasSEQTAText = document.childNodes[1].textContent?.includes('Copyright (c) SEQTA Software') init() - async function init() { CheckForMenuList() const hasSEQTATitle = document.title.includes('SEQTA Learn') @@ -66,6 +65,8 @@ async function init() { try { // wait until settingsState has been loaded from storage await initializeSettingsState(); + + console.log(settingsState.onoff) if (settingsState.onoff) { enableCurrentTheme() @@ -979,9 +980,12 @@ export function addExtensionSettings() { extensionPopup.appendChild(extensionIframe) */ // create shadow dom and render svelte app - const shadow = extensionPopup.attachShadow({ mode: 'open' }); - const svelteApp = initSvelteInterface(shadow); - console.log(svelteApp) + try { + const shadow = extensionPopup.attachShadow({ mode: 'open' }); + initSvelteInterface(shadow); + } catch (err) { + console.error(err) + } const container = document.getElementById('container') diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte index 7b7f1a8d..ca25dc5c 100644 --- a/src/svelte-interface/components/TabbedContainer.svelte +++ b/src/svelte-interface/components/TabbedContainer.svelte @@ -46,37 +46,40 @@ }); -
-
- - {#each tabs as { title }, index} - - {/each} -
-
-
- -
- {#each tabs as { Content }, index} -
- -
+
+
+
+ + {#each tabs as { title }, index} + {/each}
- +
+
+ +
+ {#each tabs as { Content }, index} +
+ +
+ {/each} +
+ +
\ No newline at end of file diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css index 51263b33..2dc861ee 100644 --- a/src/svelte-interface/index.css +++ b/src/svelte-interface/index.css @@ -18,4 +18,10 @@ .tab-width { width: var(--tab-width); +} + +input { + &:focus { + box-shadow: unset !important; + } } \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 71da4a30..ac0ffbf7 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -7,6 +7,7 @@ import { createStandalone } from '../utils/standalone.svelte'; import { onMount } from 'svelte' + import { settingsState } from '@/seqta/utils/listeners/SettingsState' const openChangelog = () => { browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); @@ -21,16 +22,18 @@ }); -
-
- Light logo - - -
+
+
+
+ Light logo + + +
- + +
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index 60043869..c4afd9ad 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -22,7 +22,7 @@
{/snippet} -
+
{#each [ { title: "Transparency Effects", diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 14de4cdb..8bcb9934 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -1,25 +1,130 @@ - -{#snippet Shortcuts([string, Shortcut]) } +{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
-

{Shortcut.name}

-

{Shortcut.enabled}

+

{Shortcut.name}

+ switchChange(parseInt(index))} />
{/snippet} +
+
+ + {#if isFormVisible} +
+ + + + + + +
+ {/if} + -
shortcuts tab
+ + + +
-
- {#each Object.entries(settingsState.shortcuts) as shortcut} - - {@render Shortcuts(shortcut)} - {/each} + {#each Object.entries($settingsState.shortcuts) as shortcut} + {@render Shortcuts(shortcut)} + {/each} + + + {#each $settingsState.customshortcuts as shortcut, index} +
+ {shortcut.name} + +
+ {/each}
\ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 562f78d1..bcd2bb97 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,12 @@ const { /** @type {import('tailwindcss').Config} */ export default { content: [ - "./src/**/*.{js,ts,jsx,tsx,html}", + "./src/**/*.{js,ts,jsx,tsx,html,svelte}", + ], + safelist: [ + { + pattern: / */, + } ], darkMode: "class", theme: { From ac73056128298039d8aa9fbcbbbc24ed5b1423a4 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 6 Sep 2024 17:32:30 +1000 Subject: [PATCH 017/152] refactor(settings): improve shortcuts button --- .../pages/settings/shortcuts.svelte | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 8bcb9934..25110548 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -104,10 +104,28 @@ transition={springTransition} >
From 573ac401be895e941b05e5810baadaf35eb604bd Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 6 Sep 2024 17:35:01 +1000 Subject: [PATCH 018/152] feat(settings): add clear theme button --- src/svelte-interface/pages/settings/theme.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte index ae68c359..23ec4f05 100644 --- a/src/svelte-interface/pages/settings/theme.svelte +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -2,4 +2,10 @@ -
theme tab
\ No newline at end of file +
+ + +
\ No newline at end of file From cd430f2027016624b76b018416b2f40d593b09d0 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Fri, 6 Sep 2024 22:37:57 +0800 Subject: [PATCH 019/152] on the way to get shortcuts working --- .../pages/settings/shortcuts.svelte | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index 14de4cdb..481bb01d 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -1,25 +1,37 @@ -{#snippet Shortcuts([string, Shortcut]) } +{#snippet Shortcuts({ name, enabled, Component, props }) }
-

{Shortcut.name}

-

{Shortcut.enabled}

+

{name}

+

{enabled}

+
+
+
{/snippet} - -
shortcuts tab
-
- {#each Object.entries(settingsState.shortcuts) as shortcut} - - {@render Shortcuts(shortcut)} + {#each settingsState.shortcuts as shortcut} + {@const shortcutFinal = { + ...shortcut, + name: shortcut.name, + enabled: shortcut.enabled, + Component: Switch, + props: { + // placeholder + // state: $settingsState.onoff, + // onChange: (isOn: boolean) => settingsState.onoff = isOn + } + }} + {@render Shortcuts(shortcutFinal)} {/each}
\ No newline at end of file From f95b845b92e58771145e1743170f608ea984e92a Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Sat, 7 Sep 2024 00:03:15 +0800 Subject: [PATCH 020/152] fix: use crossenv and implement for windows building --- package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0de7833e..932f0895 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,12 @@ "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development, and incorporate a plethora of new features!", "browserslist": "> 0.5%, last 2 versions, not dead", "scripts": { - "dev": "MODE=chrome vite dev", - "dev:firefox": "MODE=firefox vite build --watch", - "build": "MODE=chrome vite build && MODE=firefox vite build", - "build:chrome": "MODE=chrome vite build", - "build:firefox": "MODE=firefox vite build", - "build:safari": "MODE=safari vite build", + "dev": "cross-env MODE=chrome vite dev", + "dev:firefox": "cross-env MODE=firefox vite build --watch", + "build": "cross-env MODE=chrome vite build && MODE=firefox vite build", + "build:chrome": "cross-env MODE=chrome vite build", + "build:firefox": "cross-env MODE=firefox vite build", + "build:safari": "cross-env MODE=safari vite build", "convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --app-name $npm_package_name-safari", "release": "gh release create $npm_package_name@$npm_package_version ./dist/*.zip --generate-notes", "publish": "bun lib/publish.js --b", @@ -34,6 +34,7 @@ "@crxjs/vite-plugin": "^2.0.0-beta.23", "@types/mime-types": "^2.1.4", "@vitejs/plugin-react-swc": "^3.6.0", + "cross-env": "^7.0.3", "eslint": "^8.56.0", "glob": "^11.0.0", "mime-types": "^2.1.35", From 52c8809cf250d5e71e5d19aad5002f03b0f0824b Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Sat, 7 Sep 2024 00:03:56 +0800 Subject: [PATCH 021/152] fix bug --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 932f0895..93f5b054 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "scripts": { "dev": "cross-env MODE=chrome vite dev", "dev:firefox": "cross-env MODE=firefox vite build --watch", - "build": "cross-env MODE=chrome vite build && MODE=firefox vite build", + "build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build", "build:chrome": "cross-env MODE=chrome vite build", "build:firefox": "cross-env MODE=firefox vite build", "build:safari": "cross-env MODE=safari vite build", From f0bdbbb14faa7e8d3f2edd58f1c60578576bde08 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Sun, 8 Sep 2024 10:03:05 +1000 Subject: [PATCH 022/152] refactor(settings): remove globalStandalone from settings interface --- src/svelte-interface/pages/settings.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index ac0ffbf7..7e6375e6 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -17,6 +17,7 @@ onMount(() => { if (!standalone) return; + // @ts-ignore let globalStandalone = createStandalone(); globalStandalone = standalone; }); From c3cb2937c988c619612d612fd3ba9e11d4d5d8cd Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Sun, 8 Sep 2024 19:33:47 +1000 Subject: [PATCH 023/152] feat(settings): add background selector --- package.json | 1 + src/manifests/manifest.json | 4 - src/seqta/ui/ImageBackgrounds.ts | 99 +++++++++++- src/seqta/ui/background/background.html | 29 ---- src/seqta/ui/background/background.ts | 115 ------------- .../components/themes/BackgroundItem.svelte | 36 +++++ .../themes/BackgroundSelector.svelte | 152 ++++++++++++++++++ .../themes/BackgroundUploader.svelte | 26 +++ .../components/themes/ProgressCircle.svelte | 13 ++ .../hooks/BackgroundDataLoader.ts | 75 +++++++++ .../hooks/backgroundState.svelte.ts | 1 + .../pages/settings/theme.svelte | 16 +- src/svelte-interface/test.svelte | 1 - .../utils/standalone.svelte.ts | 4 +- tailwind.config.js | 10 +- vite.config.ts | 3 +- 16 files changed, 420 insertions(+), 165 deletions(-) delete mode 100644 src/seqta/ui/background/background.html delete mode 100644 src/seqta/ui/background/background.ts create mode 100644 src/svelte-interface/components/themes/BackgroundItem.svelte create mode 100644 src/svelte-interface/components/themes/BackgroundSelector.svelte create mode 100644 src/svelte-interface/components/themes/BackgroundUploader.svelte create mode 100644 src/svelte-interface/components/themes/ProgressCircle.svelte create mode 100644 src/svelte-interface/hooks/BackgroundDataLoader.ts create mode 100644 src/svelte-interface/hooks/backgroundState.svelte.ts delete mode 100644 src/svelte-interface/test.svelte diff --git a/package.json b/package.json index 93f5b054..f21bd451 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "color": "^4.2.3", "dompurify": "^3.0.8", "framer-motion": "^11.0.25", + "idb": "^8.0.0", "kolorist": "^1.8.0", "localforage": "^1.10.0", "lodash": "^4.17.21", diff --git a/src/manifests/manifest.json b/src/manifests/manifest.json index b0cdec0e..0087ca16 100644 --- a/src/manifests/manifest.json +++ b/src/manifests/manifest.json @@ -30,10 +30,6 @@ } ], "web_accessible_resources": [ - { - "resources": ["seqta/ui/background/background.html"], - "matches": ["*://*/*"] - }, { "resources": ["*://*/*"], "matches": ["*://*/*"] diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts index 71a6a0f1..25fec6ad 100644 --- a/src/seqta/ui/ImageBackgrounds.ts +++ b/src/seqta/ui/ImageBackgrounds.ts @@ -1,13 +1,104 @@ -import browser from 'webextension-polyfill'; +import { getDataById, isIndexedDBSupported } from '@/svelte-interface/hooks/BackgroundDataLoader'; export async function appendBackgroundToUI() { const parent = document.getElementById('container'); - // embed background.html - const background = document.createElement('iframe'); + // embed background.html - old method + /* const background = document.createElement('iframe'); background.id = 'background'; background.classList.add('imageBackground'); background.setAttribute('excludeDarkCheck', 'true'); background.src = browser.runtime.getURL('seqta/ui/background/background.html'); - parent!.appendChild(background); + parent!.appendChild(background); */ + if (!parent) return; + + const backgroundContainer = document.createElement('div'); + backgroundContainer.classList.add('imageBackground'); + backgroundContainer.setAttribute('excludeDarkCheck', 'true'); + + const mediaContainer = document.createElement('div'); + mediaContainer.id = 'media-container'; + backgroundContainer.appendChild(mediaContainer); + + parent.appendChild(backgroundContainer); + + // Add styles + const style = document.createElement('style'); + style.textContent = ` + #media-container { + width: 100%; + height: 100%; + } + + #media-container video, #media-container img { + width: 100%; + height: 100%; + object-fit: cover; + } + `; + document.head.appendChild(style); + + // Load and display the background + await loadBackground(); } + +export async function loadBackground() { + if (!isIndexedDBSupported()) { + console.error("IndexedDB is not supported. Unable to load background."); + return; + } + + try { + const selectedBackgroundId = localStorage.getItem('selectedBackground'); + if (!selectedBackgroundId) { + const backgroundContainer = document.querySelector('.imageBackground'); + if (backgroundContainer) { + backgroundContainer.remove(); + } + return; + }; + + const background = await getDataById(selectedBackgroundId); + if (!background) return; + + let backgroundContainer = document.querySelector('.imageBackground'); + if (!backgroundContainer) { + backgroundContainer = document.createElement('div'); + backgroundContainer.classList.add('imageBackground'); + backgroundContainer.setAttribute('excludeDarkCheck', 'true'); + const parent = document.getElementById('container'); + if (parent) { + parent.appendChild(backgroundContainer); + } + } + + let mediaContainer = document.getElementById('media-container'); + if (!mediaContainer) { + mediaContainer = document.createElement('div'); + mediaContainer.id = 'media-container'; + backgroundContainer.appendChild(mediaContainer); + }; + + mediaContainer = document.getElementById('media-container'); + if (!mediaContainer) return; + + mediaContainer.innerHTML = ''; + + const mediaElement = background.type === 'video' + ? document.createElement('video') + : document.createElement('img'); + + mediaElement.src = URL.createObjectURL(background.blob); + mediaElement.classList.add('background'); + + if (mediaElement instanceof HTMLVideoElement) { + mediaElement.loop = true; + mediaElement.muted = true; + mediaElement.autoplay = true; + } + + mediaContainer.appendChild(mediaElement); + } catch (error) { + console.error('Error loading background:', error); + } +} \ No newline at end of file diff --git a/src/seqta/ui/background/background.html b/src/seqta/ui/background/background.html deleted file mode 100644 index c78dcf96..00000000 --- a/src/seqta/ui/background/background.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Background Fetcher - - - - - -
- - - - diff --git a/src/seqta/ui/background/background.ts b/src/seqta/ui/background/background.ts deleted file mode 100644 index c76c0f75..00000000 --- a/src/seqta/ui/background/background.ts +++ /dev/null @@ -1,115 +0,0 @@ -interface Data { - blob: Blob; - type: 'image' | 'video'; -} - -interface DatabaseEventTarget extends EventTarget { - result: IDBDatabase; -} - -interface DatabaseEvent extends Event { - target: DatabaseEventTarget; -} - -const openDB = (): Promise => { - return new Promise((resolve, reject) => { - const request = indexedDB.open('MyDatabase', 1); - - request.onerror = () => reject(request.error); - request.onsuccess = () => resolve(request.result); - - request.onupgradeneeded = (event: IDBVersionChangeEvent) => { - // @ts-expect-error - The event type is not recognized by TypeScript - event?.target?.result.createObjectStore('backgrounds', { keyPath: 'id' }); - }; - }); -}; - -const readData = async (): Promise => { - const selectedBackground = localStorage.getItem('selectedBackground'); - - //const selectedBackground = localStorage.getItem('selectedBackground'); - if (!selectedBackground || selectedBackground === '') { - return null; - } - - const db = await openDB(); - const tx = db.transaction('backgrounds', 'readonly'); - const store = tx.objectStore('backgrounds'); - const request = store.get(selectedBackground); - - return new Promise((resolve, reject) => { - request.onsuccess = () => resolve(request.result as Data); - request.onerror = () => reject(request.error); - }); -}; - -const updateBackground = async (): Promise => { - try { - const data = await readData(); - if (!data) { - const container = document.getElementById('media-container'); - const currentMedia = container?.querySelector('.current-media'); - if (currentMedia) { - currentMedia.remove(); - } - return; - } - - const url = URL.createObjectURL(data.blob); - const container = document.getElementById('media-container'); - - // Create new element and set properties - let newElement; - if (data.type === 'image') { - newElement = document.createElement('img'); - newElement.src = url; - newElement.alt = 'Uploaded content'; - } else if (data.type === 'video') { - newElement = document.createElement('video'); - newElement.src = url; - newElement.autoplay = true; - newElement.loop = true; - newElement.muted = true; - } - - // Mark the old element for removal - const oldElement = container?.querySelector('.current-media'); - if (oldElement) { - oldElement.classList.remove('current-media'); - oldElement.classList.add('old-media'); - } - - // Add the new element and mark it as current - newElement?.classList.add('current-media'); - container?.appendChild(newElement as Node); - - // Delay removal of old element - setTimeout(() => { - const oldMedia = container?.querySelector('.old-media'); - if (oldMedia) { - oldMedia.remove(); - } - }, 100); // 0.1 second delay - } catch (error) { - console.error('An error occurred:', error); - } -}; - -// Main function to run on page load -const main = async (): Promise => { - await updateBackground(); - - // Listen for changes to local storage - try { - window.addEventListener('storage', async (event) => { - if (event.key === 'selectedBackground') { - await updateBackground(); - } - }); - } catch (error) { - console.error('An error occurred:', error); - } -}; - -main() \ No newline at end of file diff --git a/src/svelte-interface/components/themes/BackgroundItem.svelte b/src/svelte-interface/components/themes/BackgroundItem.svelte new file mode 100644 index 00000000..a6594354 --- /dev/null +++ b/src/svelte-interface/components/themes/BackgroundItem.svelte @@ -0,0 +1,36 @@ + + +
+ {#if isEditMode} +
+
+
+ {/if} + {#if bg.type === 'image'} + swatch + {:else if bg.type === 'video'} + + {/if} +
\ No newline at end of file diff --git a/src/svelte-interface/components/themes/BackgroundSelector.svelte b/src/svelte-interface/components/themes/BackgroundSelector.svelte new file mode 100644 index 00000000..8f24b4b1 --- /dev/null +++ b/src/svelte-interface/components/themes/BackgroundSelector.svelte @@ -0,0 +1,152 @@ + + + +
+

Background Images

+
+ {#if !isEditMode} + handleFileChange(e.detail)} /> + {/if} + {#each imageBackgrounds as bg (bg.id)} + selectBackground(bg.id)} + onDelete={() => deleteBackground(bg.id)} + /> + {/each} +
+ +

Background Videos

+
+ {#if !isEditMode} + handleFileChange(e.detail)} /> + {/if} + {#each videoBackgrounds as bg (bg.id)} + selectBackground(bg.id)} + onDelete={() => deleteBackground(bg.id)} + /> + {/each} +
+
\ No newline at end of file diff --git a/src/svelte-interface/components/themes/BackgroundUploader.svelte b/src/svelte-interface/components/themes/BackgroundUploader.svelte new file mode 100644 index 00000000..37451793 --- /dev/null +++ b/src/svelte-interface/components/themes/BackgroundUploader.svelte @@ -0,0 +1,26 @@ + + +
+
+ +  +
+ +
\ No newline at end of file diff --git a/src/svelte-interface/components/themes/ProgressCircle.svelte b/src/svelte-interface/components/themes/ProgressCircle.svelte new file mode 100644 index 00000000..cd4fdb3b --- /dev/null +++ b/src/svelte-interface/components/themes/ProgressCircle.svelte @@ -0,0 +1,13 @@ + + +
+ + + + +
\ No newline at end of file diff --git a/src/svelte-interface/hooks/BackgroundDataLoader.ts b/src/svelte-interface/hooks/BackgroundDataLoader.ts new file mode 100644 index 00000000..8f5f67a7 --- /dev/null +++ b/src/svelte-interface/hooks/BackgroundDataLoader.ts @@ -0,0 +1,75 @@ +import { openDB, type IDBPDatabase, type DBSchema } from 'idb'; + +interface BackgroundDB extends DBSchema { + backgrounds: { + key: string; + value: { + id: string; + type: string; + blob: Blob; + }; + }; +} + +let db: IDBPDatabase | null = null; + +export async function openDatabase(): Promise> { + if (db) return db; + + db = await openDB('BackgroundDB', 1, { + upgrade(db: IDBPDatabase) { + db.createObjectStore('backgrounds', { keyPath: 'id' }); + }, + }); + + return db; +} + +export async function readAllData(): Promise> { + const db = await openDatabase(); + return db.getAll('backgrounds'); +} + +export async function writeData(id: string, type: string, blob: Blob): Promise { + const db = await openDatabase(); + await db.put('backgrounds', { id, type, blob }); +} + +export async function deleteData(id: string): Promise { + const db = await openDatabase(); + await db.delete('backgrounds', id); +} + +export async function clearAllData(): Promise { + const db = await openDatabase(); + await db.clear('backgrounds'); +} + +export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> { + const db = await openDatabase(); + return db.get('backgrounds', id); +} + +export function closeDatabase(): void { + if (db) { + db.close(); + db = null; + } +} + +// Helper function to check if IndexedDB is supported +export function isIndexedDBSupported(): boolean { + return 'indexedDB' in window; +} + +// Helper function to check if there's enough storage space +export async function hasEnoughStorageSpace(requiredSpace: number): Promise { + if ('storage' in navigator && 'estimate' in navigator.storage) { + const { quota, usage } = await navigator.storage.estimate(); + if (quota !== undefined && usage !== undefined) { + return (quota - usage) > requiredSpace; + } + } + // If we can't determine, assume there's enough space + return true; +} \ No newline at end of file diff --git a/src/svelte-interface/hooks/backgroundState.svelte.ts b/src/svelte-interface/hooks/backgroundState.svelte.ts new file mode 100644 index 00000000..3bab4725 --- /dev/null +++ b/src/svelte-interface/hooks/backgroundState.svelte.ts @@ -0,0 +1 @@ +export let selectedBackground = $state(null); \ No newline at end of file diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte index 23ec4f05..37cf35cf 100644 --- a/src/svelte-interface/pages/settings/theme.svelte +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -1,11 +1,19 @@ -
+
- +
\ No newline at end of file diff --git a/src/svelte-interface/test.svelte b/src/svelte-interface/test.svelte deleted file mode 100644 index 20d5be8c..00000000 --- a/src/svelte-interface/test.svelte +++ /dev/null @@ -1 +0,0 @@ -

HI THERE!!!!

\ No newline at end of file diff --git a/src/svelte-interface/utils/standalone.svelte.ts b/src/svelte-interface/utils/standalone.svelte.ts index 3a8c9461..163bb8d7 100644 --- a/src/svelte-interface/utils/standalone.svelte.ts +++ b/src/svelte-interface/utils/standalone.svelte.ts @@ -11,4 +11,6 @@ export function createStandalone() { }, setStandalone }; -} \ No newline at end of file +} + +export const standalone = createStandalone(); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index bcd2bb97..fe161f23 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,11 +7,11 @@ export default { content: [ "./src/**/*.{js,ts,jsx,tsx,html,svelte}", ], - safelist: [ - { - pattern: / */, - } - ], + //safelist: [ + //{ + // pattern: / */, + //} + //], darkMode: "class", theme: { fontSize: { diff --git a/vite.config.ts b/vite.config.ts index 22d8c776..df803936 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -58,8 +58,7 @@ export default defineConfig({ minify: false, rollupOptions: { input: { - settings: join(__dirname, 'src', 'svelte-interface', 'index.html'), - backgrounds: join(__dirname, 'src', 'seqta', 'ui', 'background', 'background.html') + settings: join(__dirname, 'src', 'svelte-interface', 'index.html') } } } From 272deb2b8cce448885fd15bd25022a171c74d2c5 Mon Sep 17 00:00:00 2001 From: codefactor-io Date: Sun, 8 Sep 2024 09:33:59 +0000 Subject: [PATCH 024/152] [CodeFactor] Apply fixes to commit c3cb293 --- src/seqta/ui/ImageBackgrounds.ts | 4 ++-- src/svelte-interface/hooks/BackgroundDataLoader.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/seqta/ui/ImageBackgrounds.ts b/src/seqta/ui/ImageBackgrounds.ts index 25fec6ad..69502146 100644 --- a/src/seqta/ui/ImageBackgrounds.ts +++ b/src/seqta/ui/ImageBackgrounds.ts @@ -56,7 +56,7 @@ export async function loadBackground() { backgroundContainer.remove(); } return; - }; + } const background = await getDataById(selectedBackgroundId); if (!background) return; @@ -77,7 +77,7 @@ export async function loadBackground() { mediaContainer = document.createElement('div'); mediaContainer.id = 'media-container'; backgroundContainer.appendChild(mediaContainer); - }; + } mediaContainer = document.getElementById('media-container'); if (!mediaContainer) return; diff --git a/src/svelte-interface/hooks/BackgroundDataLoader.ts b/src/svelte-interface/hooks/BackgroundDataLoader.ts index 8f5f67a7..99756252 100644 --- a/src/svelte-interface/hooks/BackgroundDataLoader.ts +++ b/src/svelte-interface/hooks/BackgroundDataLoader.ts @@ -1,4 +1,4 @@ -import { openDB, type IDBPDatabase, type DBSchema } from 'idb'; +import { type DBSchema, type IDBPDatabase, openDB } from 'idb'; interface BackgroundDB extends DBSchema { backgrounds: { From fdeea2f62630f200ff2688a00378b19a717d4e4b Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Sun, 8 Sep 2024 21:51:14 +1000 Subject: [PATCH 025/152] feat(settings): add custom theme selector --- src/old-interface/components/ThemeCover.tsx | 2 +- .../components/ThemeSelector.tsx | 2 +- src/old-interface/hooks/ThemeManagment.ts | 2 +- src/seqta/ui/themes/UpdateThemePreview.ts | 2 +- src/seqta/ui/themes/applyTheme.ts | 2 +- src/seqta/ui/themes/deleteTheme.ts | 2 +- src/seqta/ui/themes/disableTheme.ts | 2 +- src/seqta/ui/themes/enableCurrent.ts | 2 +- src/seqta/ui/themes/getAvailableThemes.ts | 11 +- src/seqta/ui/themes/getTheme.ts | 22 +- src/seqta/ui/themes/removeTheme.ts | 2 +- src/seqta/ui/themes/saveTheme.ts | 2 +- src/seqta/ui/themes/setTheme.ts | 2 +- .../components/themes/ThemeSelector.svelte | 203 ++++++++++++++++++ .../pages/settings/theme.svelte | 2 + src/{old-interface => }/types/CustomThemes.ts | 4 +- 16 files changed, 224 insertions(+), 40 deletions(-) create mode 100644 src/svelte-interface/components/themes/ThemeSelector.svelte rename src/{old-interface => }/types/CustomThemes.ts (90%) diff --git a/src/old-interface/components/ThemeCover.tsx b/src/old-interface/components/ThemeCover.tsx index d6ae88ae..bc6a2c06 100644 --- a/src/old-interface/components/ThemeCover.tsx +++ b/src/old-interface/components/ThemeCover.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { CustomTheme, DownloadedTheme } from '../types/CustomThemes'; +import { CustomTheme, DownloadedTheme } from '../../types/CustomThemes'; import browser from 'webextension-polyfill'; import { ArrowUpOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline'; import { sendThemeUpdate, setTheme } from '../hooks/ThemeManagment'; diff --git a/src/old-interface/components/ThemeSelector.tsx b/src/old-interface/components/ThemeSelector.tsx index 75328881..b56f03e7 100644 --- a/src/old-interface/components/ThemeSelector.tsx +++ b/src/old-interface/components/ThemeSelector.tsx @@ -3,7 +3,7 @@ import { deleteTheme, disableTheme, getDownloadedThemes, listThemes, sendThemeUp import { DeleteDownloadedTheme } from '../pages/Store'; import { ThemeCover } from './ThemeCover'; import browser from 'webextension-polyfill'; -import { CustomTheme, DownloadedTheme } from '../types/CustomThemes'; +import { CustomTheme, DownloadedTheme } from '../../types/CustomThemes'; import { useSettingsContext } from '../SettingsContext'; import { SettingsState } from '../types/AppProps'; import { InstallTheme } from '../../seqta/ui/themes/downloadTheme'; diff --git a/src/old-interface/hooks/ThemeManagment.ts b/src/old-interface/hooks/ThemeManagment.ts index 74d56183..f87319f9 100644 --- a/src/old-interface/hooks/ThemeManagment.ts +++ b/src/old-interface/hooks/ThemeManagment.ts @@ -1,5 +1,5 @@ import browser from 'webextension-polyfill' -import { CustomTheme, DownloadedTheme, ThemeList } from '../types/CustomThemes'; +import { CustomTheme, DownloadedTheme, ThemeList } from '../../types/CustomThemes'; import localforage from 'localforage'; export const setTheme = async (themeID: string) => { diff --git a/src/seqta/ui/themes/UpdateThemePreview.ts b/src/seqta/ui/themes/UpdateThemePreview.ts index 26002f75..08f1e23c 100644 --- a/src/seqta/ui/themes/UpdateThemePreview.ts +++ b/src/seqta/ui/themes/UpdateThemePreview.ts @@ -1,4 +1,4 @@ -import type { CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; +import type { CustomThemeBase64 } from '@/types/CustomThemes'; import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/applyTheme.ts b/src/seqta/ui/themes/applyTheme.ts index 9851c8fd..04f75bb1 100644 --- a/src/seqta/ui/themes/applyTheme.ts +++ b/src/seqta/ui/themes/applyTheme.ts @@ -1,4 +1,4 @@ -import type { CustomImage, CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomImage, CustomTheme } from '@/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; import { applyCustomCSS } from './Themes'; diff --git a/src/seqta/ui/themes/deleteTheme.ts b/src/seqta/ui/themes/deleteTheme.ts index 03451eaf..1ced7a77 100644 --- a/src/seqta/ui/themes/deleteTheme.ts +++ b/src/seqta/ui/themes/deleteTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme } from '@/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/disableTheme.ts b/src/seqta/ui/themes/disableTheme.ts index f45d5fc0..4876c201 100644 --- a/src/seqta/ui/themes/disableTheme.ts +++ b/src/seqta/ui/themes/disableTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme } from '@/types/CustomThemes'; import { removeTheme } from './removeTheme'; import { Mutex } from '@/seqta/utils/mutex'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/enableCurrent.ts b/src/seqta/ui/themes/enableCurrent.ts index 94a05076..6a6a0374 100644 --- a/src/seqta/ui/themes/enableCurrent.ts +++ b/src/seqta/ui/themes/enableCurrent.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme } from '@/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/seqta/ui/themes/getAvailableThemes.ts b/src/seqta/ui/themes/getAvailableThemes.ts index 0d86f2f0..e2d1d464 100644 --- a/src/seqta/ui/themes/getAvailableThemes.ts +++ b/src/seqta/ui/themes/getAvailableThemes.ts @@ -1,20 +1,15 @@ import localforage from 'localforage'; -import type { CustomTheme, ThemeList } from '@/old-interface/types/CustomThemes'; -import { blobToBase64 } from '@/seqta/utils/blobToBase64'; +import type { CustomTheme, ThemeList } from '@/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; -export const getAvailableThemes = async (): Promise => { +export const getAvailableThemes = async (): Promise => { try { const themeIds = await localforage.getItem('customThemes') as string[] | null; if (themeIds) { const themes = await Promise.all( themeIds.map(async (id) => { const theme = await localforage.getItem(id) as CustomTheme; - const { CustomImages, ...themeWithoutImages } = theme; - return { - ...themeWithoutImages, - coverImage: theme.coverImage ? await blobToBase64(theme.coverImage as Blob) : '', - }; + return theme; }) ); diff --git a/src/seqta/ui/themes/getTheme.ts b/src/seqta/ui/themes/getTheme.ts index 36b3cd7e..762010bd 100644 --- a/src/seqta/ui/themes/getTheme.ts +++ b/src/seqta/ui/themes/getTheme.ts @@ -1,28 +1,12 @@ import localforage from 'localforage'; -import type { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; -import { blobToBase64 } from '@/seqta/utils/blobToBase64'; +import type { CustomTheme } from '@/types/CustomThemes'; -export const getTheme = async (themeId: string): Promise => { +export const getTheme = async (themeId: string): Promise => { try { const theme = await localforage.getItem(themeId) as CustomTheme; - const CustomImages: CustomImageBase64[] = await Promise.all( - theme.CustomImages.map(async (image) => { - const base64 = await blobToBase64(image.blob); - return { - id: image.id, - variableName: image.variableName, - url: base64, - }; - }) - ); - - return { - ...theme, - coverImage: theme.coverImage ? await blobToBase64(theme.coverImage as Blob) : null, - CustomImages, - }; + return theme; } catch (error) { console.error('Error getting theme:', error); return null; diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts index a78cebce..ef3a1e37 100644 --- a/src/seqta/ui/themes/removeTheme.ts +++ b/src/seqta/ui/themes/removeTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme } from '@/types/CustomThemes'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; export const removeTheme = async (theme: CustomTheme) => { diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts index 5be6bc3e..c1a272ae 100644 --- a/src/seqta/ui/themes/saveTheme.ts +++ b/src/seqta/ui/themes/saveTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme, CustomThemeBase64 } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme, CustomThemeBase64 } from '@/types/CustomThemes'; import { disableTheme } from './disableTheme'; diff --git a/src/seqta/ui/themes/setTheme.ts b/src/seqta/ui/themes/setTheme.ts index 5e414b39..6e560cea 100644 --- a/src/seqta/ui/themes/setTheme.ts +++ b/src/seqta/ui/themes/setTheme.ts @@ -1,5 +1,5 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/old-interface/types/CustomThemes'; +import type { CustomTheme } from '@/types/CustomThemes'; import { applyTheme } from './applyTheme'; import { removeTheme } from './removeTheme'; import { settingsState } from '@/seqta/utils/listeners/SettingsState'; diff --git a/src/svelte-interface/components/themes/ThemeSelector.svelte b/src/svelte-interface/components/themes/ThemeSelector.svelte new file mode 100644 index 00000000..c72a9f7f --- /dev/null +++ b/src/svelte-interface/components/themes/ThemeSelector.svelte @@ -0,0 +1,203 @@ + + +
+
+
+
+
+ + + + + + + Import Theme +
+
+
+
+

Themes

+
+ {#if themes} + {#each themes.themes as theme (theme.id)} + + {/each} + {/if} + + {#if tempTheme} +
+ + + + +
+ {/if} + + {#if themes && themes.themes.length > 0} +
+ {/if} + + + + Theme Store + + + +
+
\ No newline at end of file diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte index 37cf35cf..93d5fcba 100644 --- a/src/svelte-interface/pages/settings/theme.svelte +++ b/src/svelte-interface/pages/settings/theme.svelte @@ -1,5 +1,6 @@ -
+

Background Images

{#if !isEditMode} handleFileChange(e.detail)} /> {/if} - {#each imageBackgrounds as bg (bg.id)} - selectBackground(bg.id)} - onDelete={() => deleteBackground(bg.id)} - /> - {/each} + {#if isVisible} + {#each imageBackgrounds as bg (bg.id)} + selectBackground(bg.id)} + onDelete={() => deleteBackground(bg.id)}/> + {/each} + {:else} + {#each imageBackgrounds as bg (bg.id)} +
+ {/each} + {/if}

Background Videos

@@ -139,14 +175,20 @@ {#if !isEditMode} handleFileChange(e.detail)} /> {/if} - {#each videoBackgrounds as bg (bg.id)} - selectBackground(bg.id)} - onDelete={() => deleteBackground(bg.id)} - /> - {/each} + {#if isVisible} + {#each videoBackgrounds as bg (bg.id)} + selectBackground(bg.id)} + onDelete={() => deleteBackground(bg.id)} + /> + {/each} + {:else} + {#each videoBackgrounds as bg (bg.id)} +
+ {/each} + {/if}
\ No newline at end of file From ae1b676fc31bdab439d5d7210007bec4574e4983 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 17:45:47 +1000 Subject: [PATCH 030/152] chore(tsconfig): add 'noEmitOnError' option to tsconfig.json --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index fdfa5b31..ff789bbd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,9 +10,9 @@ /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, + "noEmit": true, "resolveJsonModule": true, "isolatedModules": true, - "noEmit": false, "jsx": "react-jsx", /* Linting */ From d04965db6af5c247b5e88ac01e0f1e9f680469f3 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 17:47:22 +1000 Subject: [PATCH 031/152] chore(code): remove useless code comments --- .eslintrc.json | 4 ++-- src/css/injected.scss | 6 +++--- src/old-interface/components/Picker.tsx | 2 -- src/old-interface/components/TabbedContainer.tsx | 1 - 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index b9fb23bc..f6cc10d1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,12 +3,12 @@ "browser": true, "commonjs": true, "es2021": true, - "node": true // add this line to allow Node.js-specific globals + "node": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", - "sourceType": "module" // add this line to allow 'import' and 'export' statements + "sourceType": "module" }, "rules": { // allow importing ts extensions diff --git a/src/css/injected.scss b/src/css/injected.scss index 5a8519ef..7ab86545 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -2518,15 +2518,15 @@ li.MessageList__unread___3imtO { border-radius: 5px; color: var(--text-color); } -/* On mouse-over, add a grey background color */ + .upcoming-checkbox-container:hover input ~ .upcoming-checkmark { filter: brightness(0.8); } -/* When the checkbox is checked, add a blue background */ + .upcoming-checkbox-container input:checked ~ .upcoming-checkmark { background: var(--item-colour); } -/* Create the checkmark/indicator (hidden when not checked) */ + .upcoming-checkmark:after { content: ""; position: absolute; diff --git a/src/old-interface/components/Picker.tsx b/src/old-interface/components/Picker.tsx index 24c18752..c71e3144 100644 --- a/src/old-interface/components/Picker.tsx +++ b/src/old-interface/components/Picker.tsx @@ -41,7 +41,6 @@ function Picker() { }; useEffect(() => { - // Add event listener for 'message' event window.addEventListener("message", handleMessage); // Cleanup @@ -51,7 +50,6 @@ function Picker() { }, []); useEffect(() => { - // Watch for changes in showPicker and update the presets if (!showPicker) { // Check if the selected color is already in the presets const existingIndex = presets.indexOf(settingsState.customThemeColor); diff --git a/src/old-interface/components/TabbedContainer.tsx b/src/old-interface/components/TabbedContainer.tsx index 8b1f4e10..e3af9822 100644 --- a/src/old-interface/components/TabbedContainer.tsx +++ b/src/old-interface/components/TabbedContainer.tsx @@ -19,7 +19,6 @@ const TabbedContainer: React.FC = ({ tabs }) => { }; useEffect(() => { - // Add event listener for 'message' event window.addEventListener("message", handleMessage); // Cleanup From 7ca4682adb15e17da060b973f96ec87b1fc22597 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 17:48:23 +1000 Subject: [PATCH 032/152] fix(import): stop importing unused 'react' and 'million' --- vite.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index df803936..8e541961 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,8 +4,8 @@ import { join, resolve } from 'path'; import { base64Loader } from './lib/base64loader'; import type { BuildTarget } from './lib/types'; -import react from '@vitejs/plugin-react-swc'; -import million from "million/compiler"; +//import react from '@vitejs/plugin-react-swc'; +//import million from "million/compiler"; //import MillionLint from '@million/lint'; import { svelte } from '@sveltejs/vite-plugin-svelte' From 7951358cd0464ca6c1f24ad02f774d787f401b3f Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 17:57:54 +1000 Subject: [PATCH 033/152] refactor(component): abstract component selection from svelteRenderer function --- src/SEQTA.ts | 15 ++-------- .../themes/BackgroundSelector.svelte | 4 +++ src/svelte-interface/main.ts | 29 +++++++++---------- src/svelte-interface/pages/settings.svelte | 2 +- 4 files changed, 21 insertions(+), 29 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index b8f54cff..85bcc5d4 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -35,7 +35,8 @@ import coursesicon from '@/seqta/icons/coursesIcon' import iframeCSS from '@/css/iframe.scss?raw' import injectedCSS from '@/css/injected.scss?inline' import documentLoadCSS from '@/css/documentload.scss?inline' -import initSvelteInterface from './svelte-interface/main' +import renderSvelte from '@/svelte-interface/main' +import Settings from '@/svelte-interface/pages/settings.svelte' let SettingsClicked = false export let MenuOptionsOpen = false @@ -969,20 +970,10 @@ export function addExtensionSettings() { const extensionContainer = document.querySelector('#container') as HTMLDivElement if (extensionContainer) extensionContainer.appendChild(extensionPopup) - /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe') - extensionIframe.src = `${browser.runtime.getURL('svelte-interface/index.html')}#settings/embedded` - extensionIframe.id = 'ExtensionIframe' - extensionIframe.setAttribute('allowTransparency', 'true') - extensionIframe.setAttribute('excludeDarkCheck', 'true') - extensionIframe.style.width = '384px' - extensionIframe.style.height = '100%' - extensionIframe.style.border = 'none' - extensionPopup.appendChild(extensionIframe) */ - // create shadow dom and render svelte app try { const shadow = extensionPopup.attachShadow({ mode: 'open' }); - initSvelteInterface(shadow); + renderSvelte(Settings, shadow); } catch (err) { console.error(err) } diff --git a/src/svelte-interface/components/themes/BackgroundSelector.svelte b/src/svelte-interface/components/themes/BackgroundSelector.svelte index 9adc1f10..284d3cc0 100644 --- a/src/svelte-interface/components/themes/BackgroundSelector.svelte +++ b/src/svelte-interface/components/themes/BackgroundSelector.svelte @@ -126,6 +126,10 @@ selectedBackground }); + $effect(() => { + console.error(error); + }); + onMount(() => { loadBackgrounds(); diff --git a/src/svelte-interface/main.ts b/src/svelte-interface/main.ts index 1882f5e7..e04b8238 100644 --- a/src/svelte-interface/main.ts +++ b/src/svelte-interface/main.ts @@ -1,27 +1,24 @@ -// @ts-expect-error - Svelte Hash Router is not typed (yet) -import { routes } from 'svelte-hash-router' -//import App from './+layout.svelte'; -import Settings from './pages/settings.svelte'; import styles from './index.css?inline'; import { mount } from 'svelte'; +import type { ComponentType } from 'svelte'; -export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) { - /* routes.set({ - 'settings': Settings, - '*': Settings - }) */ - - const app = mount(Settings, { +export default function renderSvelte( + Component: ComponentType, + mountPoint: ShadowRoot | HTMLElement, + props: Record = {} +) { + const app = mount(Component, { target: mountPoint, props: { - standalone: false + standalone: false, + ...props } }); - const style2 = document.createElement("style"); - style2.setAttribute("type", "text/css"); - style2.innerHTML = styles; - mountPoint.appendChild(style2); + const style = document.createElement("style"); + style.setAttribute("type", "text/css"); + style.innerHTML = styles; + mountPoint.appendChild(style); return app; } \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 7e6375e6..dde96d48 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -13,7 +13,7 @@ browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); }; - let { standalone } = $props<{ standalone: boolean }>(); + let { standalone = false } = $props<{ standalone?: boolean }>(); onMount(() => { if (!standalone) return; From 2d23669aa3d63b745316afa27104149ef7c18972 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 18:01:06 +1000 Subject: [PATCH 034/152] fix(ui/settings): properly set selectedBackground --- .../components/themes/BackgroundSelector.svelte | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/svelte-interface/components/themes/BackgroundSelector.svelte b/src/svelte-interface/components/themes/BackgroundSelector.svelte index 284d3cc0..7ba11a07 100644 --- a/src/svelte-interface/components/themes/BackgroundSelector.svelte +++ b/src/svelte-interface/components/themes/BackgroundSelector.svelte @@ -65,6 +65,7 @@ await openDatabase(); const data = await readAllData(); + selectedBackground = await getTheme(); if (!isVisible) { backgrounds = data; @@ -127,7 +128,9 @@ }); $effect(() => { - console.error(error); + if (error) { + console.error(error); + } }); onMount(() => { @@ -139,7 +142,6 @@ isVisible = true; loadBackgrounds(); }, 100); - selectedBackground = getTheme(); observer.disconnect(); } }); From 7822d210b28e6eaba89c3c4cba7624c0b9c46a24 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 9 Sep 2024 18:03:32 +1000 Subject: [PATCH 035/152] feat(ui/settings): enhance darkmode styles for selected background items --- src/svelte-interface/components/themes/BackgroundItem.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/svelte-interface/components/themes/BackgroundItem.svelte b/src/svelte-interface/components/themes/BackgroundItem.svelte index a6594354..88c84061 100644 --- a/src/svelte-interface/components/themes/BackgroundItem.svelte +++ b/src/svelte-interface/components/themes/BackgroundItem.svelte @@ -15,7 +15,7 @@ onkeydown={onClick} tabindex="-1" role="button" - class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-2 ring-4' : 'ring-0'}" + class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}" > {#if isEditMode}
Date: Mon, 9 Sep 2024 18:04:04 +1000 Subject: [PATCH 036/152] chore(logs): remove redundant console.log statements --- src/SEQTA.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 85bcc5d4..5eac2715 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -66,8 +66,6 @@ async function init() { try { // wait until settingsState has been loaded from storage await initializeSettingsState(); - - console.log(settingsState.onoff) if (settingsState.onoff) { enableCurrentTheme() From d68ba1521a7fbcc80da449ffd27072e2c7cbe75b Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:16:59 +0800 Subject: [PATCH 037/152] About page button --- src/SEQTA.ts | 99 +++++++++++++++++++ src/seqta/utils/listeners/MessageListener.ts | 8 +- .../pages/settings/general.svelte | 12 ++- 3 files changed, 117 insertions(+), 2 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 5eac2715..0f25e7eb 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -343,6 +343,105 @@ export function OpenWhatsNewPopup() { }) } +export function OpenAboutPage() { + const background = document.createElement('div') + background.id = 'whatsnewbk' + background.classList.add('whatsnewBackground') + + const container = document.createElement('div') + container.classList.add('whatsnewContainer') + + var header: any = stringToHTML( + /* html */ + `
+

About

+

BetterSEQTA+ V${browser.runtime.getManifest().version}

+
` + ).firstChild + + let imagecont = document.createElement('div') + imagecont.classList.add('whatsnewImgContainer') + + let textcontainer = document.createElement('div') + textcontainer.classList.add('whatsnewTextContainer') + + let text = stringToHTML( + /* html */ ` +
+

Yo

+
+ `, + ).firstChild + + let footer = stringToHTML( + /* html */ ` +
+
+ Report bugs and feedback: + + + + + + + + + + +
+
+ `).firstChild + + let exitbutton = document.createElement('div') + exitbutton.id = 'whatsnewclosebutton' + + container.append(header) + container.append(imagecont) + container.append(textcontainer) + container.append(text as ChildNode) + container.append(footer as ChildNode) + container.append(exitbutton) + + background.append(container) + + document.getElementById('container')!.append(background) + + let bkelement = document.getElementById('whatsnewbk') + let popup = document.getElementsByClassName('whatsnewContainer')[0] + + if (settingsState.animations) { + animate( + [popup, bkelement as HTMLElement], + { scale: [0, 1], opacity: [0, 1] }, + { easing: spring({ stiffness: 220, damping: 18 }) } + ) + + animate( + '.whatsnewTextContainer *', + { opacity: [0, 1], y: [10, 0] }, + { + delay: stagger(0.05, { start: 0.1 }), + duration: 0.5, + easing: [.22, .03, .26, 1] + } + ) + } + + delete settingsState.justupdated + + bkelement!.addEventListener('click', function (event) { + // Check if the click event originated from the element itself and not any of its children + if (event.target === bkelement) { + DeleteWhatsNew() + } + }); + + var closeelement = document.getElementById('whatsnewclosebutton') + closeelement!.addEventListener('click', function () { + DeleteWhatsNew() + }) +} + export async function finishLoad() { try { document.querySelector('.legacy-root')?.classList.remove('hidden'); diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts index b4d53146..8dca6921 100644 --- a/src/seqta/utils/listeners/MessageListener.ts +++ b/src/seqta/utils/listeners/MessageListener.ts @@ -1,6 +1,6 @@ import browser from 'webextension-polyfill' -import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA'; +import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, OpenAboutPage } from '../../../SEQTA'; import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'; import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'; import { saveTheme } from '@/seqta/ui/themes/saveTheme'; @@ -79,6 +79,12 @@ export class MessageHandler { closeSettings(); sendResponse({ status: 'success' }); break; + + case 'OpenAboutPage': + OpenAboutPage(); + closeSettings(); + sendResponse({ status: 'success' }); + break; case 'OpenThemeCreator': const themeID = request?.body?.themeID; diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index c4afd9ad..81e53913 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -90,10 +90,20 @@ onChange: (isOn: boolean) => settingsState.lessonalert = isOn } }, + { + title: "About BetterSEQTA+", + description: "Opens About page.", + id: 9, + Component: Button, + props: { + onClick: () => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenAboutPage' }), + text: "Open" + } + }, { title: "BetterSEQTA+", description: "Enables BetterSEQTA+ features", - id: 9, + id: 10, Component: Switch, props: { state: $settingsState.onoff, From 2348b900234bb7d7e994c7c0cb46582f7e08164a Mon Sep 17 00:00:00 2001 From: codefactor-io Date: Mon, 9 Sep 2024 10:17:47 +0000 Subject: [PATCH 038/152] [CodeFactor] Apply fixes to commit d68ba15 --- src/seqta/utils/listeners/MessageListener.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts index 8dca6921..8e5364aa 100644 --- a/src/seqta/utils/listeners/MessageListener.ts +++ b/src/seqta/utils/listeners/MessageListener.ts @@ -1,6 +1,6 @@ import browser from 'webextension-polyfill' -import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, OpenAboutPage } from '../../../SEQTA'; +import { closeSettings, MenuOptionsOpen, OpenAboutPage, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA'; import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'; import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'; import { saveTheme } from '@/seqta/ui/themes/saveTheme'; From 966b58b93242fed913c007584c0560310657a33c Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Tue, 10 Sep 2024 09:43:43 +1000 Subject: [PATCH 039/152] refactor(ui): extract about page opening to a direct function call --- src/seqta/utils/listeners/MessageListener.ts | 8 +------- src/svelte-interface/pages/settings/general.svelte | 3 ++- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts index 8e5364aa..63148831 100644 --- a/src/seqta/utils/listeners/MessageListener.ts +++ b/src/seqta/utils/listeners/MessageListener.ts @@ -1,6 +1,6 @@ import browser from 'webextension-polyfill' -import { closeSettings, MenuOptionsOpen, OpenAboutPage, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA'; +import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA'; import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'; import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'; import { saveTheme } from '@/seqta/ui/themes/saveTheme'; @@ -80,12 +80,6 @@ export class MessageHandler { sendResponse({ status: 'success' }); break; - case 'OpenAboutPage': - OpenAboutPage(); - closeSettings(); - sendResponse({ status: 'success' }); - break; - case 'OpenThemeCreator': const themeID = request?.body?.themeID; OpenThemeCreator( themeID ? themeID : '' ); diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte index 81e53913..4dfc6995 100644 --- a/src/svelte-interface/pages/settings/general.svelte +++ b/src/svelte-interface/pages/settings/general.svelte @@ -8,6 +8,7 @@ import type { SettingsList } from "@/svelte-interface/types/SettingsProps" import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts" + import { closeSettings, OpenAboutPage } from "@/SEQTA" {#snippet Setting({ title, description, Component, props }: SettingsList) } @@ -96,7 +97,7 @@ id: 9, Component: Button, props: { - onClick: () => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenAboutPage' }), + onClick: () => { OpenAboutPage(); closeSettings() }, text: "Open" } }, From f985f9445f7b2e6d893f5ba3f7372bdf4aa45705 Mon Sep 17 00:00:00 2001 From: Alphons Joseph <93847055+Crazypersonalph@users.noreply.github.com> Date: Tue, 10 Sep 2024 21:18:37 +0800 Subject: [PATCH 040/152] refactor (ui): change about page to icon next to what's new --- src/seqta/utils/listeners/MessageListener.ts | 8 +------- src/svelte-interface/pages/settings.svelte | 13 +++++++++++-- src/svelte-interface/pages/settings/general.svelte | 11 ----------- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts index 63148831..5a820eff 100644 --- a/src/seqta/utils/listeners/MessageListener.ts +++ b/src/seqta/utils/listeners/MessageListener.ts @@ -1,6 +1,6 @@ import browser from 'webextension-polyfill' -import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA'; +import { closeSettings, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA'; import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'; import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'; import { saveTheme } from '@/seqta/ui/themes/saveTheme'; @@ -73,12 +73,6 @@ export class MessageHandler { sendResponse(themes); }); return true; - - case 'OpenChangelog': - OpenWhatsNewPopup(); - closeSettings(); - sendResponse({ status: 'success' }); - break; case 'OpenThemeCreator': const themeID = request?.body?.themeID; diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index dde96d48..ba22bd2f 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -9,8 +9,16 @@ import { onMount } from 'svelte' import { settingsState } from '@/seqta/utils/listeners/SettingsState' + import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA" + const openChangelog = () => { - browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' }); + OpenWhatsNewPopup(); + closeSettings(); + }; + + const openAbout = () => { + OpenAboutPage(); + closeSettings(); }; let { standalone = false } = $props<{ standalone?: boolean }>(); @@ -28,7 +36,8 @@
Light logo - + +
{#snippet Setting({ title, description, Component, props }: SettingsList) } @@ -91,16 +90,6 @@ onChange: (isOn: boolean) => settingsState.lessonalert = isOn } }, - { - title: "About BetterSEQTA+", - description: "Opens About page.", - id: 9, - Component: Button, - props: { - onClick: () => { OpenAboutPage(); closeSettings() }, - text: "Open" - } - }, { title: "BetterSEQTA+", description: "Enables BetterSEQTA+ features", From 64ffc462d05027026713f8a2a1f7c54c1067797f Mon Sep 17 00:00:00 2001 From: Andrew R <67220260+ar-cyber@users.noreply.github.com> Date: Wed, 11 Sep 2024 09:10:15 +0930 Subject: [PATCH 041/152] fix: make proper about page --- src/SEQTA.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 0f25e7eb..2eca4a2b 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -368,7 +368,12 @@ export function OpenAboutPage() { let text = stringToHTML( /* html */ `
-

Yo

+

About

+

BetterSEQTA+ is a fork of BetterSEQTA which was originally developed by Nulkem, which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features.

+
+

We are currently working on fixing bugs and adding good features. If you want to make a feature request or report a bug, you can do so on GitHub.

+

Credits

+

Nulkem created the original extension, was ported to Manifest V3 by MEGA-Dawg68, and is under active development by Crazypersonalph and SethBurkart123.

`, ).firstChild @@ -2590,4 +2595,4 @@ async function CheckForMenuList() { } catch (error) { return; } -} \ No newline at end of file +} From 8ccbdd49e10594683e763b6eb884494ecdc3d5ff Mon Sep 17 00:00:00 2001 From: Andrew R <67220260+ar-cyber@users.noreply.github.com> Date: Wed, 11 Sep 2024 09:44:11 +0930 Subject: [PATCH 042/152] fix: bad styling --- src/SEQTA.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 2eca4a2b..1692b6ca 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -368,11 +368,11 @@ export function OpenAboutPage() { let text = stringToHTML( /* html */ `
-

About

+

About

BetterSEQTA+ is a fork of BetterSEQTA which was originally developed by Nulkem, which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features.


-

We are currently working on fixing bugs and adding good features. If you want to make a feature request or report a bug, you can do so on GitHub.

-

Credits

+

We are currently working on fixing bugs and adding good features. If you want to make a feature request or report a bug, you can do so on GitHub (find icon below).

+

Credits

Nulkem created the original extension, was ported to Manifest V3 by MEGA-Dawg68, and is under active development by Crazypersonalph and SethBurkart123.

`, From 7fbdf8bf32e2581eab33e0adaff341caad4336e7 Mon Sep 17 00:00:00 2001 From: Andrew R <67220260+ar-cyber@users.noreply.github.com> Date: Wed, 11 Sep 2024 00:23:58 +0000 Subject: [PATCH 043/152] fix build error --- src/svelte-interface/components/Switch.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte index d45393e8..288dffcc 100644 --- a/src/svelte-interface/components/Switch.svelte +++ b/src/svelte-interface/components/Switch.svelte @@ -44,7 +44,7 @@
- - -); - -export default SpinnerIcon; \ No newline at end of file diff --git a/src/old-interface/components/Picker.css b/src/old-interface/components/Picker.css deleted file mode 100644 index e5ac10ed..00000000 --- a/src/old-interface/components/Picker.css +++ /dev/null @@ -1,32 +0,0 @@ -.dark [class*="rbgcpColorModelDropdown"], -.dark [class*="rbgcpControlBtnWrapper"], -.dark #rbgcp-gradient-controls-wrap { - background-color: #37373b !important; - color: white !important; -} - -.dark [class*="rbgcpControlBtn"][class*="rbgcpControlBtnSelected"] { - color: #568cf5 !important; -} - -.dark [class*="rbgcpControlBtn"] { - color: #CDCEC9 !important; -} - -.dark [class*="rbgcpControlBtnSelected"] svg { - filter: none !important; -} - -.dark [class*="rbgcpControlBtnSelected"] { - background-color: #28282b !important; -} - -.dark [class*="rbgcpComparibleLabel"] { - color: #CDCEC9 !important; -} - -.dark #rbgcp-stop-input, -.dark #rbgcp-degree-input, -.dark [class*="rbgcpControlBtnWrapper"] svg { - filter: invert(); -} \ No newline at end of file diff --git a/src/old-interface/components/Picker.tsx b/src/old-interface/components/Picker.tsx deleted file mode 100644 index c71e3144..00000000 --- a/src/old-interface/components/Picker.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import ColorPicker from 'react-best-gradient-color-picker'; -import { useSettingsContext } from '../SettingsContext'; -import { motion } from "framer-motion"; - -import "./Picker.css"; -import { memo, useEffect, useState } from 'react'; - -function Picker() { - const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext(); - - const defaultPresets = [ - 'linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)', - 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)', - 'linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)', - 'linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)', - 'linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)', - 'linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)', - 'radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)', - 'radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)', - 'linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)', - 'rgba(114, 1, 170, 0.89)', - 'rgba(93, 135, 63, 0.89)', - 'rgba(4, 4, 138, 0.77)', - 'rgba(21, 20, 20, 0.89)', - 'linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)', - 'radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)', - 'rgba(17, 94, 89, 1)', - 'rgba(30, 64, 175, 0.89)', - 'rgba(134, 25, 143, 1)', - 'rgba(14, 165, 233, 0.9)' - ]; - const [presets, setPresets] = useState(() => { - const savedPresets = localStorage.getItem('colorPickerPresets'); - return savedPresets ? JSON.parse(savedPresets) : defaultPresets; - }); - - const handleMessage = (event: MessageEvent) => { - if (event.data === "popupClosed") { - setShowPicker(false); - } - }; - - useEffect(() => { - window.addEventListener("message", handleMessage); - - // Cleanup - return () => { - window.removeEventListener("message", handleMessage); - }; - }, []); - - useEffect(() => { - if (!showPicker) { - // Check if the selected color is already in the presets - const existingIndex = presets.indexOf(settingsState.customThemeColor); - - let updatedPresets; - if (existingIndex > -1) { - // If the color exists, move it to the front - updatedPresets = [ - settingsState.customThemeColor, - ...presets.slice(0, existingIndex), - ...presets.slice(existingIndex + 1) - ]; - } else { - // If the color is new, add it to the front and slice the array - updatedPresets = [settingsState.customThemeColor, ...presets].slice(0, 18); - } - - setPresets(updatedPresets); - localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets)); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [showPicker]); - - const colorChange = (color: string) => { - setSettingsState({ - ...settingsState, - customThemeColor: color, - }); - }; - - // Define animation variants - const backgroundVariants = { - hidden: { opacity: 0 }, - visible: { opacity: 1 }, - exit: { opacity: 0 } - }; - - const scaleVariants = { - hidden: { scale: 0.3 }, - visible: { scale: 1 }, - exit: { scale: 0.4 } // Adding exit animation - }; - - return ( - // Apply fade-in animation to background - setShowPicker(false)} - className={`absolute top-0 left-0 z-50 flex justify-center w-full h-full pt-4 bg-black/20 ${!showPicker ? 'pointer-events-none' : ''}`} - > -
- {/* Apply springy scale animation */} - e.stopPropagation()} - className="h-auto p-4 bg-white border rounded-lg shadow-lg dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700" - > - - -
- - ); -} - -export default memo(Picker); diff --git a/src/old-interface/components/PickerSwatch.tsx b/src/old-interface/components/PickerSwatch.tsx deleted file mode 100644 index 74277e0c..00000000 --- a/src/old-interface/components/PickerSwatch.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { memo } from 'react'; -import { useSettingsContext } from '../SettingsContext'; - -const PickerSwatch = () => { - const { setShowPicker, settingsState } = useSettingsContext(); - - const enablePicker = () => { - setShowPicker(true); - }; - - return ( - - ); -}; - -export default memo(PickerSwatch); diff --git a/src/old-interface/components/Select.tsx b/src/old-interface/components/Select.tsx deleted file mode 100644 index 1ac6fdfa..00000000 --- a/src/old-interface/components/Select.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Select({ state, onChange, options }: { state: string, onChange: (value: string) => void, options: { value: string, label: string }[] }) { - return ( - - ) -} \ No newline at end of file diff --git a/src/old-interface/components/Slider.css b/src/old-interface/components/Slider.css deleted file mode 100644 index f200958c..00000000 --- a/src/old-interface/components/Slider.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Slider Thumb */ -.slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 24px; - height: 24px; - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3); - background: white; - cursor: pointer; - border-radius: 50%; -} - -.slider::-moz-range-thumb { - width: 24px; - height: 24px; - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3); - background: white; - cursor: pointer; - border-radius: 50%; -} \ No newline at end of file diff --git a/src/old-interface/components/Slider.tsx b/src/old-interface/components/Slider.tsx deleted file mode 100644 index a6c268cf..00000000 --- a/src/old-interface/components/Slider.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { memo } from "react"; -import "./Slider.css"; - -interface SliderProps { - state: number; - onChange: (value: number) => void; -} - -const Slider: React.FC = ({ state, onChange }) => { - - return ( -
- onChange(Number(e.target.value))} - className="w-full h-1 rounded-full appearance-none cursor-pointer slider dark:bg-[#38373D] bg-[#DDDDDD]" - /> -
- ); -}; - -export default memo(Slider); \ No newline at end of file diff --git a/src/old-interface/components/Switch.css b/src/old-interface/components/Switch.css deleted file mode 100644 index 6be68af7..00000000 --- a/src/old-interface/components/Switch.css +++ /dev/null @@ -1,4 +0,0 @@ -.dark .switch[data-ison="true"], -.switch[data-ison="true"] { - background-color: #30D259; -} \ No newline at end of file diff --git a/src/old-interface/components/Switch.tsx b/src/old-interface/components/Switch.tsx deleted file mode 100644 index a62007b8..00000000 --- a/src/old-interface/components/Switch.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { motion } from "framer-motion"; -import "./Switch.css"; -import type { SwitchProps } from "../types/SwitchProps"; -import { memo } from "react"; - -function Switch(props: SwitchProps) { - const toggleSwitch = () => { - const newIsOn = !props.state; - props.onChange(newIsOn); - }; - - return ( -
- -
- ); -} - -const spring = { - type: "spring", - stiffness: 700, - damping: 30 -}; - -export default memo(Switch); \ No newline at end of file diff --git a/src/old-interface/components/TabbedContainer.tsx b/src/old-interface/components/TabbedContainer.tsx deleted file mode 100644 index e3af9822..00000000 --- a/src/old-interface/components/TabbedContainer.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { memo, useEffect, useRef, useState } from 'react'; -import { motion } from 'framer-motion'; -import type { TabbedContainerProps } from '../types/TabbedContainerProps'; -import { useSettingsContext } from '../SettingsContext'; - -const TabbedContainer: React.FC = ({ tabs }) => { - const { settingsState } = useSettingsContext(); - const [activeTab, setActiveTab] = useState(0); - const [hoveredTab, setHoveredTab] = useState(null); - const [tabWidth, setTabWidth] = useState(0); - const [position, setPosition] = useState(0); - const positionRef = useRef(position); - - // Function to handle message - const handleMessage = (event: MessageEvent) => { - if (event.data === "popupClosed") { - setActiveTab(0); - } - }; - - useEffect(() => { - window.addEventListener("message", handleMessage); - - // Cleanup - return () => { - window.removeEventListener("message", handleMessage); - }; - }, []); - - useEffect(() => { - const newPosition = -activeTab * 100; - setPosition(newPosition); - positionRef.current = newPosition; - }, [activeTab]); - - const containerRef = useRef(null); - - const springTransition = settingsState.animations ? { type: 'spring', stiffness: 250, damping: 25 } : { duration: 0 }; - - useEffect(() => { - if (containerRef.current) { - // @ts-expect-error for some reason its giving an error in TS but it works... - const width = containerRef.current.getBoundingClientRect().width; - setTabWidth(width / tabs.length); - } - }, [tabs.length]); - - const calcXPos = (index: number | null) => { - if (index !== null) { - return tabWidth * index; - } - return tabWidth * activeTab; - }; - - return ( - <> -
-
- - {tabs.map((tab, index) => ( - - ))} -
-
-
- - {tabs.map((tab, index) => ( -
- {tab.content} -
- ))} - -
- - ); -}; - -export default memo(TabbedContainer); \ No newline at end of file diff --git a/src/old-interface/components/ThemeCover.tsx b/src/old-interface/components/ThemeCover.tsx deleted file mode 100644 index bc6a2c06..00000000 --- a/src/old-interface/components/ThemeCover.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React, { useState } from 'react'; -import { CustomTheme, DownloadedTheme } from '../../types/CustomThemes'; -import browser from 'webextension-polyfill'; -import { ArrowUpOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline'; -import { sendThemeUpdate, setTheme } from '../hooks/ThemeManagment'; -import { DeleteDownloadedTheme } from '../pages/Store'; - -type ThemeCoverProps = { - theme: Omit | DownloadedTheme; - isSelected: boolean; - isEditMode: boolean; - downloaded?: boolean; - onThemeSelect: (themeId: string) => void; - onThemeDelete: (themeId: string) => void; -}; - -export const ThemeCover: React.FC = React.memo(({ - theme, - downloaded, - isSelected, - isEditMode, - onThemeSelect, - onThemeDelete, -}) => { - const [uploading, setUploading] = useState(false); - const handleThemeClick = async () => { - if (isEditMode) return; - if (downloaded) { - await sendThemeUpdate(theme as DownloadedTheme, true) - DeleteDownloadedTheme(theme.id); - setTheme(theme.id); - } else { - onThemeSelect(theme.id); - } - }; - - const handleDeleteClick = (e: React.MouseEvent) => { - e.stopPropagation(); - onThemeDelete(theme.id); - }; - - const handleShareClick = (event: React.MouseEvent) => { - event?.preventDefault(); - setUploading(true); - browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then(() => { - setUploading(false); - }); - }; - - return ( - - ); -}); - -const LoadingSpinner = ({ size }: { size: number }) => { - return
; -}; - diff --git a/src/old-interface/components/ThemeSelector.tsx b/src/old-interface/components/ThemeSelector.tsx deleted file mode 100644 index b56f03e7..00000000 --- a/src/old-interface/components/ThemeSelector.tsx +++ /dev/null @@ -1,269 +0,0 @@ -import React, { forwardRef, ForwardRefExoticComponent, RefAttributes, useCallback, useEffect, useImperativeHandle, useState } from 'react'; -import { deleteTheme, disableTheme, getDownloadedThemes, listThemes, sendThemeUpdate, setTheme } from '../hooks/ThemeManagment'; -import { DeleteDownloadedTheme } from '../pages/Store'; -import { ThemeCover } from './ThemeCover'; -import browser from 'webextension-polyfill'; -import { CustomTheme, DownloadedTheme } from '../../types/CustomThemes'; -import { useSettingsContext } from '../SettingsContext'; -import { SettingsState } from '../types/AppProps'; -import { InstallTheme } from '../../seqta/ui/themes/downloadTheme'; -import SpinnerIcon from './LoadingSpinner'; -import { toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; -import useVisibility from './useVisibility'; -import { debounce } from 'lodash'; -import { Mutex } from '../../seqta/utils/mutex'; - -interface ThemeSelectorProps { - isEditMode: boolean; - ref: React.Ref; -} - -const ThemeSelector: ForwardRefExoticComponent & RefAttributes> = forwardRef(({ isEditMode = false }, ref) => { - const [themes, setThemes] = useState[]>([]); - const [isLoading, setIsLoading] = useState(true); - const [isDragging, setIsDragging] = useState(false); - const [tempTheme, setTempTheme] = useState(null); - const { settingsState, setSettingsState } = useSettingsContext(); - const [elementRef, isVisible] = useVisibility({ - root: null, // Use the viewport as the root - rootMargin: '0px', - threshold: 0.1, // 10% of the element needs to be visible - }); - - const mutex = new Mutex(); - - const setSelectedTheme = (themeId: string) => { - setSettingsState((prevState: SettingsState) => ({ - ...prevState, - selectedTheme: themeId, - })); - } - - useImperativeHandle(ref, () => ({ - disableTheme: async () => { - await disableTheme(); - setSelectedTheme(''); - } - })); - - useEffect(() => { - const handleThemeChange = async () => { - //await new Promise((resolve) => setTimeout(resolve, 500)); - fetchThemes(); - }; - - window.addEventListener('message', (message) => { - if (message.data.type === 'themeChanged') { - handleThemeChange(); - } - }); - - return () => { - window.removeEventListener('message', (message) => { - if (message.data.type === 'themeChanged') { - handleThemeChange(); - } - }); - }; - }, []); - - useEffect(() => { - let intervalId: any; - if (isVisible) { - intervalId = setInterval(fetchThemes, 2000); - } else { - clearInterval(intervalId); - } - - return () => { - clearInterval(intervalId); - }; - }, [isVisible]); - - const fetchThemes = async () => { - try { - const { themes, selectedTheme } = await listThemes(); - let tempDownloadedThemes = await getDownloadedThemes(); - - setThemes(themes); - setSelectedTheme(selectedTheme ? selectedTheme : ''); - - const matchingThemes = themes.filter(theme => - tempDownloadedThemes.some(downloadedTheme => downloadedTheme.id === theme.id) - ); - - if (matchingThemes.length > 0) { - matchingThemes.forEach((theme) => { - DeleteDownloadedTheme(theme.id); - tempDownloadedThemes = tempDownloadedThemes.filter(downloadedTheme => downloadedTheme.id !== theme.id); - }) - } - - tempDownloadedThemes.forEach(async (theme) => { - await sendThemeUpdate(theme as DownloadedTheme, true, false) - DeleteDownloadedTheme(theme.id); - }); - } catch (error) { - console.error('Error fetching themes:', error); - } finally { - setIsLoading(false); - } - }; - - useEffect(() => { - fetchThemes(); - }, []); - - const handleThemeSelect = useCallback( - async (themeId: string) => { - const unlock = await mutex.lock(); - try { - if (themeId === settingsState.selectedTheme) { - await disableTheme(); - setSelectedTheme(''); - } else { - const selectedTheme = themes.find((theme) => theme.id === themeId); - if (selectedTheme) { - await setTheme(selectedTheme.id); - setSelectedTheme(themeId); - } - } - } finally { - unlock(); - } - }, - [settingsState.selectedTheme, themes] - ); - - const handleThemeSelectDebounced = useCallback( - debounce(handleThemeSelect, 100), - [handleThemeSelect] - ); - - const handleThemeDelete = useCallback( - async (themeId: string) => { - try { - await deleteTheme(themeId); - setThemes((prevThemes) => prevThemes.filter((theme) => theme.id !== themeId)); - if (themeId === settingsState.selectedTheme) { - setSelectedTheme('') - disableTheme(); - } - } catch (error) { - console.error('Error deleting theme:', error); - } - }, - [settingsState.selectedTheme] - ); - - const handleDragOver = (e: React.DragEvent) => { - e.preventDefault(); - setIsDragging(true); - }; - - const handleDragLeave = () => { - setIsDragging(false); - }; - - const handleDrop = (e: React.DragEvent) => { - e.preventDefault(); - setIsDragging(false); - const file: File = e.dataTransfer.files[0]; - const reader: FileReader = new FileReader(); - - reader.onload = async (event: ProgressEvent) => { - try { - const result: any = JSON.parse(event.target!.result as string); - try { - setTempTheme(result); - await InstallTheme(result); - await fetchThemes(); - setTempTheme(null); - } catch(error) { - toast.error('Invalid file type. Please upload a valid theme file.'); - setTempTheme(null); - } - } catch (error) { - toast.error('Error parsing file. Please upload a valid JSON theme file.'); - setTempTheme(null); - } - }; - - reader.readAsText(file); - }; - - if (isLoading) { - return
Loading themes...
; - } - - return ( -
-
-
-
-
- - - - - - - Import Theme -
-
-
-
-

Themes

-
- - {themes.map((theme) => ( - - ))} - - {tempTheme && ( -
- -
- )} - - { themes.length > 0 &&
} - - - {'\uecc5'} - Theme Store - - - -
-
- ); -}); - -export default ThemeSelector; \ No newline at end of file diff --git a/src/old-interface/components/store/header.tsx b/src/old-interface/components/store/header.tsx deleted file mode 100644 index 7da53301..00000000 --- a/src/old-interface/components/store/header.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import logo from '../../../resources/icons/betterseqta-dark-full.png'; -import logoDark from '../../../resources/icons/betterseqta-light-full.png'; - -export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) { - return
-
-
setSearchTerm('')}> - - - -
- -

Theme Store

-
-
- setSearchTerm(e.target.value)} - className="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" /> - - - -
-
-
; -} diff --git a/src/old-interface/components/useVisibility.tsx b/src/old-interface/components/useVisibility.tsx deleted file mode 100644 index f09620da..00000000 --- a/src/old-interface/components/useVisibility.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; - -interface Options { - root?: Element | null; - rootMargin?: string; - threshold?: number | number[]; -} - -type UseVisibilityReturnType = [any | null, boolean]; - -const useVisibility = (options: Options): UseVisibilityReturnType => { - const [isVisible, setIsVisible] = useState(false); - const elementRef = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver(([entry]) => { - setIsVisible(entry.isIntersecting); - }, options); - - if (elementRef.current) { - observer.observe(elementRef.current); - } - - return () => { - if (elementRef.current) { - observer.unobserve(elementRef.current); - } - }; - }, [elementRef, options]); - - return [elementRef, isVisible]; -}; - -export default useVisibility; \ No newline at end of file diff --git a/src/old-interface/dark.ts b/src/old-interface/dark.ts deleted file mode 100644 index e14b76f2..00000000 --- a/src/old-interface/dark.ts +++ /dev/null @@ -1,8 +0,0 @@ -import Browser from "webextension-polyfill"; - -(async () => { - const result = await Browser.storage.local.get(); - if (result.DarkMode) { - document.body.classList.add('dark'); - } -})(); \ No newline at end of file diff --git a/src/old-interface/hooks/BackgroundDataLoader.tsx b/src/old-interface/hooks/BackgroundDataLoader.tsx deleted file mode 100644 index dc26b266..00000000 --- a/src/old-interface/hooks/BackgroundDataLoader.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Background } from "../components/BackgroundSelector"; - -export const downloadPresetBackground = async (background: Background, onProgress: (progress: number) => void): Promise => { - const response = await fetch(background.url as string); - - const totalLength = +response.headers.get('Content-Length')!; - let receivedLength = 0; - - const reader = response.body?.getReader(); - const chunks = []; - - // eslint-disable-next-line no-constant-condition - while (true) { - const { done, value } = await reader!.read(); - - if (done) break; - - chunks.push(value!); - receivedLength += value!.length; - - onProgress(Math.ceil(receivedLength / totalLength * 100)); - } - - const blob = new Blob(chunks); - await writeData(background.id, background.type, blob); - - return { - id: background.id, - type: background.type, - blob, - url: URL.createObjectURL(blob), - }; -}; -// IndexedDB utility functions -export const openDB = () => { - return new Promise((resolve, reject) => { - const request = indexedDB.open('MyDatabase', 1); - - request.onerror = () => reject(request.error); - request.onsuccess = () => resolve(request.result); - - request.onupgradeneeded = (event) => { - const db = (event.target as IDBOpenDBRequest).result; - db.createObjectStore('backgrounds', { keyPath: 'id' }); - }; - }); -}; -export const writeData = async (fileId: string, type: string, blob: Blob) => { - return new Promise((resolve, reject) => { - openDB().then(async (db) => { - const tx = db.transaction('backgrounds', 'readwrite'); - const store = tx.objectStore('backgrounds'); - const request = store.put({ id: fileId, type, blob }); - - await new Promise((res, rej) => { - tx.oncomplete = () => res(request.result); - tx.onerror = () => rej(tx.error); - }).then(resolve, reject); - - }).catch(reject); - }); -}; -export const readAllData = async (): Promise => { - const db = await openDB(); - const tx = db.transaction('backgrounds', 'readonly'); - const store = tx.objectStore('backgrounds'); - const request = store.getAll(); - - return await new Promise((resolve, reject) => { - request.onsuccess = () => resolve(request.result); - request.onerror = () => reject(request.error); - }); -}; diff --git a/src/old-interface/hooks/ThemeManagment.ts b/src/old-interface/hooks/ThemeManagment.ts deleted file mode 100644 index 5ebd3c63..00000000 --- a/src/old-interface/hooks/ThemeManagment.ts +++ /dev/null @@ -1,161 +0,0 @@ -import browser from 'webextension-polyfill' -import type { CustomTheme, DownloadedTheme, ThemeList } from '../../types/CustomThemes'; -import localforage from 'localforage'; - -export const setTheme = async (themeID: string) => { - // send message to the background script - await browser.runtime.sendMessage({ - type: 'currentTab', - info: 'SetTheme', - body: { - themeID: themeID - } - }); -} - -export const getDownloadedThemes = async (): Promise => { - // send message to the background script - const response: DownloadedTheme[] = await new Promise(async (resolve, reject) => { - try { - let availableThemes = await localforage.getItem('availableThemes') as string[]; - availableThemes = Array.from(new Set(availableThemes)); - - const downloadedThemes: DownloadedTheme[] = []; - for (let i = 0; i < availableThemes.length; i++) { - let themeData = await localforage.getItem(availableThemes[i]) as DownloadedTheme; - - downloadedThemes.push(themeData); - } - - resolve(downloadedThemes); - } catch(error) { - reject(error); - } - }); - - return response; -} - -export const listThemes = async (): Promise => { - // send message to the background script - const response: ThemeList = await new Promise((resolve, reject) => { - browser.runtime.sendMessage({ - type: 'currentTab', - info: 'ListThemes' - }).then(async (response) => { - if (response) { - // convert the response themes coverImage to a bloburl - response.themes = await Promise.all( - response.themes.map(async (theme: Omit) => { - if (theme.coverImage) { - const blob = await fetch(theme.coverImage as string).then((res) => res.blob()); - theme.coverImage = URL.createObjectURL(blob); - } - return theme; - }) - ); - - resolve(response); - } else { - reject(new Error('Failed to get response')); - } - }).catch((error: any) => { - reject(error); - }); - }); - - return response; -} - -export const disableTheme = async () => { - await browser.runtime.sendMessage({ - type: 'currentTab', - info: 'DisableTheme', - }); -}; - -export const deleteTheme = async (themeID: string) => { - await browser.runtime.sendMessage({ - type: 'currentTab', - info: 'DeleteTheme', - body: { - themeID: themeID - } - }); -} - -export const sendThemeUpdate = async (updatedTheme: CustomTheme | DownloadedTheme, saveTheme?: boolean, updateImages?: boolean, enableTheme?: boolean) => { - saveTheme = saveTheme || false; - enableTheme = enableTheme || false; - - const imageDataPromises = updatedTheme.CustomImages.map(async (image) => { - if (saveTheme || updateImages) { - const base64 = await blobToBase64(image.blob); - return { - id: image.id, - variableName: image.variableName, - url: base64, - }; - } - return { - id: image.id, - variableName: image.variableName, - url: '' - }; - }); - - Promise.all(imageDataPromises).then(async (imageData) => { - const themeData = { - ...updatedTheme, - CustomImages: imageData, - }; - - if (saveTheme && updatedTheme.coverImage) { - themeData.coverImage = await blobToBase64(updatedTheme.coverImage as Blob); - } else { - themeData.coverImage = null; - } - - browser.runtime.sendMessage({ - type: 'currentTab', - info: 'UpdateThemePreview', - body: themeData, - save: saveTheme, - enableTheme: enableTheme - }); - - if (saveTheme) { - browser.runtime.sendMessage({ type: 'currentTab', info: 'CloseThemeCreator' }); - } - }); -}; - -// Helper function to convert a Blob to base64 -const blobToBase64 = (blob: Blob): Promise => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onloadend = () => { - const base64 = reader.result as string; - resolve(base64); - }; - reader.onerror = (error) => { - reject(error); - }; - reader.readAsDataURL(blob); - }); -}; - -export const enableCurrentTheme = async () => { - await browser.runtime.sendMessage({ - type: 'currentTab', - info: 'EnableCurrentTheme', - }); -}; - -export const saveUpdatedTheme = async (updatedTheme: CustomTheme) => { - await browser.runtime.sendMessage({ - type: 'currentTab', - info: 'SaveTheme', - body: updatedTheme, - }); -}; \ No newline at end of file diff --git a/src/old-interface/hooks/settingsState.ts b/src/old-interface/hooks/settingsState.ts deleted file mode 100644 index 6506bf0b..00000000 --- a/src/old-interface/hooks/settingsState.ts +++ /dev/null @@ -1,100 +0,0 @@ -import browser from 'webextension-polyfill' -import { useEffect, useMemo } from "react"; -import { SettingsProps } from "../types/SettingsProps"; -import { SettingsState } from "../types/AppProps"; -import { SettingsState as StorageSettingsState } from '../../types/storage'; - -let RanOnce = false; -let previousSettingsState: SettingsState - -const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => { - useEffect(() => { - if (RanOnce) return; - RanOnce = true; - - // @ts-expect-error - TODO: Fix this - browser.storage.local.get().then((result: StorageSettingsState) => { - setSettingsState({ - notificationCollector: result.notificationcollector, - lessonAlerts: result.lessonalert, - animatedBackground: result.animatedbk, - animatedBackgroundSpeed: result.bksliderinput, - customThemeColor: result.selectedColor, - betterSEQTAPlus: result.onoff, - shortcuts: result.shortcuts, - customshortcuts: result.customshortcuts, - transparencyEffects: result.transparencyEffects, - selectedTheme: result.selectedTheme, - timeFormat: result.timeFormat, - animations: result.animations, - defaultPage: result.defaultPage, - devMode: result.devMode || false - }); - }); - }); - const keyToStateMap = useMemo(() => ({ - "notificationcollector": "notificationCollector", - "lessonalert": "lessonAlerts", - "animatedbk": "animatedBackground", - "bksliderinput": "animatedBackgroundSpeed", - "selectedColor": "customThemeColor", - "onoff": "betterSEQTAPlus", - "shortcuts": "shortcuts", - "customshortcuts": "customshortcuts", - "transparencyEffects": "transparencyEffects", - "selectedTheme": "selectedTheme", - "timeFormat": "timeFormat", - "animations": "animations", - "defaultPage": "defaultPage", - "devMode": "devMode" - }), []); - - const storageChangeListener = (changes: browser.Storage.StorageChange) => { - for (const [key, { newValue }] of Object.entries(changes)) { - if (key === "DarkMode") { - if (key === "DarkMode" && newValue) { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } - } - - // @ts-expect-error - TODO: Fix this - const stateKey = keyToStateMap[key as keyof StorageSettingsState]; - if (stateKey) { - setSettingsState((prevState: SettingsState) => ({ - ...prevState, - [stateKey]: newValue - })); - - } - } - }; - - useEffect(() => { - browser.storage.onChanged.addListener(storageChangeListener); - return () => { - browser.storage.onChanged.removeListener(storageChangeListener); - }; - }); - - const setStorage = (key: keyof StorageSettingsState, value: any) => { - browser.storage.local.set({ [key]: value }); - } - - useEffect(() => { - if (previousSettingsState) { - for (const [key, value] of Object.entries(settingsState)) { - // @ts-expect-error - TODO: Fix this - const storageKey = Object.keys(keyToStateMap).find(k => keyToStateMap[k] === key); - // @ts-expect-error - TODO: Fix this - if (storageKey && value !== previousSettingsState[key]) { - setStorage(storageKey as keyof StorageSettingsState, value); - } - } - } - previousSettingsState = settingsState; - }, [settingsState, keyToStateMap]) -} - -export default useSettingsState; \ No newline at end of file diff --git a/src/old-interface/index.css b/src/old-interface/index.css deleted file mode 100644 index 04395611..00000000 --- a/src/old-interface/index.css +++ /dev/null @@ -1,21 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -::-webkit-scrollbar { - display: none; -} - -button, a { - @apply text-[0.875rem]; -} \ No newline at end of file diff --git a/src/old-interface/index.html b/src/old-interface/index.html deleted file mode 100644 index 43c86d39..00000000 --- a/src/old-interface/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - BetterSEQTA+ Settings - - -
- - - - - diff --git a/src/old-interface/main.d.ts b/src/old-interface/main.d.ts deleted file mode 100644 index dc61163c..00000000 --- a/src/old-interface/main.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import './index.css'; - -declare module "*.png"; -declare module "*.svg"; -declare module "*.jpeg"; -declare module "*.jpg"; - -declare module 'react-best-gradient-color-picker'; \ No newline at end of file diff --git a/src/old-interface/main.tsx b/src/old-interface/main.tsx deleted file mode 100644 index fe7b7a01..00000000 --- a/src/old-interface/main.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import { HashRouter, Route, Routes } from 'react-router-dom'; -import { ErrorBoundary } from "react-error-boundary"; - -import './index.css'; -import SettingsPage from './pages/SettingsPage.js'; -import browser from 'webextension-polyfill'; -import font from '@/resources/fonts/IconFamily.woff' - -import ThemeCreator from './pages/ThemeCreator'; -import Store from './pages/Store'; - -browser.storage.local.get().then(({ DarkMode }) => { - if (DarkMode) document.documentElement.classList.add('dark'); -}) - -const style = document.createElement("style"); -style.setAttribute("type", "text/css"); -style.classList.add('iconFamily') -style.innerHTML = ` -@font-face { - font-family: 'IconFamily'; - src: url('${browser.runtime.getURL(font)}') format('woff'); - font-weight: normal; - font-style: normal; -}`; -document.head.appendChild(style); - -const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!); - -root.render( - - -

An error occurred 😭😭😭

-

Try clicking this button and see if it helps...

- -
- }> - - - } /> - } /> - } /> - } /> - - - - , -); diff --git a/src/old-interface/pages/SettingsPage.tsx b/src/old-interface/pages/SettingsPage.tsx deleted file mode 100644 index 6fcc3dec..00000000 --- a/src/old-interface/pages/SettingsPage.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import TabbedContainer from '../components/TabbedContainer'; -import Settings from './SettingsPage/Settings'; -import logo from '@/resources/icons/betterseqta-dark-full.png'; -import logoDark from '@/resources/icons/betterseqta-light-full.png'; -import { SettingsContextProvider } from '../SettingsContext'; -import Shortcuts from './SettingsPage/Shortcuts'; -import Picker from '../components/Picker'; -import Themes from './SettingsPage/Themes'; -import { ToastContainer } from 'react-toastify'; -import { memo } from 'react'; - -import browser from 'webextension-polyfill'; - -interface SettingsPage { - standalone: boolean; -} - -const SettingsPage = ({ standalone }: SettingsPage) => { - const tabs = [ - { - title: 'Settings', - content: - }, - { - title: 'Shortcuts', - content: - }, - { - title: 'Themes', - content: - } - ]; - - return ( - - -
-
- - - -
- - -
- - ); -}; - -export default memo(SettingsPage); \ No newline at end of file diff --git a/src/old-interface/pages/SettingsPage/About.tsx b/src/old-interface/pages/SettingsPage/About.tsx deleted file mode 100644 index fa10af89..00000000 --- a/src/old-interface/pages/SettingsPage/About.tsx +++ /dev/null @@ -1,19 +0,0 @@ -const About = () => { - return ( -
-
-

About

-

BetterSEQTA+ is a branch of BetterSEQTA which was originally developed by Nulkem. It was discontinued. So BetterSEQTA+ has come in to fill in that gap!

-

We are currently working on fixing bugs and adding new features. If you want to request a feature or report a bug, you can do so on - Github. -

-
-
-

Credits

-

Nulkem for the original extension, OG-RandomTechChannel, Crazypersonalph, and the current maintainer SethBurkart123

-
-
- ); -}; - -export default About; \ No newline at end of file diff --git a/src/old-interface/pages/SettingsPage/Settings.tsx b/src/old-interface/pages/SettingsPage/Settings.tsx deleted file mode 100644 index c4c8b198..00000000 --- a/src/old-interface/pages/SettingsPage/Settings.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import Switch from '../../components/Switch'; -import Slider from '../../components/Slider'; -import PickerSwatch from '../../components/PickerSwatch'; -import Select from '../../components/Select'; - -import { SettingsList } from '../../types/SettingsProps'; -import { useSettingsContext } from '../../SettingsContext'; - -import browser from 'webextension-polyfill'; -import { memo, useCallback } from 'react'; - -const Settings: React.FC = () => { - const { settingsState, setSettingsState } = useSettingsContext(); - - const handleDevModeToggle = useCallback(() => { - const secretSequence = 'dev'; - let typedSequence = ''; - let timeoutId: NodeJS.Timeout; - - const handleKeyDown = (event: KeyboardEvent) => { - typedSequence += event.key.toLowerCase(); - - if (typedSequence.includes(secretSequence)) { - document.removeEventListener('keydown', handleKeyDown); - clearTimeout(timeoutId); - - setSettingsState(prevState => ({ - ...prevState, - devMode: !prevState.devMode - })); - - alert(`Dev mode is now ${!settingsState.devMode ? 'enabled' : 'disabled'}`); - } - - // Clear the sequence after 2 seconds of inactivity - clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - typedSequence = ''; - }, 2000); - }; - - document.addEventListener('keydown', handleKeyDown); - - // Cleanup function to remove the event listener - return () => { - document.removeEventListener('keydown', handleKeyDown); - clearTimeout(timeoutId); - }; - }, [setSettingsState, settingsState.devMode]); - - const handleSettingChange = useCallback((key: string, value: boolean | string | number) => { - setSettingsState(prevState => ({ - ...prevState, - [key]: value, - })); - }, [setSettingsState]); - - const settings: SettingsList[] = [ - { - title: "Transparency Effects", - description: "Enables transparency effects on certain elements such as blur. (May impact battery life)", - modifyElement: handleSettingChange('transparencyEffects', isOn)} /> - }, - { - title: "Animated Background", - description: "Adds an animated background to BetterSEQTA. (May impact battery life)", - modifyElement: handleSettingChange('animatedBackground', isOn)} /> - }, - { - title: "Animated Background Speed", - description: "Controls the speed of the animated background.", - modifyElement: handleSettingChange('animatedBackgroundSpeed', value)} /> - }, - { - title: "Custom Theme Colour", - description: "Customise the overall theme colour of SEQTA Learn.", - modifyElement: - }, - { - title: "Edit Sidebar Layout", - description: "Customise the sidebar layout.", - modifyElement: - }, - { - title: "Animations", - description: "Enables animations on certain pages.", - modifyElement: handleSettingChange('animations', isOn)} /> - }, - { - title: "Notification Collector", - description: "Uncaps the 9+ limit for notifications, showing the real number.", - modifyElement: handleSettingChange('notificationCollector', isOn)} /> - }, - { - title: "Lesson Alerts", - description: "Sends a native browser notification ~5 minutes prior to lessons.", - modifyElement: handleSettingChange('lessonAlerts', isOn)} /> - }, - { - title: "12 Hour Time", - description: "Prefer 12 hour time format for SEQTA", - modifyElement: handleSettingChange('timeFormat', isOn ? "12" : "24")} /> - }, - { - title: "Default Page", - description: "The page to load when SEQTA Learn is opened.", - modifyElement: setTheme({ ...theme, name: e.target.value })} - className='w-full p-2 mb-4 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white' /> -
- -
-
Description (optional)
-