chore: add easter egg 🐝

frontend/src/components/easter-eggs/FlyingBees.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import bee from "src/assets/images/easter-eggs/flying-bee.png";
+
+type FlyingBee = { id: number; top: number };
+
+export type FlyingBeesRef = {
+  addFlyingBee: () => void;
+};
+
+export const FlyingBees = React.forwardRef<FlyingBeesRef>((_, ref) => {
+  const [flyingBees, setFlyingBees] = React.useState<FlyingBee[]>([]);
+  const idCounter = React.useRef(0);
+
+  const addFlyingBee = React.useCallback(() => {
+    const randomTop = Math.floor(Math.random() * window.innerHeight * 0.8);
+    const newId = idCounter.current++;
+    setFlyingBees((prev) => [...prev, { id: newId, top: randomTop }]);
+  }, []);
+
+  const handleAnimationEnd = (id: number) => {
+    setFlyingBees((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    addFlyingBee,
+  }));
+
+  return (
+    <>
+      {flyingBees.map((item) => (
+        <img
+          key={item.id}
+          src={bee}
+          alt="🐝"
+          className="fixed left-0 w-32 pointer-events-none z-[9999] animate-easter-egg-fly-right"
+          style={{ top: item.top }}
+          onAnimationEnd={() => handleAnimationEnd(item.id)}
+        />
+      ))}
+    </>
+  );
+});

frontend/src/components/layouts/AppLayout.tsx

@@ -25,9 +25,8 @@ import {
   useLocation,
   useNavigate,
 } from "react-router-dom";
-import SidebarHint from "src/components/SidebarHint";
-import UserAvatar from "src/components/UserAvatar";
 import { AlbyHubLogo } from "src/components/icons/AlbyHubLogo";
+import SidebarHint from "src/components/SidebarHint";
 import { Button } from "src/components/ui/button";
 import {
   DropdownMenu,
@@ -44,8 +43,13 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "src/components/ui/tooltip";
+import UserAvatar from "src/components/UserAvatar";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 
+import {
+  FlyingBees,
+  FlyingBeesRef,
+} from "src/components/easter-eggs/FlyingBees";
 import { UpgradeDialog } from "src/components/UpgradeDialog";
 import { useAlbyInfo } from "src/hooks/useAlbyInfo";
 import { useHealthCheck } from "src/hooks/useHealthCheck";
@@ -66,6 +70,7 @@ export default function AppLayout() {
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
   const location = useLocation();
   const navigate = useNavigate();
+  const flyingBeesRef = React.useRef<FlyingBeesRef>(null);
   useRemoveSuccessfulChannelOrder();
   useNotifyReceivedPayments();
 
@@ -134,7 +139,16 @@ export default function AppLayout() {
   function MainMenuContent() {
     return (
       <>
-        <MenuItem to="/home">
+        <FlyingBees ref={flyingBeesRef} />
+        <MenuItem
+          to="/home"
+          onClick={(e) => {
+            if (location.pathname === "/home") {
+              flyingBeesRef.current?.addFlyingBee();
+              e.preventDefault();
+            }
+          }}
+        >
           <Home className="h-4 w-4" />
           Home
         </MenuItem>
@@ -345,6 +359,7 @@ function AppVersion() {
 
 function HealthIndicator() {
   const { data: health } = useHealthCheck();
+
   if (!health) {
     return null;
   }

frontend/tailwind.config.js

@@ -81,10 +81,19 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "easter-egg-fly-right": {
+          "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",
+        "easter-egg-fly-right": "easter-egg-fly-right 1s linear forwards",
         "spin-slow": "spin 3s linear infinite",
       },
       fontFamily: {