Charles/targeted banners

apps/frontend/src/app/Enrollment/index.tsx

@@ -13,6 +13,7 @@ import {
   CourseAnalyticsSidebar,
 } from "@/components/CourseAnalytics/CourseAnalyticsLayout";
 import { useCourseAnalyticsIsDesktop } from "@/components/CourseAnalytics/CourseAnalyticsLayout/useCourseAnalyticsIsDesktop";
+import TargetedMessageBanner from "@/components/CourseAnalytics/TargetedMessageBanner";
 import { BAR_CHART_COLORS } from "@/components/CourseAnalytics/types";
 import CourseSelect, { CourseOption } from "@/components/CourseSelect";
 import CourseSelectionCard from "@/components/CourseSelectionCard";
@@ -234,6 +235,16 @@ function EnrollmentSidebar({
   onEditDraftConsumed,
 }: EnrollmentSidebarProps) {
   const client = useApolloClient();
+
+  const displayedCourses = useMemo(
+    () =>
+      outputs.map((o) => ({
+        subject: o.input.subject,
+        courseNumber: o.input.courseNumber,
+      })),
+    [outputs]
+  );
+
   const [selectedCourse, setSelectedCourse] = useState<CourseOption | null>(
     null
   );
@@ -518,7 +529,14 @@ function EnrollmentSidebar({
   };
 
   return (
-    <CourseAnalyticsSidebar title="Enrollment">
+    <CourseAnalyticsSidebar
+      title="Enrollment"
+      footer={
+        displayedCourses.length > 0 ? (
+          <TargetedMessageBanner courses={displayedCourses} />
+        ) : undefined
+      }
+    >
       <CourseAnalyticsField label="Class">
         <CourseSelect
           selectedCourse={selectedCourse}

apps/frontend/src/app/Grades/index.tsx

@@ -13,6 +13,7 @@ import {
   CourseAnalyticsSidebar,
 } from "@/components/CourseAnalytics/CourseAnalyticsLayout";
 import { useCourseAnalyticsIsDesktop } from "@/components/CourseAnalytics/CourseAnalyticsLayout/useCourseAnalyticsIsDesktop";
+import TargetedMessageBanner from "@/components/CourseAnalytics/TargetedMessageBanner";
 import {
   BAR_CHART_COLORS,
   type CourseOutput,
@@ -178,6 +179,15 @@ function FilterPanel({
 
   const [loading, setLoading] = useState(false);
 
+  const displayedCourses = useMemo(
+    () =>
+      outputs.map((o) => ({
+        subject: o.input.subject,
+        courseNumber: o.input.courseNumber,
+      })),
+    [outputs]
+  );
+
   const [selectedCourse, setSelectedCourse] = useState<CourseOption | null>(
     null
   );
@@ -551,7 +561,14 @@ function FilterPanel({
   useEnterToAdd(() => void add(), !isAddButtonDisabled);
 
   return (
-    <CourseAnalyticsSidebar title="Grades">
+    <CourseAnalyticsSidebar
+      title="Grades"
+      footer={
+        displayedCourses.length > 0 ? (
+          <TargetedMessageBanner courses={displayedCourses} />
+        ) : undefined
+      }
+    >
       <CourseAnalyticsField label="Class">
         <CourseSelect
           onSelect={handleCourseSelect}

apps/frontend/src/components/CourseAnalytics/CourseAnalyticsLayout/CourseAnalyticsLayout.module.scss

@@ -85,6 +85,9 @@ $analytics-sidebar-width: 248px;
 .sidebarPanel {
   width: $analytics-sidebar-width;
   flex-shrink: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   background-color: var(--foreground-color);
 
   @media (width <= 992px) {
@@ -107,6 +110,11 @@ $analytics-sidebar-width: 248px;
   gap: 14px;
 }
 
+.sidebarFooter {
+  margin-top: auto;
+  padding: 16px;
+}
+
 .sidebarTitle {
   font-weight: var(--font-medium);
   font-size: var(--text-18);

apps/frontend/src/components/CourseAnalytics/CourseAnalyticsLayout/index.tsx

@@ -69,18 +69,21 @@ export function CourseAnalyticsLayout({
 interface CourseAnalyticsSidebarProps {
   title: string;
   children: ReactNode;
+  footer?: ReactNode;
 }
 
 export function CourseAnalyticsSidebar({
   title,
   children,
+  footer,
 }: CourseAnalyticsSidebarProps) {
   return (
     <div className={styles.sidebarPanel}>
       <div className={styles.sidebarHeader}>
         <p className={styles.sidebarTitle}>{title}</p>
       </div>
       <div className={styles.sidebarBody}>{children}</div>
+      {footer && <div className={styles.sidebarFooter}>{footer}</div>}
     </div>
   );
 }

apps/frontend/src/components/CourseAnalytics/TargetedMessageBanner/TargetedMessageBanner.module.scss

@@ -0,0 +1,67 @@
+.messageBox {
+  display: block;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 16px;
+  background: rgba(59, 130, 246, 0.1);
+  text-decoration: none;
+  cursor: pointer;
+
+  .messageHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .messageTitle {
+    font-weight: var(--font-medium);
+    font-size: var(--text-14);
+    line-height: 20px;
+    color: var(--blue-500);
+    text-wrap: balance;
+  }
+
+  .dismissButton {
+    background: none;
+    border: none;
+    color: var(--blue-500);
+    cursor: pointer;
+    padding: 0 0 0 8px;
+    font-size: var(--text-14);
+    line-height: 1;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .messageDescription {
+    font-size: var(--text-14);
+    color: var(--blue-500);
+    line-height: 1.5;
+    text-wrap: pretty;
+  }
+
+  .applyButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 8px;
+    padding: 6px 14px;
+    border: 1px solid var(--blue-500);
+    border-radius: 6px;
+    background: var(--blue-500);
+    color: white;
+    font-size: var(--text-12);
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    line-height: 1;
+    transition: opacity 150ms ease;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+}