Add a Ko-fi link to the museum's menu, and log opening the menu

The bottom bar's menu gets "Support the museum", linking to Ko-fi for
thank-you donations, and the repo gets a FUNDING.yml so GitHub shows a
Sponsor button for the same page.

Opening the menu wasn't logged, only following a link in it, so we
couldn't tell how many people look at the menu. Add menu_open (event
schema version 7). Following the Ko-fi link is already logged as a
link_click with its href, like the menu's other links.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: jordaneldredge

packages/skin-database/app/(modern)/scroll/BottomMenuBar.tsx

@@ -8,10 +8,11 @@ import {
   MessageSquare,
   Upload,
   Github,
+  Heart,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { setNextViewVia } from "./eventLogger";
+import { setNextViewVia, useEventLogger } from "./eventLogger";
 import { notePathname, returnToGrid } from "./gridReturn";
 import { gridPath, skinPath } from "./paths";
 import { useListPosition } from "./listPosition";
@@ -24,6 +25,10 @@ import {
   useRef,
 } from "react";
 
+// Where "Support the museum" goes: thank-you donations. Following it is
+// logged as a link_click with this href, like the menu's other links.
+const DONATION_URL = "https://ko-fi.com/jordaneldredge";
+
 export default function BottomMenuBar() {
   const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -57,8 +62,10 @@ export default function BottomMenuBar() {
   const position = useListPosition();
   const onFeed = pathname.startsWith("/skin/");
 
+  const logger = useEventLogger();
   const toggleHamburger = () => {
-    setIsHamburgerOpen((open) => !open);
+    if (!isHamburgerOpen) logger.log({ type: "menu_open" });
+    setIsHamburgerOpen(!isHamburgerOpen);
   };
 
   // Close hamburger menu when clicking outside
@@ -121,6 +128,15 @@ export default function BottomMenuBar() {
                 setIsHamburgerOpen(false);
               }}
             />
+            <HamburgerMenuItem
+              href={DONATION_URL}
+              icon={<Heart size={20} />}
+              label="Support the museum"
+              onClick={() => {
+                setIsHamburgerOpen(false);
+              }}
+              external
+            />
             <HamburgerMenuItem
               href="https://github.com/captbaritone/webamp/"
               icon={<Github size={20} />}

packages/skin-database/app/(modern)/scroll/eventTypes.ts

@@ -29,7 +29,9 @@
 //   session_start says whether it was prerendered, whether the browser is
 //   automated, and whether the page was visible. The server records each
 //   session's user agent (the session table).
-export const EVENT_SCHEMA_VERSION = 6;
+// - 7: adds menu_open. Before, opening the bottom bar's menu wasn't logged,
+//   only following a link in it (link_click).
+export const EVENT_SCHEMA_VERSION = 7;
 
 // The most skins in one grid_impressions event (more are split across
 // several), keeping it within the endpoint's size limit.
@@ -181,6 +183,8 @@ export type UserEvent =
   | { type: "scroll_hint_shown" }
   // The grid's "Tap a skin" hint was shown.
   | { type: "grid_hint_shown" }
+  // The bottom bar's menu (About, Feedback, GitHub) was opened.
+  | { type: "menu_open" }
   // Skins in the grid that were on screen for a moment (GRID_IMPRESSION_MS)
   // once scrolling stopped, as [md5, position, source]. Each skin is reported
   // once per session for each list. With grid_skin_click, how often a skin is
@@ -302,6 +306,7 @@ export const USER_EVENT_TYPES: ReadonlySet<string> = new Set<
   "webamp_use_start",
   "webamp_use_end",
   "grid_hint_shown",
+  "menu_open",
   "grid_search",
   "grid_skin_click",
   "skins_fetch_start",