feat: collapsing + shaking + refactoring for type-safety and minimalism

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();
       }
     },
   },

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 {

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,