fix menu interactions

Author: tannerlinsley

src/components/DocsLayout.tsx

@@ -536,7 +536,7 @@ export function DocsLayout({
           'sticky top-[var(--navbar-height)] h-[calc(100dvh-var(--navbar-height))]',
           'z-10 border-r border-gray-500/20',
           'bg-white/50 dark:bg-black/30',
-          'w-14',
+          'w-10',
         )}
       >
         <DocsMenuStrip
@@ -583,12 +583,14 @@ export function DocsLayout({
           !showLargeMenu && 'sm:-translate-x-full xl:translate-x-0',
           showLargeMenu && 'sm:translate-x-0',
         )}
-        onPointerEnter={() => {
+        onPointerEnter={(e) => {
+          if (e.pointerType === 'touch') return
           if (window.innerWidth < 1280) {
             clearTimeout(leaveTimer.current)
           }
         }}
-        onPointerLeave={() => {
+        onPointerLeave={(e) => {
+          if (e.pointerType === 'touch') return
           if (window.innerWidth < 1280) {
             leaveTimer.current = setTimeout(() => {
               setShowLargeMenu(false)

src/components/Navbar.tsx

@@ -82,21 +82,22 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   }, [])
 
   const [showMenu, setShowMenu] = React.useState(false)
-  const isPointerInsideButtonRef = React.useRef(false)
-
-  const toggleMenu = () => {
-    setShowMenu((prev) => !prev)
-  }
+  const pointerInsideButtonRef = React.useRef(false)
 
   const largeMenuRef = React.useRef<HTMLDivElement>(null)
+  const menuButtonRef = React.useRef<HTMLButtonElement>(null)
 
   // Close mobile menu when clicking outside
   const smallMenuRef = useClickOutside<HTMLDivElement>({
     enabled: showMenu,
     onClickOutside: () => setShowMenu(false),
-    additionalRefs: [largeMenuRef],
+    additionalRefs: [largeMenuRef, menuButtonRef],
   })
 
+  const toggleMenu = () => {
+    setShowMenu((prev) => !prev)
+  }
+
   const loginButton = (
     <>
       {(() => {
@@ -202,19 +203,22 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                   ? 'lg:w-9 lg:opacity-100 lg:translate-x-0'
                   : 'lg:w-0 lg:opacity-0 lg:-translate-x-full',
               )}
+              ref={menuButtonRef}
               onClick={toggleMenu}
-              onPointerEnter={() => {
-                if (window.innerWidth < 1024) {
+              onPointerEnter={(e) => {
+                // Only open on hover for desktop pointer devices
+                if (window.innerWidth < 1024 || e.pointerType === 'touch') {
                   return
                 }
-                if (isPointerInsideButtonRef.current) {
+                // Don't reopen if pointer is already inside (e.g. after clicking X)
+                if (pointerInsideButtonRef.current) {
                   return
                 }
-                isPointerInsideButtonRef.current = true
+                pointerInsideButtonRef.current = true
                 setShowMenu(true)
               }}
               onPointerLeave={() => {
-                isPointerInsideButtonRef.current = false
+                pointerInsideButtonRef.current = false
               }}
             >
               {showMenu ? <X /> : <Menu />}
@@ -649,16 +653,18 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           !inlineMenu && !showMenu && '-translate-x-full',
           !inlineMenu && showMenu && 'translate-x-0',
         )}
-        onPointerEnter={() => {
+        onPointerEnter={(e) => {
+          if (e.pointerType === 'touch') return
           clearTimeout(leaveTimer.current)
         }}
-        onPointerLeave={() => {
+        onPointerLeave={(e) => {
+          if (e.pointerType === 'touch') return
           leaveTimer.current = setTimeout(() => {
             setShowMenu(false)
           }, 300)
         }}
       >
-        <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-[50px] min-w-[260px]">
+        <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-[50px] min-w-[220px]">
           <div className="flex flex-col gap-1 text-sm p-2">{items}</div>
         </div>
       </div>

src/db/schema.ts

@@ -12,6 +12,7 @@ import {
   real,
   index,
   uniqueIndex,
+  date,
 } from 'drizzle-orm/pg-core'
 import { relations } from 'drizzle-orm'
 import type { InferSelectModel, InferInsertModel } from 'drizzle-orm'
@@ -772,6 +773,32 @@ export const auditLogs = pgTable(
 export type AuditLog = InferSelectModel<typeof auditLogs>
 export type NewAuditLog = InferInsertModel<typeof auditLogs>
 
+// Daily user activity table (one row per user per day for DAU/streak tracking)
+export const userActivity = pgTable(
+  'user_activity',
+  {
+    id: uuid('id').primaryKey().defaultRandom(),
+    userId: uuid('user_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    date: date('date', { mode: 'string' }).notNull(), // YYYY-MM-DD format
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .notNull()
+      .defaultNow(),
+  },
+  (table) => ({
+    userDateUnique: uniqueIndex('user_activity_user_date_unique').on(
+      table.userId,
+      table.date,
+    ),
+    userIdIdx: index('user_activity_user_id_idx').on(table.userId),
+    dateIdx: index('user_activity_date_idx').on(table.date),
+  }),
+)
+
+export type UserActivity = InferSelectModel<typeof userActivity>
+export type NewUserActivity = InferInsertModel<typeof userActivity>
+
 // Relations
 export const usersRelations = relations(users, ({ many }) => ({
   sessions: many(sessions),
@@ -782,6 +809,7 @@ export const usersRelations = relations(users, ({ many }) => ({
   bannerDismissals: many(bannerDismissals),
   loginHistory: many(loginHistory),
   auditLogs: many(auditLogs),
+  userActivity: many(userActivity),
 }))
 
 export const rolesRelations = relations(roles, ({ many }) => ({
@@ -868,3 +896,10 @@ export const auditLogsRelations = relations(auditLogs, ({ one }) => ({
     references: [users.id],
   }),
 }))
+
+export const userActivityRelations = relations(userActivity, ({ one }) => ({
+  user: one(users, {
+    fields: [userActivity.userId],
+    references: [users.id],
+  }),
+}))

src/hooks/useClickOutside.ts

@@ -32,7 +32,11 @@ export function useClickOutside<T extends HTMLElement = HTMLElement>({
   additionalRefs = [],
 }: UseClickOutsideOptions): React.RefObject<T | null> {
   const ref = React.useRef<T>(null)
-  const touchStartRef = React.useRef<{ x: number; y: number } | null>(null)
+  const touchStartRef = React.useRef<{
+    x: number
+    y: number
+    outside: boolean
+  } | null>(null)
 
   React.useEffect(() => {
     if (!enabled) return
@@ -45,39 +49,48 @@ export function useClickOutside<T extends HTMLElement = HTMLElement>({
       return false
     }
 
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.pointerType === 'touch') {
-        // Track touch start position to detect scrolls vs taps
-        touchStartRef.current = { x: event.clientX, y: event.clientY }
-        return
-      }
+    // Mouse: handle on mousedown for immediate response
+    const handleMouseDown = (event: MouseEvent) => {
+      // If this mousedown was generated from a touch, ignore it
+      if ((event as any).sourceCapabilities?.firesTouchEvents) return
 
-      // Mouse/pen: handle immediately
       if (!isInsideRefs(event.target as Node)) {
         onClickOutside()
       }
     }
 
-    const handlePointerUp = (event: PointerEvent) => {
-      if (event.pointerType !== 'touch') return
+    // Touch: only close if tap started AND ended outside
+    const handleTouchStart = (event: TouchEvent) => {
+      const touch = event.touches[0]
+      if (touch) {
+        const target = event.target as Node
+        const startedOutside = !isInsideRefs(target)
+        touchStartRef.current = {
+          x: touch.clientX,
+          y: touch.clientY,
+          outside: startedOutside,
+        }
+      }
+    }
 
+    const handleTouchEnd = (event: TouchEvent) => {
       const start = touchStartRef.current
       touchStartRef.current = null
 
       if (!start) return
 
+      // Only consider closing if touch started outside
+      if (!start.outside) return
+
+      const touch = event.changedTouches[0]
+      if (!touch) return
+
       // If finger moved more than 10px, it's a scroll not a tap
-      const dx = Math.abs(event.clientX - start.x)
-      const dy = Math.abs(event.clientY - start.y)
+      const dx = Math.abs(touch.clientX - start.x)
+      const dy = Math.abs(touch.clientY - start.y)
       if (dx > 10 || dy > 10) return
 
-      if (!isInsideRefs(event.target as Node)) {
-        onClickOutside()
-      }
-    }
-
-    const handlePointerCancel = () => {
-      touchStartRef.current = null
+      onClickOutside()
     }
 
     const handleEscape = (event: KeyboardEvent) => {
@@ -86,17 +99,17 @@ export function useClickOutside<T extends HTMLElement = HTMLElement>({
       }
     }
 
-    document.addEventListener('pointerdown', handlePointerDown)
-    document.addEventListener('pointerup', handlePointerUp)
-    document.addEventListener('pointercancel', handlePointerCancel)
+    document.addEventListener('mousedown', handleMouseDown)
+    document.addEventListener('touchstart', handleTouchStart, { passive: true })
+    document.addEventListener('touchend', handleTouchEnd)
     if (closeOnEscape) {
       document.addEventListener('keydown', handleEscape)
     }
 
     return () => {
-      document.removeEventListener('pointerdown', handlePointerDown)
-      document.removeEventListener('pointerup', handlePointerUp)
-      document.removeEventListener('pointercancel', handlePointerCancel)
+      document.removeEventListener('mousedown', handleMouseDown)
+      document.removeEventListener('touchstart', handleTouchStart)
+      document.removeEventListener('touchend', handleTouchEnd)
       if (closeOnEscape) {
         document.removeEventListener('keydown', handleEscape)
       }

src/routeTree.gen.ts

@@ -24,7 +24,6 @@ import { Route as LibrariesIndexRouteImport } from './routes/_libraries/index'
 import { Route as LibraryIdIndexRouteImport } from './routes/$libraryId/index'
 import { Route as AuthSignoutRouteImport } from './routes/auth/signout'
 import { Route as AdminUsersRouteImport } from './routes/admin/users'
-import { Route as AdminStatsRouteImport } from './routes/admin/stats'
 import { Route as AdminNpmStatsRouteImport } from './routes/admin/npm-stats'
 import { Route as AdminLoginsRouteImport } from './routes/admin/logins'
 import { Route as AdminGithubStatsRouteImport } from './routes/admin/github-stats'
@@ -167,11 +166,6 @@ const AdminUsersRoute = AdminUsersRouteImport.update({
   path: '/users',
   getParentRoute: () => AdminRouteRoute,
 } as any)
-const AdminStatsRoute = AdminStatsRouteImport.update({
-  id: '/stats',
-  path: '/stats',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
 const AdminNpmStatsRoute = AdminNpmStatsRouteImport.update({
   id: '/npm-stats',
   path: '/npm-stats',
@@ -562,7 +556,6 @@ export interface FileRoutesByFullPath {
   '/admin/github-stats': typeof AdminGithubStatsRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
-  '/admin/stats': typeof AdminStatsRoute
   '/admin/users': typeof AdminUsersRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/$libraryId/': typeof LibraryIdIndexRoute
@@ -642,7 +635,6 @@ export interface FileRoutesByTo {
   '/admin/github-stats': typeof AdminGithubStatsRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
-  '/admin/stats': typeof AdminStatsRoute
   '/admin/users': typeof AdminUsersRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/$libraryId': typeof LibraryIdIndexRoute
@@ -727,7 +719,6 @@ export interface FileRoutesById {
   '/admin/github-stats': typeof AdminGithubStatsRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
-  '/admin/stats': typeof AdminStatsRoute
   '/admin/users': typeof AdminUsersRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/$libraryId/': typeof LibraryIdIndexRoute
@@ -813,7 +804,6 @@ export interface FileRouteTypes {
     | '/admin/github-stats'
     | '/admin/logins'
     | '/admin/npm-stats'
-    | '/admin/stats'
     | '/admin/users'
     | '/auth/signout'
     | '/$libraryId/'
@@ -893,7 +883,6 @@ export interface FileRouteTypes {
     | '/admin/github-stats'
     | '/admin/logins'
     | '/admin/npm-stats'
-    | '/admin/stats'
     | '/admin/users'
     | '/auth/signout'
     | '/$libraryId'
@@ -977,7 +966,6 @@ export interface FileRouteTypes {
     | '/admin/github-stats'
     | '/admin/logins'
     | '/admin/npm-stats'
-    | '/admin/stats'
     | '/admin/users'
     | '/auth/signout'
     | '/$libraryId/'
@@ -1158,13 +1146,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminUsersRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/admin/stats': {
-      id: '/admin/stats'
-      path: '/stats'
-      fullPath: '/admin/stats'
-      preLoaderRoute: typeof AdminStatsRouteImport
-      parentRoute: typeof AdminRouteRoute
-    }
     '/admin/npm-stats': {
       id: '/admin/npm-stats'
       path: '/npm-stats'
@@ -1808,7 +1789,6 @@ interface AdminRouteRouteChildren {
   AdminGithubStatsRoute: typeof AdminGithubStatsRoute
   AdminLoginsRoute: typeof AdminLoginsRoute
   AdminNpmStatsRoute: typeof AdminNpmStatsRoute
-  AdminStatsRoute: typeof AdminStatsRoute
   AdminUsersRoute: typeof AdminUsersRoute
   AdminIndexRoute: typeof AdminIndexRoute
   AdminBannersIdRoute: typeof AdminBannersIdRoute
@@ -1826,7 +1806,6 @@ const AdminRouteRouteChildren: AdminRouteRouteChildren = {
   AdminGithubStatsRoute: AdminGithubStatsRoute,
   AdminLoginsRoute: AdminLoginsRoute,
   AdminNpmStatsRoute: AdminNpmStatsRoute,
-  AdminStatsRoute: AdminStatsRoute,
   AdminUsersRoute: AdminUsersRoute,
   AdminIndexRoute: AdminIndexRoute,
   AdminBannersIdRoute: AdminBannersIdRoute,