Merge branch 'main' into derek/wallpaperSetup

* feat: initial functions for exporting to txt

* feat: add save as text to calendar header new export option

* docs: comment for saveAsText()

* feat: generate text line by line for each course

* docs: jsdoc

* chore: lint

* Apply suggestion from @doprz

---------

Co-authored-by: Diego Perez <52579214+doprz@users.noreply.github.com>

package.json

@@ -142,7 +142,7 @@
         "prettier": "3.6.2",
         "react-dev-utils": "^12.0.1",
         "semantic-release": "^24.2.3",
-        "storybook": "^8.6.15",
+        "storybook": "^8.6.0",
         "typescript": "^5.7.3",
         "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",

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/stories/components/SortableList.stories.tsx

@@ -77,7 +77,7 @@ type CourseWithId = { course: Course } & BaseItem;
 
 const meta = {
     title: 'Components/Common/SortableList',
-    component: SortableList<CourseWithId>,
+    component: SortableList,
     parameters: {
         layout: 'centered',
     },
@@ -85,7 +85,7 @@ const meta = {
 } satisfies Meta<typeof SortableList<CourseWithId>>;
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<Meta<typeof SortableList<CourseWithId>>>;
 
 export const Default: Story = {
     args: {
@@ -94,9 +94,7 @@ export const Default: Story = {
             course,
         })),
         onChange: () => {},
-        renderItem: (item: CourseWithId) => (
-            <PopupCourseBlock key={item.id} course={item.course} colors={item.course.colors} />
-        ),
+        renderItem: ({ id, course }) => <PopupCourseBlock key={id} course={course} colors={course.colors} />,
     },
     render: args => (
         <div className='h-3xl w-3xl transform-none'>

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(

src/views/components/calendar/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
-import { CalendarDots, Export, FileCode, FilePng, Sidebar } from '@phosphor-icons/react';
+import { CalendarDots, Export, FileCode, FilePng, FileText, Sidebar } from '@phosphor-icons/react';
 import styles from '@views/components/calendar/CalendarHeader/CalendarHeader.module.scss';
 import { Button } from '@views/components/common/Button';
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
@@ -11,7 +11,7 @@ import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
 import React from 'react';
 
-import { handleExportJson, saveAsCal, saveCalAsPng } from '../utils';
+import { handleExportJson, saveAsCal, saveAsText, saveCalAsPng } from '../utils';
 
 interface CalendarHeaderProps {
     sidebarOpen?: boolean;
@@ -111,6 +111,18 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                                         Save as .json
                                     </Button>
                                 </MenuItem>
+                                <MenuItem>
+                                    <Button
+                                        className='w-full flex justify-start'
+                                        onClick={saveAsText}
+                                        color='ut-black'
+                                        size='small'
+                                        variant='minimal'
+                                        icon={FileText}
+                                    >
+                                        Save as .txt
+                                    </Button>
+                                </MenuItem>
                                 {/* <MenuItem>
                                     <Button color='ut-black' size='small' variant='minimal' icon={FileTxt}>
                                         Export Unique IDs

src/views/components/calendar/utils.ts

@@ -245,6 +245,27 @@ export const scheduleToIcsString = (schedule: Serialized<UserSchedule>) => {
     return icsString;
 };
 
+/**
+ * Returns the provided schedule in a human readable/copyable text format
+ * @param schedule - The schedule object
+ * @returns
+ */
+export const scheduleToText = (schedule: Serialized<UserSchedule>) => {
+    const lines: string[] = [];
+
+    lines.push(`Schedule: ${schedule.name}`);
+    lines.push('');
+
+    for (const c of schedule.courses) {
+        lines.push(c.fullName);
+        lines.push(`${c.creditHours} Credit Hours`);
+        lines.push(`${c.uniqueId}`);
+        lines.push('');
+    }
+
+    return lines.join('\n');
+};
+
 /**
  * Saves the current schedule as a calendar file in the iCalendar format (ICS).
  * Fetches the current active schedule and converts it into an ICS string.
@@ -262,6 +283,25 @@ export const saveAsCal = async () => {
     downloadBlob(icsString, 'CALENDAR', 'schedule.ics');
 };
 
+/**
+ * Save current schedule as a plain text file consisting of
+ * Course Name - Course ID
+ * Course Time
+ * Unique Number
+ * Line Break
+ * Repeat
+ */
+export const saveAsText = async () => {
+    const schedule = await getSchedule();
+
+    if (!schedule) {
+        throw new Error('No schedule found');
+    }
+
+    const scheduleText = scheduleToText(schedule);
+    downloadBlob(scheduleText, 'TEXT', 'schedule.txt');
+};
+
 /**
  * Saves current schedule to JSON that can be imported on other devices.
  * @param id - Provided schedule ID to download