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

@@ -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:
 

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,
 };
 

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}

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;

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>