From a4c556776820aa83e110b7e202e4665e8a692cc0 Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Fri, 12 Dec 2025 15:53:11 -0500
Subject: [PATCH] feat: enhance CoursePromoBadge component with sidebar state
 management

- Updated CoursePromoBadge to accept a sidebarOpen prop, allowing it to render differently based on the sidebar's state.
- Implemented tooltip functionality for the collapsed state, improving user interaction and accessibility.
- Adjusted styles and structure to support both expanded and collapsed views of the badge.
---
 apps/app/src/components/layout/sidebar.tsx    |  2 +-
 .../src/components/ui/course-promo-badge.tsx  | 53 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/layout/sidebar.tsx b/apps/app/src/components/layout/sidebar.tsx
index f573be26..ff28f4e8 100644
--- a/apps/app/src/components/layout/sidebar.tsx
+++ b/apps/app/src/components/layout/sidebar.tsx
@@ -1136,7 +1136,7 @@ export function Sidebar() {
       {/* Bottom Section - Running Agents / Bug Report / Settings */}
       <div className="border-t border-sidebar-border bg-sidebar-accent/10 shrink-0">
         {/* Course Promo Badge */}
-        <CoursePromoBadge />
+        <CoursePromoBadge sidebarOpen={sidebarOpen} />
         {/* Running Agents Link */}
         <div className="p-2 pb-0">
           <button
diff --git a/apps/app/src/components/ui/course-promo-badge.tsx b/apps/app/src/components/ui/course-promo-badge.tsx
index 48ef2358..cf9fbdbb 100644
--- a/apps/app/src/components/ui/course-promo-badge.tsx
+++ b/apps/app/src/components/ui/course-promo-badge.tsx
@@ -2,14 +2,62 @@
 
 import * as React from "react";
 import { Sparkles, X } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
-export function CoursePromoBadge() {
+interface CoursePromoBadgeProps {
+  sidebarOpen?: boolean;
+}
+
+export function CoursePromoBadge({ sidebarOpen = true }: CoursePromoBadgeProps) {
   const [dismissed, setDismissed] = React.useState(false);
 
   if (dismissed) {
     return null;
   }
 
+  // Collapsed state - show only icon with tooltip
+  if (!sidebarOpen) {
+    return (
+      <div className="p-2 pb-0 flex justify-center">
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <a
+                href="https://agenticjumpstart.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group cursor-pointer flex items-center justify-center w-10 h-10 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-all border border-primary/30"
+                data-testid="course-promo-badge-collapsed"
+              >
+                <Sparkles className="size-4 shrink-0" />
+              </a>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="flex items-center gap-2">
+              <span>Become a 10x Dev</span>
+              <span
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setDismissed(true);
+                }}
+                className="p-0.5 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
+                aria-label="Dismiss"
+              >
+                <X className="size-3" />
+              </span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    );
+  }
+
+  // Expanded state - show full badge
   return (
     <div className="p-2 pb-0">
       <a
@@ -17,6 +65,7 @@ export function CoursePromoBadge() {
         target="_blank"
         rel="noopener noreferrer"
         className="group cursor-pointer flex items-center justify-between w-full px-2 lg:px-3 py-2.5 bg-primary/10 text-primary rounded-lg font-medium text-sm hover:bg-primary/20 transition-all border border-primary/30"
+        data-testid="course-promo-badge"
       >
         <div className="flex items-center gap-2">
           <Sparkles className="size-4 shrink-0" />
@@ -28,7 +77,7 @@ export function CoursePromoBadge() {
             e.stopPropagation();
             setDismissed(true);
           }}
-          className="p-1 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
+          className="hidden lg:block p-1 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
           aria-label="Dismiss"
         >
           <X className="size-3.5" />