From ff37877491c7d953c2a9c5245c353035839c36bb Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:20:06 -0700
Subject: [PATCH 01/27] Add hover transitions to YouTube video cards, now shows
 properly which video is being hovered by the user.

---
 frontend/src/App.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 33b6b21..57feed6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3172,4 +3172,14 @@ three - column responsive
 
 .save-status.saved {
   color: #16a34a; 
+}
+
+/* video card hover transitions */
+.video-card-sm {
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
+}
+
+.video-card-sm:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
\ No newline at end of file

From 265b5aa8ed977e2d3514cda330ee1ced731f0f65 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:23:33 -0700
Subject: [PATCH 02/27] Added smoother transitions for showing/hiding the side
 panels to make it look cleaner.

---
 frontend/src/App.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 57feed6..4e68238 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3182,4 +3182,16 @@ three - column responsive
 .video-card-sm:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
+}
+
+/* smooth panel show/hide transitions */
+.left-panel {
+  transition: width var(--transition-slow), opacity var(--transition-slow);
+}
+.right-panel {
+  transition: width var(--transition-slow), opacity var(--transition-slow);
+}
+.left-panel,
+.right-panel {
+  will-change: width;
 }
\ No newline at end of file

From bb89c081f05163ceda532af2effdd4ea139ba932 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:32:39 -0700
Subject: [PATCH 03/27] Improved responsiveness on mobile devices for screens
 under 768px.

---
 frontend/src/App.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4e68238..6d15c6c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3194,4 +3194,44 @@ three - column responsive
 .left-panel,
 .right-panel {
   will-change: width;
+}
+
+/* mobile responsiveness improvement */
+@media (max-width: 768px) {
+  .app-body {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: auto;
+    overflow-y: auto;
+  }
+  .left-panel, 
+  .right-panel {
+    max-height: 300px;
+    border: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .center-panel {
+    min-height: 60vh;
+  }
+  .pdf-container {
+    padding: var(--space-sm);
+  }
+  .workspace-topbar {
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+  .left-panel-footer {
+    padding: var(--space-sm);
+  }
+  .btn-compile {
+    font-size: 0.8rem;
+    padding: 0.5rem;
+
+  }
+  .modal-box {
+    width: 95%;
+    padding: var(--space-md);
+  }
+  .modal-box iframe {
+    height: 220px;
+  }
 }
\ No newline at end of file

From 7bb0b8d589b5e1687b29f94bd5538fd9d17803c7 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:37:05 -0700
Subject: [PATCH 04/27] added focus ring styles to help with users navigating
 the application using their keyboard.

---
 frontend/src/App.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6d15c6c..324b680 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3234,4 +3234,28 @@ three - column responsive
   .modal-box iframe {
     height: 220px;
   }
+}
+
+/* focus ring styles for keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+/* Remove default outline since we handle it above */
+button:focus:not(:focus-visible),
+input:focus:not(:focus-visible),
+select:focus:not(:focus-visible) {
+  outline: none;
 }
\ No newline at end of file

From 30bc70d3962a5811be31ae242fe5bb984a45ac78 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:43:16 -0700
Subject: [PATCH 05/27] replaced default browser scrollbars with thin themed
 scrollbars across the right panel, left panel, PDF viwer, and formular
 reorder panels.

---
 frontend/src/App.css | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 324b680..913df6e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3258,4 +3258,44 @@ button:focus:not(:focus-visible),
 input:focus:not(:focus-visible),
 select:focus:not(:focus-visible) {
   outline: none;
-}
\ No newline at end of file
+}
+
+/*scrollbar styling */
+.left-panel-scroll,
+.right-panel-scroll,
+.pdf-preview-scroll,
+.formula-reorder-panel {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.left-panel-scroll::-webkit-scrollbar,
+.right-panel-scroll::-webkit-scrollbar,
+.pdf-preview-scroll::-webkit-scrollbar,
+.formula-reorder-panel::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.left-panel-scroll::-webkit-scrollbar-track,
+.right-panel-scroll::-webkit-scrollbar-track,
+.pdf-preview-scroll::-webkit-scrollbar-track,
+.formula-reorder-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.left-panel-scroll::-webkit-scrollbar-thumb,
+.right-panel-scroll::-webkit-scrollbar-thumb,
+.pdf-preview-scroll::-webkit-scrollbar-thumb,
+.formula-reorder-panel::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-full);
+}
+
+.left-panel-scroll::-webkit-scrollbar-thumb:hover,
+.right-panel-scroll::-webkit-scrollbar-thumb:hover,
+.pdf-preview-scroll::-webkit-scrollbar-thumb:hover,
+.formula-reorder-panel::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+

From 1c62db95416ef080c381737ee1baec10b448fc22 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 12:51:04 -0700
Subject: [PATCH 06/27] Improve muted text contrast across the panels to meet
 the WCAG standards.

---
 frontend/src/App.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 913df6e..46217c3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3299,3 +3299,26 @@ select:focus:not(:focus-visible) {
   background: var(--text-muted);
 }
 
+/* Muted text contrast improvement */
+.text-muted,
+.v-channel,
+.right-panel-empty,
+.reorder-instructions,
+.subtle-copy,
+.pdf-toolbar-note,
+.snapshot-card-meta,
+.inline-video-status {
+  color: var(--text-muted);
+  opacity: 1;
+
+}
+[data-theme="dark"] .text-muted,
+[data-theme="dark"] .v-channel,
+[data-theme="dark"] .right-panel-empty {
+  color: #a1a1aa;
+}
+[data-theme="light"] .text-muted,
+[data-theme="light"] .v-channel,
+[data-theme="light"] .right-panel-empty {
+  color: #52525b;
+}
\ No newline at end of file

From 3b12a74897271e4a5e64654e9b3e25745963aa54 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 13:00:17 -0700
Subject: [PATCH 07/27] Added tooltip to compile button and empty state
 illustration in the right panel.

---
 frontend/src/App.css                         | 35 ++++++++++++++++++--
 frontend/src/components/CreateCheatSheet.jsx | 12 +++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 46217c3..442858f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3293,7 +3293,7 @@ select:focus:not(:focus-visible) {
 }
 
 .left-panel-scroll::-webkit-scrollbar-thumb:hover,
-.right-panel-scroll::-webkit-scrollbar-thumb:hover,
+right-panel-scroll::-webkit-scrollbar-thumb:hover,
 .pdf-preview-scroll::-webkit-scrollbar-thumb:hover,
 .formula-reorder-panel::-webkit-scrollbar-thumb:hover {
   background: var(--text-muted);
@@ -3321,4 +3321,35 @@ select:focus:not(:focus-visible) {
 [data-theme="light"] .v-channel,
 [data-theme="light"] .right-panel-empty {
   color: #52525b;
-}
\ No newline at end of file
+}
+
+/* Right Panel Empty State */
+.right-panel-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--space-xl) var(--space-md);
+  gap: var(--space-sm);
+}
+
+.right-panel-empty-icon {
+  font-size: 2.5rem;
+  line-height: 1;
+  opacity: 0.6;
+}
+
+.right-panel-empty-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.right-panel-empty-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 830ca93..3d0ff24 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1475,9 +1475,10 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
                 ref={compileBtnRef}
                 type="button"
                 onClick={handleCompileClick}
-                className="btn-compile"
+                className={`btn-compile ${isCompiling ? 'is-compiling' : ''}`}
                 disabled={isCompiling}
                 aria-label="Compile PDF"
+                title="Generate LaTeX and compile to PDF. First compile will auto-generate from your current selected subjects."
               >
                 <span className="btn-compile-icon">{isCompiling ? '↻' : '⚡'}</span>
                 <span className="btn-compile-text">
@@ -1686,10 +1687,17 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
             <aside className="right-panel">
               <div className="right-panel-header">
                 Videos
+                
               </div>
               <div className="right-panel-scroll">
                 {!selectedVideoTopics.length && (
-                  <p className="right-panel-empty">Select sections</p>
+                  <div className="right-panel-empty-state">
+                    <span className="right-panel-empty-icon">🎬</span>
+                    <p className="right-panel-empty-title">No sections selected</p>
+                    <p className="right-panel-empty-hint">
+                    Select a subject and check some sections on the left to see related videos here.
+                      </p>
+                  </div>
                 )}
                 {selectedVideoTopics.map((topic) => {
                   const topicKey = getVideoTopicKey(topic);

From b879b3dc5296027d7082e1e5e69df59610df1435 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 13:01:33 -0700
Subject: [PATCH 08/27] added count badge for the videos in the right panel.

---
 frontend/src/App.css                         | 21 ++++++++++++++++++++
 frontend/src/components/CreateCheatSheet.jsx |  6 +++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 442858f..c574d8b 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3353,3 +3353,24 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
   line-height: 1.5;
 }
 
+/*count badge for right panel */
+.right-panel-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.right-panel-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 700;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: var(--radius-full);
+  line-height: 1;
+}
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 3d0ff24..8caf86c 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1687,7 +1687,11 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
             <aside className="right-panel">
               <div className="right-panel-header">
                 Videos
-                
+                {selectedVideoTopics.length > 0 && (
+                 <span className="right-panel-count-badge">
+                    {selectedVideoTopics.length}
+                 </span>
+                )}
               </div>
               <div className="right-panel-scroll">
                 {!selectedVideoTopics.length && (

From 40d80bb3d1b195cee76c97342228678d4041a879 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 13:17:26 -0700
Subject: [PATCH 09/27] Added all the necessary videos for Linear Algebra I,
 which includes 2x2 systems, matrix operations, and vector basics.

---
 frontend/src/data/subjectVideos.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/data/subjectVideos.js b/frontend/src/data/subjectVideos.js
index e6da17f..7fe1698 100644
--- a/frontend/src/data/subjectVideos.js
+++ b/frontend/src/data/subjectVideos.js
@@ -581,6 +581,27 @@ export const CURATED_SUBJECT_VIDEOS = {
 
    },
  ],
+ "LINEAR ALGEBRA I": [
+  {
+    title: "Introduction to Vectors and Their Operations",
+    videoId: "KBSCMTYaH1s",
+    channel: "Professor Dave Explains",
+    topic: "Vector Basics"
+  },
+  {
+    title: "Linear Algebra - Matrix Operations",
+    videoId: "p48uw2vFWQs",
+    channel: "Postcard Professor",
+    topic: "Matrix Operations"
+  },
+  {
+    title: "Cramer's Rule - 2x2 Linear System",
+    videoId: "vXqlIOX2itM",
+    channel: "The Organic Chemistry Tutor",
+    topic: "2x2 Systems"
+  },
+ ],
+
 };
 
 const YOUTUBE_HOSTS = new Set(['youtube.com', 'www.youtube.com', 'm.youtube.com', 'youtu.be']);

From 2fe44af5d80fe924fc85bfa2a1ae0cd5f383db5d Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 13:25:18 -0700
Subject: [PATCH 10/27] Added YouTube videos for the following topics within
 Linear Alegbra II: Matrix Propertiesm Eigenvalues & Eigenvectors,
 Decompositions & spaces.

---
 frontend/src/data/subjectVideos.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/data/subjectVideos.js b/frontend/src/data/subjectVideos.js
index 7fe1698..96b49ba 100644
--- a/frontend/src/data/subjectVideos.js
+++ b/frontend/src/data/subjectVideos.js
@@ -601,6 +601,26 @@ export const CURATED_SUBJECT_VIDEOS = {
     topic: "2x2 Systems"
   },
  ],
+ "LINEAR ALGEBRA II": [
+  {
+    title: "Linear Algebra: Properties of Matrix Operations - Part 1 (Section 2.2) | Math with Professor V",
+    videoId: "pqhI8RCNkZk",
+    channel: "Math With Professor V",
+    topic: "Matrix Properties"
+  },
+  {
+    title: "Eigenvectors and eigenvalues | Chapter 14, Essence of linear algebra",
+    videoId: "PFDu9oVAE-g",
+    channel: "3Blue1Brown",
+    topic: "Eigenvalues & Eigenvectors"
+  },
+  {
+    title: "Further Matrix Decompositions: LU, Cholesky, QR, and SVD",
+    videoId: "wHAJzemKQW4",
+    channel: "Professor Dave Explains",
+    topic: "Decompositions & Spaces",
+  },
+ ],
 
 };
 

From 656d7b3f93f8286b2f4ae15100772154d260cb81 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 13:41:58 -0700
Subject: [PATCH 11/27] added clear search button to YouTube Search Results.

---
 frontend/src/App.css                         | 19 +++++++++
 frontend/src/components/CreateCheatSheet.jsx | 42 ++++++++++++++------
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index c574d8b..4fd4cb1 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3373,4 +3373,23 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
   padding: 0 4px;
   border-radius: var(--radius-full);
   line-height: 1;
+}
+
+/* clear search button*/
+.btn-clear-search {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 0.65rem;
+  padding: 2px 5px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  line-height: 1;
+}
+
+.btn-clear-search:hover {
+  border-color: var(--btn-clear);
+  color: var(--btn-clear);
+  background: rgba(239, 68, 68, 0.08);
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 8caf86c..03e48d3 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -352,6 +352,7 @@ const SectionVideoPicks = ({
   searchedVideos = [],
   onOpen,
   onSearchMore,
+  onClearSearch,
   isSearching = false,
   searchError = '',
   hasSearched = false,
@@ -392,19 +393,30 @@ const SectionVideoPicks = ({
       )}
 
       {allowSearch && (
-        <div className="section-video-search-row">
-          <button
-            type="button"
-            className="btn-toggle-panel section-video-search"
-            onClick={() => onSearchMore({ className, category })}
-            disabled={isSearching}
-            aria-label={`Search YouTube for more in ${category}`}
-            title={`Search YouTube for more in ${category}`}
-          >
-            {isSearching ? '↻' : '⌕'}
-          </button>
-        </div>
-      )}
+  <div className="section-video-search-row">
+    <button
+      type="button"
+      className="btn-toggle-panel section-video-search"
+      onClick={() => onSearchMore({ className, category })}
+      disabled={isSearching}
+      aria-label={`Search YouTube for more in ${category}`}
+      title={`Search YouTube for more in ${category}`}
+    >
+      {isSearching ? '↻' : '⌕'}
+    </button>
+    {hasSearched && !isSearching && searchedVideos.length > 0 && (
+      <button
+        type="button"
+        className="btn-clear-search"
+        onClick={onClearSearch}
+        aria-label={`Clear search results for ${category}`}
+        title="Clear search results"
+      >
+        ✕
+      </button>
+    )}
+  </div>
+)}
 
       {isSearching && !searchedVideos.length && !searchError && (
         <p className="inline-video-status">Searching…</p>
@@ -1092,6 +1104,9 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     () => searchedVideoResources.filter((video) => !curatedVideoKeys.has(getVideoResourceKey(video))),
     [curatedVideoKeys, searchedVideoResources],
   );
+  const handleClearVideoSearch = () => {
+    setVideoSearchRequest(null);
+  };
   const curatedVideosByTopic = useMemo(() => groupVideosByTopic(curatedVideoResources), [curatedVideoResources]);
   const searchedVideosByTopic = useMemo(() => groupVideosByTopic(visibleSearchedVideoResources), [visibleSearchedVideoResources]);
   const getEmbedUrl  = (id) => `https://www.youtube.com/embed/${id}?autoplay=1`;
@@ -1722,6 +1737,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
                         searchedVideos={searchedVideos}
                         onOpen={handleOpenVideo}
                         onSearchMore={handleSearchMoreVideos}
+                        onClearSearch={handleClearVideoSearch}
                         isSearching={isSearchingTopic}
                         searchError={hasSearchedTopic ? videoError : ''}
                         hasSearched={hasSearchedTopic}

From e81e36882cfe40e2c131d2c7fb6d6e0a401d57dd Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 14:24:00 -0700
Subject: [PATCH 12/27] Added Ctrl + Enter and Ctrl + s keyboard shortcuts for
 compile and save.

---
 frontend/src/components/CreateCheatSheet.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 03e48d3..c7adcc0 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1380,6 +1380,22 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
       }, 600);
       return () => clearTimeout(timer);
     }, [pdfBlob, isCompiling]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if((event.ctrlKey || event.metaKey) && event.key == 'Enter'){
+        event.preventDefault();
+        if(!isCompiling) handleCompileClick();
+        return;
+      }
+      if((event.ctrlkey || event.metaKey) && event.key == 's'){
+        event.preventDefault();
+        handleSave({ preventDefault: () => {} });
+        return;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isCompiling]);
   const handleCompileClick = () => {
     if (!hasCollapsedLeftPanelOnceRef.current) {
       // First compile: keep controls reachable while reclaiming preview space.

From 07fb17026940bc900a9829abb33a8b5c5c6d95d4 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 14:29:04 -0700
Subject: [PATCH 13/27] Added a character counter to the title input with a
 limit of 80 characters.

---
 frontend/src/App.css                         | 12 ++++++++++++
 frontend/src/components/CreateCheatSheet.jsx |  8 ++++++++
 2 files changed, 20 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4fd4cb1..7be59ee 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3392,4 +3392,16 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
   border-color: var(--btn-clear);
   color: var(--btn-clear);
   background: rgba(239, 68, 68, 0.08);
+}
+
+.title-char-counter {
+  text-align: right;
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  margin-top: 0.2rem;
+}
+
+.tile-char-counter-warn {
+  color: var (--btn-clear);
+  font-weight: 600;
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index c7adcc0..b746260 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1466,7 +1466,15 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
                   placeholder="My Math Cheat Sheet"
                   required
                   className="input-field"
+                  maxLength={80}
+                  autoComplete="off"
+                  spellCheck={false}
                 />
+                <div className="title-char-counter">
+                  <span className={title.length > 70 ? 'title-char-counter-warn' : ''}>
+                    {title.length}/80
+                  </span>
+                </div>
               </div>
 
               <FormulaSelection

From d65f9ebf6396978a613786572fee8bf500d343f3 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 14:54:49 -0700
Subject: [PATCH 14/27] replaced the alert() with a toast notification on save.

---
 frontend/src/App.css                         | 45 ++++++++++++++++++++
 frontend/src/components/CreateCheatSheet.jsx | 22 +++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7be59ee..ddec413 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3404,4 +3404,49 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
 .tile-char-counter-warn {
   color: var (--btn-clear);
   font-weight: 600;
+}
+
+.toast {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.25rem;
+  border-radius: var(--radius-lg);
+  font-size: 0.85rem;
+  font-weight: 500;
+  font-weight: 500;
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  animation: toast-in 0.3s ease forwards;
+}
+
+.toast-success {
+  background: #10b981;
+  color: white;
+}
+
+.toast-error {
+  background: var(--btn-clear);
+  color: white;
+}
+
+.toast-icon {
+  font-size: 1rem;
+  font-weight: 700;
+
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+   }
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index b746260..4e6ab87 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1066,6 +1066,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   const [videoSearchRequest, setVideoSearchRequest] = useState(null);
   const [saveStatus, setSaveStatus] = useState('idle');
   const [lastSavedAt, setLastSavedAt] = useState(null);
+  const [toast, setToast] = useState(null);
   const [classesCollapseSignal, setClassesCollapseSignal] = useState(0);
   const pendingPanelLayoutRef = useRef(panelLayout);
   const hasCollapsedLeftPanelOnceRef = useRef(false);
@@ -1107,6 +1108,10 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   const handleClearVideoSearch = () => {
     setVideoSearchRequest(null);
   };
+  const showToast = useCallback((message, type = 'success') => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3000);
+  })
   const curatedVideosByTopic = useMemo(() => groupVideosByTopic(curatedVideoResources), [curatedVideoResources]);
   const searchedVideosByTopic = useMemo(() => groupVideosByTopic(visibleSearchedVideoResources), [visibleSearchedVideoResources]);
   const getEmbedUrl  = (id) => `https://www.youtube.com/embed/${id}?autoplay=1`;
@@ -1424,6 +1429,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
 
   const handleSave = async (e) => {
     e?.preventDefault?.();
+    try { 
     await onSave({
       title,
       content,
@@ -1435,7 +1441,12 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
       orientation,
       selectedFormulas: getSelectedFormulasList(),
     });
-  };
+    setLastSaved(new Date());
+    showToast('Cheat sheet saved successfully!');
+  } catch {
+    showToast('Failed to save. Please try again.', 'error');
+  }
+};
 
   const handleClear = () => {
     if (window.confirm('Are you sure you want to clear everything? This cannot be undone.')) {
@@ -1558,6 +1569,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
                   onClick={handleSave}
                   className="btn history-btn"
                   disabled={isSaving}
+                  title="Save (Ctrl + S)"
                 >
                   {isSaving ? 'Saving…' : 'Save'}
                 </button>
@@ -1811,6 +1823,14 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
           </div>
         </div>
       )}
+      {toast && (
+        <div className={`toast toast-${toast.type}`} role="alert" aria-live="polite">
+          <span className="toast-icon">
+            {toast.type === 'success' ? '✓' : '✕'}
+          </span>
+          <span className="toast=message">{toast.message}</span>
+        </div>
+      )}
     </>
   );
 };

From 251f5e07f345bdf279f066324f582cc257d28231 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 16:02:18 -0700
Subject: [PATCH 15/27] Added new pink theme: 'blossom

---
 frontend/src/App.css                         | 28 ++++++++++++++++++++
 frontend/src/App.jsx                         |  1 +
 frontend/src/components/CreateCheatSheet.jsx | 17 +++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ddec413..158c8e6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -290,6 +290,34 @@
   --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.6);
 }
 
+[data-theme="blossom"] {
+  --bg: #fff7fb;
+  --text: #4a2340;
+  --text-muted: #9a6f8d;
+  --panel-bg: #fff0f7;
+  --card-bg: #fff4fa;
+  --box-bg: #ffe8f3;
+  --border: #f3bfd8;
+  --border-subtle: #f8d9e8;
+  --input-bg: #ffffff;
+  --input-border: #efb6d2;
+  --input-text: #4a2340;
+
+  --primary: #ec6aa7;
+  --primary-hover: #d94f93;
+  --btn-primary: #ec6aa7;
+  --btn-primary-hover: #d94f93;
+  --btn-download: #f59ac2;
+  --btn-download-hover: #ea78ad;
+
+  --btn-clear: #ff7f9f;
+  --btn-clear-hover: #eb5d84;
+  --shadow-sm: 0 1px 2px rgba(236, 106, 167, 0.08);
+  --shadow-md: 0 4px 12px rgba(236, 106, 167, 0.12);
+  --shadow-lg: 0 10px 28px rgba(236, 106, 167, 0.16);
+  --shadow-inset: inset 0 1px 3px rgba(236, 106, 167, 0.08);
+}
+
 /* ==========================================================================
    BASE STYLES
    ========================================================================== */
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 30377b3..624cf0b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -149,6 +149,7 @@ const THEMES = [
   { id: 'neon',         label:     '🩵 neon'},
   { id: 'galaxy',     label: '🌌 Galaxy'    },
   {id: 'crimson', label: '❤️ Red'           },
+  {id: 'blossom',        label: '🌸 Blossom'},
 ];
 
 function App() {
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 4e6ab87..437dee9 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -715,7 +715,18 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   const [containerHeight, setContainerHeight] = useState(null);
   const [zoom, setZoom] = useState(DEFAULT_PDF_ZOOM);
   const [viewMode, setViewMode] = useState('custom');
+  const [showScrollTop, setShowScrollTop] = useState(false);
+  const scrollRef = useRef(null);
 
+  const handlePdfScroll = () => {
+    if(scroffRef.current){
+      setShowScrollTop(scrollRef.current.scroppTop > 300);
+    }
+  };
+
+  const scrollToTop = () => {
+    scrollRef.current?.ScrollTo({ top: 0, behavior: 'smooth' });
+  };
   const clampZoom = (value) => Math.min(2, Math.max(0.5, value));
 
   const handleZoomOut = () => {
@@ -811,7 +822,10 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
         </div>
       </div>
       <div ref={containerRef} className="pdf-preview-stage">
-        <div className="pdf-preview-scroll">
+        <div className="pdf-preview-scroll"
+          ref={scrollRef}
+          onScroll={handlePdfScroll}
+        >
         {compileError ? (
           <div className="compile-error-box">
             <strong>Compilation: Error:</strong><br /><br />
@@ -843,6 +857,7 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
             </div>
         )}
         </div>
+
         {isCompiling && (
           <div className="pdf-recompile-overlay" aria-live="polite" aria-busy="true">
             <div className="pdf-recompile-spinner" aria-hidden="true">

From 208ffed02aa6c5d57ea980ba193662645ecde3b4 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 16:40:26 -0700
Subject: [PATCH 16/27] Bug fix: show full YouTube video thumbnails by usig
 100% height instead of fixed 54px.

---
 frontend/src/App.css | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 158c8e6..0ecec76 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2648,12 +2648,14 @@ right panel - youtube resources
 }
 
 .video-card-sm.compact .video-thumb-sm {
-  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 12px;
 }
 
 .video-card-sm.compact .video-thumb-sm img {
   width: 100%;
-  height: 54px;
+  height: 100%;
+  object-fit: cover;
 }
 
 .video-card-sm.compact .play-icon {
@@ -2678,15 +2680,19 @@ right panel - youtube resources
 }
 
 .video-thumb-sm {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 18px;
   position: relative;
-  flex-shrink: 0;
-  width: 84px;
+  background: #00000022;
 }
 
 .video-thumb-sm img {
-  width: 84px;
-  height: 50px;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
+  object-position: center;
   display: block;
 }
 
@@ -2932,17 +2938,6 @@ three - column responsive
   }
 }
 
-@media (max-width: 1040px) {
-  .video-thumb-sm,
-  .video-thumb-sm img {
-    width: 88px;
-  }
-
-  .video-thumb-sm img {
-    height: 58px;
-  }
-}
-
 @media (max-width: 860px) {
   .app-body {
     grid-template-columns: 1fr;

From 839817bbbfc901d214a75477a4f04205baa70181 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 17:32:54 -0700
Subject: [PATCH 17/27] Added a select all/deselect all for all subjects.

---
 frontend/src/App.css                         | 41 ++++++++++++++++++++
 frontend/src/components/CreateCheatSheet.jsx | 31 ++++++++++++---
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 0ecec76..9c340b7 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3472,4 +3472,45 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
     opacity: 1;
     transform: translateX(-50%) translateY(0);
    }
+}
+
+.layout-control + .layout-control {
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* select all / deselect all buttons */
+.class-select-all-row {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+}
+
+.btn-select-all {
+  flex: 1;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--primary);
+  background: transparent;
+  color: var(--primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);  
+}
+
+.btn-select-all:hover {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-deselect-all {
+  border-color: var(--btn-clear);
+  color: var(--btn-clear);
+}
+
+.btn-deselect-all:hover {
+  background: var(--btn-clear);
+  color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 437dee9..67c9975 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -465,11 +465,31 @@ const FormulaSelection = ({
   return (
     <div className="formula-selection">
       <CollapsiblePanelSection
-        title="Select classes"
-        isOpen={classesOpen}
-        onToggle={() => setClassesOpen((current) => !current)}
-        countBadge={selectedCount > 0 ? `${selectedCount}` : null}
-      >
+  title="Select classes"
+  isOpen={classesOpen}
+  onToggle={() => setClassesOpen((current) => !current)}
+  countBadge={selectedCount > 0 ? `${selectedCount}` : null}
+>
+  <div className="class-select-all-row">
+    <button
+      type="button"
+      className="btn-select-all"
+      onClick={() => classesData.forEach((cls) => {
+        if (!selectedClasses[cls.name]) toggleClass(cls.name);
+      })}
+    >
+      Select All
+    </button>
+    <button
+      type="button"
+      className="btn-select-all btn-deselect-all"
+      onClick={() => classesData.forEach((cls) => {
+        if (selectedClasses[cls.name]) toggleClass(cls.name);
+        })}
+        >
+        Deselect All
+        </button>
+      </div>
         <div className="class-checkboxes">
           {classesData.map((cls) => {
             const isChecked = !!selectedClasses[cls.name];
@@ -857,7 +877,6 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
             </div>
         )}
         </div>
-
         {isCompiling && (
           <div className="pdf-recompile-overlay" aria-live="polite" aria-busy="true">
             <div className="pdf-recompile-spinner" aria-hidden="true">

From b3ce36a31100d4f51cd3ca844e134d3a2f21a214 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 17:48:04 -0700
Subject: [PATCH 18/27] change browser tab title to reflect the name of the
 cheat sheet.

---
 frontend/src/components/CreateCheatSheet.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 67c9975..c5c28e1 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1222,6 +1222,16 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     });
   };
 
+  useEffect(() => {
+    const baseTitle = 'Cheat Sheet Generator';
+    document.title = title?.trim()
+      ? `${title.trim()} — ${baseTitle}`
+      : baseTitle;
+    return () => {
+      document.title = baseTitle;
+    };
+  }, [title]);
+
   useEffect(() => {
     if (!modalVideo) return undefined;
 

From 98d3290ab966d645e9a56381ab3aff051c45c322 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 17:54:43 -0700
Subject: [PATCH 19/27] Added a page counter to the top of the pdf.

---
 frontend/src/App.css                         |  7 +++++++
 frontend/src/components/CreateCheatSheet.jsx | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9c340b7..2f03edd 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3513,4 +3513,11 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
 .btn-deselect-all:hover {
   background: var(--btn-clear);
   color: white;
+}
+
+.pdf-toolbar-notes {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  min-width: 80px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index c5c28e1..b597e33 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -736,12 +736,25 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   const [zoom, setZoom] = useState(DEFAULT_PDF_ZOOM);
   const [viewMode, setViewMode] = useState('custom');
   const [showScrollTop, setShowScrollTop] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
   const scrollRef = useRef(null);
 
   const handlePdfScroll = () => {
     if(scroffRef.current){
       setShowScrollTop(scrollRef.current.scroppTop > 300);
     }
+    const pages = scrollRef.current.querySelectorAll('.pdf-page');
+    const scrollTop = scrollRef.current.scrollTop;
+    const containerTop = scrollRef.current.getBoundingClientRect().top();
+
+    let current = 1;
+    pages.forEach((page, index) => {
+      const pageTop = page.getBoundingClientRect().top - containerTop;
+      if (pageTop <= 100){
+        current = index + 1;
+      }
+    });
+    setCurrentPage(current);
   };
 
   const scrollToTop = () => {
@@ -820,7 +833,7 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   return (
     <div className="pdf-preview-shell">
       <div className="pdf-preview-toolbar">
-        <span className="pdf-toolbar-note">Use the controls to adjust the preview.</span>
+        <span className="pdf-toolbar-note">{numPages ? `Page 1 of ${numPages}` : 'Use the controls to adjust the preview.'}</span>
         <div className="pdf-zoom-controls" role="toolbar" aria-label="PDF zoom controls">
           <button type="button" className={`pdf-zoom-btn pdf-zoom-fit ${viewMode === 'width' ? 'active' : ''}`} onClick={handleFitToWidth} aria-pressed={viewMode === 'width'}>
             Fit width

From 27052ee85e4612b0555f3b46df52a0d848ee293b Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 18:12:54 -0700
Subject: [PATCH 20/27] fixed some bugs preventing the toast notification from
 working properly.

---
 frontend/package-lock.json                   | 11 ++++++
 frontend/package.json                        |  1 +
 frontend/src/components/CreateCheatSheet.jsx | 36 +++++++++++++++-----
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 781b983..f956179 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
+        "canvas-confetti": "^1.9.4",
         "framer-motion": "^12.38.0",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^1.14.0",
@@ -2665,6 +2666,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c9fbd30..2b3b775 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "canvas-confetti": "^1.9.4",
     "framer-motion": "^12.38.0",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^1.14.0",
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index b597e33..a44d9df 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -7,6 +7,7 @@ import { useLatex } from '../hooks/latex';
 import { useYouTubeResources } from '../hooks/youtubeResources';
 import { getCuratedVideosForTopics } from '../data/subjectVideos';
 import { Document, Page, pdfjs } from 'react-pdf';
+import confetti from 'canvas-confetti';
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -740,12 +741,12 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   const scrollRef = useRef(null);
 
   const handlePdfScroll = () => {
-    if(scroffRef.current){
+    if(scrollRef.current){
       setShowScrollTop(scrollRef.current.scroppTop > 300);
     }
     const pages = scrollRef.current.querySelectorAll('.pdf-page');
     const scrollTop = scrollRef.current.scrollTop;
-    const containerTop = scrollRef.current.getBoundingClientRect().top();
+    const containerTop = scrollRef.current.getBoundingClientRect().top;
 
     let current = 1;
     pages.forEach((page, index) => {
@@ -758,7 +759,7 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   };
 
   const scrollToTop = () => {
-    scrollRef.current?.ScrollTo({ top: 0, behavior: 'smooth' });
+    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
   const clampZoom = (value) => Math.min(2, Math.max(0.5, value));
 
@@ -1158,7 +1159,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   const showToast = useCallback((message, type = 'success') => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3000);
-  })
+  }, []);
   const curatedVideosByTopic = useMemo(() => groupVideosByTopic(curatedVideoResources), [curatedVideoResources]);
   const searchedVideosByTopic = useMemo(() => groupVideosByTopic(visibleSearchedVideoResources), [visibleSearchedVideoResources]);
   const getEmbedUrl  = (id) => `https://www.youtube.com/embed/${id}?autoplay=1`;
@@ -1181,6 +1182,25 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     }
   }, []);
 
+  const hasShownConfettiRef = useRef(false);
+  useEffect(() => {
+    if(!pdfBlob || isCompiling || hasShownConfettiRef.current) return;
+    hasShownConfettiRef.current = true;
+    confetti({
+      particleCount: 120,
+      spread: 80,
+      origin: { y: 0.6 },
+      colors: [
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--primary').trim() || '#3b82f6',
+          '#10b981',
+          '#f59e0b',
+          '#ec4899',
+          '#8b5cf6',
+      ],
+    });
+  }, [pdfBlob, isCompiling]);
+
   const getSaveStatusText = () => {
     if (saveStatus === 'saving') return 'Saving...';
     if (saveStatus === 'offline') return 'Offline changes pending'
@@ -1444,12 +1464,12 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     }, [pdfBlob, isCompiling]);
   useEffect(() => {
     const handleKeyDown = (event) => {
-      if((event.ctrlKey || event.metaKey) && event.key == 'Enter'){
+      if((event.ctrlKey || event.metaKey) && event.key === 'Enter'){
         event.preventDefault();
         if(!isCompiling) handleCompileClick();
         return;
       }
-      if((event.ctrlkey || event.metaKey) && event.key == 's'){
+      if((event.ctrlkey || event.metaKey) && event.key === 's'){
         event.preventDefault();
         handleSave({ preventDefault: () => {} });
         return;
@@ -1498,7 +1518,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
       orientation,
       selectedFormulas: getSelectedFormulasList(),
     });
-    setLastSaved(new Date());
+    setLastSaved(Date.now());
     showToast('Cheat sheet saved successfully!');
   } catch {
     showToast('Failed to save. Please try again.', 'error');
@@ -1885,7 +1905,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
           <span className="toast-icon">
             {toast.type === 'success' ? '✓' : '✕'}
           </span>
-          <span className="toast=message">{toast.message}</span>
+          <span className="toast-message">{toast.message}</span>
         </div>
       )}
     </>

From 92737e76bafd655ade65941e73a508275626cba4 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 18:54:48 -0700
Subject: [PATCH 21/27] bug fix: correct syntax for PDFPreview and implemented
 a scroll-to-top feature when you are viewing the bottom of the pdf.

---
 frontend/src/App.css                         |  36 ++++
 frontend/src/components/CreateCheatSheet.jsx | 173 ++++++++++---------
 2 files changed, 123 insertions(+), 86 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2f03edd..fe17309 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3520,4 +3520,40 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
   min-width: 80px;
+}
+
+.pdf-preview-scroll {
+  position: relative;
+}
+
+.pdf-scroll-top-btn {
+   position: sticky;
+  bottom: 20px;
+  left: 100%;
+  transform: translateX(-40px);
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background: var(--primary, #3b82f6);
+  color: white;
+  border: none;
+  font-size: 1.5rem;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.pdf-scroll-top-btn:hover {
+  background: var(--primary-hover, #2563eb);
+  transform: translateX(-40px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.pdf-scroll-top-btn:active {
+  transform: translateX(-40px) scale(0.98);
 }
\ No newline at end of file
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index a44d9df..da65a4c 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -7,7 +7,6 @@ import { useLatex } from '../hooks/latex';
 import { useYouTubeResources } from '../hooks/youtubeResources';
 import { getCuratedVideosForTopics } from '../data/subjectVideos';
 import { Document, Page, pdfjs } from 'react-pdf';
-import confetti from 'canvas-confetti';
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -741,48 +740,42 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   const scrollRef = useRef(null);
 
   const handlePdfScroll = () => {
-    if(scrollRef.current){
-      setShowScrollTop(scrollRef.current.scroppTop > 300);
+    if (scrollRef.current) {
+      setShowScrollTop(scrollRef.current.scrollTop > 300);
+    }
+    const pages = scrollRef.current?.querySelectorAll('.pdf-page');
+    if (pages?.length) {
+      const containerTop = scrollRef.current.getBoundingClientRect().top;
+      let current = 1;
+      pages.forEach((page, index) => {
+        const pageTop = page.getBoundingClientRect().top - containerTop;
+        if (pageTop <= 100) current = index + 1;
+      });
+      setCurrentPage(current);
     }
-    const pages = scrollRef.current.querySelectorAll('.pdf-page');
-    const scrollTop = scrollRef.current.scrollTop;
-    const containerTop = scrollRef.current.getBoundingClientRect().top;
-
-    let current = 1;
-    pages.forEach((page, index) => {
-      const pageTop = page.getBoundingClientRect().top - containerTop;
-      if (pageTop <= 100){
-        current = index + 1;
-      }
-    });
-    setCurrentPage(current);
   };
 
   const scrollToTop = () => {
     scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
-  const clampZoom = (value) => Math.min(2, Math.max(0.5, value));
 
+  const clampZoom = (value) => Math.min(2, Math.max(0.5, value));
   const handleZoomOut = () => {
     setViewMode('custom');
-    setZoom((currentZoom) => clampZoom(currentZoom - 0.15));
+    setZoom((z) => clampZoom(z - 0.15));
   };
-
   const handleZoomIn = () => {
     setViewMode('custom');
-    setZoom((currentZoom) => clampZoom(currentZoom + 0.15));
+    setZoom((z) => clampZoom(z + 0.15));
   };
-
   const handleResetZoom = () => {
     setViewMode('custom');
     setZoom(DEFAULT_PDF_ZOOM);
   };
-
   const handleFitToWidth = () => {
     setViewMode('width');
     setZoom(1);
   };
-
   const handleFitToHeight = () => {
     setViewMode('height');
     setZoom(1);
@@ -791,38 +784,33 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   const pageWidth = containerWidth && viewMode !== 'height'
     ? Math.max(240, Math.round(containerWidth * (viewMode === 'width' ? 1 : zoom)))
     : undefined;
-
   const pageHeight = containerHeight && viewMode === 'height'
     ? Math.max(320, Math.round((containerHeight - 24) * zoom))
     : undefined;
 
   const updatePreviewSize = useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    setContainerWidth(rect.width);
-    setContainerHeight(rect.height);
+    if (rect) {
+      setContainerWidth(rect.width);
+      setContainerHeight(rect.height);
+    }
   }, []);
 
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-
     updatePreviewSize();
-
     if (!window.ResizeObserver) {
       window.addEventListener('resize', updatePreviewSize);
       return () => window.removeEventListener('resize', updatePreviewSize);
     }
-
-    const resizeObserver = new window.ResizeObserver((entries) => {
+    const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
-      if (!entry) return;
-
-      setContainerWidth(entry.contentRect.width);
-      setContainerHeight(entry.contentRect.height);
+      if (entry) {
+        setContainerWidth(entry.contentRect.width);
+        setContainerHeight(entry.contentRect.height);
+      }
     });
-
     resizeObserver.observe(container);
     return () => resizeObserver.disconnect();
   }, [updatePreviewSize]);
@@ -834,20 +822,41 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
   return (
     <div className="pdf-preview-shell">
       <div className="pdf-preview-toolbar">
-        <span className="pdf-toolbar-note">{numPages ? `Page 1 of ${numPages}` : 'Use the controls to adjust the preview.'}</span>
+        <span className="pdf-toolbar-note">
+          {numPages ? `Page ${currentPage} of ${numPages}` : 'Use the controls to adjust the preview.'}
+        </span>
         <div className="pdf-zoom-controls" role="toolbar" aria-label="PDF zoom controls">
-          <button type="button" className={`pdf-zoom-btn pdf-zoom-fit ${viewMode === 'width' ? 'active' : ''}`} onClick={handleFitToWidth} aria-pressed={viewMode === 'width'}>
+          <button
+            type="button"
+            className={`pdf-zoom-btn pdf-zoom-fit ${viewMode === 'width' ? 'active' : ''}`}
+            onClick={handleFitToWidth}
+            aria-pressed={viewMode === 'width'}
+          >
             Fit width
           </button>
-          <button type="button" className={`pdf-zoom-btn pdf-zoom-fit ${viewMode === 'height' ? 'active' : ''}`} onClick={handleFitToHeight} aria-pressed={viewMode === 'height'}>
+          <button
+            type="button"
+            className={`pdf-zoom-btn pdf-zoom-fit ${viewMode === 'height' ? 'active' : ''}`}
+            onClick={handleFitToHeight}
+            aria-pressed={viewMode === 'height'}
+          >
             Fit height
           </button>
           <div className="pdf-zoom-group">
             <button type="button" className="pdf-zoom-btn" onClick={handleZoomOut} aria-label="Zoom out">
               −
             </button>
-            <button type="button" className={`pdf-zoom-btn pdf-zoom-readout ${viewMode === 'custom' ? 'active' : ''}`} onClick={handleResetZoom} aria-pressed={viewMode === 'custom'}>
-              {viewMode === 'width' ? 'Fit width' : viewMode === 'height' ? 'Fit height' : `${Math.round(zoom * 100)}%`}
+            <button
+              type="button"
+              className={`pdf-zoom-btn pdf-zoom-readout ${viewMode === 'custom' ? 'active' : ''}`}
+              onClick={handleResetZoom}
+              aria-pressed={viewMode === 'custom'}
+            >
+              {viewMode === 'width'
+                ? 'Fit width'
+                : viewMode === 'height'
+                ? 'Fit height'
+                : `${Math.round(zoom * 100)}%`}
             </button>
             <button type="button" className="pdf-zoom-btn" onClick={handleZoomIn} aria-label="Zoom in">
               +
@@ -855,25 +864,26 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
           </div>
         </div>
       </div>
+
       <div ref={containerRef} className="pdf-preview-stage">
-        <div className="pdf-preview-scroll"
-          ref={scrollRef}
-          onScroll={handlePdfScroll}
-        >
-        {compileError ? (
-          <div className="compile-error-box">
-            <strong>Compilation: Error:</strong><br /><br />
-            {compileError}
-          </div>
-        ) : pdfBlob ? (
-            <Document
-              file={pdfBlob}
-              onLoadSuccess={({ numPages }) => setNumPages(numPages)}
-              loading={<div className="pdf-state-message">Loading PDF...</div>}
-              error={<div className="pdf-state-message pdf-state-error">Failed to load PDF.</div>}
+        <div className="pdf-preview-scroll" ref={scrollRef} onScroll={handlePdfScroll}>
+          {compileError ? (
+            <div className="compile-error-box">
+              <strong>Compilation Error:</strong>
+              <br />
+              <br />
+              {compileError}
+            </div>
+          ) : pdfBlob ? (
+            <>
+              <Document
+                file={pdfBlob}
+                onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+                loading={<div className="pdf-state-message">Loading PDF…</div>}
+                error={<div className="pdf-state-message pdf-state-error">Failed to load PDF.</div>}
               >
-                {Array.from(new Array(numPages), (_, index) => (
-                  <Page 
+                {Array.from({ length: numPages }, (_, index) => (
+                  <Page
                     key={`page_${index + 1}`}
                     pageNumber={index + 1}
                     renderTextLayer={false}
@@ -881,16 +891,25 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
                     className="pdf-page"
                     width={pageWidth}
                     height={pageHeight}
-                    />
-
+                  />
                 ))}
-            </Document>
-        ) : (
-          <div className="pdf-state-message">
-            Compile the PDF to see your preview.
-            </div>
-        )}
+              </Document>
+              {showScrollTop && (
+                <button
+                  type="button"
+                  className="pdf-scroll-top-btn"
+                  onClick={scrollToTop}
+                  aria-label="Scroll to top"
+                >
+                  ↑
+                </button>
+              )}
+            </>
+          ) : (
+            <div className="pdf-state-message">Compile the PDF to see your preview.</div>
+          )}
         </div>
+
         {isCompiling && (
           <div className="pdf-recompile-overlay" aria-live="polite" aria-busy="true">
             <div className="pdf-recompile-spinner" aria-hidden="true">
@@ -1182,24 +1201,6 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     }
   }, []);
 
-  const hasShownConfettiRef = useRef(false);
-  useEffect(() => {
-    if(!pdfBlob || isCompiling || hasShownConfettiRef.current) return;
-    hasShownConfettiRef.current = true;
-    confetti({
-      particleCount: 120,
-      spread: 80,
-      origin: { y: 0.6 },
-      colors: [
-        getComputedStyle(document.documentElement)
-          .getPropertyValue('--primary').trim() || '#3b82f6',
-          '#10b981',
-          '#f59e0b',
-          '#ec4899',
-          '#8b5cf6',
-      ],
-    });
-  }, [pdfBlob, isCompiling]);
 
   const getSaveStatusText = () => {
     if (saveStatus === 'saving') return 'Saving...';
@@ -1469,7 +1470,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
         if(!isCompiling) handleCompileClick();
         return;
       }
-      if((event.ctrlkey || event.metaKey) && event.key === 's'){
+      if((event.ctrlKey || event.metaKey) && event.key === 's'){
         event.preventDefault();
         handleSave({ preventDefault: () => {} });
         return;
@@ -1518,7 +1519,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
       orientation,
       selectedFormulas: getSelectedFormulasList(),
     });
-    setLastSaved(Date.now());
+    setLastSavedAt(Date.now());
     showToast('Cheat sheet saved successfully!');
   } catch {
     showToast('Failed to save. Please try again.', 'error');

From 212aa0e768511cfb2b3fdd298062bc7aed8b3029 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 19:07:35 -0700
Subject: [PATCH 22/27] removed canvas-confetti from package-lock.json since
 this feature is no longer implemented.

---
 frontend/package-lock.json                   | 10 ----------
 frontend/src/components/CreateCheatSheet.jsx |  2 ++
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f956179..fc46ad3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2666,16 +2666,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/canvas-confetti": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
-      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
-      "license": "ISC",
-      "funding": {
-        "type": "donate",
-        "url": "https://www.paypal.me/kirilvatev"
-      }
-    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index da65a4c..e4a3ff9 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1466,6 +1466,8 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   useEffect(() => {
     const handleKeyDown = (event) => {
       if((event.ctrlKey || event.metaKey) && event.key === 'Enter'){
+        const isModifierPressed = event.ctrlKey || event.metaKey;
+        const normalizedKey = typeof event.key === 'string' ? event.key.toLowerCase() : '';
         event.preventDefault();
         if(!isCompiling) handleCompileClick();
         return;

From 0bbe0f9f0214ae156abd6b967cf1257ab3be4046 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 19:16:59 -0700
Subject: [PATCH 23/27] fixed some invalid syntax brought to my attention from
 the Copilot review.

---
 frontend/src/App.css                         |  6 +++---
 frontend/src/components/CreateCheatSheet.jsx | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index fe17309..5e99d89 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3316,7 +3316,7 @@ select:focus:not(:focus-visible) {
 }
 
 .left-panel-scroll::-webkit-scrollbar-thumb:hover,
-right-panel-scroll::-webkit-scrollbar-thumb:hover,
+.right-panel-scroll::-webkit-scrollbar-thumb:hover,
 .pdf-preview-scroll::-webkit-scrollbar-thumb:hover,
 .formula-reorder-panel::-webkit-scrollbar-thumb:hover {
   background: var(--text-muted);
@@ -3424,8 +3424,8 @@ right-panel-scroll::-webkit-scrollbar-thumb:hover,
   margin-top: 0.2rem;
 }
 
-.tile-char-counter-warn {
-  color: var (--btn-clear);
+.title-char-counter-warn {
+  color: var(--btn-clear);
   font-weight: 600;
 }
 
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index e4a3ff9..8c6b0e6 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -1175,9 +1175,22 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   const handleClearVideoSearch = () => {
     setVideoSearchRequest(null);
   };
+  const toastTimeoutRef = useRef(null);
   const showToast = useCallback((message, type = 'success') => {
+    if (toastTimeoutRef.current){
+      clearTimeout(toastTimeoutRef.current);
+    }
     setToast({ message, type });
-    setTimeout(() => setToast(null), 3000);
+    toastTimeoutRef.current = setTimeout(() => {
+       setToast(null);
+       toastTimeoutRef.current = null;
+     }, 3000);
+    }, []);
+    useEffect(() => () => {
+     if (toastTimeoutRef.current) {
+       clearTimeout(toastTimeoutRef.current);
+       toastTimeoutRef.current = null;
+     }
   }, []);
   const curatedVideosByTopic = useMemo(() => groupVideosByTopic(curatedVideoResources), [curatedVideoResources]);
   const searchedVideosByTopic = useMemo(() => groupVideosByTopic(visibleSearchedVideoResources), [visibleSearchedVideoResources]);

From e015c7c1cf1020a23ae514c0a41c97f0ce1a7386 Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 19:19:43 -0700
Subject: [PATCH 24/27] test: fix for package-lock.json.

---
 frontend/package-lock.json | 10 ++++++++++
 frontend/src/App.css       |  3 ---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fc46ad3..f956179 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2666,6 +2666,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5e99d89..9bcddfc 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3522,9 +3522,6 @@ select:focus:not(:focus-visible) {
   min-width: 80px;
 }
 
-.pdf-preview-scroll {
-  position: relative;
-}
 
 .pdf-scroll-top-btn {
    position: sticky;

From 4aaa678f2c5bed440f37e060890dd3ec94ec3caa Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Wed, 6 May 2026 19:26:00 -0700
Subject: [PATCH 25/27] chore: remove unused canvas-confetti dependency

---
 frontend/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2b3b775..c9fbd30 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,6 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "canvas-confetti": "^1.9.4",
     "framer-motion": "^12.38.0",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^1.14.0",

From a4953f00f5a9649684dd4124cde3a50ec16dc21e Mon Sep 17 00:00:00 2001
From: impxcts <jesseortiz111@gmail.com>
Date: Thu, 7 May 2026 11:11:11 -0700
Subject: [PATCH 26/27] Bug fixing: canvas-confetti is now competely removed .

---
 frontend/package-lock.json | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f956179..781b983 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,6 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "canvas-confetti": "^1.9.4",
         "framer-motion": "^12.38.0",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^1.14.0",
@@ -2666,16 +2665,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/canvas-confetti": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
-      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
-      "license": "ISC",
-      "funding": {
-        "type": "donate",
-        "url": "https://www.paypal.me/kirilvatev"
-      }
-    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",

From 112d0e79aff1674c6b3738c043214a3c4bac23e6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 7 May 2026 18:30:56 +0000
Subject: [PATCH 27/27] fix: harden cheat sheet editor follow-up

Agent-Logs-Url: https://github.com/ChicoState/cheat-sheet/sessions/23f319f0-a997-41e9-b9a9-85cf7bb1eff0

Co-authored-by: bdtran2002 <19805162+bdtran2002@users.noreply.github.com>
---
 frontend/src/App.css                          |   4 +-
 frontend/src/components/CreateCheatSheet.jsx  | 100 ++++++++++--------
 .../src/components/CreateCheatSheet.test.jsx  |  69 +++++++++++-
 3 files changed, 124 insertions(+), 49 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9bcddfc..6a701f0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3515,7 +3515,7 @@ select:focus:not(:focus-visible) {
   color: white;
 }
 
-.pdf-toolbar-notes {
+.pdf-toolbar-note {
   font-size: 0.75rem;
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
@@ -3553,4 +3553,4 @@ select:focus:not(:focus-visible) {
 
 .pdf-scroll-top-btn:active {
   transform: translateX(-40px) scale(0.98);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/CreateCheatSheet.jsx b/frontend/src/components/CreateCheatSheet.jsx
index 8c6b0e6..95a0017 100644
--- a/frontend/src/components/CreateCheatSheet.jsx
+++ b/frontend/src/components/CreateCheatSheet.jsx
@@ -804,7 +804,7 @@ const PdfPreview = ({ pdfBlob, compileError, isCompiling, layoutSignature }) =>
       window.addEventListener('resize', updatePreviewSize);
       return () => window.removeEventListener('resize', updatePreviewSize);
     }
-    const resizeObserver = new ResizeObserver((entries) => {
+    const resizeObserver = new window.ResizeObserver((entries) => {
       const entry = entries[0];
       if (entry) {
         setContainerWidth(entry.contentRect.width);
@@ -1229,16 +1229,17 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
   };
 
   useEffect(() => {
-    if(!initialData) return 
-    if(initialData.title) setTitle(initialData.title);
-    if (initialData.content){
+    if (!initialData) return;
+    if (initialData.title) setTitle(initialData.title);
+    if (initialData.content) {
       handleContentChange(initialData.content);
     }
     if (initialData.columns) setColumns(initialData.columns);
-    if(initialData.fontSize) setFontSize(initialData.fontSize);
+    if (initialData.fontSize) setFontSize(initialData.fontSize);
     if (initialData.spacing) setSpacing(initialData.spacing);
     if (initialData.margins) setMargins(initialData.margins);
-  }, [initialData]);
+    if (initialData.orientation) setOrientation(initialData.orientation);
+  }, [handleContentChange, initialData, setColumns, setFontSize, setMargins, setOrientation, setSpacing, setTitle]);
 
   useEffect(() => {
     const hasCompiledBefore = Boolean(initialData?.compileHistory?.length || pdfBlob || content.trim());
@@ -1476,25 +1477,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
       }, 600);
       return () => clearTimeout(timer);
     }, [pdfBlob, isCompiling]);
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if((event.ctrlKey || event.metaKey) && event.key === 'Enter'){
-        const isModifierPressed = event.ctrlKey || event.metaKey;
-        const normalizedKey = typeof event.key === 'string' ? event.key.toLowerCase() : '';
-        event.preventDefault();
-        if(!isCompiling) handleCompileClick();
-        return;
-      }
-      if((event.ctrlKey || event.metaKey) && event.key === 's'){
-        event.preventDefault();
-        handleSave({ preventDefault: () => {} });
-        return;
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isCompiling]);
-  const handleCompileClick = () => {
+  const handleCompileClick = useCallback(() => {
     if (!hasCollapsedLeftPanelOnceRef.current) {
       // First compile: keep controls reachable while reclaiming preview space.
       hasCollapsedLeftPanelOnceRef.current = true;
@@ -1518,28 +1501,55 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
     }
 
     handleCompileOnly(selectedFormulas);
-  };
+  }, [canRegenerateFromSelections, columns, contentModified, fontSize, getSelectedFormulasList, handleCompileOnly, handlePreview, spacing]);
 
-  const handleSave = async (e) => {
+  const handleSave = useCallback(async (e) => {
     e?.preventDefault?.();
-    try { 
-    await onSave({
-      title,
-      content,
-      contentSource,
-      columns,
-      fontSize,
-      spacing,
-      margins,
-      orientation,
-      selectedFormulas: getSelectedFormulasList(),
-    });
-    setLastSavedAt(Date.now());
-    showToast('Cheat sheet saved successfully!');
-  } catch {
-    showToast('Failed to save. Please try again.', 'error');
-  }
-};
+    setSaveStatus('saving');
+    try {
+      await onSave({
+        title,
+        content,
+        contentSource,
+        columns,
+        fontSize,
+        spacing,
+        margins,
+        orientation,
+        selectedFormulas: getSelectedFormulasList(),
+      });
+      setSaveStatus('saved');
+      setLastSavedAt(Date.now());
+      showToast('Cheat sheet saved successfully!');
+    } catch {
+      setSaveStatus('offline');
+      showToast('Failed to save. Please try again.', 'error');
+    }
+  }, [columns, content, contentSource, fontSize, getSelectedFormulasList, margins, onSave, orientation, showToast, spacing, title]);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const isModifierPressed = event.ctrlKey || event.metaKey;
+      const normalizedKey = typeof event.key === 'string' ? event.key.toLowerCase() : '';
+
+      if (!isModifierPressed) {
+        return;
+      }
+
+      if (normalizedKey === 'enter') {
+        event.preventDefault();
+        if (!isCompiling) handleCompileClick();
+        return;
+      }
+
+      if (normalizedKey === 's') {
+        event.preventDefault();
+        handleSave();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleCompileClick, handleSave, isCompiling]);
 
   const handleClear = () => {
     if (window.confirm('Are you sure you want to clear everything? This cannot be undone.')) {
diff --git a/frontend/src/components/CreateCheatSheet.test.jsx b/frontend/src/components/CreateCheatSheet.test.jsx
index 126a83f..9ff7bbc 100644
--- a/frontend/src/components/CreateCheatSheet.test.jsx
+++ b/frontend/src/components/CreateCheatSheet.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent, within } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import CreateCheatSheet from './CreateCheatSheet';
 import { useFormulas } from '../hooks/formulas';
@@ -59,6 +59,8 @@ describe('CreateCheatSheet Component', () => {
     setSpacing: vi.fn(),
     margins: '0.15in',
     setMargins: vi.fn(),
+    orientation: 'portrait',
+    setOrientation: vi.fn(),
     pdfBlob: null,
     isGenerating: false,
     isCompiling: false,
@@ -151,6 +153,25 @@ describe('CreateCheatSheet Component', () => {
     expect(screen.queryByLabelText(/Generated LaTeX Code:/i)).not.toBeInTheDocument();
   });
 
+  it('restores saved orientation from initial data', () => {
+    const setOrientation = vi.fn();
+
+    useLatex.mockReturnValue({
+      ...mockUseLatex,
+      setOrientation,
+    });
+
+    render(
+      <CreateCheatSheet
+        onSave={vi.fn().mockResolvedValue(undefined)}
+        onReset={vi.fn()}
+        initialData={{ orientation: 'landscape' }}
+      />,
+    );
+
+    expect(setOrientation).toHaveBeenCalledWith('landscape');
+  });
+
   it('compiles existing manual content without regenerating', () => {
     const handleCompileOnlyMock = vi.fn();
     const selectedFormulas = [{ name: 'test' }];
@@ -196,6 +217,50 @@ describe('CreateCheatSheet Component', () => {
     expect(handleCompileOnlyMock).toHaveBeenCalledWith(selectedFormulas);
   });
 
+  it('compiles on Ctrl+Enter and prevents the browser default action', () => {
+    const handlePreviewMock = vi.fn();
+    const selectedFormulas = [{ name: 'test' }];
+
+    useLatex.mockReturnValue({ ...mockUseLatex, handlePreview: handlePreviewMock });
+    useFormulas.mockReturnValue({
+      ...mockUseFormulas,
+      selectedCount: 1,
+      getSelectedFormulasList: vi.fn().mockReturnValue(selectedFormulas),
+    });
+
+    render(<CreateCheatSheet onSave={vi.fn().mockResolvedValue(undefined)} onReset={vi.fn()} />);
+
+    const shortcutEvent = new window.KeyboardEvent('keydown', {
+      key: 'Enter',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    window.dispatchEvent(shortcutEvent);
+
+    expect(shortcutEvent.defaultPrevented).toBe(true);
+    expect(handlePreviewMock).toHaveBeenCalledWith(null, expect.objectContaining({ formulas: selectedFormulas }));
+  });
+
+  it('saves on Ctrl+S and prevents the browser default action', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+
+    render(<CreateCheatSheet onSave={onSave} onReset={vi.fn()} />);
+
+    const shortcutEvent = new window.KeyboardEvent('keydown', {
+      key: 's',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    window.dispatchEvent(shortcutEvent);
+
+    expect(shortcutEvent.defaultPrevented).toBe(true);
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+  });
+
   it('can open youtube resources when class is selected', () => {
     const mockDataWithClass = {
       ...mockUseFormulas,
@@ -403,4 +468,4 @@ describe('CreateCheatSheet Component', () => {
     expect(mockClearSelections).toHaveBeenCalled();
     expect(mockReset).toHaveBeenCalled();
   });
-});
\ No newline at end of file
+});