Add star button to activity description

src/components/ActivityButtons.tsx

@@ -41,6 +41,7 @@ import { Timeslot } from "../lib/activity";
 import type { Class, SectionLockOption, Sections } from "../lib/class";
 import { LockOption } from "../lib/class";
 import { WEEKDAY_STRINGS, TIMESLOT_STRINGS, Slot } from "../lib/dates";
+import { StarButton } from "./ClassTable";
 import { HydrantContext } from "../lib/hydrant";
 
 /**
@@ -258,6 +259,13 @@ export function ClassButtons(props: { cls: Class }) {
   return (
     <Flex direction="column" gap={2}>
       <ButtonGroup wrap="wrap">
+        <StarButton
+          cls={cls}
+          onStarToggle={() => {
+            const event = new CustomEvent("refreshStarCells");
+            window.dispatchEvent(event);
+          }}
+        />
         <Button
           onClick={() => {
             state.toggleActivity(cls);

src/components/ClassTable.tsx

@@ -423,7 +423,7 @@ function ClassFlags(props: {
   );
 }
 
-const StarButton = ({
+export const StarButton = ({
   cls,
   onStarToggle,
 }: {
@@ -456,6 +456,20 @@ export function ClassTable() {
 
   const gridRef = useRef<AgGridReact<ClassTableRow>>(null);
 
+  useEffect(() => {
+    const refreshCells = () => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      gridRef.current?.api?.refreshCells({
+        force: true,
+        columns: ["number"],
+      });
+    };
+    window.addEventListener("refreshStarCells", refreshCells);
+    return () => {
+      window.removeEventListener("refreshStarCells", refreshCells);
+    };
+  }, []);
+
   // Setup table columns
   const columnDefs: ColDef<ClassTableRow, string>[] = useMemo(() => {
     const initialSort = "asc" as const;