refactor(web): admin layout (#4461)

web/src/routes/admin/server-status/+page.server.ts

@@ -14,6 +14,7 @@ export const load = (async ({ parent, locals: { api } }) => {
   const { data: stats } = await api.serverInfoApi.getStats();
 
   return {
+    user,
     stats,
     meta: {
       title: 'Server Stats',

web/src/routes/admin/server-status/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { api } from '@api';
   import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { api } from '@api';
+  import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';
 
   export let data: PageData;
+
   let setIntervalHandler: ReturnType<typeof setInterval>;
 
   onMount(async () => {
@@ -19,4 +21,10 @@
   });
 </script>
 
-<ServerStatsPanel stats={data.stats} />
+<UserPageLayout user={data.user} title={data.meta.title} admin>
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
+      <ServerStatsPanel stats={data.stats} />
+    </section>
+  </section>
+</UserPageLayout>