chore(docs): replace outdated screenshots after UI overhaul

packages/dashboard/src/app.css

@@ -25,7 +25,7 @@
 }
 
 .docs-content img {
-  @apply border-accent rounded-lg border;
+  @apply rounded-lg border border-white/10;
 }
 
 .prose :where(li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -137,3 +137,7 @@ pre {
 .animation-delay-1s {
   animation-delay: 1s;
 }
+
+.input {
+  background-color: #111111b4;
+}

packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte

@@ -146,7 +146,7 @@
     class="flex flex-col w-56 md:relative fixed md:top-auto top-0 left-0 h-full bg-[#111111] md:bg-transparent px-4 md:px-0 z-50 transform transition-transform duration-300 md:translate-x-0"
     class:-translate-x-full={!sidebarOpen && window.innerWidth < 768} on:click={handleCloseSidebar} role="presentation"
   >
-    <ul class="menu text-base-content mb-6 pl-0">
+    <ul class="menu text-base-content mb-6 p-0">
       <li class="md:hidden flex items-start">
         
           <Logo/>
@@ -176,13 +176,13 @@
       </li>
     </ul>
 
-    <div class="">
+    <div class="mb-2">
       <Fa icon={faTriangleExclamation} class="text-error inline" />
       <span class="font-bold text-error">Danger Zone</span>
       <Fa icon={faTriangleExclamation} class="text-error inline" />
     </div>
 
-    <ul class="menu text-base-content pl-0">
+    <ul class="menu text-base-content p-0">
       <li>
         <a href={`/instances/${id}/version`} class={activeClass(`version`)}>Change Version</a>
       </li>

packages/dashboard/src/routes/(static)/docs/admin-sync/+page.md

@@ -4,7 +4,7 @@ Admin Sync ensures that your instance always has an admin account that matches t
 
 ## Enabling Admin Sync
 
-![](2024-10-06-14-34-37.png)
+![](admin-sync.png)
 
 When Admin Sync is enabled, your pockethost.io account credentials are automatically copied as an admin login to your instance before it launches.
 
@@ -14,6 +14,6 @@ By default, Admin Sync is enabled, ensuring that when an instance is created, it
 
 ## Disabling Admin Sync
 
-![](2024-10-06-14-34-55.png)
+![](admin-sync-off.png)
 
 When Admin Sync is disabled, your pockethost.io credentials will no longer be copied to your instance in future launches.

packages/dashboard/src/routes/(static)/docs/create/+page.md

@@ -1,6 +1,6 @@
 # Creating an Instance
 
-![](2024-10-06-14-33-11.png)
+![](create-instance.png)
 
 Each PocketHost instance runs on its own unique subdomain. To create a new instance, simply go to [Create New Instance](/instances/new).
 

packages/dashboard/src/routes/(static)/docs/delete/+page.md

@@ -12,6 +12,6 @@ Once deleted, the following will be permanently erased:
 - All files in `pb_migrations/*`
 - All files in `pb_static/*`
 
-![](2024-10-06-14-43-21.png)
+![](first-power-off.png)
 
-![](2024-10-06-14-43-44.png)
+![](delete-instance.png)

packages/dashboard/src/routes/(static)/docs/dev-mode/+page.md

@@ -1,6 +1,6 @@
 # Dev Mode
 
-![](2024-10-06-14-36-37.png)
+![](dev-mode.png)
 
 Begining with PocketBase 0.20.1, you may supply a `--dev` flag to make PocketBase output debugging information to the console.
 

packages/dashboard/src/routes/(static)/docs/ftp/+page.md

@@ -6,7 +6,7 @@ PocketHost provides Secure FTP (FTPS) access to all your PocketBase files.
 
 Use the FTP address provided via `ftp.pockethost.io`. You log in with your pockethost.io username and password.
 
-![](2024-10-06-14-55-02.png)
+![](ftp.png)
 
 ![](2024-10-06-14-54-04.png)
 

packages/dashboard/src/routes/(static)/docs/logs/+page.md

@@ -2,7 +2,7 @@
 
 You can view live logs while your PocketHost instance is running. `console.log` output from `pb_hooks` scripts will also appear in these logs.
 
-![](2024-10-06-14-38-49.png)
+![](logs.png)
 
 For enhanced logging, use [Dev mode](/docs/dev-mode).
 

packages/dashboard/src/routes/(static)/docs/power/+page.md

@@ -2,7 +2,7 @@
 
 ## Power On
 
-![](2024-10-06-14-32-38.png)
+![](power-on.png)
 
 To power on the instance, follow these steps:
 
@@ -14,7 +14,7 @@ Once powered on, your PocketBase instance will be able to receive requests and r
 
 ## Power Off
 
-![](2024-10-06-14-32-05.png)
+![](power-off.png)
 
 To power off the instance, follow these steps:
 

packages/dashboard/src/routes/(static)/docs/rename-instance/+page.md

@@ -4,4 +4,4 @@ PocketHost instances can always be accessed via their permanent link, such as `h
 
 The subdomain is unique across all of PocketHost, but you can change it at any time. When you change your subdomain, the old one becomes available for others to claim. Be sure to choose wisely if you plan to release it.
 
-![](2024-10-06-15-03-48.png)
+![](rename-instance.png)

packages/dashboard/src/routes/(static)/docs/secrets/+page.md

@@ -2,4 +2,4 @@
 
 Secrets are created through the PocketHost instance dashboard and are automatically made available in the PocketBase runtime environment, including `pb_hooks`. Use secrets to securely store API keys and other sensitive information that should not be embedded in your source code.
 
-![](2024-10-06-14-48-39.png)
+![](secrets.png)

packages/dashboard/src/routes/(static)/docs/versions/+page.md

@@ -10,7 +10,7 @@ Upgrading your instance to the latest version of PocketBase is straightforward b
    ![](2024-10-06-15-31-47.png)
 2. **Create a second instance**: We recommend creating a second PocketHost instance and restoring your backup to it. This allows you to test the upgrade without affecting your live instance.
 3. Perform the upgrade on the second instance, ensuring all functionality is intact and working as expected.  
-   ![](2024-10-06-15-36-44.png)
+   ![](version-change.png)
 4. Once you are confident that everything works correctly, upgrade your main instance.
 5. [Power off your instance](/docs/power) to make it live again after the upgrade.
 
@@ -21,7 +21,7 @@ For most cases, automatic upgrades are possible by simply switching to the lates
 1. [Back up your instance](/docs/backup-restore).  
    ![](2024-10-06-15-31-47.png)
 2. Change to the latest supported version in the PocketHost dashboard (e.g., `0.16.*`).  
-   ![](2024-10-06-15-36-44.png)
+   ![](version-change.png)
 3. [Power off your instance](/docs/power) and restart it to apply the changes.
 
 ## Manual Upgrade Steps (Rare Cases)

packages/dashboard/src/routes/(static)/docs/webhooks/+page.md

@@ -6,7 +6,7 @@ Webhooks allow you to schedule API calls to your PocketBase instance at specific
 
 ## Overview
 
-Webhooks are configured through the PocketHost dashboard and automatically execute HTTP requests to your specified endpoints at scheduled intervals. Each webhook consists of:
+Webhooks are configured through the PocketHost dashboard and automatically send HTTP GET requests to your specified endpoints at scheduled intervals. Each webhook consists of:
 
 - **API Endpoint**: The URL path within your instance to call
 - **Schedule**: A cron expression defining when the webhook executes
@@ -154,18 +154,18 @@ Create API endpoints in your PocketBase instance to handle webhook requests usin
 
 ```javascript
 // pb_hooks/onRequest.pb.js
-routerAdd('POST', '/api/webhooks/backup', (e) => {
+routerAdd('GET', '/api/webhooks/backup', (e) => {
   // Your backup logic here
   console.log('Backup webhook triggered')
 
   // Example: Create a backup record
-  const backup = new Record($app.dao().findCollectionByNameOrId('backups'), {
+  const backup = new Record($app.findCollectionByNameOrId('backups'), {
     timestamp: new Date().toISOString(),
     status: 'completed',
     size: '1.2GB',
   })
 
-  $app.dao().saveRecord(backup)
+  $app.save(backup)
 
   return e.json(200, { status: 'success' })
 })
@@ -180,7 +180,7 @@ Webhooks should return appropriate HTTP status codes:
 - `500` - Internal server error
 
 ```javascript
-routerAdd('POST', '/api/webhooks/cleanup', (e) => {
+routerAdd('GET', '/api/webhooks/cleanup', (e) => {
   try {
     // Your cleanup logic
     return e.json(200, { status: 'success' })
@@ -196,7 +196,7 @@ routerAdd('POST', '/api/webhooks/cleanup', (e) => {
 For secure webhooks, include authentication in your endpoints:
 
 ```javascript
-routerAdd('POST', '/api/webhooks/secure', (e) => {
+routerAdd('GET', '/api/webhooks/secure', (e) => {
   const token = e.request.url.query().get('token')
 
   if (token !== process.env.WEBHOOK_SECRET) {
@@ -215,11 +215,11 @@ routerAdd('POST', '/api/webhooks/secure', (e) => {
 Make your webhooks idempotent so they can be safely retried:
 
 ```javascript
-routerAdd('POST', '/api/webhooks/process', (e) => {
+routerAdd('GET', '/api/webhooks/process', (e) => {
   const jobId = e.request.url.query().get('jobId')
 
   // Check if already processed
-  const existing = $app.dao().findFirstRecordByData('jobs', 'jobId', jobId)
+  const existing = $app.findFirstRecordByData('jobs', 'jobId', jobId)
   if (existing && existing.get('status') === 'completed') {
     return e.json(200, { status: 'already_processed' })
   }
@@ -234,7 +234,7 @@ routerAdd('POST', '/api/webhooks/process', (e) => {
 Always log webhook executions for debugging:
 
 ```javascript
-routerAdd('POST', '/api/webhooks/backup', (e) => {
+routerAdd('GET', '/api/webhooks/backup', (e) => {
   console.log(`Backup webhook triggered at ${new Date().toISOString()}`)
 
   // Your backup logic