refactor: danger zone

packages/pockethost.io/src/routes/app/instances/[instanceId]/+layout.svelte

@@ -10,19 +10,17 @@
   const { instanceId } = $page.params
 
   const cm = createCleanupManager()
-  instance.set(undefined)
   onMount(async () => {
-    const { dbg } = logger()
+    const { dbg, error } = logger().create(`layout.svelte`)
     const { watchInstanceById } = client()
     watchInstanceById(instanceId, (r) => {
       dbg(`Handling instance update`, r)
       const { action, record } = r
       assertExists(record, `Expected instance here`)
       instance.set(record)
-    }).then(cm.add)
-  })
-  cm.add(() => {
-    instance.set(undefined)
+    })
+      .then(cm.add)
+      .catch(error)
   })
   onDestroy(() => cm.shutdown())
 </script>

packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte

@@ -3,7 +3,7 @@
   import { PUBLIC_APP_PROTOCOL } from '$src/env'
   import { assertExists } from '@pockethost/common'
   import Code from './Code.svelte'
-  import Danger from './Danger.svelte'
+  import Danger from './Danger/Danger.svelte'
   import Ftp from './Ftpx.svelte'
   import Logging from './Logging.svelte'
   import Overview from './Overview.svelte'

packages/pockethost.io/src/routes/app/instances/[instanceId]/Danger.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import MiniToggle from '$components/MiniToggle.svelte'
-  import { client } from '$src/pocketbase'
-  import AccordionItem from '../../../../components/AccordionItem.svelte'
-  import MiniEdit from '../../../../components/MiniEdit.svelte'
-  import Version from './Version.svelte'
-  import { instance } from './store'
-
-  const { renameInstance, setInstanceMaintenance } = client()
-
-  $: ({ subdomain, id, maintenance } = $instance)
-
-  const onRename = (subdomain: string) =>
-    renameInstance({ instanceId: id, subdomain }).then(() => 'saved')
-
-  const onMaintenance = (maintenance: boolean) =>
-    setInstanceMaintenance({ instanceId: id, maintenance }).then(() => 'saved')
-</script>
-
-<AccordionItem title="Danger Zone" header="danger">
-  <div>
-    <h3>Rename Instance</h3>
-    <p class="text-danger">
-      Warning - renaming your instance will cause it to become inaccessible by the old instance
-      name. You also may not be able to change it back if someone else choose it. See <a
-        href="https://pockethost.gitbook.com/manual/usage/rename-instnace.md">renaming</a
-      > for more information.
-    </p>
-    <MiniEdit value={subdomain} save={onRename} />
-  </div>
-  <div>
-    <h3>Maintenance Mode</h3>
-    <p class="text-danger">
-      Your PocketHost instance will not be accessible while in maintenance mode. Use this when you
-      are upgrading, downgrading, or backing up your data. See <a
-        href="https://pockethost.gitbook.com/manual/usage/maintenance.md">Maintenance Mode</a
-      > for more information.
-    </p>
-    <MiniToggle value={maintenance} save={onMaintenance}>Maintenance Mode</MiniToggle>
-  </div>
-  <Version />
-</AccordionItem>

packages/pockethost.io/src/routes/app/instances/[instanceId]/Danger/Danger.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import AccordionItem from '../../../../../components/AccordionItem.svelte'
+  import Version from '../Version.svelte'
+  import Maintenance from './Maintenance.svelte'
+  import Rename from './Rename.svelte'
+</script>
+
+<AccordionItem title="Danger Zone" header="danger">
+  <Rename />
+  <Maintenance />
+  <Version />
+</AccordionItem>

packages/pockethost.io/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import MiniToggle from '$components/MiniToggle.svelte'
+  import { client } from '$src/pocketbase'
+  import { instance } from '../store'
+
+  const { renameInstance, setInstanceMaintenance } = client()
+
+  $: ({ subdomain, id, maintenance } = $instance)
+
+  const onMaintenance = (maintenance: boolean) =>
+    setInstanceMaintenance({ instanceId: id, maintenance }).then(() => 'saved')
+</script>
+
+<div>
+  <h3>Maintenance Mode</h3>
+  <p class="text-danger">
+    Your PocketHost instance will not be accessible while in maintenance mode. Use this when you are
+    upgrading, downgrading, or backing up your data. See <a
+      href="https://pockethost.gitbook.com/manual/usage/maintenance.md">Maintenance Mode</a
+    > for more information.
+  </p>
+  <MiniToggle value={maintenance} save={onMaintenance}>Maintenance Mode</MiniToggle>
+</div>

packages/pockethost.io/src/routes/app/instances/[instanceId]/Danger/Rename.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { client } from '$src/pocketbase'
+  import MiniEdit from '../../../../../components/MiniEdit.svelte'
+  import { instance } from '../store'
+
+  const { renameInstance, setInstanceMaintenance } = client()
+
+  $: ({ subdomain, id, maintenance } = $instance)
+
+  const onRename = (subdomain: string) =>
+    renameInstance({ instanceId: id, subdomain }).then(() => 'saved')
+</script>
+
+<div>
+  <h3>Rename Instance</h3>
+  <p class="text-danger">
+    Warning - renaming your instance will cause it to become inaccessible by the old instance name.
+    You also may not be able to change it back if someone else choose it. See <a
+      href="https://pockethost.gitbook.com/manual/usage/rename-instnace.md">renaming</a
+    > for more information.
+  </p>
+  <MiniEdit value={subdomain} save={onRename} />
+</div>