From 18dfd73bed6378fcfa388c9514e43276b72f67eb Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 23 Jan 2025 21:31:41 +0100
Subject: [PATCH] mobile: responsive sizes for annotation tools (#236)

* chore: refine assetPrefix in config for easier debug over LAN

* mobile: responsive sizes for annotation tools
---
 CONTRIBUTING.md                                 |  9 ++++-----
 apps/readest-app/next.config.mjs                |  7 +------
 .../components/annotator/AnnotationPopup.tsx    |  7 ++++++-
 .../reader/components/annotator/Annotator.tsx   | 17 ++++++++++-------
 apps/readest-app/src/components/MenuItem.tsx    |  4 +++-
 5 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0793fa66..6bb81abb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -77,11 +77,10 @@ Now you're all setup and can start implementing your changes.
 
 This project is a monorepo. The code for the `readest-app` is in the `app/readest-app` directory. Here are some useful scripts for developing the frontend only without compiling Tauri:
 
-| Command                                    | Description                                        |
-| ------------------------------------------ | -------------------------------------------------- |
-| `pnpm dev-web`                             | Starts the development server for the web app only |
-| `TAURI_DEV_HOST=192.168.1.22 pnpm dev-web` | Start the dev server on a LAN address              |
-| `pnpm build-web`                           | Builds the web app                                 |
+| Command          | Description                                        |
+| ---------------- | -------------------------------------------------- |
+| `pnpm dev-web`   | Starts the development server for the web app only |
+| `pnpm build-web` | Builds the web app                                 |
 
 Recommended Visual Studio Code plugins for development:
 
diff --git a/apps/readest-app/next.config.mjs b/apps/readest-app/next.config.mjs
index 3a0382d0..1be4cb08 100644
--- a/apps/readest-app/next.config.mjs
+++ b/apps/readest-app/next.config.mjs
@@ -1,10 +1,5 @@
 import withPWA from 'next-pwa';
 
-/** @type {import('next').NextConfig} */
-const isProd = process.env.NODE_ENV === 'production';
-
-const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
-
 const appPlatform = process.env['NEXT_PUBLIC_APP_PLATFORM'];
 
 /** @type {import('next').NextConfig} */
@@ -21,7 +16,7 @@ const nextConfig = {
     appIsrStatus: false,
   },
   // Configure assetPrefix or else the server won't properly resolve your assets.
-  assetPrefix: isProd ? '' : `http://${internalHost}:3000`,
+  assetPrefix: '',
   reactStrictMode: true,
 };
 
diff --git a/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx
index 11e3b487..3fc134cb 100644
--- a/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx
@@ -41,7 +41,12 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
         className='selection-popup bg-gray-600 px-4 text-white'
         triangleClassName='text-gray-600'
       >
-        <div className='selection-buttons flex h-11 items-center justify-between'>
+        <div
+          className='selection-buttons flex items-center justify-between'
+          style={{
+            height: popupHeight,
+          }}
+        >
           {buttons.map((button, index) => (
             <PopupButton
               key={index}
diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 9327b300..daecf1ee 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -19,6 +19,7 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { useNotesSync } from '../../hooks/useNotesSync';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
@@ -65,13 +66,15 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     settings.globalReadSettings.highlightStyles[selectedStyle],
   );
 
-  const dictPopupWidth = 480;
-  const dictPopupHeight = 300;
-  const transPopupWidth = 480;
-  const transPopupHeight = 360;
-  const annotPopupWidth = 280;
-  const annotPopupHeight = 44;
-  const popupPadding = 10;
+  const popupPadding = useResponsiveSize(10);
+  const maxWidth = window.innerWidth - 2 * popupPadding;
+  const maxHeight = window.innerHeight - 2 * popupPadding;
+  const dictPopupWidth = Math.min(480, maxWidth);
+  const dictPopupHeight = Math.min(300, maxHeight);
+  const transPopupWidth = Math.min(480, maxWidth);
+  const transPopupHeight = Math.min(360, maxHeight);
+  const annotPopupWidth = useResponsiveSize(280);
+  const annotPopupHeight = useResponsiveSize(44);
 
   const onLoad = (event: Event) => {
     const detail = (event as CustomEvent).detail;
diff --git a/apps/readest-app/src/components/MenuItem.tsx b/apps/readest-app/src/components/MenuItem.tsx
index 24cd5678..20658217 100644
--- a/apps/readest-app/src/components/MenuItem.tsx
+++ b/apps/readest-app/src/components/MenuItem.tsx
@@ -35,7 +35,9 @@ const MenuItem: React.FC<MenuItemProps> = ({
     >
       <div className='flex items-center'>
         {!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
-        <span className={clsx('ml-2 truncate sm:max-w-32', labelClass)}>{label}</span>
+        <span className={clsx('ml-2 truncate text-base sm:max-w-32 sm:text-sm', labelClass)}>
+          {label}
+        </span>
       </div>
       {shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
     </button>