From ca17131f2af84af0988991ec040f3152d4614bfc Mon Sep 17 00:00:00 2001
From: loveheaven <loveheaven_zhengwei@hotmail.com>
Date: Mon, 25 May 2026 21:57:55 +0800
Subject: [PATCH] fix(reader): keep New Chat button visible above Android nav
 bar and force theme contrast (#4287)

The floating 'New Chat' button in the chat history sidebar suffered from
two issues on mobile:

1. On Android (e.g. Pixel 9 with the gesture pill) the button rendered
   underneath the system navigation indicator because its position used
   plain bottom-4 with no safe-area inset.
2. With bg-base-300 / text-base-content the pill could collapse to a
   nearly invisible solid black shape under some themes / contexts where
   text-base-content was inherited as a near-background color, hiding
   the icon and label entirely.

Fixes:
- Offset the wrapper by env(safe-area-inset-bottom) + 1rem so the button
  sits above the Android gesture pill and iOS home indicator.
- Switch the button to bg-primary / text-primary-content with shadow-md
  to guarantee strong contrast across all themes.
- Add pointer-events-none on the positioning wrapper and pointer-events-auto
  on the button itself so the floating layer never blocks list interaction.
---
 .../components/sidebar/ChatHistoryView.tsx    | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/sidebar/ChatHistoryView.tsx b/apps/readest-app/src/app/reader/components/sidebar/ChatHistoryView.tsx
index d202fb23..8e5f9449 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/ChatHistoryView.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/ChatHistoryView.tsx
@@ -225,16 +225,26 @@ const ChatHistoryView: React.FC<ChatHistoryViewProps> = ({ bookKey }) => {
         )}
       </div>
 
-      {/* Floating New Chat button at bottom right */}
-      <div className='absolute bottom-4 right-4'>
+      {/* Floating New Chat button at bottom right.
+          Use safe-area-inset-bottom so it doesn't get hidden behind the
+          Android gesture pill / iOS home indicator on mobile.
+          Use btn-primary colors to guarantee a visible contrast across
+          both light and dark themes (previously bg-base-300 / text-base-content
+          could collapse to a near-invisible solid black pill on some themes). */}
+      <div
+        className='pointer-events-none absolute right-4'
+        style={{
+          bottom: 'calc(env(safe-area-inset-bottom, 0px) + 1rem)',
+        }}
+      >
         <button
           onClick={handleNewConversation}
           className={clsx(
-            'flex items-center gap-2 rounded-full px-4 py-2',
-            'bg-base-300 text-base-content',
-            'hover:bg-base-content/10',
-            'border-base-content/10 border',
-            'shadow-sm',
+            'pointer-events-auto flex items-center gap-2 rounded-full px-4 py-2',
+            'bg-primary text-primary-content',
+            'hover:bg-primary/90',
+            'border-primary/20 border',
+            'shadow-md',
             'transition-all duration-200 ease-out',
             'active:scale-[0.97]',
           )}