chore: Danger Zone error reporting fixes

frontends/dashboard/src/routes/app/instances/[instanceId]/+page.svelte

@@ -8,7 +8,7 @@
   import DangerZoneTitle from './Danger/DangerZoneTitle.svelte'
   import Maintenance from './Danger/Maintenance.svelte'
   import RenameInstance from './Danger/RenameInstance.svelte'
-  import VersionChange from './Danger/VersionChange.svelte'
+  import VersionChange from './Danger/VersionChange/VersionChange.svelte'
   import Ftp from './Ftpx.svelte'
   import Logging from './Logging.svelte'
   import Secrets from './Secrets/Secrets.svelte'

frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/AdminSync.svelte

@@ -4,17 +4,24 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
   $: ({ id, syncAdmin } = $instance)
 
+  let errorMessage = ''
+
   const handleChange = (e: Event) => {
     const target = e.target as HTMLInputElement
     const isChecked = target.checked
 
     // Update the database with the new value
-    updateInstance({ id, fields: { syncAdmin: isChecked } }).then(() => 'saved')
+    updateInstance({ id, fields: { syncAdmin: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        errorMessage = error.data.message || error.message
+      })
   }
 </script>
 
@@ -28,6 +35,8 @@
     login.
   </p>
 
+  <ErrorMessage message={errorMessage} />
+
   <label class="label cursor-pointer justify-center gap-4">
     <span class="label-text">Admin Sync</span>
     <input

frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/ErrorMessage.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition'
+
+  export let message = ''
+</script>
+
+{#if message}
+  <div in:slide class="alert alert-error mb-4">
+    <i class="fa-regular fa-circle-exclamation"></i>
+    {message}
+  </div>
+{/if}

frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte

@@ -4,9 +4,12 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
+  let errorMessage = ''
+
   $: ({ id, maintenance } = $instance)
 
   const handleChange = (e: Event) => {
@@ -14,9 +17,11 @@
     const isChecked = target.checked
 
     // Update the database with the new value
-    updateInstance({ id, fields: { maintenance: isChecked } }).then(
-      () => 'saved',
-    )
+    updateInstance({ id, fields: { maintenance: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        error.data.message || error.message
+      })
   }
 </script>
 
@@ -30,6 +35,8 @@
     Use this when you are upgrading, downgrading, or backing up your data.
   </p>
 
+  <ErrorMessage message={errorMessage} />
+
   <label class="label cursor-pointer justify-center gap-4">
     <span class="label-text">Maintenance Mode</span>
     <input

frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte

@@ -3,8 +3,8 @@
   import CardHeader from '$components/cards/CardHeader.svelte'
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
-  import { slide } from 'svelte/transition'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
@@ -47,7 +47,7 @@
       })
         .then(() => 'saved')
         .catch((error) => {
-          errorMessage = error.message
+          error.data.message || error.message
         })
     }
 
@@ -68,12 +68,7 @@
     else choose it.
   </p>
 
-  {#if errorMessage}
-    <div in:slide class="alert alert-error mb-4">
-      <i class="fa-regular fa-circle-exclamation"></i>
-      {errorMessage}
-    </div>
-  {/if}
+  <ErrorMessage message={errorMessage} />
 
   <form
     class="flex rename-instance-form-container-query gap-4"

frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionChange.svelte

@@ -3,8 +3,8 @@
   import CardHeader from '$components/cards/CardHeader.svelte'
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
-  import { slide } from 'svelte/transition'
-  import { instance } from '../store'
+  import { instance } from '../../store'
+  import ErrorMessage from '../ErrorMessage.svelte'
   import VersionPicker from './VersionPicker.svelte'
 
   $: ({ id, maintenance, version } = $instance)
@@ -46,7 +46,7 @@
           return 'saved'
         })
         .catch((error) => {
-          errorMessage = error.message
+          error.data.message || error.message
         })
     } else {
       // If they hit cancel, reset the version number back to what it was initially
@@ -72,12 +72,7 @@
     > of PocketBase.
   </p>
 
-  {#if errorMessage}
-    <div in:slide class="alert alert-error mb-4">
-      <i class="fa-regular fa-circle-exclamation"></i>
-      {errorMessage}
-    </div>
-  {/if}
+  <ErrorMessage message={errorMessage} />
 
   <form
     class="flex change-version-form-container-query gap-4"