chore: initial build

frontend/src/lib/api.ts

@@ -1,7 +1,8 @@
 import { ClientResponse, hc } from "hono/client";
 import type { AppRouter } from "@backend/routers";
 
-const api = hc<AppRouter>("http://localhost:3000/");
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
+const api = hc<AppRouter>(BACKEND_URL || "http://localhost:3000/");
 
 export const parseJson = async <T>(res: ClientResponse<T>) => {
   const json = await res.json();

frontend/src/pages/home/components/server-section.tsx

@@ -16,7 +16,13 @@ const ServerSection = () => {
 
   return (
     <section>
-      <PageTitle setTitle={false}>Servers</PageTitle>
+      <div className="flex items-center gap-2 mt-2 md:mt-4">
+        <PageTitle className="flex-1">Servers</PageTitle>
+
+        <Button onClick={() => serverFormDlg.onOpen({ ...initialServerData })}>
+          Add Server
+        </Button>
+      </div>
 
       {isLoading ? (
         <div>Loading...</div>

frontend/src/pages/servers/components/backup-status.tsx

@@ -45,7 +45,7 @@ const BackupStatus = ({ status, output }: Props) => {
     <Popover>
       <PopoverTrigger
         disabled={!output}
-        title={output}
+        title={output?.substring(0, 120)}
         className={cn(
           "flex items-center gap-2 px-2 py-1 rounded-lg text-white shrink-0",
           colors[status]
@@ -57,8 +57,10 @@ const BackupStatus = ({ status, output }: Props) => {
         <p className="text-sm">{labels[status]}</p>
       </PopoverTrigger>
 
-      <PopoverContent className="max-w-lg w-screen">
-        <p className="font-mono text-sm">{output}</p>
+      <PopoverContent className="max-w-lg w-screen p-0">
+        <textarea className="font-mono text-sm w-full h-[200px] border-none outline-none p-4">
+          {output}
+        </textarea>
       </PopoverContent>
     </Popover>
   );

frontend/src/pages/servers/components/server-form-backup-tab.tsx

@@ -54,7 +54,11 @@ const BackupTab = () => {
 
   return (
     <TabsContent value="backup" className="mt-4">
-      <CheckboxField form={form} name="backup.compress" label="Compressed" />
+      <CheckboxField
+        form={form}
+        name="backup.compress"
+        label="Enable Compression"
+      />
 
       <CheckboxField
         className="mt-4"

frontend/src/pages/servers/components/server-form-dialog.tsx

@@ -18,9 +18,12 @@ import ConnectionTab from "./server-form-connection-tab";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import BackupTab from "./server-form-backup-tab";
 import { ServerFormSchema, serverFormSchema } from "../schema";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
 
 const ServerFormDialog = () => {
   const { isOpen, data } = serverFormDlg.useState();
+  const navigate = useNavigate();
   const form = useForm({
     resolver: zodResolver(serverFormSchema),
     defaultValues: data,
@@ -44,9 +47,13 @@ const ServerFormDialog = () => {
         return parseJson(res);
       }
     },
-    onSuccess: () => {
+    onSuccess: (data) => {
       serverFormDlg.onClose();
       queryClient.invalidateQueries("servers");
+      navigate(`/servers/${data.id}`);
+    },
+    onError: (err) => {
+      toast.error((err as Error)?.message || "Failed to save server");
     },
   });
 
@@ -78,7 +85,7 @@ const ServerFormDialog = () => {
             </Button>
             <Button
               type="submit"
-              disabled={!databases.length}
+              disabled={!databases?.length}
               isLoading={saveServer.isLoading}
             >
               Submit

frontend/src/pages/servers/view/components/backups-section.tsx

@@ -25,6 +25,7 @@ const BackupSection = ({ databases }: BackupSectionProps) => {
   const [query, setQuery] = useQueryParams<QueryParams>({
     page: 1,
     limit: 10,
+    databaseId: undefined,
   });
 
   const backups = useQuery({

frontend/src/pages/servers/view/table.tsx

@@ -158,6 +158,7 @@ export const backupsColumns: TableColumn<BackupType>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem
+              disabled={row.status !== "success"}
               onClick={() => {
                 confirmDlg.onOpen({
                   title: "Restore Backup",