From 846645980943e10b35c41ab9ba9ddc55f2174729 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Wed, 8 Jan 2025 12:03:10 -0800
Subject: [PATCH] chore: refactor dashboard files

---
 .../src/routes/(app)/dashboard/+page.svelte   | 47 ++---------------
 .../src/routes/(app)/dashboard/Main.svelte    | 52 +++++++++++++++++++
 2 files changed, 55 insertions(+), 44 deletions(-)
 create mode 100644 packages/dashboard/src/routes/(app)/dashboard/Main.svelte

diff --git a/packages/dashboard/src/routes/(app)/dashboard/+page.svelte b/packages/dashboard/src/routes/(app)/dashboard/+page.svelte
index 9284f281..88474a13 100644
--- a/packages/dashboard/src/routes/(app)/dashboard/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/dashboard/+page.svelte
@@ -2,51 +2,10 @@
   import { MAX_INSTANCE_COUNTS } from '$src/env'
   import { globalInstancesStore, userSubscriptionType } from '$util/stores'
   import { values } from '@s-libs/micro-dash'
-  import InstanceList from './InstanceList.svelte'
-  import { SubscriptionType } from 'pockethost/common'
-  import { faPlus } from '@fortawesome/free-solid-svg-icons'
-  import Fa from 'svelte-fa'
+  import Main from './Main.svelte'
 
+  $: maxInstanceCount = MAX_INSTANCE_COUNTS[$userSubscriptionType]
   $: instanceCount = values($globalInstancesStore).length
 </script>
 
-<svelte:head>
-  <title>Dashboard - PocketHost</title>
-</svelte:head>
-
-<div
-  class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-4"
->
-  <h2 class="text-4xl text-base-content font-bold capitalize">Dashboard</h2>
-
-  <a href="/instances/new" class="m-3 btn btn-primary">
-    <Fa icon={faPlus} /> New Instance</a
-  >
-</div>
-
-<div class="flex flex-row space-x-4 items-center justify-center">
-  <div>Instances</div>
-  <progress
-    class="progress progress-primary w-48 md:w-80"
-    value={instanceCount}
-    max={MAX_INSTANCE_COUNTS[$userSubscriptionType]}
-  ></progress>
-  <div>
-    {#if $userSubscriptionType === SubscriptionType.Founder}
-      {instanceCount}/<a
-        href="https://discord.com/channels/1128192380500193370/1128192380500193373/1296340516044017718"
-        class="link"
-        target="_blank">{MAX_INSTANCE_COUNTS[$userSubscriptionType]}</a
-      >
-    {:else}
-      {instanceCount}/{MAX_INSTANCE_COUNTS[$userSubscriptionType]}
-    {/if}
-    {#if $userSubscriptionType === SubscriptionType.Free}
-      <a href="/pricing" class="link text-xs text-success">Upgrade</a>
-    {/if}
-  </div>
-</div>
-
-<div class="flex flex-wrap gap-2 items-center justify-center">
-  <InstanceList />
-</div>
+<Main />
diff --git a/packages/dashboard/src/routes/(app)/dashboard/Main.svelte b/packages/dashboard/src/routes/(app)/dashboard/Main.svelte
new file mode 100644
index 00000000..9284f281
--- /dev/null
+++ b/packages/dashboard/src/routes/(app)/dashboard/Main.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { MAX_INSTANCE_COUNTS } from '$src/env'
+  import { globalInstancesStore, userSubscriptionType } from '$util/stores'
+  import { values } from '@s-libs/micro-dash'
+  import InstanceList from './InstanceList.svelte'
+  import { SubscriptionType } from 'pockethost/common'
+  import { faPlus } from '@fortawesome/free-solid-svg-icons'
+  import Fa from 'svelte-fa'
+
+  $: instanceCount = values($globalInstancesStore).length
+</script>
+
+<svelte:head>
+  <title>Dashboard - PocketHost</title>
+</svelte:head>
+
+<div
+  class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-4"
+>
+  <h2 class="text-4xl text-base-content font-bold capitalize">Dashboard</h2>
+
+  <a href="/instances/new" class="m-3 btn btn-primary">
+    <Fa icon={faPlus} /> New Instance</a
+  >
+</div>
+
+<div class="flex flex-row space-x-4 items-center justify-center">
+  <div>Instances</div>
+  <progress
+    class="progress progress-primary w-48 md:w-80"
+    value={instanceCount}
+    max={MAX_INSTANCE_COUNTS[$userSubscriptionType]}
+  ></progress>
+  <div>
+    {#if $userSubscriptionType === SubscriptionType.Founder}
+      {instanceCount}/<a
+        href="https://discord.com/channels/1128192380500193370/1128192380500193373/1296340516044017718"
+        class="link"
+        target="_blank">{MAX_INSTANCE_COUNTS[$userSubscriptionType]}</a
+      >
+    {:else}
+      {instanceCount}/{MAX_INSTANCE_COUNTS[$userSubscriptionType]}
+    {/if}
+    {#if $userSubscriptionType === SubscriptionType.Free}
+      <a href="/pricing" class="link text-xs text-success">Upgrade</a>
+    {/if}
+  </div>
+</div>
+
+<div class="flex flex-wrap gap-2 items-center justify-center">
+  <InstanceList />
+</div>