feat: settings page (#260)

* feat: setup settings page boilerplate

* feat: split view into halves

* feat: add preview for Customization Options section

* feat: add OptionStore logic and LD icon

* feat: add courseStatusChips functionality

* feat: migrate experimental settings to proper settings

* feat: center Preview children and add className override

* feat: add GitHub stats

* feat: open GitHub user profile onclick

* feat: get user GitHub stats

* feat: refactor into useGitHubStats hook

* feat: toggle GitHub stats when the user presses the 'S' key

* chore: update title

* fix: remove extra file

* feat: refactor and add DialogProvider

* fix: import

* test: this commit has issues

* fix: no schedule bug

* fix: longhorn developers icon not rendering in prod builds

* feat(pr-review): fix UI and comment out experimental code

* chore: run lint and prettier

* feat: add responsive design

* feat: use @octokit/rest and fix GitHub stats

src/views/components/injected/TableRow/TableRow.module.scss

@@ -86,3 +86,10 @@
         text-decoration: line-through;
     }
 }
+
+.isConflictNoLineThrough:not(.inActiveSchedule) {
+    > *:not(td:last-child) {
+        color: colors.$speedway_brick;
+        font-weight: normal;
+    }
+}

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,3 +1,4 @@
+import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning';
@@ -25,9 +26,26 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     // the courses in the active schedule that conflict with the course for this row
     const [conflicts, setConflicts] = useState<Course[]>([]);
+    const [highlightConflicts, setHighlightConflicts] = useState<boolean>(false);
 
     const { element, course } = row;
 
+    useEffect(() => {
+        initSettings().then(({ enableHighlightConflicts }) => {
+            setHighlightConflicts(enableHighlightConflicts);
+        });
+
+        const l1 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
+            setHighlightConflicts(newValue);
+            // console.log('enableHighlightConflicts', newValue);
+        });
+
+        // Remove listeners when the component is unmounted
+        return () => {
+            OptionsStore.removeListener(l1);
+        };
+    }, []);
+
     useEffect(() => {
         element.classList.add(styles.row!);
         element.classList.add('group');
@@ -72,14 +90,23 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
             }
         }
 
-        element.classList[conflicts.length ? 'add' : 'remove'](styles.isConflict!);
+        // Clear conflict styling
+        element.classList.remove(styles.isConflict!);
+        element.classList.remove(styles.isConflictNoLineThrough!);
+
+        if (highlightConflicts) {
+            element.classList[conflicts.length ? 'add' : 'remove'](styles.isConflict!);
+        } else {
+            element.classList[conflicts.length ? 'add' : 'remove'](styles.isConflictNoLineThrough!);
+        }
+
         setConflicts(conflicts);
 
         return () => {
             element.classList.remove(styles.isConflict!);
             setConflicts([]);
         };
-    }, [activeSchedule, course, element.classList]);
+    }, [activeSchedule, course, element.classList, highlightConflicts]);
 
     if (!container) {
         return null;