From a5158d55b3e5797e1184fc986ca338675bd86568 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Mon, 18 Nov 2024 22:15:17 -0500
Subject: [PATCH 01/12] checkpoint: mocked (on-enter) note shaking

---
 src/components/Course/Course.vue | 39 ++++++++++++++++++++++++++++++--
 src/components/Notes/Note.vue    | 10 +++++++-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index 7b78e4efc..65b758bee 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="course-container">
+  <div 
+    class="course-container" 
+    :class="{ 'figma-shake': isShaking }"
+  >
     <div
       :class="{
         'course--min': compact,
@@ -7,6 +10,7 @@
         active: active,
       }"
       class="course"
+      :id="`course-${courseObj.uniqueID}`"
     >
       <save-course-modal
         :courseCode="courseCode"
@@ -88,7 +92,7 @@
         :courseCode="courseObj.code"
         @open-note-modal="openNoteModal"
         @open-edit-color-modal="openEditColorModal"
-        @delete-course="deleteCourscoe"
+        @delete-course="deleteCourse"
         @edit-course-credit="editCourseCredit"
         @open-save-course-modal="openSaveCourseModal"
         :getCreditRange="getCreditRange || []"
@@ -104,6 +108,7 @@
       :color="cssVars['--bg-color']"
       :expand="expandNote"
       @toggle="handleToggleNote"
+      @trigger-shake="triggerCourseCardShake"
     />
   </div>
 </template>
@@ -174,6 +179,7 @@ export default defineComponent({
       isExpanded: false,
       isNoteVisible: false,
       expandNote: false,
+      isShaking: false,
     };
   },
   computed: {
@@ -281,6 +287,12 @@ export default defineComponent({
     closeNote() {
       this.isNoteVisible = false;
     },
+    triggerCourseCardShake() {
+      this.isShaking = true;
+      setTimeout(() => {
+        this.isShaking = false;
+      }, 900); // 3 shakes * 0.3s = 0.9s
+    },
   },
   directives: {
     'click-outside': clickOutside,
@@ -296,6 +308,29 @@ export default defineComponent({
   padding-bottom: 20px;
 }
 
+.figma-shake {
+  animation: tilt-shaking 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3;
+  transform-origin: center center;
+}
+
+@keyframes tilt-shaking {
+  0% {
+    transform: rotate(0deg) translateX(0);
+  }
+  25% {
+    transform: rotate(4deg) translateX(6px);
+  }
+  50% {
+    transform: rotate(0deg) translateX(0);
+  }
+  75% {
+    transform: rotate(-4deg) translateX(-6px);
+  }
+  100% {
+    transform: rotate(0deg) translateX(0);
+  }
+}
+
 .course {
   box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.055);
   position: relative;
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index 4d670525b..f9fe87ad8 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click="expandNote">
     <div v-if="isExpanded" class="note-content">
-      <input v-model="noteText" placeholder="Add a note..." class="note-input" />
+      <input
+        v-model="noteText"
+        placeholder="Add a note..."
+        class="note-input"
+        @keyup.enter="handleEnter"
+      />
       <img
         src="@/assets/images/notes/arrow.svg"
         alt="Arrow icon"
@@ -67,6 +72,9 @@ export default {
       const colorObj = coursesColorSet.find(c => c.hex.toUpperCase() === color.toUpperCase());
       return colorObj ? colorObj.lighterHex : color;
     },
+    handleEnter() {
+      this.$emit('trigger-shake');
+    },
   },
 };
 </script>

From 0dfbb068aa680fe789a09b2465008315254a10fb Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Mon, 18 Nov 2024 23:16:05 -0500
Subject: [PATCH 02/12] chore: run prettier

---
 src/components/Course/Course.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index 65b758bee..962936b3c 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -1,8 +1,5 @@
 <template>
-  <div 
-    class="course-container" 
-    :class="{ 'figma-shake': isShaking }"
-  >
+  <div class="course-container" :class="{ 'figma-shake': isShaking }">
     <div
       :class="{
         'course--min': compact,

From a9cb55b56db21bc737a496a41d6ba3cdf53b4f6f Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 19 Nov 2024 16:50:13 -0500
Subject: [PATCH 03/12] refactor: fix some type issues and support saving +
 editing notes

---
 src/components/Course/Course.vue     | 37 +++++++++++++++++++++++-----
 src/components/Modals/CourseMenu.vue |  5 ++--
 src/components/Notes/Note.vue        | 21 ++++++++++++----
 src/components/Semester/Semester.vue | 14 +++++++++++
 src/user-data.d.ts                   |  1 +
 5 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index 962936b3c..47a1013d8 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -104,8 +104,11 @@
       :width="'calc(102.8% - 10px)'"
       :color="cssVars['--bg-color']"
       :expand="expandNote"
+      :initialNote="courseObj.note || ''"
       @toggle="handleToggleNote"
-      @trigger-shake="triggerCourseCardShake"
+      @save-note="saveNote"
+      v-click-outside="handleClickOutside"
+      ref="note"
     />
   </div>
 </template>
@@ -161,6 +164,8 @@ export default defineComponent({
       typeof deletedFromCollection === 'object',
     'add-collection': (name: string) => typeof name === 'string',
     'delete-course-from-collection': (courseCode: string) => typeof courseCode === 'string',
+    'save-note': (uniqueID: number, note: string) =>
+      typeof uniqueID === 'number' && typeof note === 'string',
   },
   data() {
     return {
@@ -173,8 +178,8 @@ export default defineComponent({
       deletingCourse: false,
       trashIcon: trashGrayIcon, // Default icon
       courseCode: '',
-      isExpanded: false,
-      isNoteVisible: false,
+      isExpanded: Boolean(this.courseObj.note), // NOTE: might want different behavior than showing all notes
+      isNoteVisible: Boolean(this.courseObj.note),
       expandNote: false,
       isShaking: false,
     };
@@ -277,9 +282,15 @@ export default defineComponent({
       this.expandNote = !this.expandNote;
     },
     openNoteModal() {
-      this.isNoteVisible = true;
-      this.menuOpen = false;
-      this.expandNote = true;
+      if (!this.isNoteVisible) {
+        this.isNoteVisible = true;
+        this.menuOpen = false;
+        this.expandNote = true;
+      } else {
+        // Note already open — trigger a shake and close the modal.
+        this.triggerCourseCardShake();
+        this.menuOpen = false;
+      }
     },
     closeNote() {
       this.isNoteVisible = false;
@@ -290,6 +301,20 @@ export default defineComponent({
         this.isShaking = false;
       }, 900); // 3 shakes * 0.3s = 0.9s
     },
+    saveNote(note: string) {
+      this.$emit('save-note', this.courseObj.uniqueID, note);
+      this.closeNote();
+    },
+    handleClickOutside() {
+      if (
+        this.$refs.note &&
+        (this.$refs.note as {
+          isDirty: boolean;
+        }).isDirty
+      ) {
+        this.triggerCourseCardShake();
+      }
+    },
   },
   directives: {
     'click-outside': clickOutside,
diff --git a/src/components/Modals/CourseMenu.vue b/src/components/Modals/CourseMenu.vue
index 6eac95101..73bc77c3a 100644
--- a/src/components/Modals/CourseMenu.vue
+++ b/src/components/Modals/CourseMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="courseMenu">
     <div class="courseMenu-content">
-      <div class="courseMenu-section" @click="openNoteModal(courseObj.code)">
+      <div class="courseMenu-section" @click="openNoteModal">
         <div class="courseMenu-left">
           <img
             class="courseMenu-icon"
@@ -185,6 +185,7 @@ export default defineComponent({
     'delete-course': () => true,
     'open-edit-color-modal': (color: string) => typeof color === 'string',
     'edit-course-credit': (credit: number) => typeof credit === 'number',
+    'open-note-modal': () => true,
   },
   methods: {
     toggleDisplayColors() {
@@ -260,7 +261,7 @@ export default defineComponent({
       }
       return creditArray;
     },
-    openNoteModal(courseCode: string) {
+    openNoteModal() {
       this.$emit('open-note-modal');
     },
   },
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index f9fe87ad8..60c34ae01 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -5,13 +5,14 @@
         v-model="noteText"
         placeholder="Add a note..."
         class="note-input"
-        @keyup.enter="handleEnter"
+        @keyup.enter="saveNote"
+        @input="handleInput"
       />
       <img
         src="@/assets/images/notes/arrow.svg"
         alt="Arrow icon"
         class="note-icon"
-        @click.stop="collapseNote"
+        @click.stop="saveNote"
       />
     </div>
   </div>
@@ -27,11 +28,13 @@ export default {
     expandedTranslateY: { type: String, default: '-10px' },
     width: { type: String, default: '200px' },
     color: { type: String, default: '#a8e6cf' },
+    initialNote: { type: String, default: '' },
   },
   data() {
     return {
-      isExpanded: false,
-      noteText: '',
+      isExpanded: Boolean(this.initialNote), // NOTE: might want different behavior than showing all notes
+      noteText: this.initialNote,
+      isDirty: false,
     };
   },
   mounted() {
@@ -72,8 +75,16 @@ export default {
       const colorObj = coursesColorSet.find(c => c.hex.toUpperCase() === color.toUpperCase());
       return colorObj ? colorObj.lighterHex : color;
     },
+    saveNote() {
+      this.$emit('save-note', this.noteText);
+      this.isDirty = false;
+      this.collapseNote();
+    },
     handleEnter() {
-      this.$emit('trigger-shake');
+      this.saveNote();
+    },
+    handleInput() {
+      this.isDirty = this.noteText !== this.initialNote;
     },
   },
 };
diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index 732c44c25..f22683357 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -110,6 +110,7 @@
                 @course-on-click="courseOnClick"
                 @edit-course-credit="editCourseCredit"
                 @save-course="saveCourse"
+                @save-note="saveNote"
                 @add-collection="addCollection"
                 @edit-collection="editCollection"
               />
@@ -453,6 +454,19 @@ export default defineComponent({
         );
       }
     },
+    saveNote(uniqueID: number, note: string) {
+      editSemester(
+        store.state.currentPlan,
+        this.year,
+        this.season,
+        (semester: FirestoreSemester) => ({
+          ...semester,
+          courses: semester.courses.map(course =>
+            course.uniqueID === uniqueID ? { ...course, note } : course
+          ),
+        })
+      );
+    },
     addCollection(name: string) {
       addCollection(name, []);
       this.confirmationText = `${name} has been added!`;
diff --git a/src/user-data.d.ts b/src/user-data.d.ts
index 1dc269850..3f3157a01 100644
--- a/src/user-data.d.ts
+++ b/src/user-data.d.ts
@@ -18,6 +18,7 @@ type FirestoreSemesterCourse = {
   readonly creditRange: readonly [number, number];
   readonly semesters: readonly string[];
   readonly color: string;
+  readonly note?: string;
 };
 
 type FirestoreSemesterPlaceholder = {

From 942512903ac97ee8eb0773a13b244caf6527fbce Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 19 Nov 2024 17:49:24 -0500
Subject: [PATCH 04/12] feat: collapsing + shaking + refactoring for
 type-safety and minimalism

---
 src/components/Course/Course.vue     | 77 +++++++++++++++++++---------
 src/components/Notes/Note.vue        | 34 ++++++------
 src/components/Semester/Semester.vue |  3 ++
 3 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index 47a1013d8..17c8f5d00 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -103,18 +103,16 @@
       :expandedTranslateY="'-35px'"
       :width="'calc(102.8% - 10px)'"
       :color="cssVars['--bg-color']"
-      :expand="expandNote"
       :initialNote="courseObj.note || ''"
-      @toggle="handleToggleNote"
       @save-note="saveNote"
-      v-click-outside="handleClickOutside"
       ref="note"
+      v-click-outside="handleClickOutsideNote"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { CSSProperties, PropType, defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import CourseMenu from '@/components/Modals/CourseMenu.vue';
 import CourseCaution from '@/components/Course/CourseCaution.vue';
 import SaveCourseModal from '@/components/Modals/SaveCourseModal.vue';
@@ -130,6 +128,14 @@ import trashGrayIcon from '@/assets/images/trash-gray.svg';
 import trashRedIcon from '@/assets/images/trash.svg';
 import Note from '../Notes/Note.vue';
 
+interface MinimalNoteComponent {
+  note: string;
+  isDirty: boolean;
+  isExpanded: boolean;
+  collapseNote: () => void;
+  expandNote: () => void;
+}
+
 export default defineComponent({
   name: 'Course',
   components: { CourseCaution, CourseMenu, EditColor, SaveCourseModal, Note },
@@ -178,9 +184,8 @@ export default defineComponent({
       deletingCourse: false,
       trashIcon: trashGrayIcon, // Default icon
       courseCode: '',
-      isExpanded: Boolean(this.courseObj.note), // NOTE: might want different behavior than showing all notes
+      isExpanded: false,
       isNoteVisible: Boolean(this.courseObj.note),
-      expandNote: false,
       isShaking: false,
     };
   },
@@ -204,10 +209,10 @@ export default defineComponent({
       return `${this.courseObj.credits} credits`;
     },
 
-    cssVars(): CSSProperties {
+    cssVars(): Record<string, string> {
       return {
         '--bg-color': `#${this.courseObj.color}`,
-      } as CSSProperties;
+      };
     },
   },
   methods: {
@@ -278,22 +283,36 @@ export default defineComponent({
     unhoverTrashIcon() {
       this.trashIcon = trashGrayIcon;
     },
-    handleToggleNote() {
-      this.expandNote = !this.expandNote;
-    },
     openNoteModal() {
       if (!this.isNoteVisible) {
         this.isNoteVisible = true;
         this.menuOpen = false;
-        this.expandNote = true;
+        this.$nextTick(() => {
+          const noteComponent = this.$refs.note as MinimalNoteComponent | undefined;
+          if (noteComponent) {
+            noteComponent.expandNote();
+          }
+        });
       } else {
-        // Note already open — trigger a shake and close the modal.
-        this.triggerCourseCardShake();
-        this.menuOpen = false;
+        const noteComponent = this.$refs.note as MinimalNoteComponent | undefined;
+        if (!noteComponent) {
+          return;
+        }
+        // Note already open — trigger a shake.
+        if (noteComponent.isExpanded) {
+          this.triggerCourseCardShake();
+        } else {
+          noteComponent.expandNote();
+        }
       }
+      this.menuOpen = false;
     },
     closeNote() {
-      this.isNoteVisible = false;
+      // NOTE: this function hides the note entirely!
+      // Grant time for the slide-back-in animation to play out.
+      setTimeout(() => {
+        this.isNoteVisible = false;
+      }, 300);
     },
     triggerCourseCardShake() {
       this.isShaking = true;
@@ -303,16 +322,26 @@ export default defineComponent({
     },
     saveNote(note: string) {
       this.$emit('save-note', this.courseObj.uniqueID, note);
-      this.closeNote();
     },
-    handleClickOutside() {
-      if (
-        this.$refs.note &&
-        (this.$refs.note as {
-          isDirty: boolean;
-        }).isDirty
-      ) {
+    handleClickOutsideNote(event: MouseEvent) {
+      // Don't count a click on the open note or three dots as a click outside.
+      const target = event.target as HTMLElement;
+      if (target.closest('.courseMenu') || target.closest('.course-dotRow')) {
+        return;
+      }
+
+      const noteComponent = this.$refs.note as MinimalNoteComponent | undefined;
+
+      if (!noteComponent || !this.isNoteVisible) {
+        return;
+      }
+
+      if (noteComponent.isDirty) {
         this.triggerCourseCardShake();
+      } else if (noteComponent.note && this.isNoteVisible) {
+        noteComponent.collapseNote();
+      } else {
+        this.closeNote();
       }
     },
   },
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index 60c34ae01..cdc049fd4 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click="expandNote">
-    <div v-if="isExpanded" class="note-content">
+    <div class="note-content" :class="{ visible: isExpanded }">
       <input
-        v-model="noteText"
+        v-model="note"
         placeholder="Add a note..."
         class="note-input"
         @keyup.enter="saveNote"
@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { coursesColorSet } from '@/assets/constants/colors';
 
 export default {
@@ -32,16 +32,11 @@ export default {
   },
   data() {
     return {
-      isExpanded: Boolean(this.initialNote), // NOTE: might want different behavior than showing all notes
-      noteText: this.initialNote,
+      isExpanded: false,
+      note: this.initialNote,
       isDirty: false,
     };
   },
-  mounted() {
-    if (this.expand) {
-      this.isExpanded = true;
-    }
-  },
   watch: {
     expand(newVal) {
       if (newVal) this.isExpanded = true;
@@ -62,29 +57,24 @@ export default {
     expandNote() {
       if (!this.isExpanded) {
         this.isExpanded = true;
-        this.$emit('toggle', this.isExpanded);
       }
     },
     collapseNote() {
       if (this.isExpanded) {
         this.isExpanded = false;
-        this.$emit('toggle', this.isExpanded);
       }
     },
-    getLighterColor(color) {
+    getLighterColor(color: string) {
       const colorObj = coursesColorSet.find(c => c.hex.toUpperCase() === color.toUpperCase());
       return colorObj ? colorObj.lighterHex : color;
     },
     saveNote() {
-      this.$emit('save-note', this.noteText);
+      this.$emit('save-note', this.note);
       this.isDirty = false;
       this.collapseNote();
     },
-    handleEnter() {
-      this.saveNote();
-    },
     handleInput() {
-      this.isDirty = this.noteText !== this.initialNote;
+      this.isDirty = this.note !== this.initialNote;
     },
   },
 };
@@ -119,6 +109,14 @@ export default {
   width: 100%;
   padding-top: 15px;
   padding-left: 10px;
+  opacity: 0;
+  transform: translateY(100%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.note-content.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .note-input {
diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index f22683357..1d07bbc37 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -455,6 +455,9 @@ export default defineComponent({
       }
     },
     saveNote(uniqueID: number, note: string) {
+      if (!note) {
+        return;
+      }
       editSemester(
         store.state.currentPlan,
         this.year,

From 718dbd7841a47ecb00be3b484c193351e48539fd Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Wed, 20 Nov 2024 21:25:00 -0500
Subject: [PATCH 05/12] fix: make note component a proper Vue component for
 type safety

---
 src/components/Notes/Note.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index cdc049fd4..336f3bb91 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -19,9 +19,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { coursesColorSet } from '@/assets/constants/colors';
 
-export default {
+export default defineComponent({
   name: 'Note',
   props: {
     initialTranslateY: { type: String, default: '-50px' },
@@ -77,7 +78,7 @@ export default {
       this.isDirty = this.note !== this.initialNote;
     },
   },
-};
+});
 </script>
 
 <style scoped>

From dade6fdf567f8205d8dcd3c0fcec47d8a66feeda Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 02:44:41 -0600
Subject: [PATCH 06/12] feat: editing & deletion ui footer logic

---
 src/components/Course/Course.vue          |   6 ++
 src/components/Modals/DeleteNoteModal.vue |  66 ++++++++++++
 src/components/Notes/Note.vue             | 125 ++++++++++++++++++++--
 src/components/Semester/Semester.vue      |  42 +++++++-
 4 files changed, 228 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Modals/DeleteNoteModal.vue

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index 17c8f5d00..e029ed323 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -104,7 +104,9 @@
       :width="'calc(102.8% - 10px)'"
       :color="cssVars['--bg-color']"
       :initialNote="courseObj.note || ''"
+      :lastUpdated="courseObj.lastUpdated"
       @save-note="saveNote"
+      @open-delete-note-modal="openDeleteNoteModal"
       ref="note"
       v-click-outside="handleClickOutsideNote"
     />
@@ -172,6 +174,7 @@ export default defineComponent({
     'delete-course-from-collection': (courseCode: string) => typeof courseCode === 'string',
     'save-note': (uniqueID: number, note: string) =>
       typeof uniqueID === 'number' && typeof note === 'string',
+    'open-delete-note-modal': (uniqueID: number) => typeof uniqueID === 'number',
   },
   data() {
     return {
@@ -344,6 +347,9 @@ export default defineComponent({
         this.closeNote();
       }
     },
+    openDeleteNoteModal() {
+      this.$emit('open-delete-note-modal', this.courseObj.uniqueID);
+    },
   },
   directives: {
     'click-outside': clickOutside,
diff --git a/src/components/Modals/DeleteNoteModal.vue b/src/components/Modals/DeleteNoteModal.vue
new file mode 100644
index 000000000..e37579e83
--- /dev/null
+++ b/src/components/Modals/DeleteNoteModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <teleport-modal
+    title="Delete Note"
+    content-class="content-delete"
+    left-button-text="Cancel"
+    right-button-text="Delete"
+    :rightButtonIsDisabled="false"
+    :rightButtonImage="icon"
+    rightButtonAlt="delete note trashcan icon"
+    @modal-closed="closeCurrentModal"
+    @left-button-clicked="closeCurrentModal"
+    @right-button-clicked="deleteNote"
+  >
+    <div class="deleteNoteModal-body">
+      <div class="deleteNoteModal-body-text">{{ text }}</div>
+    </div>
+  </teleport-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import TeleportModal from '@/components/Modals/TeleportModal.vue';
+import trashIcon from '@/assets/images/trash-white.svg';
+
+export default defineComponent({
+  components: { TeleportModal },
+  props: {
+    noteCourseUniqueID: { type: Number, required: true },
+  },
+  emits: {
+    'close-delete-note': () => true,
+    'delete-note': (noteCourseUniqueID: number) => typeof noteCourseUniqueID === 'number',
+  },
+  computed: {
+    text() {
+      return 'Are you sure you want to delete this note?';
+    },
+    icon() {
+      return trashIcon;
+    },
+  },
+  methods: {
+    closeCurrentModal() {
+      this.$emit('close-delete-note');
+    },
+    deleteNote() {
+      this.$emit('delete-note', this.noteCourseUniqueID);
+      this.closeCurrentModal();
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/_variables.scss';
+
+.content-delete {
+  width: 24rem;
+}
+
+@media only screen and (max-width: $small-medium-breakpoint) {
+  .content-delete {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index 336f3bb91..272848883 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click="expandNote">
-    <div class="note-content" :class="{ visible: isExpanded }">
+  <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click="handleClick">
+    <div class="note-content" :class="{ visible: isExpanded, editing: isEditing }">
       <input
         v-model="note"
         placeholder="Add a note..."
+        :disabled="!isEditing && initialNote !== ''"
         class="note-input"
         @keyup.enter="saveNote"
         @input="handleInput"
@@ -15,25 +16,51 @@
         @click.stop="saveNote"
       />
     </div>
+    <div
+      class="note-footer"
+      :class="{ visible: isExpanded && note && !isEditing && initialNote !== '' }"
+    >
+      <div class="note-footer-left">Last Updated: {{ formattedLastUpdated }}</div>
+      <div class="note-footer-right">
+        <img
+          src="@/assets/images/edit.svg"
+          alt="Edit note"
+          class="note-footer-icon"
+          @click.stop="startEditing"
+        />
+        <img
+          src="@/assets/images/trash.svg"
+          alt="Delete note"
+          class="note-footer-icon"
+          @click.stop="$emit('open-delete-note-modal')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { Timestamp } from 'firebase/firestore';
 import { coursesColorSet } from '@/assets/constants/colors';
 
 export default defineComponent({
   name: 'Note',
   props: {
-    initialTranslateY: { type: String, default: '-50px' },
-    expandedTranslateY: { type: String, default: '-10px' },
+    initialTranslateY: { type: String, required: true },
+    expandedTranslateY: { type: String, required: true },
     width: { type: String, default: '200px' },
     color: { type: String, default: '#a8e6cf' },
     initialNote: { type: String, default: '' },
+    lastUpdated: {
+      type: [Object, Date],
+      default: () => Timestamp.now(),
+    },
   },
   data() {
     return {
       isExpanded: false,
+      isEditing: false,
       note: this.initialNote,
       isDirty: false,
     };
@@ -53,27 +80,46 @@ export default defineComponent({
         backgroundColor: this.getLighterColor(this.color),
       };
     },
+    formattedLastUpdated() {
+      if (!this.lastUpdated) return '';
+
+      let date;
+      if (this.lastUpdated instanceof Date) {
+        date = this.lastUpdated;
+      } else if (typeof this.lastUpdated.toDate === 'function') {
+        date = this.lastUpdated.toDate();
+      } else {
+        return '';
+      }
+
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
   },
   methods: {
-    expandNote() {
+    handleClick() {
       if (!this.isExpanded) {
         this.isExpanded = true;
       }
     },
+    startEditing() {
+      this.isEditing = true;
+      this.isExpanded = true;
+    },
+    saveNote() {
+      this.$emit('save-note', this.note);
+      this.isDirty = false;
+      this.isEditing = false;
+    },
     collapseNote() {
       if (this.isExpanded) {
         this.isExpanded = false;
+        this.isEditing = false;
       }
     },
     getLighterColor(color: string) {
       const colorObj = coursesColorSet.find(c => c.hex.toUpperCase() === color.toUpperCase());
       return colorObj ? colorObj.lighterHex : color;
     },
-    saveNote() {
-      this.$emit('save-note', this.note);
-      this.isDirty = false;
-      this.collapseNote();
-    },
     handleInput() {
       this.isDirty = this.note !== this.initialNote;
     },
@@ -146,4 +192,63 @@ export default defineComponent({
 .note-icon:hover {
   filter: brightness(0.7);
 }
+
+.note-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+  font-size: 12px;
+  color: #858585;
+  opacity: 0;
+  transform: translateY(100%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.note-footer.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.note-footer-left {
+  font-size: 12px;
+}
+
+.note-footer-right {
+  display: flex;
+  gap: 8px;
+}
+
+.note-footer-icon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+}
+
+.note-footer-icon:hover {
+  opacity: 1;
+}
+
+.note-content.editing {
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 13px;
+  margin: 0 10px;
+  padding: 0 5px;
+}
+
+.note-content.editing .note-input {
+  padding: 5px 5px;
+  margin-right: 0;
+  background-color: transparent;
+}
+
+.note-content.editing .note-icon {
+  margin-right: 5px;
+}
 </style>
diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index 1d07bbc37..3b9cdcf73 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -43,6 +43,12 @@
       @close-clear-sem="closeClearSemesterModal"
       v-if="isClearSemesterOpen"
     />
+    <delete-note-modal
+      @delete-note="deleteNote"
+      @close-delete-note="closeDeleteNoteModal"
+      v-if="isDeleteNoteOpen"
+      :noteCourseUniqueID="noteCourseUniqueID"
+    />
     <button
       v-if="isFirstSem"
       class="semester-addSemesterButton"
@@ -113,6 +119,7 @@
                 @save-note="saveNote"
                 @add-collection="addCollection"
                 @edit-collection="editCollection"
+                @open-delete-note-modal="openDeleteNoteModal"
               />
               <placeholder
                 v-else
@@ -145,10 +152,12 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import draggable from 'vuedraggable';
+import { Timestamp } from 'firebase/firestore';
 import Course from '@/components/Course/Course.vue';
 import Placeholder from '@/components/Course/Placeholder.vue';
 import NewCourseModal from '@/components/Modals/NewCourse/NewCourseModal.vue';
 import CourseConflictModal from '@/components/Modals/NewCourse/CourseConflictModal.vue';
+import DeleteNoteModal from '@/components/Modals/DeleteNoteModal.vue';
 import Confirmation from '@/components/Modals/Confirmation.vue';
 import SemesterMenu from '@/components/Modals/SemesterMenu.vue';
 import DeleteSemester from '@/components/Modals/DeleteSemester.vue';
@@ -197,6 +206,7 @@ export default defineComponent({
     ClearSemester,
     NewCourseModal,
     CourseConflictModal,
+    DeleteNoteModal,
     SemesterMenu,
     Placeholder,
   },
@@ -221,6 +231,8 @@ export default defineComponent({
       conflictCourse: {} as FirestoreSemesterCourse,
       courseConflicts: new Set<string[]>(),
       selfCheckRequirements: [] as readonly RequirementWithIDSourceType[],
+      isDeleteNoteOpen: false,
+      noteCourseUniqueID: undefined as number | undefined,
 
       seasonImg: {
         Fall: fall,
@@ -465,11 +477,31 @@ export default defineComponent({
         (semester: FirestoreSemester) => ({
           ...semester,
           courses: semester.courses.map(course =>
-            course.uniqueID === uniqueID ? { ...course, note } : course
+            course.uniqueID === uniqueID
+              ? {
+                  ...course,
+                  note,
+                  lastUpdated: Timestamp.now(),
+                }
+              : course
           ),
         })
       );
     },
+    deleteNote(uniqueID: number) {
+      editSemester(
+        store.state.currentPlan,
+        this.year,
+        this.season,
+        (semester: FirestoreSemester) => ({
+          ...semester,
+          courses: semester.courses.map(course => {
+            const { note, lastUpdated, ...rest } = course;
+            return course.uniqueID === uniqueID ? rest : course;
+          }),
+        })
+      );
+    },
     addCollection(name: string) {
       addCollection(name, []);
       this.confirmationText = `${name} has been added!`;
@@ -647,6 +679,14 @@ export default defineComponent({
     closeDeleteSemesterModal() {
       this.isDeleteSemesterOpen = false;
     },
+    openDeleteNoteModal(uniqueID: number) {
+      this.noteCourseUniqueID = uniqueID;
+      this.isDeleteNoteOpen = true;
+    },
+    closeDeleteNoteModal() {
+      this.isDeleteNoteOpen = false;
+      this.noteCourseUniqueID = undefined;
+    },
     deleteSemester(season: string, year: number) {
       this.$emit('delete-semester', season, year);
       this.openConfirmationModal(`Deleted ${season} ${year} from plan`);

From 30468d379e489e81f943755761fd1c52b44b8822 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 02:47:38 -0600
Subject: [PATCH 07/12] fix: proper reactivity on delete

---
 src/components/Course/Course.vue     | 10 ++++++++++
 src/components/Semester/Semester.vue |  8 ++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index e029ed323..b6d5d8cfb 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -354,6 +354,16 @@ export default defineComponent({
   directives: {
     'click-outside': clickOutside,
   },
+  watch: {
+    'courseObj.note': {
+      handler(newNote) {
+        if (!newNote) {
+          this.isNoteVisible = false;
+        }
+      },
+      immediate: true,
+    },
+  },
 });
 </script>
 
diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index 3b9cdcf73..299c32d6f 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -495,12 +495,12 @@ export default defineComponent({
         this.season,
         (semester: FirestoreSemester) => ({
           ...semester,
-          courses: semester.courses.map(course => {
-            const { note, lastUpdated, ...rest } = course;
-            return course.uniqueID === uniqueID ? rest : course;
-          }),
+          courses: semester.courses.map(course =>
+            course.uniqueID === uniqueID ? { ...course, note: null, lastUpdated: null } : course
+          ),
         })
       );
+      this.closeDeleteNoteModal();
     },
     addCollection(name: string) {
       addCollection(name, []);

From b2630b50d8acbedbeb714d692cce836023cda049 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 03:01:08 -0600
Subject: [PATCH 08/12] style: figma consistency updates for color + icons

---
 src/assets/images/edit-note.svg |  4 ++++
 src/components/Notes/Note.vue   | 14 ++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/edit-note.svg

diff --git a/src/assets/images/edit-note.svg b/src/assets/images/edit-note.svg
new file mode 100644
index 000000000..ad7d6db5a
--- /dev/null
+++ b/src/assets/images/edit-note.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4741 3.43759L15.5921 5.3705M14.8361 1.73476L9.10901 6.96376C8.8131 7.23357 8.61128 7.57732 8.52901 7.95168L8 10.3694L10.648 9.88551C11.058 9.81064 11.434 9.62711 11.73 9.35685L17.4571 4.12785C17.6292 3.97072 17.7657 3.78417 17.8589 3.57887C17.952 3.37357 17.9999 3.15352 17.9999 2.9313C17.9999 2.70909 17.952 2.48904 17.8589 2.28374C17.7657 2.07844 17.6292 1.89189 17.4571 1.73476C17.285 1.57763 17.0807 1.45298 16.8558 1.36794C16.631 1.2829 16.39 1.23914 16.1466 1.23914C15.9032 1.23914 15.6622 1.2829 15.4373 1.36794C15.2125 1.45298 15.0082 1.57763 14.8361 1.73476V1.73476Z" stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.0002 12.1956V14.9347C16.0002 15.419 15.7894 15.8835 15.4144 16.226C15.0393 16.5684 14.5306 16.7608 14.0001 16.7608H3.00002C2.46958 16.7608 1.96087 16.5684 1.58579 16.226C1.21072 15.8835 1 15.419 1 14.9347V4.89124C1 4.40693 1.21072 3.94246 1.58579 3.6C1.96087 3.25755 2.46958 3.06516 3.00002 3.06516H6.00005" stroke="#404040" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index 272848883..46810abe1 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -20,10 +20,10 @@
       class="note-footer"
       :class="{ visible: isExpanded && note && !isEditing && initialNote !== '' }"
     >
-      <div class="note-footer-left">Last Updated: {{ formattedLastUpdated }}</div>
+      <div class="note-footer-left note-footer-text">Last Updated: {{ formattedLastUpdated }}</div>
       <div class="note-footer-right">
         <img
-          src="@/assets/images/edit.svg"
+          src="@/assets/images/edit-note.svg"
           alt="Edit note"
           class="note-footer-icon"
           @click.stop="startEditing"
@@ -202,7 +202,6 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
   padding: 5px 10px;
-  font-size: 12px;
   color: #858585;
   opacity: 0;
   transform: translateY(100%);
@@ -214,8 +213,8 @@ export default defineComponent({
   transform: translateY(0);
 }
 
-.note-footer-left {
-  font-size: 12px;
+.note-footer-text {
+  opacity: 0.7;
 }
 
 .note-footer-right {
@@ -224,10 +223,9 @@ export default defineComponent({
 }
 
 .note-footer-icon {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   cursor: pointer;
-  opacity: 0.6;
   transition: opacity 0.2s ease;
 }
 

From 40c073a9da259bc37f6668cf6e00013bc384d6cd Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 03:12:38 -0600
Subject: [PATCH 09/12] fix: attempt type fixes (not running locally)

---
 src/user-data.d.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/user-data.d.ts b/src/user-data.d.ts
index 3f3157a01..e296ffe0c 100644
--- a/src/user-data.d.ts
+++ b/src/user-data.d.ts
@@ -1,6 +1,7 @@
 // Convention:
 // - all the types describing data in Firestore is prefixed with Firestore.
 // - all the data describing data converted from Firestore to be used by the app is prefixed with App.
+import { Timestamp } from 'firebase-admin/firestore';
 
 type FirestoreUserName = {
   readonly firstName: string;
@@ -18,7 +19,8 @@ type FirestoreSemesterCourse = {
   readonly creditRange: readonly [number, number];
   readonly semesters: readonly string[];
   readonly color: string;
-  readonly note?: string;
+  readonly note?: string | null;
+  readonly lastUpdated?: Timestamp | null;
 };
 
 type FirestoreSemesterPlaceholder = {

From 2ac629b91f1e50bf9eeaa96b92caec2ce8c40a44 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 03:18:20 -0600
Subject: [PATCH 10/12] fix: type cleanup

---
 src/components/Semester/Semester.vue |  2 +-
 src/user-data.d.ts                   | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index 299c32d6f..5568dab41 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -46,7 +46,7 @@
     <delete-note-modal
       @delete-note="deleteNote"
       @close-delete-note="closeDeleteNoteModal"
-      v-if="isDeleteNoteOpen"
+      v-if="isDeleteNoteOpen && noteCourseUniqueID !== undefined"
       :noteCourseUniqueID="noteCourseUniqueID"
     />
     <button
diff --git a/src/user-data.d.ts b/src/user-data.d.ts
index e296ffe0c..ec2806718 100644
--- a/src/user-data.d.ts
+++ b/src/user-data.d.ts
@@ -1,7 +1,6 @@
 // Convention:
 // - all the types describing data in Firestore is prefixed with Firestore.
 // - all the data describing data converted from Firestore to be used by the app is prefixed with App.
-import { Timestamp } from 'firebase-admin/firestore';
 
 type FirestoreUserName = {
   readonly firstName: string;
@@ -45,7 +44,7 @@ type FirestoreSemestersData = {
   readonly orderByNewest: boolean;
 };
 
-type FirestoreCollegeOrMajorOrMinor = { readonly acronym: string };
+type FirestoreCollegeOrMajorOrMinor = { readonly acronym: string; };
 
 /** Represents the name of an exam a student can take for transfer credit */
 type TransferExamType = 'AP' | 'IB' | 'CASE';
@@ -57,7 +56,7 @@ type FirestoreTransferExam = {
   readonly type?: TransferExamType; // TODO @bshen migrate away
 };
 
-type FirestoreCollegeMajorMinorOrGrad = { readonly acronym: string };
+type FirestoreCollegeMajorMinorOrGrad = { readonly acronym: string; };
 type FirestoreOnboardingUserData = {
   readonly gradYear: string;
   readonly gradSem: FirestoreSemesterSeason | '';
@@ -84,7 +83,7 @@ type FirestoreCourseOptInOptOutChoices = {
    * It's for attaching completely unknown courses to a requirement
    * (e.g. opt-in CS 2112 for history requirement).
    */
-  readonly arbitraryOptIn: { readonly [requirement: string]: readonly string[] };
+  readonly arbitraryOptIn: { readonly [requirement: string]: readonly string[]; };
 };
 type FirestoreOverriddenFulfillmentChoices = {
   readonly [courseUniqueId: string]: FirestoreCourseOptInOptOutChoices;
@@ -94,7 +93,7 @@ type FirestoreUserData = {
   readonly name: FirestoreUserName;
   readonly orderByNewest: boolean;
   readonly toggleableRequirementChoices: AppToggleableRequirementChoices;
-  readonly subjectColors: { readonly [subject: string]: string };
+  readonly subjectColors: { readonly [subject: string]: string; };
   readonly uniqueIncrementer: number;
   readonly userData: FirestoreOnboardingUserData;
   // TODO: add overriddenFulfillmentChoices once we connect new requirement flow to prod.
@@ -122,18 +121,18 @@ type FirestoreTrackUsersOnboardingData = {
   undergradUsers: number;
   gradUsers: number;
   undergradAndGradUsers: number;
-  majorFrequences: { readonly [group: string]: number };
-  minorFrequencies: { readonly [group: string]: number };
-  collegeFrequencies: { readonly [group: string]: number };
-  graduateProgramFrequencies: { readonly [group: string]: number };
+  majorFrequences: { readonly [group: string]: number; };
+  minorFrequencies: { readonly [group: string]: number; };
+  collegeFrequencies: { readonly [group: string]: number; };
+  graduateProgramFrequencies: { readonly [group: string]: number; };
   averageNumberUndergradMajors: number;
   averageNumberUndergradMinors: number;
   averageNumberUndergradAPIBExams: number;
-  entranceYearFrequencies: { readonly [group: string]: number };
-  gradYearFrequencies: { readonly [group: string]: number };
+  entranceYearFrequencies: { readonly [group: string]: number; };
+  gradYearFrequencies: { readonly [group: string]: number; };
 };
 
-type FirestoreUniqueIncrementer = { readonly uniqueIncrementer: number };
+type FirestoreUniqueIncrementer = { readonly uniqueIncrementer: number; };
 
 interface CornellCourseRosterCourse {
   readonly crseId: number;

From 67a9b1bb60a50580e747353efdc1bb80d629d023 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 03:20:12 -0600
Subject: [PATCH 11/12] chore: run prettier

---
 src/user-data.d.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/user-data.d.ts b/src/user-data.d.ts
index ec2806718..9e63e8947 100644
--- a/src/user-data.d.ts
+++ b/src/user-data.d.ts
@@ -44,7 +44,7 @@ type FirestoreSemestersData = {
   readonly orderByNewest: boolean;
 };
 
-type FirestoreCollegeOrMajorOrMinor = { readonly acronym: string; };
+type FirestoreCollegeOrMajorOrMinor = { readonly acronym: string };
 
 /** Represents the name of an exam a student can take for transfer credit */
 type TransferExamType = 'AP' | 'IB' | 'CASE';
@@ -56,7 +56,7 @@ type FirestoreTransferExam = {
   readonly type?: TransferExamType; // TODO @bshen migrate away
 };
 
-type FirestoreCollegeMajorMinorOrGrad = { readonly acronym: string; };
+type FirestoreCollegeMajorMinorOrGrad = { readonly acronym: string };
 type FirestoreOnboardingUserData = {
   readonly gradYear: string;
   readonly gradSem: FirestoreSemesterSeason | '';
@@ -83,7 +83,7 @@ type FirestoreCourseOptInOptOutChoices = {
    * It's for attaching completely unknown courses to a requirement
    * (e.g. opt-in CS 2112 for history requirement).
    */
-  readonly arbitraryOptIn: { readonly [requirement: string]: readonly string[]; };
+  readonly arbitraryOptIn: { readonly [requirement: string]: readonly string[] };
 };
 type FirestoreOverriddenFulfillmentChoices = {
   readonly [courseUniqueId: string]: FirestoreCourseOptInOptOutChoices;
@@ -93,7 +93,7 @@ type FirestoreUserData = {
   readonly name: FirestoreUserName;
   readonly orderByNewest: boolean;
   readonly toggleableRequirementChoices: AppToggleableRequirementChoices;
-  readonly subjectColors: { readonly [subject: string]: string; };
+  readonly subjectColors: { readonly [subject: string]: string };
   readonly uniqueIncrementer: number;
   readonly userData: FirestoreOnboardingUserData;
   // TODO: add overriddenFulfillmentChoices once we connect new requirement flow to prod.
@@ -121,18 +121,18 @@ type FirestoreTrackUsersOnboardingData = {
   undergradUsers: number;
   gradUsers: number;
   undergradAndGradUsers: number;
-  majorFrequences: { readonly [group: string]: number; };
-  minorFrequencies: { readonly [group: string]: number; };
-  collegeFrequencies: { readonly [group: string]: number; };
-  graduateProgramFrequencies: { readonly [group: string]: number; };
+  majorFrequences: { readonly [group: string]: number };
+  minorFrequencies: { readonly [group: string]: number };
+  collegeFrequencies: { readonly [group: string]: number };
+  graduateProgramFrequencies: { readonly [group: string]: number };
   averageNumberUndergradMajors: number;
   averageNumberUndergradMinors: number;
   averageNumberUndergradAPIBExams: number;
-  entranceYearFrequencies: { readonly [group: string]: number; };
-  gradYearFrequencies: { readonly [group: string]: number; };
+  entranceYearFrequencies: { readonly [group: string]: number };
+  gradYearFrequencies: { readonly [group: string]: number };
 };
 
-type FirestoreUniqueIncrementer = { readonly uniqueIncrementer: number; };
+type FirestoreUniqueIncrementer = { readonly uniqueIncrementer: number };
 
 interface CornellCourseRosterCourse {
   readonly crseId: number;

From 31c151c255c81702a9a0f171e49c4f782b4851c0 Mon Sep 17 00:00:00 2001
From: Simon Ilincev <trilogicworlds@gmail.com>
Date: Tue, 3 Dec 2024 04:19:51 -0600
Subject: [PATCH 12/12] docs: add many inline comments

---
 src/components/Course/Course.vue     | 20 ++++++++++++++++++--
 src/components/Notes/Note.vue        | 11 +++++++++--
 src/components/Semester/Semester.vue |  4 ++++
 src/user-data.d.ts                   |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/Course/Course.vue b/src/components/Course/Course.vue
index b6d5d8cfb..64659f1f9 100644
--- a/src/components/Course/Course.vue
+++ b/src/components/Course/Course.vue
@@ -130,6 +130,8 @@ import trashGrayIcon from '@/assets/images/trash-gray.svg';
 import trashRedIcon from '@/assets/images/trash.svg';
 import Note from '../Notes/Note.vue';
 
+// MinimalNoteComponent is a representation of everything required for a functional,
+// but minimal Note component to work statefully.
 interface MinimalNoteComponent {
   note: string;
   isDirty: boolean;
@@ -188,6 +190,9 @@ export default defineComponent({
       trashIcon: trashGrayIcon, // Default icon
       courseCode: '',
       isExpanded: false,
+      // isNotVisible represents a small open 'portrusion' indicating that there is a note
+      // for the course in question. The note itself will not be visible without `isExpanded`
+      // being true as well.
       isNoteVisible: Boolean(this.courseObj.note),
       isShaking: false,
     };
@@ -290,6 +295,9 @@ export default defineComponent({
       if (!this.isNoteVisible) {
         this.isNoteVisible = true;
         this.menuOpen = false;
+        // NOTE: should use $nextTick, as the browser engine could optimize away the
+        // UI update by applying changes in the same render pass. Also important for allowing
+        // for time for the note component to be rendered before attempting to access it.
         this.$nextTick(() => {
           const noteComponent = this.$refs.note as MinimalNoteComponent | undefined;
           if (noteComponent) {
@@ -301,7 +309,7 @@ export default defineComponent({
         if (!noteComponent) {
           return;
         }
-        // Note already open — trigger a shake.
+        // Note already open — trigger a shake to indicate this to the user.
         if (noteComponent.isExpanded) {
           this.triggerCourseCardShake();
         } else {
@@ -324,10 +332,14 @@ export default defineComponent({
       }, 900); // 3 shakes * 0.3s = 0.9s
     },
     saveNote(note: string) {
+      if (!note || note === this.courseObj.note) {
+        return;
+      }
       this.$emit('save-note', this.courseObj.uniqueID, note);
     },
     handleClickOutsideNote(event: MouseEvent) {
-      // Don't count a click on the open note or three dots as a click outside.
+      // Don't count a click on the open note (.courseMenu) or three dots (.course-dotRow)
+      // as a click outside.
       const target = event.target as HTMLElement;
       if (target.closest('.courseMenu') || target.closest('.course-dotRow')) {
         return;
@@ -340,6 +352,7 @@ export default defineComponent({
       }
 
       if (noteComponent.isDirty) {
+        // Warn if the user is trying to leave a note with unsaved changes.
         this.triggerCourseCardShake();
       } else if (noteComponent.note && this.isNoteVisible) {
         noteComponent.collapseNote();
@@ -355,6 +368,8 @@ export default defineComponent({
     'click-outside': clickOutside,
   },
   watch: {
+    // NOTE: this is required for reactive deletion of notes client-side after the deletion
+    // modal is confirmed, as isNoteVisible is not reactive.
     'courseObj.note': {
       handler(newNote) {
         if (!newNote) {
@@ -375,6 +390,7 @@ export default defineComponent({
   padding-bottom: 20px;
 }
 
+// Emulates a slight side-to-side sway à la Figma micro-interaction.
 .figma-shake {
   animation: tilt-shaking 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3;
   transform-origin: center center;
diff --git a/src/components/Notes/Note.vue b/src/components/Notes/Note.vue
index 46810abe1..b04158b58 100644
--- a/src/components/Notes/Note.vue
+++ b/src/components/Notes/Note.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="note" :class="{ expanded: isExpanded }" :style="noteStyle" @click="handleClick">
     <div class="note-content" :class="{ visible: isExpanded, editing: isEditing }">
+      <!-- NOTE: the disabled attribute is used to prevent the user from being able to edit the note
+      when it is expanded, but the edit icon has not been pressed. This only applies when the note
+      is not empty (already had something written in it previously and read from the database). -->
       <input
         v-model="note"
         placeholder="Add a note..."
@@ -47,13 +50,16 @@ import { coursesColorSet } from '@/assets/constants/colors';
 export default defineComponent({
   name: 'Note',
   props: {
-    initialTranslateY: { type: String, required: true },
-    expandedTranslateY: { type: String, required: true },
+    initialTranslateY: { type: String, default: '-50px', required: true },
+    expandedTranslateY: { type: String, default: '-10px', required: true },
     width: { type: String, default: '200px' },
     color: { type: String, default: '#a8e6cf' },
     initialNote: { type: String, default: '' },
     lastUpdated: {
       type: [Object, Date],
+      // NOTE: we must use a Timestamp object here, as this is the internal type used by Firestore
+      // for storing the created JavaScript Date object. Helper functions are available by default
+      // on the Timestamp object to convert between the two.
       default: () => Timestamp.now(),
     },
   },
@@ -80,6 +86,7 @@ export default defineComponent({
         backgroundColor: this.getLighterColor(this.color),
       };
     },
+    // Displays
     formattedLastUpdated() {
       if (!this.lastUpdated) return '';
 
diff --git a/src/components/Semester/Semester.vue b/src/components/Semester/Semester.vue
index 5568dab41..c3216bae2 100644
--- a/src/components/Semester/Semester.vue
+++ b/src/components/Semester/Semester.vue
@@ -481,6 +481,8 @@ export default defineComponent({
               ? {
                   ...course,
                   note,
+                  // We know that this must be an update as otherwise the frontend wouldn't allow
+                  // saveNote to be called.
                   lastUpdated: Timestamp.now(),
                 }
               : course
@@ -496,6 +498,8 @@ export default defineComponent({
         (semester: FirestoreSemester) => ({
           ...semester,
           courses: semester.courses.map(course =>
+            // NOTE: we must explicitly set note and lastUpdated to null, as Firestore cannot handle
+            // undefined values and extracting them would not be type-safe.
             course.uniqueID === uniqueID ? { ...course, note: null, lastUpdated: null } : course
           ),
         })
diff --git a/src/user-data.d.ts b/src/user-data.d.ts
index 9e63e8947..2256b0649 100644
--- a/src/user-data.d.ts
+++ b/src/user-data.d.ts
@@ -19,7 +19,7 @@ type FirestoreSemesterCourse = {
   readonly semesters: readonly string[];
   readonly color: string;
   readonly note?: string | null;
-  readonly lastUpdated?: Timestamp | null;
+  readonly lastUpdated?: Timestamp | null; // NB: the Timestamp here is deliberately left untyped — importing from Firestore causes all sorts of namespace issues.
 };
 
 type FirestoreSemesterPlaceholder = {