chore: add easter egg 🐝

frontend/src/components/layouts/AppLayout.tsx

@@ -48,6 +48,7 @@ import {
 } from "src/components/ui/tooltip";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 
+import bee from "src/assets/images/flying-bee.png";
 import { useAlbyInfo } from "src/hooks/useAlbyInfo";
 import { useHealthCheck } from "src/hooks/useHealthCheck";
 import { useInfo } from "src/hooks/useInfo";
@@ -374,6 +375,20 @@ function AppVersion() {
 
 function HealthIndicator() {
   const { data: health } = useHealthCheck();
+  const [flyingBees, setFlyingBees] = React.useState<
+    Array<{ id: number; top: number }>
+  >([]);
+
+  const addFlyingBee = () => {
+    const randomTop = Math.floor(Math.random() * window.innerHeight * 0.8);
+    const newId = new Date().getTime();
+    setFlyingBees((prev) => [...prev, { id: newId, top: randomTop }]);
+  };
+
+  const handleAnimationEnd = (id: number) => {
+    setFlyingBees((prev) => prev.filter((item) => item.id !== id));
+  };
+
   if (!health) {
     return null;
   }
@@ -400,7 +415,7 @@ function HealthIndicator() {
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger onClick={addFlyingBee}>
           <span className="text-xs flex items-center text-muted-foreground">
             <div
               className={cn(
@@ -427,6 +442,16 @@ function HealthIndicator() {
           )}
         </TooltipContent>
       </Tooltip>
+      {flyingBees.map((item) => (
+        <img
+          key={item.id}
+          src={bee}
+          alt="🐝"
+          className="fixed left-0 w-32 pointer-events-none z-[9999] animate-fly-right"
+          style={{ top: item.top }}
+          onAnimationEnd={() => handleAnimationEnd(item.id)}
+        />
+      ))}
     </TooltipProvider>
   );
 }

frontend/tailwind.config.js

@@ -81,10 +81,19 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        flyRight: {
+          "0%": {
+            transform: "translateX(-100px)",
+          },
+          "100%": {
+            transform: "translateX(110vw)",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fly-right": "flyRight 2s linear forwards",
         "spin-slow": "spin 3s linear infinite",
       },
       fontFamily: {