chore: update paths to be more absolute

src/background.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill'
-import { SettingsState } from "./types/storage";
+import { SettingsState } from "@/types/storage";
 
 export const openDB = () => {
   return new Promise((resolve, reject) => {

src/interface/main.tsx

@@ -6,7 +6,7 @@ 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 font from '@/resources/fonts/IconFamily.woff'
 
 import ThemeCreator from './pages/ThemeCreator';
 import Store from './pages/Store';

src/interface/pages/SettingsPage.tsx

@@ -1,7 +1,7 @@
 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 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';

src/manifests/brave.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 
 export const brave = createManifest(baseManifest, 'brave')

src/manifests/chrome.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 
 export const chrome = createManifest(baseManifest, 'chrome')

src/manifests/edge.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 
 export const edge = createManifest(baseManifest, 'edge')

src/manifests/firefox.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 import pkg from '../../package.json'
 

src/manifests/opera.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 
 export const opera = createManifest(baseManifest, 'opera')

src/manifests/safari.ts

@@ -1,4 +1,4 @@
-import { createManifest } from '../../lib/createManifest'
+import { createManifest } from '$lib/createManifest'
 import baseManifest from './manifest.json'
 
 const updatedSafariManifest = {

src/seqta/icons/assessmentsIcon.ts

@@ -1,4 +1,4 @@
-export default String.raw`
+export default /* html */`
 <svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
   <path fill="currentColor" d="M6 20H13V22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H18C19.11 2 20 2.9 20 4V12.54L18.5 11.72L18 12V4H13V12L10.5 9.75L8 12V4H6V20M24 17L18.5 14L13 17L18.5 20L24 17M15 19.09V21.09L18.5 23L22 21.09V19.09L18.5 21L15 19.09Z"></path>
 </svg>

src/seqta/icons/coursesIcon.ts

@@ -1,4 +1,4 @@
-export default String.raw`
+export default /* html */`
 <svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
   <path fill="currentColor" d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"></path>
 </svg>

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -1,10 +1,10 @@
-import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "../../SEQTA";
+import { addExtensionSettings, enableAnimatedBackground, GetThresholdOfColor, loadHomePage, SendNewsPage, setupSettingsButton } from "@/SEQTA";
 import { updateBgDurations } from "./Animation";
 import { appendBackgroundToUI } from "./ImageBackgrounds";
-import stringToHTML from "../utils/stringToHTML";
-import { settingsState } from "../utils/listeners/SettingsState";
+import stringToHTML from "@/seqta/utils/stringToHTML";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
-import { delay } from "../utils/delay";
+import { delay } from "@/seqta/utils/delay";
 
 export async function AddBetterSEQTAElements() {
   if (settingsState.onoff) {    

src/seqta/ui/Animation.ts

@@ -1,4 +1,4 @@
-import { settingsState } from "../utils/listeners/SettingsState";
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 
 /**
  * Update the background animation durations based on the slider input.

src/seqta/ui/colors/Manager.ts

@@ -1,11 +1,11 @@
 import browser from 'webextension-polyfill'
-import { GetThresholdOfColor } from '../../../SEQTA';
+import { GetThresholdOfColor } from '@/SEQTA';
 import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
-import darkLogo from '../../../resources/icons/betterseqta-light-full.png';
-import lightLogo from '../../../resources/icons/betterseqta-dark-full.png';
+import darkLogo from '@/resources/icons/betterseqta-light-full.png';
+import lightLogo from '@/resources/icons/betterseqta-dark-full.png';
 
 // Helper functions
 const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);

src/seqta/ui/colors/lightenAndPaleColor.ts

@@ -1,6 +1,5 @@
 import Color from 'color';
 
-
 export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) {
   if (!inputColor) return;
 

src/seqta/ui/themes/Themes.ts

@@ -1,4 +1,4 @@
-import { base64toblobURL } from '../../utils/imageConversions';
+import { base64toblobURL } from '@/seqta/utils/imageConversions';
 
 export const imageData: Record<string, { url: string; variableName: string }> = {};
 

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -1,6 +1,6 @@
-import { CustomThemeBase64 } from '../../../interface/types/CustomThemes';
+import { CustomThemeBase64 } from '@/interface/types/CustomThemes';
 import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 
 export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {

src/seqta/ui/themes/applyTheme.ts

@@ -1,5 +1,5 @@
-import { CustomImage, CustomTheme } from '../../../interface/types/CustomThemes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomImage, CustomTheme } from '@/interface/types/CustomThemes';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 import { applyCustomCSS } from './Themes';
 
 

src/seqta/ui/themes/deleteTheme.ts

@@ -1,7 +1,7 @@
 import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 
 export const deleteTheme = async (themeId: string) => {

src/seqta/ui/themes/disableTheme.ts

@@ -1,8 +1,8 @@
 import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
 import { removeTheme } from './removeTheme';
-import { Mutex } from '../../utils/mutex';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { Mutex } from '@/seqta/utils/mutex';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 const mutex = new Mutex();
 let isDisabling = false;

src/seqta/ui/themes/downloadTheme.ts

@@ -1,6 +1,6 @@
 import localforage from 'localforage';
-import { Theme } from '../../../interface/pages/Store';
-import base64ToBlob from '../../utils/base64ToBlob';
+import { Theme } from '@/interface/pages/Store';
+import base64ToBlob from '@/seqta/utils/base64ToBlob';
 
 type ThemeContent = {
   id: string;

src/seqta/ui/themes/enableCurrent.ts

@@ -1,7 +1,7 @@
 import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 
 export const enableCurrentTheme = async () => {

src/seqta/ui/themes/getAvailableThemes.ts

@@ -1,7 +1,7 @@
 import localforage from 'localforage';
-import { CustomTheme, ThemeList } from '../../../interface/types/CustomThemes';
-import { blobToBase64 } from '../../utils/blobToBase64';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomTheme, ThemeList } from '@/interface/types/CustomThemes';
+import { blobToBase64 } from '@/seqta/utils/blobToBase64';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 export const getAvailableThemes = async (): Promise<ThemeList | {}> => {
   try {

src/seqta/ui/themes/getTheme.ts

@@ -1,6 +1,6 @@
 import localforage from 'localforage';
-import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '../../../interface/types/CustomThemes';
-import { blobToBase64 } from '../../utils/blobToBase64'; 
+import { CustomImageBase64, CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
+import { blobToBase64 } from '@/seqta/utils/blobToBase64'; 
 
 
 export const getTheme = async (themeId: string): Promise<CustomThemeBase64 | null> => {

src/seqta/ui/themes/removeTheme.ts

@@ -1,6 +1,6 @@
 import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { CustomTheme } from '@/interface/types/CustomThemes';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 export const removeTheme = async (theme: CustomTheme) => {
   // Remove custom CSS

src/seqta/ui/themes/saveTheme.ts

@@ -1,5 +1,5 @@
 import localforage from 'localforage';
-import { CustomTheme, CustomThemeBase64 } from '../../../interface/types/CustomThemes';
+import { CustomTheme, CustomThemeBase64 } from '@/interface/types/CustomThemes';
 import { disableTheme } from './disableTheme';
 
 

src/seqta/ui/themes/setTheme.ts

@@ -1,8 +1,8 @@
 import localforage from 'localforage';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { CustomTheme } from '@/interface/types/CustomThemes';
 import { applyTheme } from './applyTheme';
 import { removeTheme } from './removeTheme';
-import { settingsState } from '../../utils/listeners/SettingsState';
+import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
 
 export const setTheme = async (themeId: string) => {

src/seqta/utils/listeners/MessageListener.ts

@@ -1,17 +1,17 @@
 import browser from 'webextension-polyfill'
 
 import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA';
-import { deleteTheme } from '../../ui/themes/deleteTheme';
-import { getAvailableThemes } from '../../ui/themes/getAvailableThemes';
-import { saveTheme } from '../../ui/themes/saveTheme';
-import { UpdateThemePreview } from '../../ui/themes/UpdateThemePreview';
-import { getTheme } from '../../ui/themes/getTheme';
-import { setTheme } from '../../ui/themes/setTheme';
-import { disableTheme } from '../../ui/themes/disableTheme';
-import { CloseThemeCreator, OpenThemeCreator } from '../../ui/ThemeCreator';
-import ShareTheme from '../../ui/themes/shareTheme';
-import sendThemeUpdate from '../sendThemeUpdate';
-import hideSensitiveContent from '../../ui/dev/hideSensitiveContent';
+import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
+import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
+import { saveTheme } from '@/seqta/ui/themes/saveTheme';
+import { UpdateThemePreview } from '@/seqta/ui/themes/UpdateThemePreview';
+import { getTheme } from '@/seqta/ui/themes/getTheme';
+import { setTheme } from '@/seqta/ui/themes/setTheme';
+import { disableTheme } from '@/seqta/ui/themes/disableTheme';
+import { CloseThemeCreator, OpenThemeCreator } from '@/seqta/ui/ThemeCreator';
+import ShareTheme from '@/seqta/ui/themes/shareTheme';
+import sendThemeUpdate from '@/seqta/utils/sendThemeUpdate';
+import hideSensitiveContent from '@/seqta/ui/dev/hideSensitiveContent';
 
 export class MessageHandler {
   constructor() {

src/seqta/utils/listeners/SettingsState.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { SettingsState } from '../../../types/storage';
+import { SettingsState } from '@/types/storage';
 
 type ChangeListener = (newValue: any, oldValue: any) => void;
 

src/seqta/utils/listeners/StorageChanges.ts

@@ -1,5 +1,5 @@
 import { settingsState } from './SettingsState';
-import { updateAllColors } from '../../ui/colors/Manager';
+import { updateAllColors } from '@/seqta/ui/colors/Manager';
 import {
   addShortcuts,
   CreateBackground,
@@ -9,10 +9,10 @@ import {
   FilterUpcomingAssessments,
   RemoveBackground,
   RemoveShortcutDiv,
-} from '../../../SEQTA';
-import { updateBgDurations } from '../../ui/Animation';
+} from '@/SEQTA';
+import { updateBgDurations } from '@/seqta/ui/Animation';
 import browser from 'webextension-polyfill';
-import { CustomShortcut } from '../../../types/storage';
+import { CustomShortcut } from '@/types/storage';
 
 export class StorageChangeHandler {
   constructor() {