wrote all course/schedule background messages with handlers

src/views/components/PopupMain.tsx

@@ -1,6 +1,25 @@
 import React from 'react';
+import { bMessenger } from 'src/shared/messages';
+import useSchedules from '../hooks/useSchedules';
+import { Button } from './common/Button/Button';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
 
+const { clearCourses } = bMessenger;
 export default function PopupMain() {
-    return <ExtensionRoot>Popup</ExtensionRoot>;
+    const [activeSchedule, schedules] = useSchedules();
+
+    // TODO: Add a button to to switch the active schedule
+
+    return (
+        <ExtensionRoot>
+            <Button
+                onClick={() => {
+                    if (!activeSchedule) return;
+                    clearCourses({ scheduleName: activeSchedule?.name });
+                }}
+            >
+                Clear Courses
+            </Button>
+        </ExtensionRoot>
+    );
 }