Bug fixing

Author: analystsandeep

src/App.tsx

@@ -656,6 +656,7 @@ export default function App() {
             blurMode={blurMode}
             onBlurModeToggle={handleBlurModeToggle}
             onOpenDrawer={() => setIsDrawerOpen(true)}
+            isMobile={isMobile}
           />
         )}
 

src/components/PlaybackDock.tsx

@@ -25,6 +25,7 @@ interface PlaybackDockProps {
     blurMode: boolean;
     onBlurModeToggle: () => void;
     onOpenDrawer: () => void;
+    isMobile: boolean;
 }
 
 const SPEED_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3];
@@ -44,6 +45,7 @@ export default function PlaybackDock({
     blurMode,
     onBlurModeToggle,
     onOpenDrawer,
+    isMobile,
 }: PlaybackDockProps) {
     const isPlaying = status === 'playing';
     const isPaused = status === 'paused';
@@ -322,8 +324,12 @@ export default function PlaybackDock({
                         </button>
                     </div>
 
-                    {/* Focus mode toggle */}
-                    <div className="tooltip-wrapper" data-tooltip={blurMode ? 'Focus: On' : 'Focus: Off'}>
+                    {/* Focus mode toggle — Hide on mobile/tablet */}
+                    <div
+                        className="tooltip-wrapper"
+                        data-tooltip={blurMode ? 'Focus: On' : 'Focus: Off'}
+                        style={{ display: isMobile ? 'none' : 'block' }}
+                    >
                         <button
                             onClick={onBlurModeToggle}
                             aria-label={blurMode ? 'Disable focus mode' : 'Enable focus mode'}

src/components/VoicePicker.tsx

@@ -397,10 +397,14 @@ export default function VoicePicker({
               role="option"
               aria-selected={isSelected}
               tabIndex={0}
-              onClick={() => onSelectVoice(voiceInfo)}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectVoice(voiceInfo);
+              }}
               onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
+                  e.stopPropagation();
                   onSelectVoice(voiceInfo);
                 }
               }}

src/hooks/useTheme.ts

@@ -18,7 +18,7 @@ const STORAGE_KEY = 'pdf-tts-theme';
  */
 function getSystemTheme(): Theme {
   if (typeof window === 'undefined') return 'light';
-  
+
   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
   return prefersDark ? 'dark' : 'light';
 }
@@ -35,7 +35,7 @@ function loadSavedTheme(): Theme {
   } catch {
     // localStorage might not be available
   }
-  return getSystemTheme();
+  return 'dark'; // Default to dark mode for all users
 }
 
 /**
@@ -45,15 +45,15 @@ function loadSavedTheme(): Theme {
 function applyTheme(theme: Theme): void {
   const root = document.documentElement;
   root.setAttribute('data-theme', theme);
-  
+
   // Also update meta theme-color for mobile browsers
   const metaThemeColor = document.querySelector('meta[name="theme-color"]');
   const colors: Record<Theme, string> = {
     light: '#ffffff',
     dark: '#0f0f23',
     sepia: '#f5f0e8',
   };
-  
+
   if (metaThemeColor) {
     metaThemeColor.setAttribute('content', colors[theme]);
   }
@@ -103,7 +103,7 @@ export function useTheme() {
   // Listen for system theme changes (if user hasn't manually set one)
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    
+
     const handleChange = () => {
       // Only auto-switch if user hasn't manually saved a preference
       const saved = localStorage.getItem(STORAGE_KEY);
@@ -137,13 +137,13 @@ export function useTheme() {
       const currentIndex = THEME_CYCLE.indexOf(current);
       const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
       const nextTheme = THEME_CYCLE[nextIndex];
-      
+
       try {
         localStorage.setItem(STORAGE_KEY, nextTheme);
       } catch {
         // Ignore storage errors
       }
-      
+
       return nextTheme;
     });
   }, []);