Merge branch 'main' into derek/wallpaperSetup

package.json

@@ -29,16 +29,16 @@
         "prepare": "husky"
     },
     "dependencies": {
-        "@date-fns/tz": "^1.4.1",
+        "@date-fns/tz": "^1.2.0",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@headlessui/react": "^2.2.9",
+        "@headlessui/react": "^2.2.0",
         "@octokit/rest": "^21.1.1",
-        "@phosphor-icons/react": "^2.1.10",
+        "@phosphor-icons/react": "^2.1.7",
         "@sentry/react": "^8.55.0",
-        "@tanstack/react-query": "^5.90.21",
+        "@tanstack/react-query": "^5.69.0",
         "@tsparticles/engine": "^3.9.1",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.9.1",
@@ -48,20 +48,20 @@
         "conventional-changelog": "^6.0.0",
         "date-fns": "^4.1.0",
         "highcharts": "^11.4.8",
-        "highcharts-react-official": "^3.2.3",
+        "highcharts-react-official": "^3.2.1",
         "html-to-image": "^1.11.13",
         "husky": "^9.1.7",
         "kc-dabr-wasm": "^0.1.2",
-        "nanoid": "^5.1.6",
+        "nanoid": "^5.1.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-loading-skeleton": "^3.5.0",
         "react-markdown": "^9.1.0",
         "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.1",
-        "sass": "^1.97.3",
-        "simple-git": "^3.31.1",
-        "sql.js": "1.14.0"
+        "sass": "^1.85.1",
+        "simple-git": "^3.27.0",
+        "sql.js": "1.11.0"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^2.0.2",
@@ -69,24 +69,24 @@
         "@commitlint/config-conventional": "^19.7.1",
         "@commitlint/types": "^19.5.0",
         "@crxjs/vite-plugin": "2.0.0-beta.21",
-        "@iconify-json/bi": "^1.2.7",
-        "@iconify-json/ic": "^1.2.4",
-        "@iconify-json/iconoir": "^1.2.10",
-        "@iconify-json/material-symbols": "^1.2.55",
-        "@iconify-json/ri": "^1.2.10",
-        "@iconify-json/streamline": "^1.2.5",
+        "@iconify-json/bi": "^1.2.2",
+        "@iconify-json/ic": "^1.2.2",
+        "@iconify-json/iconoir": "^1.2.7",
+        "@iconify-json/material-symbols": "^1.2.14",
+        "@iconify-json/ri": "^1.2.5",
+        "@iconify-json/streamline": "^1.2.2",
         "@semantic-release/exec": "^6.0.3",
         "@sentry/types": "^8.55.0",
         "@storybook/addon-designs": "^8.2.0",
-        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-essentials": "^8.6.0",
         "@storybook/addon-links": "^8.6.0",
-        "@storybook/blocks": "^8.6.14",
+        "@storybook/blocks": "^8.6.0",
         "@storybook/react": "^8.6.0",
         "@storybook/react-vite": "^8.6.0",
-        "@storybook/test": "^8.6.15",
+        "@storybook/test": "^8.6.0",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/chrome": "^0.1.36",
+        "@types/chrome": "^0.0.273",
         "@types/conventional-changelog": "^3.1.5",
         "@types/gulp": "^4.0.17",
         "@types/gulp-zip": "^4.0.4",
@@ -96,7 +96,7 @@
         "@types/react-dom": "^18.3.5",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/semantic-release": "^20.0.6",
-        "@types/semver": "^7.7.1",
+        "@types/semver": "^7.5.8",
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",
@@ -110,10 +110,10 @@
         "@vitejs/plugin-react-swc": "^3.8.0",
         "@vitest/coverage-v8": "^2.1.9",
         "@vitest/ui": "^2.1.9",
-        "chalk": "^5.6.2",
+        "chalk": "^5.4.1",
         "chromatic": "^11.26.0",
-        "cssnano": "^7.1.2",
-        "cssnano-preset-advanced": "^7.0.10",
+        "cssnano": "^7.0.6",
+        "cssnano-preset-advanced": "^7.0.6",
         "dotenv": "^16.4.7",
         "es-module-lexer": "^1.6.0",
         "eslint": "^8.57.1",
@@ -122,28 +122,28 @@
         "eslint-config-airbnb-typescript": "^18.0.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.8.3",
-        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-import-essentials": "^0.2.1",
         "eslint-plugin-jsdoc": "^50.6.3",
-        "eslint-plugin-prettier": "^5.5.5",
-        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-prettier": "^5.2.3",
+        "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-prefer-function-component": "^3.4.0",
-        "eslint-plugin-react-refresh": "^0.5.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-storybook": "^0.9.0",
-        "eslint-plugin-tsdoc": "^0.5.0",
-        "gulp": "^5.0.1",
+        "eslint-plugin-tsdoc": "^0.3.0",
+        "gulp": "^5.0.0",
         "gulp-execa": "^7.0.1",
         "gulp-zip": "^6.1.0",
-        "jsdom": "^28.1.0",
+        "jsdom": "^28.0.0",
         "path": "^0.12.7",
-        "postcss": "^8.5.6",
-        "prettier": "3.8.1",
+        "postcss": "^8.5.3",
+        "prettier": "3.6.2",
         "react-dev-utils": "^12.0.1",
         "semantic-release": "^24.2.3",
         "storybook": "^8.6.0",
-        "typescript": "^5.9.3",
+        "typescript": "^5.7.3",
         "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",
         "unplugin-icons": "^0.19.3",

src/shared/types/UserSchedule.ts

@@ -2,6 +2,11 @@ import type { Serialized } from '@chrome-extension-toolkit';
 
 import { generateRandomId } from '../util/random';
 import { Course } from './Course';
+export interface Wallpaper {
+    type: string;
+    /** Image url will be here */
+    data?: string;
+}
 
 /**
  * Represents a user's schedule that is stored in the extension
@@ -13,6 +18,8 @@ export class UserSchedule {
     hours: number;
     /** Unix timestamp of when the schedule was last updated */
     updatedAt: number;
+    /** Wallpaper for this schedule */
+    wallpaper?: Wallpaper;
 
     constructor(schedule: Serialized<UserSchedule>) {
         this.courses = schedule.courses.map(c => new Course(c));

src/views/components/calendar/Calendar.tsx

@@ -28,6 +28,31 @@ import { LargeLogo } from '../common/LogoIcon';
 import Text from '../common/Text/Text';
 import CalendarFooter from './CalendarFooter';
 import DiningAppPromo from './DiningAppPromo';
+import { Wallpaper } from 'src/shared/types/UserSchedule';
+
+function getWallpaper(wallpaper?: Wallpaper): React.CSSProperties {
+    if (!wallpaper || !wallpaper.data || wallpaper.type === 'none') {
+        return { backgroundColor: 'white' };
+    }
+
+    let imageUrl: string;
+    // get wallpaper image from storage, or just default to white
+
+    if (wallpaper.type === 'custom' && wallpaper.data) {
+        imageUrl = wallpaper.data;
+    } else {
+        // Fallback to white background
+        return { backgroundColor: 'white' };
+    }
+
+    return {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundOrigin: 'border-box',
+    };
+}
 
 /**
  * Calendar page component
@@ -96,7 +121,7 @@ export default function Calendar(): ReactNode {
 
     return (
         <CalendarContext.Provider value>
-            <div className='h-full w-full flex flex-col'>
+            <div className='h-full w-full flex flex-col' style={getWallpaper(activeSchedule.wallpaper)}>
                 <div className='screenshot:calendar-target h-screen flex overflow-auto'>
                     <div
                         className={clsx(