UI updates and Bug Fixes by impxcts · Pull Request #78 · ChicoState/cheat-sheet

impxcts · 2026-05-07T00:43:54Z

This PR adds a collection of frontend improvements focused on visual polish, accessibility, user-friendliness, and added the videos for the missing topics.

I added the following changes/adjustments:

fixed the thumbnails, they now display properly without them being cut off
Keyboard interactions: added ctrl + Enter to trigger compile, Ctrl + s to save, and Escape to close the video model
I added the pink "blossom" theme to give the user more options
Divider lines between layout option sections
replaced alert() save confirmation with a slide-in toast notification
added character counter to the title input with a limit of 80 characters
added select all/deselect all buttons above the subject class lists
added a section count for classes and a video count for the collection of YouTube videos
I added all the videos for Linear Algebra I and II
Added clear search buttons to YouTube Search results
added empty state illustration to the right panel when no sections are selected
Focus ring styles for keyboard navigation
improved muted text contrast ratios to meet the WCAG AA standards
Added a custom scrollbar styling across the panels when the theme changes
added hover transitions to the video cards
made the panel show/hide transitions smoother
improved the responsiveness for screens under 768px such as mobile devices.

…h video is being hovered by the user.

… it look cleaner.

… using their keyboard.

…s the right panel, left panel, PDF viwer, and formular reorder panels.

…rds.

…ight panel.

…x2 systems, matrix operations, and vector basics.

…I: Matrix Propertiesm Eigenvalues & Eigenvectors, Decompositions & spaces.

…cters.

…ad of fixed 54px.

Copilot

Pull request overview

This PR updates the cheat sheet generator frontend with additional curated videos and a set of UI/UX improvements (theme options, video panel enhancements, keyboard shortcuts, toast notifications, and visual polish).

Changes:

Added curated YouTube entries for Linear Algebra I & II topics.
Introduced UI enhancements in the editor (select all/deselect all, title character limit/counter, right-panel empty state, clear search button, toast notifications, keyboard shortcuts).
Added a new “Blossom” theme and multiple CSS updates for thumbnails, transitions, focus rings, scrollbars, and responsive behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 11 comments.

File	Description
frontend/src/data/subjectVideos.js	Adds curated video mappings for Linear Algebra I & II.
frontend/src/components/CreateCheatSheet.jsx	Adds editor UI behaviors (search clear, select all/deselect all, PDF preview updates, toasts, keyboard shortcuts).
frontend/src/App.jsx	Adds “blossom” to the theme selector list.
frontend/src/App.css	Implements blossom theme variables and various UI styling updates (thumbnails, focus rings, scrollbars, toasts, responsiveness).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    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){


+  };

+  const scrollToTop = () => {
+    scrollRef.current?.ScrollTo({ top: 0, behavior: 'smooth' });


    <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>


+  const showToast = useCallback((message, type = 'success') => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3000);
+  })


+  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]);


+          <span className="toast-icon">
+            {toast.type === 'success' ? '✓' : '✕'}
+          </span>
+          <span className="toast=message">{toast.message}</span>


+}
+
+.left-panel-scroll::-webkit-scrollbar-thumb:hover,
+right-panel-scroll::-webkit-scrollbar-thumb:hover,


+.tile-char-counter-warn {
+  color: var (--btn-clear);


+.pdf-toolbar-notes {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  min-width: 80px;
 }


…p feature when you are viewing the bottom of the pdf.

…no longer implemented.

…view.

Davictory2003 · 2026-05-07T17:58:21Z

@copilot apply changes based on the comments in this thread

bdtran2002 · 2026-05-07T18:02:30Z

@copilot Please check everything again. be thorough for hidden bugs

Copilot · 2026-05-07T18:04:43Z

@copilot apply changes based on the comments in this thread

Done in 4cc0cce. I fixed the remaining review-thread items around the shortcut/save flow and PDF toolbar note styling, and added regression coverage for Ctrl+Enter and Ctrl+S. Screenshot: https://github.com/user-attachments/assets/f909b994-82ea-4b39-a5be-c359caf4dc69

Copilot · 2026-05-07T18:09:48Z

@copilot Please check everything again. be thorough for hidden bugs

Did a full recheck and found one more related bug: saved orientation was not being restored from initialData on load. Fixed in b169369, added a regression test for restoring landscape mode, and re-ran npm test -- --run, npm run build, npm run lint, plus final review/CodeQL validation. Screenshot: /tmp/pr78-thorough-recheck.png

.

bdtran2002 · 2026-05-07T18:28:17Z

@copilot I choose you please review this PR and see if there's going to be bugs down the line.

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>

Copilot · 2026-05-07T18:33:06Z

@copilot I choose you please review this PR and see if there's going to be bugs down the line.

Reviewed it again and found a few issues that would likely turn into bugs later, so I fixed them in 112d0e7: saved orientation now restores correctly, shortcut handlers no longer capture stale state, manual save updates save status consistently, and the PDF toolbar note CSS now matches the rendered class. I re-ran npm test -- --run, npm run lint, npm run build, plus final review/CodeQL, and I’m not seeing another concrete blocker right now. Screenshot: /tmp/pr78-pr-review.png

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

bdtran2002 · 2026-05-07T18:50:30Z

youtube side pannel still buggy best to make a new pr

impxcts added 19 commits May 6, 2026 12:20

Add hover transitions to YouTube video cards, now shows properly whic…

ff37877

…h video is being hovered by the user.

Added smoother transitions for showing/hiding the side panels to make…

265b5aa

… it look cleaner.

Improved responsiveness on mobile devices for screens under 768px.

bb89c08

added focus ring styles to help with users navigating the application…

7bb0b8d

… using their keyboard.

replaced default browser scrollbars with thin themed scrollbars acros…

30bc70d

…s the right panel, left panel, PDF viwer, and formular reorder panels.

Improve muted text contrast across the panels to meet the WCAG standa…

1c62db9

…rds.

Added tooltip to compile button and empty state illustration in the r…

3b12a74

…ight panel.

added count badge for the videos in the right panel.

b879b3d

Added all the necessary videos for Linear Algebra I, which includes 2…

40d80bb

…x2 systems, matrix operations, and vector basics.

Added YouTube videos for the following topics within Linear Alegbra I…

2fe44af

…I: Matrix Propertiesm Eigenvalues & Eigenvectors, Decompositions & spaces.

added clear search button to YouTube Search Results.

656d7b3

Added Ctrl + Enter and Ctrl + s keyboard shortcuts for compile and save.

e81e368

Added a character counter to the title input with a limit of 80 chara…

07fb170

…cters.

replaced the alert() with a toast notification on save.

d65f9eb

Added new pink theme: 'blossom

251f5e0

Bug fix: show full YouTube video thumbnails by usig 100% height inste…

208ffed

…ad of fixed 54px.

Added a select all/deselect all for all subjects.

839817b

change browser tab title to reflect the name of the cheat sheet.

b3ce36a

Added a page counter to the top of the pdf.

98d3290

impxcts requested review from Davictory2003 and bdtran2002 and removed request for bdtran2002 May 7, 2026 01:03

Davictory2003 requested a review from Copilot May 7, 2026 01:04

Copilot started reviewing on behalf of Davictory2003 May 7, 2026 01:05 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

impxcts added 4 commits May 6, 2026 18:12

fixed some bugs preventing the toast notification from working properly.

27052ee

bug fix: correct syntax for PDFPreview and implemented a scroll-to-to…

92737e7

…p feature when you are viewing the bottom of the pdf.

removed canvas-confetti from package-lock.json since this feature is …

212aa0e

…no longer implemented.

fixed some invalid syntax brought to my attention from the Copilot re…

0bbe0f9

…view.

impxcts added 2 commits May 6, 2026 19:19

test: fix for package-lock.json.

e015c7c

chore: remove unused canvas-confetti dependency

4aaa678

thejoeyluu approved these changes May 7, 2026

View reviewed changes

Copilot started work on behalf of Davictory2003 May 7, 2026 17:58 View session

Copilot finished work on behalf of Davictory2003 May 7, 2026 18:05

Copilot started work on behalf of bdtran2002 May 7, 2026 18:05 View session

Copilot finished work on behalf of bdtran2002 May 7, 2026 18:10

Bug fixing: canvas-confetti is now competely removed

a4953f0

.

impxcts force-pushed the updatedVideos branch from b169369 to a4953f0 Compare May 7, 2026 18:11

Davictory2003 requested a review from Copilot May 7, 2026 18:15

Copilot started reviewing on behalf of Davictory2003 May 7, 2026 18:16 View session

Copilot started work on behalf of bdtran2002 May 7, 2026 18:28 View session

fix: harden cheat sheet editor follow-up

112d0e7

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>

Copilot finished work on behalf of bdtran2002 May 7, 2026 18:33

Copilot AI reviewed May 7, 2026

View reviewed changes

bdtran2002 closed this May 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI updates and Bug Fixes#78

UI updates and Bug Fixes#78
impxcts wants to merge 27 commits intomainfrom
updatedVideos

impxcts commented May 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Davictory2003 commented May 7, 2026

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

impxcts commented May 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Davictory2003 commented May 7, 2026

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Copilot AI commented May 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

bdtran2002 commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants