standardize header, save all button for targets, fix update site on resource

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -18,6 +18,8 @@ import { useForm } from "react-hook-form";
 import api from "@app/api";
 import { useToast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { formatAxiosError } from "@app/lib/utils";
 
 const GeneralFormSchema = z.object({
     name: z.string(),
@@ -41,18 +43,19 @@ export default function GeneralPage() {
 
     async function onSubmit(data: GeneralFormValues) {
         await api
-        .post(`/site/${site?.siteId}`, {
-            name: data.name,
-        })
-        .catch((e) => {
-            toast({
-                variant: "destructive",
-                title: "Failed to update site",
-                description:
-                e.message ||
-                "An error occurred while updating the site.",
+            .post(`/site/${site?.siteId}`, {
+                name: data.name,
+            })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: "Failed to update site",
+                    description: formatAxiosError(
+                        e,
+                        "An error occurred while updating the site."
+                    ),
+                });
             });
-        });
 
         updateSite({ name: data.name });
 
@@ -61,14 +64,11 @@ export default function GeneralPage() {
 
     return (
         <>
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    General Settings
-                </h2>
-                <p className="text-muted-foreground">
-                    Configure the general settings for this site
-                </p>
-            </div>
+            <SettingsSectionTitle
+                title="General Settings"
+                description="Configure the general settings for this site"
+                size="1xl"
+            />
 
             <Form {...form}>
                 <form

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -7,6 +7,7 @@ import { authCookieHeader } from "@app/api/cookies";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
@@ -44,19 +45,15 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
                     className="text-muted-foreground hover:underline"
                 >
                     <div className="flex flex-row items-center gap-1">
-                        <ArrowLeft /> <span>All Sites</span>
+                        <ArrowLeft className="w-4 h-4" /> <span>All Sites</span>
                     </div>
                 </Link>
             </div>
 
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    {site?.name + " Settings"}
-                </h2>
-                <p className="text-muted-foreground">
-                    Configure the settings on your site
-                </p>
-            </div>
+            <SettingsSectionTitle
+                title={`${site?.name} Settings`}
+                description="Configure the settings on your site"
+            />
 
             <SiteProvider site={site}>
                 <SidebarSettings

src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx

@@ -40,6 +40,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@app/components/ui/select";
+import { formatAxiosError } from "@app/lib/utils";
 
 const method = [
     { label: "Wireguard", value: "wg" },
@@ -108,7 +109,9 @@ export default function CreateSiteForm({ open, setOpen }: CreateSiteFormProps) {
             api.get(`/org/${orgId}/pick-site-defaults`)
                 .catch((e) => {
                     toast({
+                        variant: "destructive",
                         title: "Error picking site defaults",
+                        description: formatAxiosError(e),
                     });
                 })
                 .then((res) => {
@@ -130,7 +133,9 @@ export default function CreateSiteForm({ open, setOpen }: CreateSiteFormProps) {
             })
             .catch((e) => {
                 toast({
+                    variant: "destructive",
                     title: "Error creating site",
+                    description: formatAxiosError(e),
                 });
             });
 

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -17,6 +17,8 @@ import { AxiosResponse } from "axios";
 import { useState } from "react";
 import CreateSiteForm from "./CreateSiteForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { useToast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/utils";
 
 export type SiteRow = {
     id: number;
@@ -35,6 +37,8 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
+    const { toast } = useToast();
+
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
@@ -48,6 +52,11 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         api.delete(`/site/${siteId}`)
             .catch((e) => {
                 console.error("Error deleting site", e);
+                toast({
+                    variant: "destructive",
+                    title: "Error deleting site",
+                    description: formatAxiosError(e, "Error deleting site"),
+                });
             })
             .then(() => {
                 router.refresh();

src/app/[orgId]/settings/sites/page.tsx

@@ -3,6 +3,7 @@ import { authCookieHeader } from "@app/api/cookies";
 import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import SitesTable, { SiteRow } from "./components/SitesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type SitesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -34,14 +35,10 @@ export default async function SitesPage(props: SitesPageProps) {
 
     return (
         <>
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    Manage Sites
-                </h2>
-                <p className="text-muted-foreground">
-                    Manage your existing sites here or create a new one.
-                </p>
-            </div>
+            <SettingsSectionTitle
+                title="Manage Sites"
+                description="Manage your existing sites here or create a new one."
+            />
 
             <SitesTable sites={siteRows} orgId={params.orgId} />
         </>