admin(ui): add document titles

resources/scripts/components/admin/AdminContentBlock.tsx

@@ -1,29 +1,39 @@
-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 }) => (
-    // <CSSTransition timeout={150} classNames={'fade'} appear in>
-    <>
-        {showFlashKey &&
-        <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
+const AdminContentBlock: React.FC<{ title?: string; showFlashKey?: string; className?: string }> = ({ children, title, showFlashKey }) => {
+    useEffect(() => {
+        if (!title) {
+            return;
         }
-        {children}
 
-        {/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
-            &copy; 2015 - 2021&nbsp;
-            <a
-                rel={'noopener nofollow noreferrer'}
-                href={'https://pterodactyl.io'}
-                target={'_blank'}
-                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
-            >
-                Pterodactyl Software
-            </a>
-        </p> */}
-    </>
-    // </CSSTransition>
-);
+        document.title = `Admin | ${title}`;
+    }, [ title ]);
 
-export default PageContentBlock;
+    return (
+        // <CSSTransition timeout={150} classNames={'fade'} appear in>
+        <>
+            {showFlashKey &&
+            <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
+            }
+            {children}
+
+            {/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
+                &copy; 2015 - 2021&nbsp;
+                <a
+                    rel={'noopener nofollow noreferrer'}
+                    href={'https://pterodactyl.io'}
+                    target={'_blank'}
+                    css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
+                >
+                    Pterodactyl Software
+                </a>
+            </p> */}
+        </>
+        // </CSSTransition>
+    );
+};
+
+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>