Merge branch 'main' into derek/wallpaperSetup

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(