fix: add titles for pages

frontend/src/Components/TitleManager.tsx

@@ -0,0 +1,48 @@
+import { useMatches, useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import { TitleHandler } from '@/common';
+
+export function TitleManager() {
+    const matches = useMatches();
+    const location = useLocation();
+
+    useEffect(() => {
+        const updateTitle = () => {
+            const isLibraryViewer =
+                location.pathname.includes('/viewer/libraries/');
+
+            if (isLibraryViewer) {
+                setTimeout(() => {
+                    const titleInterval = setInterval(() => {
+                        const libraryViewer = document.getElementById(
+                            'library-viewer-iframe'
+                        ) as HTMLIFrameElement;
+                        if (libraryViewer?.contentWindow?.document) {
+                            const iframeTitle =
+                                libraryViewer.contentWindow.document.title;
+                            if (iframeTitle) {
+                                document.title = iframeTitle + ' - UnlockEd';
+                            }
+                        }
+                    }, 1000);
+
+                    return () => clearInterval(titleInterval);
+                }, 5000);
+                return;
+            }
+
+            const activeHandle = matches
+                .filter((match) =>
+                    Boolean((match.handle as TitleHandler)?.title)
+                )
+                .pop();
+            const title =
+                (activeHandle?.handle as TitleHandler)?.title ?? 'UnlockEd';
+            document.title = title + ' - UnlockEd';
+        };
+
+        updateTitle();
+    }, [matches, location.pathname]);
+
+    return null;
+}

frontend/src/Pages/LibraryViewer.tsx

@@ -58,9 +58,9 @@ export default function LibraryViewer() {
                         </div>
                     ) : src != '' ? (
                         <iframe
-                            sandbox="allow-scripts allow-same-origin"
+                            sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
                             className="w-full h-screen pt-4"
-                            id="library-viewer"
+                            id="library-viewer-iframe"
                             src={src}
                         />
                     ) : (

frontend/src/app.tsx

@@ -59,12 +59,14 @@ import StudentLayer0 from './Pages/StudentLayer0.tsx';
 import StudentLayer2 from './Pages/StudentDashboard.tsx';
 import AdminLayer1 from './Pages/AdminLayer1.tsx';
 import HelpfulLinks from './Pages/HelpfulLinks.tsx';
+import { TitleManager } from './Components/TitleManager.tsx';
 
 const WithAuth: React.FC = () => {
     return (
         <AuthProvider>
             <ToastProvider>
                 <PathValueProvider>
+                    <TitleManager />
                     <Outlet />
                 </PathValueProvider>
             </ToastProvider>
@@ -104,6 +106,7 @@ function WithAdmin() {
             <ToastProvider>
                 <PathValueProvider>
                     <AdminOnly>
+                        <TitleManager />
                         <Outlet />
                     </AdminOnly>
                 </PathValueProvider>

frontend/src/common.ts

@@ -854,3 +854,7 @@ export interface OpenContentItem {
     provider_name?: string;
     channel_title?: string;
 }
+export interface TitleHandler {
+    title: string;
+    path?: string[];
+}