Adds the incident panel to the collapsed state

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -415,9 +415,7 @@ export function SideMenu({
         </div>
       </div>
       <div>
-        <CollapsibleHeight isCollapsed={isCollapsed}>
-          <IncidentStatusPanel />
-        </CollapsibleHeight>
+        <IncidentStatusPanel isCollapsed={isCollapsed} />
         <div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
           <div className="flex w-full items-center justify-between">
             <HelpAndAI isCollapsed={isCollapsed} />
@@ -763,17 +761,15 @@ function CollapsibleHeight({
   className?: string;
 }) {
   return (
-    <motion.div
-      className={cn("overflow-hidden", className)}
-      initial={false}
-      animate={{
-        opacity: isCollapsed ? 0 : 1,
-        height: isCollapsed ? 0 : "auto",
-      }}
-      transition={{ duration: 0.15, ease: "easeOut" }}
+    <div
+      className={cn(
+        "grid transition-all duration-200 ease-in-out",
+        isCollapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100",
+        className
+      )}
     >
-      {children}
-    </motion.div>
+      <div className="overflow-hidden">{children}</div>
+    </div>
   );
 }
 

apps/webapp/app/routes/resources.incidents.tsx

@@ -2,10 +2,12 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
 import { useCallback, useEffect } from "react";
-import { motion } from "framer-motion";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
+import { cn } from "~/utils/cn";
 import { BetterStackClient } from "~/services/betterstack/betterstack.server";
 
 export async function loader() {
@@ -21,7 +23,7 @@ export async function loader() {
   });
 }
 
-export function IncidentStatusPanel() {
+export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   if (!isManagedCloud) {
     return null;
@@ -45,39 +47,81 @@ export function IncidentStatusPanel() {
 
   const operational = fetcher.data?.operational ?? true;
 
+  if (operational) {
+    return null;
+  }
+
   return (
-    <>
-      {!operational && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-          className="p-1"
-        >
-          <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
-            <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
-              <ExclamationTriangleIcon className="size-4" />
-              <Paragraph variant="small/bright" className="text-warning">
-                Active incident
-              </Paragraph>
-            </div>
-            <Paragraph variant="extra-small/bright" className="text-warning/80">
-              Our team is working on resolving the issue. Check our status page for more
-              information.
-            </Paragraph>
-            <LinkButton
-              variant="secondary/small"
-              to="https://status.trigger.dev"
-              target="_blank"
-              fullWidth
-              className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
-            >
-              <span className="text-warning">View status page</span>
-            </LinkButton>
+    <div className="relative">
+      {/* Expanded: Full incident panel */}
+      <div
+        className={cn(
+          "grid transition-all duration-200 ease-in-out",
+          isCollapsed ? "grid-rows-[0fr] opacity-0 pointer-events-none" : "grid-rows-[1fr] opacity-100"
+        )}
+      >
+        <div className="overflow-hidden">
+          <IncidentPanelContent />
+        </div>
+      </div>
+
+      {/* Collapsed: Icon button with popover */}
+      <div
+        className={cn(
+          "grid transition-all duration-200 ease-in-out",
+          isCollapsed ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="p-1">
+            <Popover>
+              <SimpleTooltip
+                button={
+                  <PopoverTrigger className="flex h-8 w-full items-center justify-center rounded bg-warning/10 transition-colors hover:bg-warning/20">
+                    <ExclamationTriangleIcon className="size-5 text-warning" />
+                  </PopoverTrigger>
+                }
+                content="Active incident"
+                side="right"
+                sideOffset={8}
+                buttonClassName="!h-8 w-full"
+                asChild
+                disableHoverableContent
+              />
+              <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
+                <IncidentPanelContent inPopover />
+              </PopoverContent>
+            </Popover>
           </div>
-        </motion.div>
-      )}
-    </>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IncidentPanelContent({ inPopover = false }: { inPopover?: boolean }) {
+  return (
+    <div className={cn(!inPopover && "p-1")}>
+      <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
+        <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
+          <ExclamationTriangleIcon className="size-4" />
+          <Paragraph variant="small/bright" className="text-warning">
+            Active incident
+          </Paragraph>
+        </div>
+        <Paragraph variant="extra-small/bright" className="text-warning/80">
+          Our team is working on resolving the issue. Check our status page for more information.
+        </Paragraph>
+        <LinkButton
+          variant="secondary/small"
+          to="https://status.trigger.dev"
+          target="_blank"
+          fullWidth
+          className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
+        >
+          <span className="text-warning">View status page</span>
+        </LinkButton>
+      </div>
+    </div>
   );
 }