From e8922d6acf0eba0d1d2bbdadcc9b20351d3323ae Mon Sep 17 00:00:00 2001
From: Richard Roberson <me@richardr.dev>
Date: Sun, 26 Jan 2025 19:31:05 -0700
Subject: [PATCH] Add footer

---
 src/app/layout.tsx                      |  2 ++
 src/app/page.tsx                        |  2 +-
 src/components/Footer.tsx               | 42 +++++++++++++++++++++++++
 src/components/PDFUploader.tsx          | 20 +++---------
 src/components/icons/Icons.tsx          | 29 +++++++++++------
 src/components/player/SpeedControl.tsx  |  3 +-
 src/components/player/TTSPlayer.tsx     |  6 ++--
 src/components/player/VoicesControl.tsx |  3 +-
 8 files changed, 72 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5d5c25c..e8d9541 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import { Providers } from "./providers";
 import { Metadata } from "next";
 import Script from "next/script";
+import { Footer } from "@/components/Footer";
 
 export const metadata: Metadata = {
   title: "OpenReader WebUI",
@@ -30,6 +31,7 @@ export default function RootLayout({
               <div className="bg-base rounded-lg shadow-lg">
                 {children}
               </div>
+              <Footer />
             </div>
           </div>
         </Providers>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1ea0ce0..9cdf1bb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,7 +12,7 @@ export default function Home() {
   return (
     <div className='p-4'>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold text-center flex-grow">OpenReader WebUI</h1>
+        <h1 className="text-xl font-bold text-center flex-grow">OpenReader WebUI</h1>
         <button
           onClick={() => setIsSettingsOpen(true)}
           className="rounded-full p-2.5 text-foreground hover:bg-base focus:bg-base 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..2bed909
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,42 @@
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+
+export function Footer() {
+  return (
+    <footer className="m-8 text-sm text-muted">
+      <div className="flex flex-col items-center space-y-2">
+        <div className="flex space-x-3">
+          <Popover className="relative">
+            <PopoverButton className="hover:text-foreground transition-colors">
+              Privacy info
+            </PopoverButton>
+            <PopoverPanel className="absolute bottom-8 bg-base p-4 rounded-lg shadow-lg w-64">
+              <p>No data collection. Documents are uploaded to your local browser cache.</p>
+              <p className='mt-3'>Each sentence of the document you are viewing is sent to my FastAPI server for audio generation, no requests or data is collected.</p>
+            </PopoverPanel>
+          </Popover>
+          <span>•</span>
+          <span>
+            Powered by{' '}
+            <a
+              href="https://huggingface.co/hexgrad/Kokoro-82M"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold hover:text-foreground transition-colors"
+            >
+              hexgrad/Kokoro-82M
+            </a>
+            {' '}and{' '}
+            <a
+              href="https://github.com/remsky/Kokoro-FastAPI/tree/master"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold hover:text-foreground transition-colors"
+            >
+              Kokoro-FastAPI
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/PDFUploader.tsx b/src/components/PDFUploader.tsx
index 4903abf..441b65f 100644
--- a/src/components/PDFUploader.tsx
+++ b/src/components/PDFUploader.tsx
@@ -3,6 +3,7 @@
 import { useState, useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { usePDF } from '@/contexts/PDFContext';
+import { UploadIcon } from '@/components/icons/Icons';
 
 interface PDFUploaderProps {
   className?: string;
@@ -42,7 +43,7 @@ export function PDFUploader({ className = '' }: PDFUploaderProps) {
     <div
       {...getRootProps()}
       className={`
-        w-full p-8 border-2 border-dashed rounded-lg
+        w-full py-5 px-3 border-2 border-dashed rounded-lg
         ${isDragActive ? 'border-accent bg-base' : 'border-muted'}
         transition-colors duration-200 ease-in-out
         ${isUploading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:border-accent hover:bg-base'}
@@ -51,20 +52,7 @@ export function PDFUploader({ className = '' }: PDFUploaderProps) {
     >
       <input {...getInputProps()} />
       <div className="flex flex-col items-center justify-center text-center">
-        <svg
-          className="w-12 h-12 mb-4 text-muted"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-          />
-        </svg>
+        <UploadIcon className="w-10 h-10 mb-2 text-muted" />
 
         {isUploading ? (
           <p className="text-lg font-semibold text-foreground">
@@ -76,7 +64,7 @@ export function PDFUploader({ className = '' }: PDFUploaderProps) {
               {isDragActive ? 'Drop your PDF here' : 'Drop your PDF here, or click to select'}
             </p>
             <p className="text-sm text-muted">
-              Only PDF files are accepted
+              Only PDF files are currently accepted
             </p>
             {error && <p className="mt-2 text-sm text-red-500">{error}</p>}
           </>
diff --git a/src/components/icons/Icons.tsx b/src/components/icons/Icons.tsx
index f7ae714..2e12e13 100644
--- a/src/components/icons/Icons.tsx
+++ b/src/components/icons/Icons.tsx
@@ -140,16 +140,7 @@ export function SettingsIcon(props: React.SVGProps<SVGSVGElement>) {
       className={props.className || "w-6 h-6"}
       {...props}
     >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
-      />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224ZM12.5 15C14.1695 15 15.5228 13.6569 15.5228 12C15.5228 10.3431 14.1695 9 12.5 9C10.8305 9 9.47716 10.3431 9.47716 12C9.47716 13.6569 10.8305 15 12.5 15Z"/>
     </svg>
   );
 }
@@ -173,3 +164,21 @@ export function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
+
+export function UploadIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="none"
+      className={props.className}
+      width={props.width || "1.5em"}
+      height={props.height || "1.5em"}
+      {...props}
+    >
+      <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" />
+      <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"/>
+    </svg>
+  );
+}
diff --git a/src/components/player/SpeedControl.tsx b/src/components/player/SpeedControl.tsx
index a76de72..fd85f28 100644
--- a/src/components/player/SpeedControl.tsx
+++ b/src/components/player/SpeedControl.tsx
@@ -19,8 +19,7 @@ const speedOptions = [
   { value: 3, label: '3x' },
 ];
 
-export const SpeedControl = ({ speed, setSpeedAndRestart }: {
-  speed: number;
+export const SpeedControl = ({ setSpeedAndRestart }: {
   setSpeedAndRestart: (speed: number) => void;
 }) => {
   const { voiceSpeed } = useConfig();
diff --git a/src/components/player/TTSPlayer.tsx b/src/components/player/TTSPlayer.tsx
index 64c7844..334d420 100644
--- a/src/components/player/TTSPlayer.tsx
+++ b/src/components/player/TTSPlayer.tsx
@@ -23,9 +23,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
     skipForward,
     skipBackward,
     isProcessing,
-    speed,
     setSpeedAndRestart,
-    voice,
     setVoiceAndRestart,
     availableVoices,
     skipToPage,
@@ -35,7 +33,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
     <div className={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 transition-opacity duration-300`}>
       <div className="bg-base dark:bg-base rounded-full shadow-lg px-4 py-1 flex items-center space-x-1 relative">
         {/* Speed control */}
-        <SpeedControl speed={speed} setSpeedAndRestart={setSpeedAndRestart} />
+        <SpeedControl setSpeedAndRestart={setSpeedAndRestart} />
 
         {/* Page Navigation */}
         <Navigator currentPage={currentPage} numPages={numPages} skipToPage={skipToPage} />
@@ -68,7 +66,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
         </Button>
 
         {/* Voice control */}
-        <VoicesControl voice={voice} availableVoices={availableVoices} setVoiceAndRestart={setVoiceAndRestart} />
+        <VoicesControl availableVoices={availableVoices} setVoiceAndRestart={setVoiceAndRestart} />
       </div>
     </div>
   );
diff --git a/src/components/player/VoicesControl.tsx b/src/components/player/VoicesControl.tsx
index 39bb7fa..71817cc 100644
--- a/src/components/player/VoicesControl.tsx
+++ b/src/components/player/VoicesControl.tsx
@@ -7,8 +7,7 @@ import {
 import { ChevronUpDownIcon } from '@/components/icons/Icons';
 import { useConfig } from '@/contexts/ConfigContext';
 
-export const VoicesControl = ({ voice, availableVoices, setVoiceAndRestart }: {
-  voice: string;
+export const VoicesControl = ({ availableVoices, setVoiceAndRestart }: {
   availableVoices: string[];
   setVoiceAndRestart: (voice: string) => void;
 }) => {