fix: search options menu in mobile & user id in posthog (#539)

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' />}
           >

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')}

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 {