feat: support PBS hosts and remote PBS monitoring

AppImage/components/backup-tab.tsx

@@ -7,9 +7,10 @@ import { useState } from "react"
 import { DatabaseBackup } from "lucide-react"
 import { HostBackup } from "./host-backup"
 import { VmBackupJobs } from "./vm-backup-jobs"
+import { PBSPanel } from "./pbs-panel"
 import { useT } from "../lib/i18n/provider"
 
-type BackupView = "host" | "guests"
+type BackupView = "host" | "guests" | "pbs"
 
 export function BackupTab() {
   const t = useT()
@@ -29,7 +30,7 @@ export function BackupTab() {
             className="flex w-full rounded-lg border border-border bg-muted/40 p-1 gap-1
                        sm:inline-flex sm:w-auto"
           >
-            {(["host", "guests"] as const).map((key) => (
+            {(["host", "guests", "pbs"] as const).map((key) => (
               <button
                 key={key}
                 type="button"
@@ -41,7 +42,7 @@ export function BackupTab() {
                     : "text-muted-foreground hover:text-foreground hover:bg-background/60"
                 }`}
               >
-                {t(`backup.viewSwitch.${key}`)}
+                {key === "pbs" ? t("pbs.title") : t(`backup.viewSwitch.${key}`)}
               </button>
             ))}
           </div>
@@ -52,6 +53,7 @@ export function BackupTab() {
         <HostBackup />
       </div>
       {view === "guests" && <VmBackupJobs />}
+      {view === "pbs" && <PBSPanel />}
     </div>
   )
 }