From c86cdc088d0c39edaa919ac001f30af3d2240b23 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sat, 5 Oct 2024 05:40:53 -0700
Subject: [PATCH] dashboard cleanup

---
 .../app/instances/[instanceId]/+page.svelte   |  2 +-
 .../app/instances/[instanceId]/Code.svelte    | 70 -----------------
 .../instances/[instanceId]/Overview.svelte    | 77 ++++++++++++++++---
 .../instances/[instanceId]/ftp/+page.svelte   |  2 +-
 .../[instanceId]/settings/+page.svelte        | 35 ---------
 .../settings/DangerZoneTitle.svelte           |  9 ---
 6 files changed, 68 insertions(+), 127 deletions(-)
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
 delete mode 100644 packages/dashboard/src/routes/app/instances/[instanceId]/settings/DangerZoneTitle.svelte

diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
index ddd593ce..afa4d1fc 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { assertExists } from 'pockethost/common'
-  import Code from './Code.svelte'
+  import Code from './Overview.svelte'
   import Ftp from './ftp/+page.svelte'
   import { instance } from './store'
 
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
deleted file mode 100644
index 122ec432..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-  import CodeSample from '$components/CodeSample.svelte'
-  import { DISCORD_URL, INSTANCE_URL } from '$src/env'
-  import { instance } from './store'
-
-  let installSnippet = `npm i pocketbase`
-
-  const url = INSTANCE_URL($instance)
-
-  let connectionSnippet = ''
-  $: {
-    connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
-  }
-
-  let firstQuerySnippet = `const records = await client.collection('posts').getFullList({
-    sort: '-created',
-});`
-</script>
-
-<h2>Overview</h2>
-
-<div class="mb-4">
-  <p>Your PocketBase URL is</p>
-  <CodeSample code={url} />
-</div>
-
-<div class="mb-4">
-  <p>Installing PocketBase</p>
-  <CodeSample code={installSnippet} />
-</div>
-
-<div class="mb-4">
-  <p>Connecting to Your Instance</p>
-  {#if $instance.cname}
-    {#if $instance.cname_active}
-      <div class="text-accent">Notice: You are in Custom Domain mode</div>
-    {:else}
-      <div class="text-error">
-        Notice: You are in Custom Domain mode but it is not active and will not
-        work. Go find <a href={DISCORD_URL} target="_blank" class="link"
-          >@noaxis on Discord</a
-        > to get set up.
-      </div>
-    {/if}
-  {/if}
-  <CodeSample code={connectionSnippet} />
-</div>
-
-<div class="mb-4">
-  <p>Making Your First Query</p>
-  <CodeSample code={firstQuerySnippet} />
-</div>
-
-<p>Additional Resources:</p>
-<ul class="list-disc pl-4">
-  <li>
-    <a
-      href={`https://pocketbase.io/docs/api-records/`}
-      target="_blank"
-      class="link">PocketBase Web APIs</a
-    >
-  </li>
-  <li>
-    <a
-      href="https://www.npmjs.com/package/pocketbase"
-      target="_blank"
-      class="link">PocketBase NPM Package</a
-    >
-  </li>
-</ul>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Overview.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Overview.svelte
index ea48251f..93becbfe 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Overview.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Overview.svelte
@@ -1,18 +1,73 @@
 <script lang="ts">
-  import ProvisioningStatus from '$components/ProvisioningStatus.svelte'
+  import CodeSample from '$components/CodeSample.svelte'
+  import CardHeader from '$src/components/cards/CardHeader.svelte'
+  import { DISCORD_URL, DOCS_URL, INSTANCE_URL } from '$src/env'
   import { instance } from './store'
 
-  $: ({ status, version } = $instance)
+  let installSnippet = `npm i pocketbase`
+
+  const url = INSTANCE_URL($instance)
+
+  let connectionSnippet = ''
+  $: {
+    connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
+  }
+
+  let firstQuerySnippet = `const records = await client.collection('posts').getFullList({
+    sort: '-created',
+});`
 </script>
 
-<div class="card card-body bg-base-200">
-  <h3 class="font-bold text-2xl">Overview</h3>
+<CardHeader documentation={DOCS_URL(`/usage/accessing-instance/`)}
+  >Overview</CardHeader
+>
 
-  <div>
-    Status: <ProvisioningStatus {status} />
-  </div>
-
-  <div>
-    Version: {version}
-  </div>
+<div class="mb-4">
+  <p>Your PocketBase URL is</p>
+  <CodeSample code={url} />
 </div>
+
+<div class="mb-4">
+  <p>Installing PocketBase</p>
+  <CodeSample code={installSnippet} />
+</div>
+
+<div class="mb-4">
+  <p>Connecting to Your Instance</p>
+  {#if $instance.cname}
+    {#if $instance.cname_active}
+      <div class="text-accent">Notice: You are in Custom Domain mode</div>
+    {:else}
+      <div class="text-error">
+        Notice: You are in Custom Domain mode but it is not active and will not
+        work. Go find <a href={DISCORD_URL} target="_blank" class="link"
+          >@noaxis on Discord</a
+        > to get set up.
+      </div>
+    {/if}
+  {/if}
+  <CodeSample code={connectionSnippet} />
+</div>
+
+<div class="mb-4">
+  <p>Making Your First Query</p>
+  <CodeSample code={firstQuerySnippet} />
+</div>
+
+<p>Additional Resources:</p>
+<ul class="list-disc pl-4">
+  <li>
+    <a
+      href={`https://pocketbase.io/docs/api-records/`}
+      target="_blank"
+      class="link">PocketBase Web APIs</a
+    >
+  </li>
+  <li>
+    <a
+      href="https://www.npmjs.com/package/pocketbase"
+      target="_blank"
+      class="link">PocketBase NPM Package</a
+    >
+  </li>
+</ul>
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
index 294348eb..69c468d3 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/ftp/+page.svelte
@@ -16,7 +16,7 @@
   const ftpUrl = FTP_URL(email)
 </script>
 
-<h2>FTP Access</h2>
+<CardHeader documentation={DOCS_URL(`/usage/ftp`)}>FTP Access</CardHeader>
 <div class="mb-8">
   Securely access your instance files via FTPS. Use your PocketHost account
   login and password.
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
deleted file mode 100644
index 53403d1d..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/+page.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { assertExists } from 'pockethost/common'
-  import { instance } from '../store'
-  import AdminSync from '../admin-sync/+page.svelte'
-  import CustomDomain from '../domain/+page.svelte'
-  import DangerZoneTitle from './DangerZoneTitle.svelte'
-  import DeleteInstance from '../delete/+page.svelte'
-  import DevMode from '../dev/+page.svelte'
-  import RenameInstance from '../rename/+page.svelte'
-  import VersionChange from '../version/+page.svelte'
-
-  $: ({ status, version, id } = $instance)
-
-  assertExists($instance, `Expected instance here`)
-  const { subdomain } = $instance
-</script>
-
-<svelte:head>
-  <title>{subdomain} overview - PocketHost</title>
-</svelte:head>
-
-<DangerZoneTitle />
-
-<div class="grid lg:grid-cols-3 gap-4 mb-4">
-  <RenameInstance />
-
-  <VersionChange />
-
-  <AdminSync />
-
-  <DevMode />
-
-  <DeleteInstance />
-</div>
-<CustomDomain />
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DangerZoneTitle.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DangerZoneTitle.svelte
deleted file mode 100644
index 51e3732e..00000000
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/settings/DangerZoneTitle.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="block py-8 mb-4">
-  <div class="flex items-center justify-center gap-4 w-full">
-    <i class="fa-solid fa-siren-on text-error"></i>
-
-    <h2 class="text-4xl font-bold text-error">Danger Zone</h2>
-
-    <i class="fa-solid fa-siren-on text-error"></i>
-  </div>
-</div>