chore(optimiser): Change UI to standardise the components by thejus03 · Pull Request #4267 · nusmodifications/nusmods

thejus03 · 2025-12-05T10:10:50Z

Context

Fixes Optimiser: UI issues #4266

…improvements

…d update color scheme

vercel · 2025-12-05T10:10:55Z

@thejus03 is attempting to deploy a commit to the modsbot's projects Team on Vercel.

A member of the Team first needs to authorize it.

…es for cleaner code

codecov · 2025-12-05T10:22:21Z

Codecov Report

❌ Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.76%. Comparing base (988c6fd) to head (e4a42e6).
⚠️ Report is 173 commits behind head on master.

Files with missing lines	Patch %	Lines
...s/optimiser/OptimiserFAQ/OptimiserFAQComponent.tsx	0.00%	6 Missing ⚠️
...s/optimiser/OptimiserFAQ/OptimiserFAQContainer.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4267      +/-   ##
==========================================
+ Coverage   54.52%   56.76%   +2.23%     
==========================================
  Files         274      300      +26     
  Lines        6076     6957     +881     
  Branches     1455     1682     +227     
==========================================
+ Hits         3313     3949     +636     
- Misses       2763     3008     +245

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

vercel · 2025-12-15T00:25:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nusmods-export	Ready	Preview, Comment	Feb 18, 2026 1:51pm
nusmods-website	Ready	Preview, Comment	Feb 18, 2026 1:51pm

leslieyip02

Generally LGTM. I think the FAQ section could be useful, so I think we could add a couple more questions.

leslieyip02 · 2025-12-15T00:43:00Z

+                  The optimiser will explore thousands of timetable combination amongst your
+                  selected modules that meet your preferences and return an optimal one.


Typo: "The optimiser will explore thousands of timetable combinations amongst your selected modules that meet your preferences and return an optimal one."

Actually maybe we could expand this to explain how to use the optimiser?

What is the Timetable Optimiser?

Having trouble planning your timetable? The optimiser explores thousands of possible timetable configurations to help you find one that best fits your preferences.

You can indicate your preferences in the form above, and hit "Optimise Timetable" to generate an optimised timetable. When you click the "Open Optimised Timetable" button, it will bring you to a new page with the optimised timetable. If the timetable looks good to you, click "Import" to update your timetable.

leslieyip02 · 2025-12-15T00:54:23Z

+                <p className={styles.bodyText}>
+                  The returned timetable will be optimised for the following preferences:
+                  <ul>
+                    <b className={styles.boldConstraint}>Hard constraints</b>
+                    <li>No live lessons on your chosen free days</li>
+                    <li>No live lessons outside your preferred time range</li>
+
+                    <b className={styles.boldConstraint}>Soft constraints</b>
+                    <li>Minimise travel distance between class venues</li>
+                    <li>Prioritise lunch break within your preferred time range</li>
+                    <li>
+                      Prioritise having less than your chosen number of consecutive hours of study
+                    </li>
+                  </ul>
+                </p>


Maybe this could be a separate FAQ?

What does the optimiser prioritise?

While the optimiser will try to generate a timetable that matches your preferences as closely as possible, there are certain preferences that may be harder to meet (due to course schedules and conflicts).

When you submit your preferences, there will generate 2 types of constraints:

Hard Constraints

These constraints must be satisfied by the optimiser:

No live lessons on your chosen free days

No live lessons outside your preferred time range

Soft Constraints

These constraints may be loosened/ignored if it's not possible to generate a valid timetable:

Minimise travel distance between class venues

Prioritise lunch break within your preferred time range

Prioritise having less than your chosen number of consecutive hours of study

leslieyip02 · 2025-12-15T00:57:58Z

+              <span className={styles.toggleIcon}>{isOpen ? <ChevronUp /> : <ChevronDown />}</span>
+            </button>
+          </div>
+          <div


I think we can add 1 more FAQ:

What happens if the optimiser can't generate a suitable timetable?

If there happens to conflicts in your selected modules or your preferences, the optimiser will still try to generate a timetable for you. However, it will only generate a partial timetable. You may have to edit the time table manually in this case.

(add more if you want)

…ontainer and components, and add new styles

…ults components

…lts components

leslieyip02 · 2026-02-18T05:50:14Z

@greptile

greptile-apps · 2026-02-18T05:54:18Z

Confidence Score: 3/5

This PR has HTML validity issues that should be fixed before merging but no risk of data loss or security concerns
The PR introduces useful UI changes, but the new FAQ component has duplicate HTML IDs (rendered 4 times with the same IDs, breaking accessibility) and invalid HTML nesting (ul inside p). These are real issues that will produce browser warnings and incorrect accessibility behavior, but they won't crash the app.
Pay close attention to OptimiserFAQComponent.tsx (duplicate IDs) and OptimiserFAQContainer.tsx (invalid HTML nesting)

Important Files Changed

Filename	Overview
website/src/views/optimiser/OptimiserFAQ/OptimiserFAQComponent.tsx	New FAQ accordion component with duplicate hardcoded HTML IDs and unused Bootstrap global class names
website/src/views/optimiser/OptimiserFAQ/OptimiserFAQContainer.tsx	FAQ container rendering 4 FAQ items; contains invalid HTML nesting (ul inside p tag)
website/src/views/optimiser/OptimiserFAQ/OptimiserFAQ.scss	New stylesheet for FAQ accordion with custom animations and theming; uses hardcoded accent color values
website/src/views/optimiser/OptimiserContainer/OptimiserContent.tsx	Imports and renders new FAQ container between error display and optimiser results
website/src/views/optimiser/OptimiserForm/OptimiserFreeDayConflicts.scss	Replaced Bootstrap alert-warning composition with custom border/radius styles and updated warning colors
website/src/views/optimiser/OptimiserResults.scss	Replaced Bootstrap alert-warning composition with custom styles; removed background-color from success section

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[OptimiserContent] --> B[OptimiserHeader]
    A --> C[OptimiserForm]
    A --> D[OptimiserButton]
    A --> E{Error?}
    E -->|Yes| F[ApiError]
    A --> G[OptimiserFAQContainer]
    G --> H[FAQComponent: What is the Timetable Optimiser?]
    G --> I[FAQComponent: What does the optimiser prioritise?]
    G --> J[FAQComponent: Can't generate suitable timetable?]
    G --> K[FAQComponent: What if I am a TA?]
    A --> L[OptimiserResults]

    style G fill:#fff3e0,stroke:#ff5138
    style H fill:#fff8f6,stroke:#ff5138
    style I fill:#fff8f6,stroke:#ff5138
    style J fill:#fff8f6,stroke:#ff5138
    style K fill:#fff8f6,stroke:#ff5138

_{Last reviewed commit: d90ff2e}

greptile-apps

_{9 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-02-18T05:54:21Z

+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  return (
+    <div className={styles.descriptionSection}>
+      <div className={classnames('accordion', styles.accordion)} id="optimiserDescriptionAccordion">


Duplicate HTML IDs across FAQ instances

FAQComponent is rendered 4 times in OptimiserFAQContainer, but uses hardcoded id attributes (optimiserDescriptionAccordion, optimiserAccordionHeading, optimiserAccordionBody). This produces 4 elements with each ID in the DOM, which is invalid HTML and breaks the aria-controls / aria-labelledby associations (they'll point at the first matching element rather than the sibling).

Consider generating unique IDs per instance, for example using React.useId() (React 18+) or passing an id prop:

const uniqueId = React.useId(); // then use `${uniqueId}-accordion`, `${uniqueId}-heading`, `${uniqueId}-body`

Prompt To Fix With AI

This is a comment left during a code review. Path: website/src/views/optimiser/OptimiserFAQ/OptimiserFAQComponent.tsx Line: 16 Comment: **Duplicate HTML IDs across FAQ instances** `FAQComponent` is rendered 4 times in `OptimiserFAQContainer`, but uses hardcoded `id` attributes (`optimiserDescriptionAccordion`, `optimiserAccordionHeading`, `optimiserAccordionBody`). This produces 4 elements with each ID in the DOM, which is invalid HTML and breaks the `aria-controls` / `aria-labelledby` associations (they'll point at the first matching element rather than the sibling). Consider generating unique IDs per instance, for example using `React.useId()` (React 18+) or passing an `id` prop: ``` const uniqueId = React.useId(); // then use `${uniqueId}-accordion`, `${uniqueId}-heading`, `${uniqueId}-body` ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-02-18T05:54:23Z

+            className={classnames('collapse', styles.collapse, {
+              [styles.open]: isOpen,
+            })}


Bootstrap collapse and card classes are no-ops

The global Bootstrap class names 'collapse', 'accordion', 'card', 'card-header', and 'card-body' used throughout this component have no effect because the project's Bootstrap import (website/src/styles/bootstrap/bootstrap.scss) has _transitions.scss and _card.scss commented out. These classes are inert and only add noise to the DOM. Consider removing them and relying solely on the CSS module classes.

Prompt To Fix With AI

This is a comment left during a code review. Path: website/src/views/optimiser/OptimiserFAQ/OptimiserFAQComponent.tsx Line: 37-39 Comment: **Bootstrap `collapse` and `card` classes are no-ops** The global Bootstrap class names `'collapse'`, `'accordion'`, `'card'`, `'card-header'`, and `'card-body'` used throughout this component have no effect because the project's Bootstrap import (`website/src/styles/bootstrap/bootstrap.scss`) has `_transitions.scss` and `_card.scss` commented out. These classes are inert and only add noise to the DOM. Consider removing them and relying solely on the CSS module classes. How can I resolve this? If you propose a fix, please make it concise.

…ty and improve markup structure

…oved structure

…cy and responsiveness

… markup in FAQComponent

leslieyip02

LGTM! Thanks for the patience!

thejus03 added 8 commits December 3, 2025 23:16

Change Optimiser success to bootstrap alert

13ca5d5

Update the phrasing of tooltips to live lessons

49202d1

Remove the focus ring when clicking Freedays button

c11290c

Update tooltip text in OptimiserFreeDaySelect

1d11b72

Add accordion for explaining what the optimiser is about

5a2e2c2

Enhance OptimiserDescription component with icon updates and styling …

f9ffa16

…improvements

Refactor OptimiserDescription styles to improve visual consistency an…

44ba503

…d update color scheme

Add FAQ section to OptimiserContent and update styles for consistency

0ef55f6

thejus03 added 3 commits December 5, 2025 18:13

Remove commented-out color property in OptimiserFreeDayConflicts styl…

78c9a61

…es for cleaner code

fix styles and code lint

419dba5

fix style

ad3a925

Merge branch 'master' into chore/UI-changes

a13c5e0

vercel Bot deployed to Preview – nusmods-website December 15, 2025 00:28 View deployment

vercel Bot deployed to Preview – nusmods-export December 15, 2025 00:29 View deployment

leslieyip02 requested changes Dec 15, 2025

View reviewed changes

thejus03 added 3 commits December 19, 2025 14:17

removed underline for constraint heading

43674fd

Refactor FAQ section: replace OptimiserDescription with OptimiserFAQC…

ad12c12

…ontainer and components, and add new styles

fix style issues

921dcc5

thejus03 requested a review from leslieyip02 December 20, 2025 04:04

thejus03 and others added 5 commits December 27, 2025 13:33

Refactor warning styles in OptimiserFreeDayConflicts and OptimiserRes…

d3ce455

…ults components

Refactor border styles in OptimiserFreeDayConflicts and OptimiserResu…

648868c

…lts components

Add FAQ entry for TAs regarding course optimisation

74cda9b

Merge branch 'master' into chore/UI-changes

035732a

Merge branch 'master' into chore/UI-changes

d90ff2e

vercel Bot deployed to Preview – nusmods-export February 18, 2026 05:49 View deployment

vercel Bot deployed to Preview – nusmods-website February 18, 2026 05:50 View deployment

greptile-apps Bot reviewed Feb 18, 2026

View reviewed changes

thejus03 added 4 commits February 18, 2026 14:18

fix(optimiser): Update FAQComponent to use unique IDs for accessibili…

ef2ca99

…ty and improve markup structure

fix(optimiser): Refactor FAQComponent markup for consistency and impr…

1aad826

…oved structure

style(optimiser): Refactor OptimiserFAQ styles for improved consisten…

932ae2d

…cy and responsiveness

style(optimiser): Adjust border radius for toggle button and clean up…

e4a42e6

… markup in FAQComponent

vercel Bot deployed to Preview – nusmods-export February 18, 2026 13:50 View deployment

vercel Bot deployed to Preview – nusmods-website February 18, 2026 13:51 View deployment

leslieyip02 approved these changes Feb 18, 2026

View reviewed changes

leslieyip02 merged commit 801b2e3 into nusmodifications:master Feb 18, 2026
5 of 6 checks passed

		The optimiser will explore thousands of timetable combination amongst your
		selected modules that meet your preferences and return an optimal one.

Conversation

thejus03 commented Dec 5, 2025

Context

Uh oh!

vercel Bot commented Dec 5, 2025

Uh oh!

codecov Bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

vercel Bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leslieyip02 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

leslieyip02 Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

leslieyip02 Dec 15, 2025

Choose a reason for hiding this comment

What is the Timetable Optimiser?

Uh oh!

leslieyip02 Dec 15, 2025

Choose a reason for hiding this comment

What does the optimiser prioritise?

Hard Constraints

Soft Constraints

Uh oh!

leslieyip02 Dec 15, 2025

Choose a reason for hiding this comment

What happens if the optimiser can't generate a suitable timetable?

Uh oh!

leslieyip02 commented Feb 18, 2026

Uh oh!

greptile-apps Bot commented Feb 18, 2026

Confidence Score: 3/5

Important Files Changed

Flowchart

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps Bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

leslieyip02 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov Bot commented Dec 5, 2025 •

edited

Loading

vercel Bot commented Dec 15, 2025 •

edited

Loading