js -> ts

src/components/AppLayout.tsx

@@ -46,7 +46,8 @@ export interface RootProps {
 
 export default function Root({ child, user = undefined, ...props }: RootProps): React.ReactElement {
   window.toast = toast;
-  const theme = document.documentElement.getAttribute("data-theme")
+  const theme = document.documentElement.getAttribute("data-theme") ?? null;
+  const toastTheme = theme ?? undefined;
   const loggedIn = props.loggedIn ?? Boolean(user);
   usePrimeReactThemeSwitcher(theme);
   // Avoid adding the Player island for subsite requests. We expose a
@@ -81,7 +82,7 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
     let mounted = true;
     if (wantPlayer) {
       if (import.meta.env.DEV) { try { console.debug('[AppLayout] dynamic-import: requesting AudioPlayer'); } catch (e) { } }
-      import('./AudioPlayer.jsx')
+      import('./Radio.js')
         .then((mod) => {
           if (!mounted) return;
           // set the component factory
@@ -102,7 +103,7 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
   return (
     <PrimeReactProvider>
       <CustomToastContainer
-        theme={theme}
+        theme={toastTheme}
         newestOnTop={true}
         closeOnClick={true} />
       <JoyUIRootIsland>
@@ -114,22 +115,22 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
           Work in progress... bugs are to be expected.
         </Alert> */}
         {child == "LoginPage" && (<LoginPage {...props} loggedIn={loggedIn} />)}
-        {child == "LyricSearch" && (<LyricSearch {...props} client:only="react" />)}
+        {child == "LyricSearch" && (<LyricSearch />)}
         {child == "Player" && !isSubsite && PlayerComp && (
           <Suspense fallback={null}>
-            <PlayerComp client:only="react" user={user} />
+            <PlayerComp user={user} />
           </Suspense>
         )}
-        {child == "Memes" && <Memes client:only="react" />}
+        {child == "Memes" && <Memes />}
         {child == "DiscordLogs" && (
           <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
-            <DiscordLogs client:only="react" />
+            <DiscordLogs />
           </Suspense>
         )}
-        {child == "qs2.MediaRequestForm" && <MediaRequestForm client:only="react" />}
-        {child == "qs2.RequestManagement" && <RequestManagement client:only="react" />}
-        {child == "ReqForm" && <ReqForm {...props} client:only="react" />}
-        {child == "Lighting" && <Lighting key={window.location.pathname + Math.random()} client:only="react" />}
+        {child == "qs2.MediaRequestForm" && <MediaRequestForm />}
+        {child == "qs2.RequestManagement" && <RequestManagement />}
+        {child == "ReqForm" && <ReqForm />}
+        {child == "Lighting" && <Lighting key={window.location.pathname + Math.random()} />}
       </JoyUIRootIsland>
     </PrimeReactProvider>
   );