admin(ui): add document titles

resources/scripts/components/admin/AdminContentBlock.tsx

@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 // import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 import FlashMessageRender from '@/components/FlashMessageRender';
 
-const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }> = ({ children, showFlashKey }) => (
+const AdminContentBlock: React.FC<{ title?: string; showFlashKey?: string; className?: string }> = ({ children, title, showFlashKey }) => {
+    useEffect(() => {
+        if (!title) {
+            return;
+        }
+
+        document.title = `Admin | ${title}`;
+    }, [ title ]);
+
+    return (
         // <CSSTransition timeout={150} classNames={'fade'} appear in>
         <>
             {showFlashKey &&
@@ -25,5 +34,6 @@ const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }>
         </>
         // </CSSTransition>
     );
+};
 
-export default PageContentBlock;
+export default AdminContentBlock;

resources/scripts/components/admin/api/ApiKeysContainer.tsx

@@ -5,7 +5,7 @@ import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
 
 export default () => {
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'API Keys'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>API Keys</h2>

resources/scripts/components/admin/databases/DatabasesContainer.tsx

@@ -61,7 +61,7 @@ const DatabasesContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Databases'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Database Hosts</h2>

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -61,7 +61,7 @@ const LocationsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Locations'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>

resources/scripts/components/admin/mounts/MountsContainer.tsx

@@ -61,7 +61,7 @@ const MountsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Mounts'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>

resources/scripts/components/admin/nests/NestsContainer.tsx

@@ -61,7 +61,7 @@ const NestsContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Nests'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -62,7 +62,7 @@ const NodesContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Nodes'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>

resources/scripts/components/admin/overview/OverviewContainer.tsx

@@ -32,7 +32,7 @@ export default () => {
     }, []);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Overview'}>
             <div css={tw`flex flex-col mb-8`}>
                 <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
                 <p css={tw`text-base text-neutral-400`}>A quick glance at your system.</p>

resources/scripts/components/admin/roles/RolesContainer.tsx

@@ -62,7 +62,7 @@ export default () => {
     };
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Roles'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Roles</h2>

resources/scripts/components/admin/servers/ServersContainer.tsx

@@ -61,7 +61,7 @@ const UsersContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Servers'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2>

resources/scripts/components/admin/settings/SettingsContainer.tsx

@@ -4,7 +4,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 
 export default () => {
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Settings'}>
             <div>
                 <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
                 <p css={tw`text-base text-neutral-400`}>Configure and manage settings for Pterodactyl.</p>

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -61,7 +61,7 @@ const UsersContainer = () => {
     }, [ page ]);
 
     return (
-        <AdminContentBlock>
+        <AdminContentBlock title={'Users'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Users</h2>