feat: move svelte interface to 'src/interface'

src/SEQTA.ts

@@ -35,9 +35,9 @@ 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 renderSvelte from '@/svelte-interface/main'
-import Settings from '@/svelte-interface/pages/settings.svelte'
-import { settingsPopup } from './svelte-interface/hooks/SettingsPopup'
+import renderSvelte from '@/interface/main'
+import Settings from '@/interface/pages/settings.svelte'
+import { settingsPopup } from './interface/hooks/SettingsPopup'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false

src/interface/components/store/Backgrounds.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader';
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
   import { setTheme } from '@/seqta/ui/themes/setTheme';
   import Spinner from '../Spinner.svelte';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import Fuse from 'fuse.js';
-  import { backgroundUpdates } from '@/svelte-interface/hooks/BackgroundUpdates'
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
 
   type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
   let { searchTerm } = $props<{ searchTerm: string }>();

src/interface/components/store/CoverSwiper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import type { Theme } from '@/svelte-interface/types/Theme';
+  import type { Theme } from '@/interface/types/Theme';
   import { register, type SwiperContainer } from 'swiper/element/bundle';
 
   let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void  }>();

src/interface/components/store/ThemeGrid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Theme } from '@/svelte-interface/types/Theme'
+  import type { Theme } from '@/interface/types/Theme'
   import ThemeCard from './ThemeCard.svelte';
 
   let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();

src/interface/components/store/ThemeModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Theme } from '@/svelte-interface/types/Theme'
+  import type { Theme } from '@/interface/types/Theme'
   import { fade } from 'svelte/transition';
   import { animate, spring } from 'motion';
 

src/interface/components/themes/BackgroundSelector.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader'
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
   import BackgroundUploader from './BackgroundUploader.svelte';
   import BackgroundItem from './BackgroundItem.svelte'
   import { onMount, onDestroy } from 'svelte'
   import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
   import { delay } from 'lodash'
-  import { backgroundUpdates } from '@/svelte-interface/hooks/BackgroundUpdates'
+  import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
 
   let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
   let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);

src/interface/components/themes/ThemeSelector.svelte

@@ -9,7 +9,7 @@
   import { setTheme } from '@/seqta/ui/themes/setTheme'
   import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
   import { OpenStorePage } from '@/seqta/ui/renderStore'
-  import { themeUpdates } from '@/svelte-interface/hooks/ThemeUpdates'
+  import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
   import { closeExtensionPopup } from '@/SEQTA'
 
   let themes = $state<ThemeList | null>(null);

src/interface/pages/settings/general.svelte

@@ -2,13 +2,13 @@
   import Switch from "../../components/Switch.svelte"
   import Button from "../../components/Button.svelte"
   import Slider from "../../components/Slider.svelte"
-  import Select from "@/svelte-interface/components/Select.svelte"
+  import Select from "@/interface/components/Select.svelte"
 
   import browser from "webextension-polyfill"
   
-  import type { SettingsList } from "@/svelte-interface/types/SettingsProps"
+  import type { SettingsList } from "@/interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
-  import PickerSwatch from "@/svelte-interface/components/PickerSwatch.svelte"
+  import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
   import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
 
   const { showColourPicker } = $props<{ showColourPicker: () => void }>();

src/interface/pages/settings/shortcuts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte';
+  import MotionDiv from '@/interface/components/MotionDiv.svelte';
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
-  import Switch from "@/svelte-interface/components/Switch.svelte"
+  import Switch from "@/interface/components/Switch.svelte"
   import { onMount } from 'svelte';
 
   let isLoaded = $state(false);

src/interface/pages/settings/theme.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import BackgroundSelector from "@/svelte-interface/components/themes/BackgroundSelector.svelte"
-  import ThemeSelector from "@/svelte-interface/components/themes/ThemeSelector.svelte"
-  import { standalone } from "@/svelte-interface/utils/standalone.svelte"
+  import BackgroundSelector from "@/interface/components/themes/BackgroundSelector.svelte"
+  import ThemeSelector from "@/interface/components/themes/ThemeSelector.svelte"
+  import { standalone } from "@/interface/utils/standalone.svelte"
   
   // backgrounds
   let selectedBackground = $state<string | null>(null);

src/interface/pages/themeCreator.svelte

@@ -9,10 +9,10 @@
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import { getTheme } from '@/seqta/ui/themes/getTheme'
 
-  import Divider from '@/svelte-interface/components/themeCreator/divider.svelte'
-  import Switch from '@/svelte-interface/components/Switch.svelte'
-  import Button from '@/svelte-interface/components/Button.svelte'
-  import Slider from '@/svelte-interface/components/Slider.svelte'
+  import Divider from '@/interface/components/themeCreator/divider.svelte'
+  import Switch from '@/interface/components/Switch.svelte'
+  import Button from '@/interface/components/Button.svelte'
+  import Slider from '@/interface/components/Slider.svelte'
   import ColourPicker from '../components/ColourPicker.svelte'
   import CodeEditor from '../components/CodeEditor.svelte'
 

src/manifests/firefox.ts

@@ -8,7 +8,7 @@ const updatedFirefoxManifest = {
     scripts: [baseManifest.background.service_worker],
   },
   action: {
-    "default_popup": "svelte-interface/index.html#settings",
+    "default_popup": "interface/index.html#settings",
   },
   browser_specific_settings: {
     gecko: {

src/manifests/manifest.json

@@ -10,7 +10,7 @@
   },
   "action": {
     "browser_style": true,
-    "default_popup": "svelte-interface/index.html#settings",
+    "default_popup": "interface/index.html#settings",
     "default_icon": {
       "32": "resources/icons/icon-32.png",
       "48": "resources/icons/icon-48.png",

src/seqta/ui/ImageBackgrounds.ts

@@ -1,4 +1,4 @@
-import { getDataById, isIndexedDBSupported } from '@/svelte-interface/hooks/BackgroundDataLoader';
+import { getDataById, isIndexedDBSupported } from '@/interface/hooks/BackgroundDataLoader';
 
 export async function appendBackgroundToUI() {
   const parent = document.getElementById('container');

src/seqta/ui/ThemeCreator.ts

@@ -1,5 +1,5 @@
-import renderSvelte from "@/svelte-interface/main"
-import themeCreator from "@/svelte-interface/pages/themeCreator.svelte"
+import renderSvelte from "@/interface/main"
+import themeCreator from "@/interface/pages/themeCreator.svelte"
 import { unmount } from "svelte"
 import { ClearThemePreview } from "./themes/UpdateThemePreview"
 

src/seqta/ui/renderStore.ts

@@ -1,5 +1,5 @@
-import renderSvelte from '@/svelte-interface/main';
-import Store from '@/svelte-interface/pages/store.svelte'
+import renderSvelte from '@/interface/main';
+import Store from '@/interface/pages/store.svelte'
 
 import { unmount } from 'svelte'
 

src/seqta/ui/themes/saveTheme.ts

@@ -1,7 +1,7 @@
 import localforage from 'localforage';
 import type { LoadedCustomTheme } from '@/types/CustomThemes';
 import { disableTheme } from './disableTheme';
-import { themeUpdates } from '@/svelte-interface/hooks/ThemeUpdates';
+import { themeUpdates } from '@/interface/hooks/ThemeUpdates';
 
 
 export const saveTheme = async (theme: LoadedCustomTheme) => {

tsconfig.json

@@ -25,5 +25,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/svelte-interface/+layout.sveltes"]
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/interface/+layout.sveltes"]
 }

vite.config.ts

@@ -60,7 +60,7 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       input: {
-        settings: join(__dirname, 'src', 'svelte-interface', 'index.html')
+        settings: join(__dirname, 'src', 'interface', 'index.html')
       }
     }
   }