Cleanup imports and ssr cabable components

richardr1126 · Feb 13, 2025 · bc790df · bc790df
1 parent 1d418e1
commit bc790df
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 57 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./globals.css";
-import { Providers } from "./providers";
+import { ReactNode } from "react";
+import { Providers } from "@/app/providers";
 import { Metadata } from "next";
 import Script from "next/script";
 import { Footer } from "@/components/Footer";
@@ -48,12 +49,7 @@ export const metadata: Metadata = {
 const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
 //const isDev = false;
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,32 +1,17 @@
-'use client';
-
-import { useState } from 'react';
 import { DocumentUploader } from '@/components/DocumentUploader';
 import { DocumentList } from '@/components/DocumentList';
 import { SettingsModal } from '@/components/SettingsModal';
-import { SettingsIcon } from '@/components/icons/Icons';
-import { Button } from '@headlessui/react';
 
 export default function Home() {
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
   return (
     <div className='p-3.5 sm:p-5'>
-      <Button
-        onClick={() => setIsSettingsOpen(true)}
-        className="rounded-full p-2 text-foreground hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.1] hover:text-accent absolute top-1 left-1 sm:top-3 sm:left-3"
-        aria-label="Settings"
-        tabIndex={0}
-      >
-        <SettingsIcon className="w-4 h-4 sm:w-5 sm:h-5 hover:animate-spin-slow" />
-      </Button>
+      <SettingsModal />
       <h1 className="text-xl font-bold text-center flex-grow">OpenReader WebUI</h1>
       <p className="text-sm mt-1 text-center text-muted mb-5">A bring your own text-to-speech api web interface for reading documents with high quality voices</p>
       <div className="flex flex-col items-center gap-5">
         <DocumentUploader className='max-w-xl' />
         <DocumentList />
       </div>
-      <SettingsModal isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
     </div>
   );
 }
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { Fragment, useEffect } from 'react';
+import { Fragment, KeyboardEvent } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 
 interface ConfirmDialogProps {
@@ -24,23 +22,21 @@ export function ConfirmDialog({
   cancelText = 'Cancel',
   isDangerous = false,
 }: ConfirmDialogProps) {
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onConfirm();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, onConfirm]);
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onConfirm();
+    }
+  };
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={onClose}>
+      <Dialog 
+        as="div" 
+        className="relative z-50" 
+        onClose={onClose}
+        onKeyDown={handleKeyDown}
+      >
         <TransitionChild
           as={Fragment}
           enter="ease-out duration-300"

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
@@ -4,7 +4,7 @@ import { Fragment, useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useConfig } from '@/contexts/ConfigContext';
-import { ChevronUpDownIcon, CheckIcon } from './icons/Icons';
+import { ChevronUpDownIcon, CheckIcon, SettingsIcon } from '@/components/icons/Icons';
 import { indexedDBService } from '@/utils/indexedDB';
 import { useDocuments } from '@/contexts/DocumentContext';
 import { setItem, getItem } from '@/utils/indexedDB';
@@ -13,17 +13,14 @@ import { THEMES } from '@/contexts/ThemeContext';
 
 const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
 
-interface SettingsModalProps {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-}
-
 const themes = THEMES.map(id => ({
   id,
   name: id.charAt(0).toUpperCase() + id.slice(1)
 }));
 
-export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
+export function SettingsModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
   const { theme, setTheme } = useTheme();
   const { apiKey, baseUrl, updateConfig } = useConfig();
   const { refreshPDFs, refreshEPUBs, clearPDFs, clearEPUBs } = useDocuments();
@@ -95,7 +92,14 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
   };
 
   return (
-    <>
+    <Button
+      onClick={() => setIsOpen(true)}
+      className="rounded-full p-2 text-foreground hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.1] hover:text-accent absolute top-1 left-1 sm:top-3 sm:left-3"
+      aria-label="Settings"
+      tabIndex={0}
+    >
+      <SettingsIcon className="w-4 h-4 sm:w-5 sm:h-5 hover:animate-spin-slow" />
+
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
           <TransitionChild
@@ -306,6 +310,6 @@ export function SettingsModal({ isOpen, setIsOpen }: SettingsModalProps) {
         confirmText="Delete"
         isDangerous={true}
       />
-    </>
+    </Button>
   );
 }
diff --git a/src/contexts/ConfigContext.tsx b/src/contexts/ConfigContext.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { getItem, indexedDBService, setItem } from '@/utils/indexedDB';
 
 export type ViewType = 'single' | 'dual' | 'scroll';
@@ -29,7 +29,7 @@ type ConfigValues = {
 
 const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
 
-export function ConfigProvider({ children }: { children: React.ReactNode }) {
+export function ConfigProvider({ children }: { children: ReactNode }) {
   // Config state
   const [apiKey, setApiKey] = useState<string>('');
   const [baseUrl, setBaseUrl] = useState<string>('');

diff --git a/src/contexts/PDFContext.tsx b/src/contexts/PDFContext.tsx
@@ -21,6 +21,7 @@ import {
   useEffect,
   useCallback,
   useMemo,
+  RefObject,
 } from 'react';
 
 import { indexedDBService } from '@/utils/indexedDB';
@@ -51,12 +52,12 @@ interface PDFContextType {
 
   // PDF functionality
   onDocumentLoadSuccess: (pdf: PDFDocumentProxy) => void;
-  highlightPattern: (text: string, pattern: string, containerRef: React.RefObject<HTMLDivElement>) => void;
+  highlightPattern: (text: string, pattern: string, containerRef: RefObject<HTMLDivElement>) => void;
   clearHighlights: () => void;
   handleTextClick: (
     event: MouseEvent,
     pdfText: string,
-    containerRef: React.RefObject<HTMLDivElement>,
+    containerRef: RefObject<HTMLDivElement>,
     stopAndPlayFromIndex: (index: number) => void,
     isProcessing: boolean
   ) => void;

diff --git a/src/contexts/TTSContext.tsx b/src/contexts/TTSContext.tsx
@@ -14,14 +14,15 @@
 
 'use client';
 
-import React, {
+import {
   createContext,
   useContext,
   useState,
   useCallback,
   useEffect,
   useRef,
   useMemo,
+  ReactNode,
 } from 'react';
 import OpenAI from 'openai';
 import { Howl } from 'howler';
@@ -84,7 +85,7 @@ const TTSContext = createContext<TTSContextType | undefined>(undefined);
  * Main provider component that manages the TTS state and functionality.
  * Handles initialization of OpenAI client, audio context, and media session.
  */
-export function TTSProvider({ children }: { children: React.ReactNode }) {
+export function TTSProvider({ children }: { children: ReactNode }) {
   // Configuration context consumption
   const { 
     apiKey: openApiKey, 

diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 
 const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
 type Theme = (typeof THEMES)[number];
@@ -24,7 +24,7 @@ const getEffectiveTheme = (theme: Theme): Theme => {
   return theme;
 };
 
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
+export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => {
     if (typeof window === 'undefined') return 'system';
     return (localStorage.getItem('theme') as Theme) || 'system';