feat: new servers view

apps/ui/src/routes/__layout.svelte

@@ -132,9 +132,9 @@
 					<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
 				</div>
 			{/if}
-			<div class="flex flex-col space-y-2 py-2" id="dashboard" class:mt-2={$appSession.whiteLabeled}>
+			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
 				<a
-					
+					id="dashboard"
 					sveltekit:prefetch
 					href="/"
 					class="icons  hover:text-white"
@@ -159,8 +159,35 @@
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
 				</a>
+				<a
+					id="servers"
+					sveltekit:prefetch
+					href="/servers"
+					class="icons hover:text-white"
+					class:text-white={$page.url.pathname === '/servers'}
+					class:bg-coolgray-500={$page.url.pathname === '/servers'}
+					class:bg-coolgray-200={!($page.url.pathname === '/servers')}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-8 h-8 mx-auto"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="3" y="4" width="18" height="8" rx="3" />
+						<rect x="3" y="12" width="18" height="8" rx="3" />
+						<line x1="7" y1="8" x2="7" y2="8.01" />
+						<line x1="7" y1="16" x2="7" y2="16.01" />
+					</svg>
+				</a>
 			</div>
 			<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
+			<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
 			<div class="flex-1" />
 
 			<UpdateAvailable />

apps/ui/src/routes/servers/index.svelte

@@ -0,0 +1,47 @@
+<script context="module" lang="ts">
+	import { get } from '$lib/api';
+	import Usage from '$lib/components/Usage.svelte';
+
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({}) => {
+		try {
+			const { servers } = await get('/servers');
+			return {
+				props: {
+					servers
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let servers: any;
+	import { appSession } from '$lib/store';
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">Servers</div>
+</div>
+<div class="container lg:mx-auto lg:p-0 px-8 p-5">
+	{#if servers.length > 0}
+		<div class="grid grid-col gap-8 auto-cols-max grid-cols-1  p-4">
+			{#each servers as server}
+				<div class="no-underline mb-5">
+					<div class="w-full rounded bg-coolgray-100 indicator">
+						{#if $appSession.teamId === '0'}
+							<Usage {server} />
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<h1 class="">Nothing here.</h1>
+	{/if}
+</div>