Add star button to activity description

src/components/ActivityButtons.tsx

@@ -39,6 +39,7 @@ import { Class, LockOption, SectionLockOption, Sections } from "../lib/class";
 import { WEEKDAY_STRINGS, TIMESLOT_STRINGS, Slot } from "../lib/dates";
 import { State } from "../lib/state";
 import { LuCheck as CheckIcon, LuX as CloseIcon } from "react-icons/lu";
+import { StarButton } from "./ClassTable";
 
 /**
  * A button that toggles the active value, and is outlined if active, solid
@@ -240,6 +241,14 @@ export function ClassButtons(props: { cls: Class; state: State }) {
   return (
     <Flex direction="column" gap={2}>
       <ButtonGroup wrap="wrap">
+        <StarButton
+          cls={cls}
+          state={state}
+          onStarToggle={() => {
+            const event = new CustomEvent("refreshStarCells");
+            window.dispatchEvent(event);
+          }}
+        />
         <Button onClick={() => state.toggleActivity(cls)}>
           {isSelected ? "Remove class" : "Add class"}
         </Button>

src/components/ClassTable.tsx

@@ -382,7 +382,7 @@ function ClassFlags(props: {
   );
 }
 
-const StarButton = ({
+export const StarButton = ({
   cls,
   state,
   onStarToggle,
@@ -416,6 +416,17 @@ export function ClassTable(props: {
   const { classes, state } = props;
   const gridRef = useRef<AgGridReact>(null);
 
+  useEffect(() => {
+    const refreshCells = () => {
+      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;