feat(client): add logs modal and search hotkeys, increase timeouts

Author: debba

client/src/App.tsx

@@ -14,6 +14,7 @@ import api from "./utils/api";
 import storage from "./utils/storage";
 import BookView from "./components/BookView";
 import WelcomeModal from "./components/WelcomeModal";
+import LogsModal from "./components/LogsModal";
 
 const useMemoryRouter =
   import.meta.env.VITE_REACT_APP_USE_MEMORY_ROUTER === "true";
@@ -25,6 +26,7 @@ function App() {
   const [isLoading, setIsLoading] = useState(true);
   const [triggerLogout, setTriggerLogout] = useState(false);
   const [showWelcomeModal, setShowWelcomeModal] = useState(false);
+  const [showLogsModal, setShowLogsModal] = useState(false);
   const [sessionExpired, setSessionExpired] = useState(false);
 
   useEffect(() => {
@@ -36,6 +38,15 @@ function App() {
         setTriggerLogout(true);
       });
     }
+
+    // Keyboard shortcut Ctrl+Alt+D to open logs modal
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === 'd') {
+        setShowLogsModal(true);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
 
   useEffect(() => {
@@ -178,6 +189,10 @@ function App() {
             onClose={handleWelcomeClose}
           />
         )}
+        <LogsModal
+          isOpen={showLogsModal}
+          onClose={() => setShowLogsModal(false)}
+        />
       </div>
     </Router>
   );

client/src/components/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import api from '../utils/api';
@@ -23,18 +23,36 @@ function Dashboard({onLogout, triggerLogout, setTriggerLogout}: DashboardProps)
     const [, setCurrentBook] = useState<BookShelfEntity | null>(null);
     const [filterStatus, setFilterStatus] = useState(-1)
     const [filteredBooks, setFilteredBooks] = useState<BookShelfEntity[]>([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const searchInputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         loadBookshelf();
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                searchInputRef.current?.focus();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, []);
 
     useEffect(() => {
         if (books.length === 0) return;
         let _filterStatus = filterStatus === -1 ? [1,2] : [filterStatus];
-        setFilteredBooks(
-            books.filter(book => _filterStatus.includes(+book.status))
-        );
-    }, [filterStatus, books])
+        let result = books.filter(book => _filterStatus.includes(+book.status));
+        if (searchQuery.trim()) {
+            const q = searchQuery.toLowerCase();
+            result = result.filter(book =>
+                book.book?.name?.toLowerCase().includes(q) ||
+                book.book?.authorsAsString?.toLowerCase().includes(q) ||
+                book.abook?.narratorAsString?.toLowerCase().includes(q)
+            );
+        }
+        setFilteredBooks(result);
+    }, [filterStatus, books, searchQuery])
 
     const loadBookshelf = async () => {
         try {
@@ -88,6 +106,27 @@ function Dashboard({onLogout, triggerLogout, setTriggerLogout}: DashboardProps)
                     </div>
                 ) : (
                     <>
+                        <div className="relative mb-4">
+                            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+                            </svg>
+                            <input
+                                ref={searchInputRef}
+                                type="text"
+                                value={searchQuery}
+                                onChange={e => setSearchQuery(e.target.value)}
+                                placeholder={t('dashboard.search')}
+                                className="w-full bg-gray-900 border border-gray-700 text-white placeholder-gray-500 rounded-lg pl-10 pr-10 py-2 text-sm focus:outline-none focus:border-gray-500"
+                            />
+                            {searchQuery && (
+                                <button
+                                    onClick={() => setSearchQuery('')}
+                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
+                                >
+                                    ×
+                                </button>
+                            )}
+                        </div>
 
                         <div className="flex flex-wrap gap-3 mb-6">
                             { filterStatus !== -1 && (

client/src/types/window.d.ts

@@ -22,6 +22,7 @@ declare global {
     };
     electronLogs?: {
       openLogsFolder: () => Promise<void>;
+      onOpenLogsModal: (callback: () => void) => void;
     };
     electronWindow?: {
       setAlwaysOnTop: (alwaysOnTop: boolean) => Promise<void>;

client/src/utils/api.ts

@@ -10,7 +10,7 @@ declare global {
 const axiosApi = axios.create({
     baseURL: `${import.meta.env.VITE_BACKEND_API_URL}/api`, // o la tua baseURL reale
     withCredentials: true,
-    timeout: 15000
+    timeout: 30000
 });
 
 axiosApi.interceptors.request.use(async (config) => {

server/storytelApi.ts

@@ -35,7 +35,7 @@ class StorytelClient {
       validateStatus: function (status) {
         return status < 400;
       },
-      timeout: 15000,
+      timeout: 30000,
       params: {
         version: "25.38.0",
       },

src/main.ts

@@ -40,6 +40,7 @@ async function initialize(): Promise<void> {
 
     ipcManager = new IpcManager(serverManager, trayManager, windowManager);
     ipcManager.setupHandlers();
+
     // Initialize auto-updater
     updaterManager = new UpdaterManager(mainWindow, isDev);
     updaterManager.initialize();

src/preload.ts

@@ -44,6 +44,9 @@ contextBridge.exposeInMainWorld('trayControls', {
 // Logs API
 contextBridge.exposeInMainWorld('electronLogs', {
   openLogsFolder: (): Promise<void> => ipcRenderer.invoke('open-logs-folder'),
+  onOpenLogsModal: (callback: () => void): void => {
+    ipcRenderer.on('open-logs-modal', callback);
+  },
 });
 
 // Electron API