feat: add haptics feedback when entering select mode (#428)

apps/readest-app/package.json

@@ -47,6 +47,7 @@
     "@tauri-apps/plugin-deep-link": "^2.2.0",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "^2.2.0",
+    "@tauri-apps/plugin-haptics": "^2.2.3",
     "@tauri-apps/plugin-http": "^2.3.0",
     "@tauri-apps/plugin-log": "^2.2.1",
     "@tauri-apps/plugin-opener": "^2.2.5",

apps/readest-app/src-tauri/Cargo.toml

@@ -45,6 +45,7 @@ tauri-plugin-oauth = "2"
 tauri-plugin-opener = "2.2.2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-sign-in-with-apple = "1.0.2"
+tauri-plugin-haptics = "2.2.3"
 [patch.crates-io]
 tauri = { path = "../../../packages/tauri/crates/tauri" }
 

apps/readest-app/src-tauri/capabilities/default.json

@@ -70,6 +70,10 @@
     "oauth:allow-cancel",
     "sign-in-with-apple:default",
     "opener:default",
+    "haptics:allow-vibrate",
+    "haptics:allow-impact-feedback",
+    "haptics:allow-notification-feedback",
+    "haptics:allow-selection-feedback",
     "deep-link:default"
   ]
 }

apps/readest-app/src-tauri/src/lib.rs

@@ -9,7 +9,7 @@ extern crate objc;
 #[cfg(target_os = "macos")]
 mod menu;
 #[cfg(target_os = "macos")]
-mod traffic_light_plugin;
+mod traffic_light;
 
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;
@@ -127,11 +127,14 @@ pub fn run() {
     let builder = builder.plugin(tauri_plugin_window_state::Builder::default().build());
 
     #[cfg(target_os = "macos")]
-    let builder = builder.plugin(traffic_light_plugin::init());
+    let builder = builder.plugin(traffic_light::init());
 
     #[cfg(target_os = "ios")]
     let builder = builder.plugin(tauri_plugin_sign_in_with_apple::init());
 
+    #[cfg(any(target_os = "ios", target_os = "android"))]
+    let builder = builder.plugin(tauri_plugin_haptics::init());
+
     builder
         .setup(|#[allow(unused_variables)] app| {
             #[cfg(desktop)]

apps/readest-app/src-tauri/src/traffic_light.rs

@@ -14,7 +14,7 @@ unsafe impl Send for UnsafeWindowHandle {}
 unsafe impl Sync for UnsafeWindowHandle {}
 
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
-    Builder::new("traffic_light_positioner")
+    Builder::new("traffic_light")
         .on_window_ready(|window| {
             #[cfg(target_os = "macos")]
             setup_traffic_light_positioner(window.clone());

apps/readest-app/src/app/library/components/BookshelfItem.tsx

@@ -219,7 +219,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
   };
 
   const { pressing, handlers } = useLongPress({
-    onLongPress: () => {
+    onLongPress: async () => {
       if (!isSelectMode) {
         handleSetSelectMode(true);
       }

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -91,7 +91,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             />
           </div>
           <div className='absolute right-4 flex items-center space-x-2 text-gray-500 sm:space-x-4'>
-            <span className='mx-2 h-6 w-[1px] bg-gray-400'></span>
+            <span className='bg-base-content/50 mx-2 h-4 w-[0.5px]'></span>
             <Dropdown
               className='exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center'
               buttonClassName='p-0 h-6 min-h-6 w-6 flex items-center justify-center'

apps/readest-app/src/app/library/page.tsx

@@ -16,6 +16,7 @@ import { parseOpenWithFiles } from '@/helpers/cli';
 import { isTauriAppPlatform, hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
 import { FILE_ACCEPT_FORMATS, SUPPORTED_FILE_EXTS } from '@/services/constants';
+import { impactFeedback } from '@tauri-apps/plugin-haptics';
 
 import { useEnv } from '@/context/EnvContext';
 import { useAuth } from '@/context/AuthContext';
@@ -335,10 +336,16 @@ const LibraryPage = () => {
   };
 
   const handleToggleSelectMode = () => {
+    if (!isSelectMode && appService?.isMobile) {
+      impactFeedback('medium');
+    }
     setIsSelectMode(!isSelectMode);
   };
 
   const handleSetSelectMode = (selectMode: boolean) => {
+    if (selectMode && appService?.isMobile) {
+      impactFeedback('medium');
+    }
     setIsSelectMode(selectMode);
   };