feat: improve document list and self-hosting clarity

- Introduce a toggleable grid/list view for the document list, enhancing organization and display flexibility. This involved updates across `DocumentList`, `DocumentFolder`, `DocumentListItem`, and `SortControls`.
- Add a new `CodeBlock` component and integrate detailed Docker-based self-hosting instructions into the footer.
- Enhance privacy policy popover with clearer details on Deepinfra usage and strongly recommend self-hosting for secure experience.
- Implement conditional rendering and feature gating based on the `isDev` environment variable, differentiating features between the production demo and self-hosted instances. Affected components include `page.tsx`, `DocumentSettings.tsx`, `SettingsModal.tsx`, and `config.ts`.
- Clarify that advanced features like audiobook export and word-by-word highlighting via `whisper.cpp` are exclusive to self-hosted setups and are disabled in the demo.
- Expand the list of supported document types on the homepage to include MD and TXT.
- Integrate new `ListIcon`, `GridIcon`, and `CopyIcon` to support UI enhancements.
- Add a custom `xs` breakpoint in `tailwind.config.ts` for improved responsive design.

Author: richardr1126

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { HomeContent } from '@/components/HomeContent';
 import { SettingsModal } from '@/components/SettingsModal';
 
-// Home page redesigned for fullscreen layout: hero + document area.
+const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
 
 export default function Home() {
   return (
@@ -10,9 +10,9 @@ export default function Home() {
       <section className="px-4 pt-6 pb-4 md:pt-10 md:pb-6">
         <div className="max-w-5xl mx-auto">
           <h1 className="text-2xl md:text-3xl font-bold tracking-tight mb-2 text-foreground">OpenReader WebUI</h1>
-          <p className="text-sm leading-relaxed max-w-prose text-foreground">
-            Bring your own text-to-speech API.
-            <span className="block font-medium">Read & listen to PDF, EPUB & HTML documents with high quality voices.</span>
+          <p className="text-sm leading-relaxed max-w-[77ch] text-foreground">
+            Open source document reader web app {isDev ? 'self-hosted server' : 'demo'}.
+            <span className="block font-medium">Read & listen to PDF, EPUB, MD, and TXT documents with high quality text to speech voices.</span>
           </p>
         </div>
       </section>

src/components/CodeBlock.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useState } from 'react';
+import { CopyIcon, CheckIcon } from '@/components/icons/Icons';
+
+export function CodeBlock({ children }: { children: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group my-2">
+      <pre className="bg-background p-3 rounded-md overflow-x-auto text-xs text-left
+                      font-mono text-foreground border border-offbase">
+        <code>{children}</code>
+      </pre>
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded-md bg-base hover:bg-offbase hover:text-accent
+                  transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100
+                  hover:scale-[1.05]"
+        title="Copy to clipboard"
+      >
+        {copied ? <CheckIcon className="w-4 h-4" /> : <CopyIcon className="w-4 h-4" />}
+      </button>
+    </div>
+  );
+}

src/components/DocumentSettings.tsx

@@ -141,16 +141,18 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                 leaveTo="opacity-0 scale-95"
               >
                 <DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
-                  {isDev && !html && <div className="space-y-2 mb-4">
+                  {!html && <div className="space-y-2 mb-4">
                     <Button
                       type="button"
                       className="w-full inline-flex justify-center rounded-lg bg-accent px-3 py-1.5 text-sm
                                     font-medium text-background hover:bg-secondary-accent focus:outline-none 
                                     focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                    transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-background"
+                                    transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-background
+                                    disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-[1] disabled:hover:bg-accent"
                       onClick={() => setIsAudiobookModalOpen(true)}
+                      disabled={!isDev}
                     >
-                      Export Audiobook
+                      Export Audiobook {!isDev && '(requires self-hosted)'}
                     </Button>
                   </div>}
 
@@ -352,18 +354,18 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                             <input
                               type="checkbox"
                               checked={pdfWordHighlightEnabled && pdfHighlightEnabled}
-                              disabled={!pdfHighlightEnabled}
+                              disabled={!pdfHighlightEnabled || !isDev}
                               onChange={(e) =>
                                 updateConfigKey('pdfWordHighlightEnabled', e.target.checked)
                               }
-                              className="form-checkbox h-4 w-4 text-accent rounded border-muted disabled:opacity-50"
+                              className="form-checkbox h-4 w-4 text-accent rounded border-muted disabled:opacity-50 disabled:cursor-not-allowed"
                             />
                             <span className="text-sm font-medium text-foreground">
                               Word-by-word
                             </span>
                           </label>
                           <p className="text-sm text-muted pl-6">
-                            Highlight individual words using audio timestamps generated by whisper.cpp
+                            Highlight individual words using audio timestamps generated by whisper.cpp {!isDev && '(requires self-hosted)'}
                           </p>
                         </div>
                       </div>
@@ -389,18 +391,18 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                             <input
                               type="checkbox"
                               checked={epubWordHighlightEnabled && epubHighlightEnabled}
-                              disabled={!epubHighlightEnabled}
+                              disabled={!epubHighlightEnabled || !isDev}
                               onChange={(e) =>
                                 updateConfigKey('epubWordHighlightEnabled', e.target.checked)
                               }
-                              className="form-checkbox h-4 w-4 text-accent rounded border-muted disabled:opacity-50"
+                              className="form-checkbox h-4 w-4 text-accent rounded border-muted disabled:opacity-50 disabled:cursor-not-allowed"
                             />
                             <span className="text-sm font-medium text-foreground">
                               Word-by-word
                             </span>
                           </label>
                           <p className="text-sm text-muted pl-6">
-                            Highlight individual words using audio timestamps generated by whisper.cpp
+                            Highlight individual words using audio timestamps generated by whisper.cpp {!isDev && '(requires self-hosted)'}
                           </p>
                         </div>
                       </div>

src/components/EPUBViewer.tsx

@@ -156,18 +156,21 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
       {isTocOpen && tocRef.current && tocRef.current.length > 0 && (
         <div className="border-b border-offbase bg-background text-xs overflow-y-auto max-h-64 p-2">
           <div className="font-semibold text-muted pb-1">Skip to chapters</div>
-          <div className="flex flex-wrap gap-1">
+          <div className="flex flex-wrap gap-1 w-full">
             {tocRef.current.map((item, index) => (
               <button
                 key={`${item.href}-${index}`}
                 type="button"
                 onClick={() => {
-                  if (item.href) {
-                    handleLocationChanged(item.href);
-                  }
+                  if (item.href) handleLocationChanged(item.href);
                   setIsTocOpen(false);
                 }}
-                className="w-full px-2 py-1 rounded-md text-foreground text-center bg-base hover:bg-offbase hover:text-accent transition-colors duration-150"
+                className="
+                  px-2 py-1 rounded-md font-medium text-foreground text-center bg-base 
+                  hover:bg-offbase hover:text-accent transition-colors duration-150
+                  whitespace-nowrap 
+                  flex-1 min-w-[140px]
+                "
               >
                 {item.label}
               </button>

src/components/Footer.tsx

@@ -1,10 +1,14 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { GithubIcon } from '@/components/icons/Icons'
+import { CodeBlock } from '@/components/CodeBlock'
+
+const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
+
 
 export function Footer() {
   return (
-    <footer className="m-8 text-sm text-muted">
-      <div className="flex flex-col items-center space-y-2">
+    <footer className="m-8 mb-2 text-sm text-muted">
+      <div className="flex flex-col items-center space-y-4">
         <div className="flex flex-wrap sm:flex-nowrap items-center justify-center text-center sm:space-x-3">
           <a
             href="https://github.com/richardr1126/OpenReader-WebUI"
@@ -16,15 +20,16 @@ export function Footer() {
           </a>
           <span className='w-full sm:w-fit'>•</span>
           <Popover className="flex">
-            <PopoverButton className="hover:text-foreground transition-colors flex items-center gap-1">
+            <PopoverButton className="font-bold hover:text-foreground transition-colors outline-none flex items-center gap-1">
               Privacy info
             </PopoverButton>
-            <PopoverPanel anchor="top" className="bg-base p-4 rounded-lg shadow-lg w-64">
-              <p>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 Kokoro-FastAPI server for audio generation.</p>
-              <p className='mt-3'>The audio is streamed back to your browser and played in real-time.</p>
+            <PopoverPanel anchor="top" className="bg-base p-4 rounded-lg shadow-xl border border-offbase z-50">
+              <p className='max-w-xs'>Documents are uploaded to your local browser cache.</p>
+              <p className='mt-3 max-w-xs'>Each paragraph of the document you are viewing is sent to Deepinfra for audio generation through a Vercel backend proxy, containing a shared caching pool.</p>
+              <p className='mt-3 max-w-xs'>The audio is streamed back to your browser and played in real-time.</p>
+              <p className='mt-3 max-w-xs font-bold'><em>Self-hosting is the recommended way to use this app for a truly secure experience.</em></p>
               {/* Vercel analytics disclaimer */}
-              <p className='mt-3'>This site uses Vercel Analytics to collect anonymous usage data to help improve the service.</p>
+              <p className='mt-3 max-w-xs'>This site uses Vercel Analytics to collect anonymous usage data to help improve the service.</p>
             </PopoverPanel>
           </Popover>
           <span className='w-full sm:w-fit'>•</span>
@@ -34,7 +39,7 @@ export function Footer() {
               href="https://huggingface.co/hexgrad/Kokoro-82M"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-bold hover:text-foreground transition-colors"
+              className="font-bold hover:text-foreground transition-colors underline decoration-dotted underline-offset-4"
             >
               hexgrad/Kokoro-82M
             </a>
@@ -43,12 +48,66 @@ export function Footer() {
               href="https://deepinfra.com/models?type=text-to-speech"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-bold hover:text-foreground transition-colors"
+              className="font-bold hover:text-foreground transition-colors underline decoration-dotted underline-offset-4"
             >
               Deepinfra
             </a>
           </span>
         </div>
+        <div className='font-medium text-center flex items-center justify-center gap-1'>
+          <span>This is a demo app (</span>
+          <Popover className="relative">
+            <PopoverButton className="font-bold hover:text-foreground transition-colors outline-none">
+              self-host
+            </PopoverButton>
+            <PopoverPanel anchor="top" className="bg-base p-6 rounded-xl shadow-2xl border border-offbase w-[90vw] max-w-3xl z-50 backdrop-blur-md flex flex-col gap-4">
+              <div className="space-y-4 font-medium">
+                <h3 className="text-lg font-bold text-foreground">Self-Hosting Instructions</h3>
+
+                <div>
+                  <p className="mb-2 font-medium">
+                    1. Start the <a href="https://github.com/remsky/Kokoro-FastAPI" target="_blank" rel="noopener noreferrer" className="text-muted hover:text-foreground underline decoration-dotted underline-offset-4">Kokoro-FastAPI</a> container
+                  </p>
+                  <CodeBlock>
+  {
+  `docker run -d \\
+  --name kokoro-tts \\
+  --restart unless-stopped \\
+  -p 8880:8880 \\
+  -e ONNX_NUM_THREADS=8 \\
+  -e ONNX_INTER_OP_THREADS=4 \\
+  -e ONNX_EXECUTION_MODE=parallel \\
+  -e ONNX_OPTIMIZATION_LEVEL=all \\
+  -e ONNX_MEMORY_PATTERN=true \\
+  -e ONNX_ARENA_EXTEND_STRATEGY=kNextPowerOfTwo \\
+  -e API_LOG_LEVEL=DEBUG \\
+  ghcr.io/remsky/kokoro-fastapi-cpu:v0.2.4`
+  }
+                  </CodeBlock>
+                </div>
+
+                <div>
+                  <p className="mb-2 text-foreground font-medium">2. Start OpenReader WebUI container</p>
+                  <CodeBlock>
+{
+`docker run --name openreader-webui --rm \\
+-e API_BASE=http://kokoro-tts:8880/v1 \\
+-p 3003:3003 \\
+-v openreader_docstore:/app/docstore \\
+ghcr.io/richardr1126/openreader-webui:latest`
+}
+                  </CodeBlock>
+                </div>
+
+                <p>
+                  Visit <a href="http://localhost:3003" target="_blank" rel="noopener noreferrer" className="text-muted hover:text-foreground transition-colors underline decoration-dotted underline-offset-4">http://localhost:3003</a> to run the app and set your settings.
+                  {' '}See the <a href="https://github.com/richardr1126/OpenReader-WebUI#readme" target="_blank" rel="noopener noreferrer" className="text-muted hover:text-foreground transition-colors underline decoration-dotted underline-offset-4">README</a> for more details.
+                </p>
+              </div>
+            </PopoverPanel>
+          </Popover>
+          <span> for full functionality)</span>
+        </div>
       </div>
     </footer>
   )

src/components/SettingsModal.tsx

@@ -400,7 +400,7 @@ export function SettingsModal() {
                               type="password"
                               value={localApiKey}
                               onChange={(e) => handleInputChange('apiKey', e.target.value)}
-                              placeholder={!isDev && localTTSProvider === 'deepinfra' ? "Deepinfra free or override apikey" : "Using environment variable"}
+                              placeholder={!isDev && localTTSProvider === 'deepinfra' ? "Deepinfra free or use your API key" : "Using environment variable"}
                               className="w-full rounded-lg bg-background py-1.5 px-3 text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent"
                             />
                           </div>

src/components/doclist/DocumentFolder.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, DragEvent } from 'react';
 import { Button, Transition } from '@headlessui/react';
 import { DocumentListItem } from './DocumentListItem';
@@ -16,6 +14,7 @@ interface DocumentFolderProps {
   onDragStart: (doc: DocumentListDocument) => void;
   onDragEnd: () => void;
   onDrop: (e: DragEvent, folderId: string) => void;
+  viewMode: 'list' | 'grid';
 }
 
 const ChevronIcon = ({ className = "w-4 h-4" }) => (
@@ -39,6 +38,7 @@ export function DocumentFolder({
   onDragStart,
   onDragEnd,
   onDrop,
+  viewMode,
 }: DocumentFolderProps) {
   const [isHovering, setIsHovering] = useState(false);
   const isDropTarget = isHovering && draggedDoc && !draggedDoc.folderId && draggedDoc.id !== folder.id;
@@ -64,7 +64,7 @@ export function DocumentFolder({
         if (!draggedDoc || draggedDoc.folderId) return;
         onDrop(e, folder.id);
       }}
-      className={`overflow-hidden rounded-md border border-offbase ${isDropTarget ? 'ring-2 ring-accent' : ''}`}
+      className={`w-full overflow-hidden rounded-md border border-offbase ${isDropTarget ? 'ring-2 ring-accent' : ''}`}
     >
       <div className='flex flex-row justify-between p-0'>
         <div className="w-full">
@@ -104,7 +104,7 @@ export function DocumentFolder({
               leaveFrom="transform scale-y-100 opacity-100 max-h-[1000px]"
               leaveTo="transform scale-y-0 opacity-0 max-h-0"
             >
-              <div id={`folder-panel-${folder.id}`} className="space-y-1 origin-top">
+              <div id={`folder-panel-${folder.id}`} className={`${viewMode === 'grid' ? "flex flex-wrap gap-1" : "space-y-1"} w-full origin-top`}>
                 {sortedDocuments.map(doc => (
                   <DocumentListItem
                     key={`${doc.type}-${doc.id}`}
@@ -114,6 +114,7 @@ export function DocumentFolder({
                     onDragStart={onDragStart}
                     onDragEnd={onDragEnd}
                     isDropTarget={false}
+                    viewMode={viewMode}
                   />
                 ))}
               </div>