Clean up

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

@@ -13,29 +13,14 @@ import {
 import Link from "next/link";
 import { useState, useEffect, useRef } from "react";
 import { usePathname } from "next/navigation";
-import { logUserEvent } from "./Events";
 
-type Props = {
-  sessionId?: string;
-};
-
-export default function BottomMenuBar({ sessionId }: Props) {
+export default function BottomMenuBar() {
   const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const pathname = usePathname();
 
-  const handleMenuClick = (menuItem: string) => {
-    if (sessionId) {
-      logUserEvent(sessionId, {
-        type: "menu_click",
-        menuItem,
-      });
-    }
-  };
-
   const toggleHamburger = () => {
     setIsHamburgerOpen(!isHamburgerOpen);
-    handleMenuClick("hamburger");
   };
 
   // Close hamburger menu when clicking outside
@@ -81,7 +66,6 @@ export default function BottomMenuBar({ sessionId }: Props) {
             icon={<Info size={20} />}
             label="About"
             onClick={() => {
-              handleMenuClick("about");
               setIsHamburgerOpen(false);
             }}
           />
@@ -90,7 +74,6 @@ export default function BottomMenuBar({ sessionId }: Props) {
             icon={<Upload size={20} />}
             label="Upload"
             onClick={() => {
-              handleMenuClick("upload");
               setIsHamburgerOpen(false);
             }}
           />{" "}
@@ -99,7 +82,6 @@ export default function BottomMenuBar({ sessionId }: Props) {
             icon={<MessageSquare size={20} />}
             label="Feedback"
             onClick={() => {
-              handleMenuClick("feedback");
               setIsHamburgerOpen(false);
             }}
             external
@@ -109,7 +91,6 @@ export default function BottomMenuBar({ sessionId }: Props) {
             icon={<Github size={20} />}
             label="GitHub"
             onClick={() => {
-              handleMenuClick("feedback");
               setIsHamburgerOpen(false);
             }}
             external
@@ -138,21 +119,18 @@ export default function BottomMenuBar({ sessionId }: Props) {
           href="/scroll"
           icon={<Smartphone size={24} />}
           label="Feed"
-          onClick={() => handleMenuClick("feed")}
           isActive={pathname === "/scroll"}
         />
         <MenuButton
           href="/"
           icon={<Grid3x3 size={24} />}
           label="Grid"
-          onClick={() => handleMenuClick("grid")}
           isActive={pathname === "/"}
         />
         <MenuButton
           href="/"
           icon={<Search size={24} />}
           label="Search"
-          onClick={() => handleMenuClick("search")}
           isActive={false}
         />
         <MenuButton
@@ -171,7 +149,6 @@ type MenuButtonProps = {
   href?: string;
   icon: React.ReactNode;
   label: string;
-  onClick: () => void;
   isButton?: boolean;
   isActive?: boolean;
 };
@@ -180,7 +157,6 @@ function MenuButton({
   href,
   icon,
   label,
-  onClick,
   isButton = false,
   isActive = false,
 }: MenuButtonProps) {
@@ -251,7 +227,6 @@ function MenuButton({
   if (isButton) {
     return (
       <button
-        onClick={onClick}
         style={containerStyle}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -264,7 +239,6 @@ function MenuButton({
   return (
     <Link
       href={href!}
-      onClick={onClick}
       style={containerStyle}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

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

@@ -1,46 +1,25 @@
 "use client";
 
-import { ReactNode, createContext, useContext } from "react";
+import { ReactNode } from "react";
 import BottomMenuBar from "./BottomMenuBar";
 
-type SessionContextType = {
-  sessionId: string | null;
-};
-
-const SessionContext = createContext<SessionContextType>({ sessionId: null });
-
-export function useSession() {
-  return useContext(SessionContext);
-}
-
-type LayoutWrapperProps = {
+type LayoutProps = {
   children: ReactNode;
-  sessionId: string;
 };
 
-export function LayoutWrapper({ children, sessionId }: LayoutWrapperProps) {
+export default function LayoutWrapper({ children }: LayoutProps) {
   return (
-    <SessionContext.Provider value={{ sessionId }}>
-      <div
-        style={{
-          position: "relative",
-          width: "100vw",
-          maxWidth: "56.25vh", // 9:16 aspect ratio (100vh * 9/16)
-          margin: "0 auto",
-          height: "100vh",
-        }}
-      >
-        {children}
-        <BottomMenuBar sessionId={sessionId} />
-      </div>
-    </SessionContext.Provider>
+    <div
+      style={{
+        position: "relative",
+        width: "100vw",
+        maxWidth: "56.25vh", // 9:16 aspect ratio (100vh * 9/16)
+        margin: "0 auto",
+        height: "100vh",
+      }}
+    >
+      {children}
+      <BottomMenuBar />
+    </div>
   );
 }
-
-type Props = {
-  children: ReactNode;
-};
-
-export default function ScrollLayout({ children }: Props) {
-  return <>{children}</>;
-}

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

@@ -4,7 +4,6 @@ import "./scroll.css";
 import SkinScroller, { ClientSkin } from "./SkinScroller";
 import { getScrollPage } from "../../../data/skins";
 import SkinModel from "../../../data/SkinModel";
-import { LayoutWrapper } from "./layout";
 
 // Ensure each page load gets a new session
 export const dynamic = "force-dynamic";
@@ -52,12 +51,10 @@ export default async function ScrollPage() {
   const initialSkins = await getClientSkins(sessionId);
 
   return (
-    <LayoutWrapper sessionId={sessionId}>
-      <SkinScroller
-        initialSkins={initialSkins}
-        getSkins={getClientSkins}
-        sessionId={sessionId}
-      />
-    </LayoutWrapper>
+    <SkinScroller
+      initialSkins={initialSkins}
+      getSkins={getClientSkins}
+      sessionId={sessionId}
+    />
   );
 }