Apple web app capable changes

Author: richardr1126

public/web-app-manifest-192x192.png

@@ -6,6 +6,10 @@ import Script from "next/script";
 export const metadata: Metadata = {
   title: "OpenReader WebUI",
   description: "A modern web interface for reading and managing documents",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+  }
 };
 
 export default function RootLayout({

public/web-app-manifest-512x512.png

@@ -0,0 +1,19 @@
+{
+  "name": "OpenReader WebUI",
+  "short_name": "OpenReader",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "display": "standalone"
+}

src/app/apple-icon.png

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { PDFSkeleton } from '@/components/PDFSkeleton';
 import { useTTS } from '@/contexts/TTSContext';
+import { Button } from '@headlessui/react';
 
 // Dynamic import for client-side rendering only
 const PDFViewer = dynamic(
@@ -83,24 +84,24 @@ export default function PDFViewerPage() {
               Documents
             </Link>
             <div className="bg-offbase px-2 py-0.5 rounded-full flex items-center gap-2">
-              <button
+              <Button
                 onClick={handleZoomOut}
                 className="text-xs hover:text-accent transition-colors"
                 aria-label="Zoom out"
               >
                 －
-              </button>
+              </Button>
               <span className="text-xs">{zoomLevel}%</span>
-              <button
+              <Button
                 onClick={handleZoomIn}
                 className="text-xs hover:text-accent transition-colors"
                 aria-label="Zoom in"
               >
                 ＋
-              </button>
+              </Button>
             </div>
           </div>
-          <h1 className="mr-2 text-md font-semibold text-foreground">
+          <h1 className="mr-2 text-md font-semibold text-foreground truncate">
             {isLoading ? 'Loading...' : currDocName}
           </h1>
         </div>

src/app/favicon.ico

@@ -242,15 +242,9 @@ export function TTSProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     if ('mediaSession' in navigator) {
       navigator.mediaSession.metadata = new MediaMetadata({
-        title: 'Text to Speech',
+        title: 'Text-to-Speech',
         artist: 'OpenReader WebUI',
-        album: 'Current Reading',
-        artwork: [
-          {
-            src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
-            type: 'image/png',
-          },
-        ],
+        album: 'Current Document',
       });
 
       navigator.mediaSession.setActionHandler('play', () => togglePlay());