From 664dc45fccfb71583f63b33e1779254e1653d79a Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sun, 9 Mar 2025 14:07:42 +0800
Subject: [PATCH] fix: search options menu in mobile & user id in posthog
 (#539)

---
 .../src/app/reader/components/sidebar/SearchBar.tsx      | 9 +++++++--
 .../src/app/reader/components/sidebar/SearchOptions.tsx  | 8 +++++++-
 apps/readest-app/src/context/AuthContext.tsx             | 2 ++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
index 347a9469..eb7b0785 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { FaSearch, FaChevronDown } from 'react-icons/fa';
 
@@ -7,9 +8,9 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { BookSearchConfig, BookSearchResult } from '@/types/book';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import Dropdown from '@/components/Dropdown';
 import SearchOptions from './SearchOptions';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const MINIMUM_SEARCH_TERM_LENGTH_DEFAULT = 2;
 const MINIMUM_SEARCH_TERM_LENGTH_CJK = 1;
@@ -172,7 +173,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
         <div className='bg-base-300 flex h-8 w-8 items-center rounded-r-lg'>
           <Dropdown
-            className='dropdown-bottom flex justify-center'
+            className={clsx(
+              window.innerWidth < 640 && 'dropdown-end',
+              'dropdown-bottom flex justify-center',
+            )}
+            menuClassName={window.innerWidth < 640 ? 'no-triangle mt-1' : 'dropdown-center mt-3'}
             buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 rounded-none rounded-r-lg'
             toggleButton={<FaChevronDown size={iconSize12} className='text-gray-500' />}
           >
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchOptions.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchOptions.tsx
index f3948ede..34ed6065 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchOptions.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SearchOptions.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { BookSearchConfig } from '@/types/book';
@@ -6,6 +7,7 @@ import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
 
 interface SearchOptionsProps {
   searchConfig: BookSearchConfig;
+  menuClassName?: string;
   onSearchConfigChanged: (searchConfig: BookSearchConfig) => void;
   setIsDropdownOpen?: (isOpen: boolean) => void;
 }
@@ -32,6 +34,7 @@ const Option: React.FC<OptionProps> = ({ label, isActive, onClick }) => (
 
 const SearchOptions: React.FC<SearchOptionsProps> = ({
   searchConfig,
+  menuClassName,
   onSearchConfigChanged,
   setIsDropdownOpen,
 }) => {
@@ -44,7 +47,10 @@ const SearchOptions: React.FC<SearchOptionsProps> = ({
   return (
     <div
       tabIndex={0}
-      className='book-menu dropdown-content dropdown-center border-base-200 z-20 mt-3 w-56 border shadow-2xl'
+      className={clsx(
+        'book-menu dropdown-content dropdown-center border-base-200 z-20 w-56 border shadow-2xl',
+        menuClassName,
+      )}
     >
       <Option
         label={_('Book')}
diff --git a/apps/readest-app/src/context/AuthContext.tsx b/apps/readest-app/src/context/AuthContext.tsx
index 145a5b47..395aa2ea 100644
--- a/apps/readest-app/src/context/AuthContext.tsx
+++ b/apps/readest-app/src/context/AuthContext.tsx
@@ -3,6 +3,7 @@
 import React, { createContext, useState, useContext, ReactNode, useEffect } from 'react';
 import { User } from '@supabase/supabase-js';
 import { supabase } from '@/utils/supabase';
+import posthog from 'posthog-js';
 
 interface AuthContextType {
   token: string | null;
@@ -38,6 +39,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         localStorage.setItem('token', access_token);
         localStorage.setItem('refresh_token', refresh_token);
         localStorage.setItem('user', JSON.stringify(user));
+        posthog.identify(user.id);
         setToken(access_token);
         setUser(user);
       } else {