Make refresh work

src/app/[orgId]/settings/domains/[domainId]/layout.tsx

@@ -1,32 +0,0 @@
-import { redirect } from "next/navigation";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import { internal } from "@app/lib/api";
-import { GetDomainResponse } from "@server/routers/domain/getDomain";
-import { AxiosResponse } from "axios";
-import DomainProvider from "@app/providers/DomainProvider";
-
-interface SettingsLayoutProps {
-  children: React.ReactNode;
-  params: Promise<{ domainId: string; orgId: string }>;
-}
-
-export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
-  const { domainId, orgId } = await params;
-  let domain = null;
-
-  try {
-    const res = await internal.get<AxiosResponse<GetDomainResponse>>(
-      `/org/${orgId}/domain/${domainId}`,
-      await authCookieHeader()
-    );
-    domain = res.data.data;
-  } catch {
-    redirect(`/${orgId}/settings/domains`);
-  }
-
-  return (
-    <DomainProvider domain={domain} orgId={orgId}>
-      {children}
-    </DomainProvider>
-  );
-}

src/app/[orgId]/settings/domains/[domainId]/page.tsx

@@ -1,75 +1,53 @@
-"use client";
-import { useState } from "react";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { useRouter } from "next/navigation";
-import { RefreshCw } from "lucide-react";
-import { Button } from "@app/components/ui/button";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import DomainInfoCard from "@app/components/DomainInfoCard";
-import { useDomain } from "@app/contexts/domainContext";
+import RestartDomainButton from "@app/components/RestartDomainButton";
-import { useTranslations } from "next-intl";
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { pullEnv } from "@app/lib/pullEnv";
+import { getTranslations } from "next-intl/server";
+import RefreshButton from "@app/components/RefreshButton";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { GetDNSRecordsResponse } from "@server/routers/domain";
+import DNSRecordsTable from "@app/components/DNSRecordTable";
+import DomainCertForm from "@app/components/DomainCertForm";
 
-export default function DomainSettingsPage() {
+interface DomainSettingsPageProps {
-    const { domain, orgId } = useDomain();
+    params: Promise<{ domainId: string; orgId: string }>;
-    const router = useRouter();
+}
-    const api = createApiClient(useEnvContext());
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const [restartingDomains, setRestartingDomains] = useState<Set<string>>(
-        new Set()
-    );
-    const t = useTranslations();
-    const { env } = useEnvContext();
 
-    const refreshData = async () => {
+export default async function DomainSettingsPage({
-        setIsRefreshing(true);
+    params
-        try {
+}: DomainSettingsPageProps) {
-            await new Promise((resolve) => setTimeout(resolve, 200));
+    const { domainId, orgId } = await params;
-            router.refresh();
+    const t = await getTranslations();
-        } catch {
+    const env = pullEnv();
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
 
-    const restartDomain = async (domainId: string) => {
+    let domain: GetDomainResponse | null = null;
-        setRestartingDomains((prev) => new Set(prev).add(domainId));
+    try {
-        try {
+        const res = await internal.get(
-            await api.post(`/org/${orgId}/domain/${domainId}/restart`);
+            `/org/${orgId}/domain/${domainId}`,
-            toast({
+            await authCookieHeader()
-                title: t("success"),
+        );
-                description: t("domainRestartedDescription", {
+        domain = res.data.data;
-                    fallback: "Domain verification restarted successfully"
+    } catch {
-                })
+        return null;
-            });
+    }
-            refreshData();
+
-        } catch (e) {
+    let dnsRecords;
-            toast({
+    try {
-                title: t("error"),
+        const response = await internal.get(
-                description: formatAxiosError(e),
+            `/org/${orgId}/domain/${domainId}/dns-records`,
-                variant: "destructive"
+            await authCookieHeader()
-            });
+        );
-        } finally {
+        dnsRecords = response.data.data;
-            setRestartingDomains((prev) => {
+    } catch (error) {
-                const newSet = new Set(prev);
+        return null;
-                newSet.delete(domainId);
+    }
-                return newSet;
-            });
-        }
-    };
 
     if (!domain) {
         return null;
     }
 
-    const isRestarting = restartingDomains.has(domain.domainId);
-
     return (
         <>
             <div className="flex justify-between">
@@ -77,32 +55,31 @@ export default function DomainSettingsPage() {
                     title={domain.baseDomain}
                     description={t("domainSettingDescription")}
                 />
-                {env.flags.usePangolinDns && (
+                {env.flags.usePangolinDns && domain.failed ? (
-                    <Button
+                    <RestartDomainButton
-                        variant="outline"
+                        orgId={orgId}
-                        onClick={() => restartDomain(domain.domainId)}
+                        domainId={domain.domainId}
-                        disabled={isRestarting}
+                    />
-                    >
+                ) : (
-                        {isRestarting ? (
+                    <RefreshButton />
-                            <>
-                                <RefreshCw
-                                    className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-                                />
-                                {t("restarting", { fallback: "Restarting..." })}
-                            </>
-                        ) : (
-                            <>
-                                <RefreshCw
-                                    className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-                                />
-                                {t("restart", { fallback: "Restart" })}
-                            </>
-                        )}
-                    </Button>
                 )}
             </div>
             <div className="space-y-6">
-                <DomainInfoCard orgId={orgId} domainId={domain.domainId} />
+                <DomainInfoCard
+                    failed={domain.failed}
+                    verified={domain.verified}
+                    type={domain.type}
+                />
+
+                <DNSRecordsTable records={dnsRecords} type={domain.type} />
+
+                {domain.type == "wildcard" && (
+                    <DomainCertForm
+                        orgId={orgId}
+                        domainId={domain.domainId}
+                        domain={domain}
+                    />
+                )}
             </div>
         </>
     );

src/components/DNSRecordTable.tsx

@@ -8,7 +8,6 @@ import CopyToClipboard from "@app/components/CopyToClipboard";
 
 export type DNSRecordRow = {
     id: string;
-    domainId: string;
     recordType: string; // "NS" | "CNAME" | "A" | "TXT"
     baseDomain: string | null;
     value: string;
@@ -17,15 +16,11 @@ export type DNSRecordRow = {
 
 type Props = {
     records: DNSRecordRow[];
-    domainId: string;
-    isRefreshing?: boolean;
     type: string | null;
 };
 
 export default function DNSRecordsTable({
     records,
-    domainId,
-    isRefreshing,
     type
 }: Props) {
     const t = useTranslations();
@@ -114,7 +109,6 @@ export default function DNSRecordsTable({
         <DNSRecordsDataTable
             columns={columns}
             data={records}
-            isRefreshing={isRefreshing}
             type={type}
         />
     );

src/components/DNSRecordsDataTable.tsx

@@ -30,7 +30,6 @@ import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
 import { useTranslations } from "next-intl";
 import { Badge } from "./ui/badge";
 import Link from "next/link";
-import { build } from "@server/build";
 
 type TabFilter = {
     id: string;

src/components/DomainCertForm.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useDomainContext } from "@app/hooks/useDomainContext";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "./Settings";
+import { Button } from "./ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormDescription
+} from "@app/components/ui/form";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "./ui/select";
+import { Input } from "./ui/input";
+import { useForm } from "react-hook-form";
+import z from "zod";
+import { toASCII } from "punycode";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { build } from "@server/build";
+import { Switch } from "./ui/switch";
+import { useEffect, useState } from "react";
+import { createApiClient } from "@app/lib/api";
+import { useToast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { GetDomainResponse } from "@server/routers/domain";
+
+type DomainInfoCardProps = {
+    orgId?: string;
+    domainId?: string;
+    domain: GetDomainResponse;
+};
+
+// Helper functions for Unicode domain handling
+function toPunycode(domain: string): string {
+    try {
+        const parts = toASCII(domain);
+        return parts;
+    } catch (error) {
+        return domain.toLowerCase();
+    }
+}
+
+function isValidDomainFormat(domain: string): boolean {
+    const unicodeRegex = /^(?!:\/\/)([^\s.]+\.)*[^\s.]+$/;
+
+    if (!unicodeRegex.test(domain)) {
+        return false;
+    }
+
+    const parts = domain.split(".");
+    for (const part of parts) {
+        if (part.length === 0 || part.startsWith("-") || part.endsWith("-")) {
+            return false;
+        }
+        if (part.length > 63) {
+            return false;
+        }
+    }
+
+    if (domain.length > 253) {
+        return false;
+    }
+
+    return true;
+}
+
+const formSchema = z.object({
+    baseDomain: z
+        .string()
+        .min(1, "Domain is required")
+        .refine((val) => isValidDomainFormat(val), "Invalid domain format")
+        .transform((val) => toPunycode(val)),
+    type: z.enum(["ns", "cname", "wildcard"]),
+    certResolver: z.string().nullable().optional(),
+    preferWildcardCert: z.boolean().optional()
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const certResolverOptions = [
+    { id: "default", title: "Default" },
+    { id: "custom", title: "Custom Resolver" }
+];
+
+export default function DomainCertForm({
+    orgId,
+    domainId,
+    domain
+}: DomainInfoCardProps) {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient(useEnvContext());
+    const { toast } = useToast();
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            baseDomain: "",
+            type:
+                build == "oss" || !env.flags.usePangolinDns ? "wildcard" : "ns",
+            certResolver: domain.certResolver,
+            preferWildcardCert: false
+        }
+    });
+
+    useEffect(() => {
+        if (domain.domainId) {
+            const certResolverValue =
+                domain.certResolver && domain.certResolver.trim() !== ""
+                    ? domain.certResolver
+                    : null;
+
+            form.reset({
+                baseDomain: domain.baseDomain || "",
+                type:
+                    (domain.type as "ns" | "cname" | "wildcard") || "wildcard",
+                certResolver: certResolverValue,
+                preferWildcardCert: domain.preferWildcardCert || false
+            });
+        }
+    }, [domain]);
+
+    const onSubmit = async (values: FormValues) => {
+        if (!orgId || !domainId) {
+            toast({
+                title: t("error"),
+                description: t("orgOrDomainIdMissing", {
+                    fallback: "Organization or Domain ID is missing"
+                }),
+                variant: "destructive"
+            });
+            return;
+        }
+
+        setSaveLoading(true);
+
+        try {
+            if (!values.certResolver) {
+                values.certResolver = null;
+            }
+
+            await api.patch(`/org/${orgId}/domain/${domainId}`, {
+                certResolver: values.certResolver,
+                preferWildcardCert: values.preferWildcardCert
+            });
+
+            toast({
+                title: t("success"),
+                description: t("domainSettingsUpdated", {
+                    fallback: "Domain settings updated successfully"
+                }),
+                variant: "default"
+            });
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(error),
+                variant: "destructive"
+            });
+        } finally {
+            setSaveLoading(false);
+        }
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("domainSetting")}
+                    </SettingsSectionTitle>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="domain-settings-form"
+                            >
+                                <>
+                                    <FormField
+                                        control={form.control}
+                                        name="certResolver"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("certResolver")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Select
+                                                        value={
+                                                            field.value === null
+                                                                ? "default"
+                                                                : field.value ===
+                                                                        "" ||
+                                                                    (field.value &&
+                                                                        field.value !==
+                                                                            "default")
+                                                                  ? "custom"
+                                                                  : "default"
+                                                        }
+                                                        onValueChange={(
+                                                            val
+                                                        ) => {
+                                                            if (
+                                                                val ===
+                                                                "default"
+                                                            ) {
+                                                                field.onChange(
+                                                                    null
+                                                                );
+                                                            } else if (
+                                                                val === "custom"
+                                                            ) {
+                                                                field.onChange(
+                                                                    ""
+                                                                );
+                                                            } else {
+                                                                field.onChange(
+                                                                    val
+                                                                );
+                                                            }
+                                                        }}
+                                                    >
+                                                        <SelectTrigger>
+                                                            <SelectValue
+                                                                placeholder={t(
+                                                                    "selectCertResolver"
+                                                                )}
+                                                            />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            {certResolverOptions.map(
+                                                                (opt) => (
+                                                                    <SelectItem
+                                                                        key={
+                                                                            opt.id
+                                                                        }
+                                                                        value={
+                                                                            opt.id
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            opt.title
+                                                                        }
+                                                                    </SelectItem>
+                                                                )
+                                                            )}
+                                                        </SelectContent>
+                                                    </Select>
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    {form.watch("certResolver") !== null &&
+                                        form.watch("certResolver") !==
+                                            "default" && (
+                                            <FormField
+                                                control={form.control}
+                                                name="certResolver"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                placeholder={t(
+                                                                    "enterCustomResolver"
+                                                                )}
+                                                                value={
+                                                                    field.value ||
+                                                                    ""
+                                                                }
+                                                                onChange={(e) =>
+                                                                    field.onChange(
+                                                                        e.target
+                                                                            .value
+                                                                    )
+                                                                }
+                                                            />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        )}
+
+                                    {form.watch("certResolver") !== null &&
+                                        form.watch("certResolver") !==
+                                            "default" && (
+                                            <FormField
+                                                control={form.control}
+                                                name="preferWildcardCert"
+                                                render={({
+                                                    field: switchField
+                                                }) => (
+                                                    <FormItem className="items-center space-y-2 mt-4">
+                                                        <FormControl>
+                                                            <div className="flex items-center space-x-2">
+                                                                <Switch
+                                                                    checked={
+                                                                        switchField.value
+                                                                    }
+                                                                    onCheckedChange={
+                                                                        switchField.onChange
+                                                                    }
+                                                                />
+                                                                <FormLabel>
+                                                                    {t(
+                                                                        "preferWildcardCert"
+                                                                    )}
+                                                                </FormLabel>
+                                                            </div>
+                                                        </FormControl>
+
+                                                        <FormDescription>
+                                                            {t(
+                                                                "preferWildcardCertDescription"
+                                                            )}
+                                                        </FormDescription>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        )}
+                                </>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        loading={saveLoading}
+                        disabled={saveLoading}
+                        form="domain-settings-form"
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/components/DomainInfoCard.tsx

@@ -8,233 +8,20 @@ import {
     InfoSectionTitle
 } from "@app/components/InfoSection";
 import { useTranslations } from "next-intl";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useDomainContext } from "@app/hooks/useDomainContext";
-import {
-    SettingsContainer,
-    SettingsSection,
-    SettingsSectionBody,
-    SettingsSectionDescription,
-    SettingsSectionFooter,
-    SettingsSectionForm,
-    SettingsSectionHeader,
-    SettingsSectionTitle
-} from "./Settings";
-import { Button } from "./ui/button";
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription
-} from "@app/components/ui/form";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "./ui/select";
-import { Input } from "./ui/input";
-import { useForm } from "react-hook-form";
-import z from "zod";
-import { toASCII } from "punycode";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { build } from "@server/build";
-import { Switch } from "./ui/switch";
-import { useEffect, useState } from "react";
-import DNSRecordsTable, { DNSRecordRow } from "./DNSRecordTable";
-import { createApiClient } from "@app/lib/api";
-import { useToast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";
 import { Badge } from "./ui/badge";
 
 type DomainInfoCardProps = {
-    orgId?: string;
+    failed: boolean;
-    domainId?: string;
+    verified: boolean;
+    type: string | null;
 };
 
-// Helper functions for Unicode domain handling
-function toPunycode(domain: string): string {
-    try {
-        const parts = toASCII(domain);
-        return parts;
-    } catch (error) {
-        return domain.toLowerCase();
-    }
-}
-
-function isValidDomainFormat(domain: string): boolean {
-    const unicodeRegex = /^(?!:\/\/)([^\s.]+\.)*[^\s.]+$/;
-
-    if (!unicodeRegex.test(domain)) {
-        return false;
-    }
-
-    const parts = domain.split(".");
-    for (const part of parts) {
-        if (part.length === 0 || part.startsWith("-") || part.endsWith("-")) {
-            return false;
-        }
-        if (part.length > 63) {
-            return false;
-        }
-    }
-
-    if (domain.length > 253) {
-        return false;
-    }
-
-    return true;
-}
-
-const formSchema = z.object({
-    baseDomain: z
-        .string()
-        .min(1, "Domain is required")
-        .refine((val) => isValidDomainFormat(val), "Invalid domain format")
-        .transform((val) => toPunycode(val)),
-    type: z.enum(["ns", "cname", "wildcard"]),
-    certResolver: z.string().nullable().optional(),
-    preferWildcardCert: z.boolean().optional()
-});
-
-type FormValues = z.infer<typeof formSchema>;
-
-const certResolverOptions = [
-    { id: "default", title: "Default" },
-    { id: "custom", title: "Custom Resolver" }
-];
-
 export default function DomainInfoCard({
-    orgId,
+    failed,
-    domainId
+    verified,
+    type
 }: DomainInfoCardProps) {
-    const { domain, updateDomain } = useDomainContext();
     const t = useTranslations();
-    const { env } = useEnvContext();
-    const api = createApiClient(useEnvContext());
-    const { toast } = useToast();
-
-    const [dnsRecords, setDnsRecords] = useState<DNSRecordRow[]>([]);
-    const [loadingRecords, setLoadingRecords] = useState(true);
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const [saveLoading, setSaveLoading] = useState(false);
-
-    const form = useForm<FormValues>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            baseDomain: "",
-            type:
-                build == "oss" || !env.flags.usePangolinDns ? "wildcard" : "ns",
-            certResolver: domain.certResolver,
-            preferWildcardCert: false
-        }
-    });
-
-    useEffect(() => {
-        if (domain.domainId) {
-            const certResolverValue =
-                domain.certResolver && domain.certResolver.trim() !== ""
-                    ? domain.certResolver
-                    : null;
-
-            form.reset({
-                baseDomain: domain.baseDomain || "",
-                type:
-                    (domain.type as "ns" | "cname" | "wildcard") || "wildcard",
-                certResolver: certResolverValue,
-                preferWildcardCert: domain.preferWildcardCert || false
-            });
-        }
-    }, [domain]);
-
-    const fetchDNSRecords = async (showRefreshing = false) => {
-        if (showRefreshing) {
-            setIsRefreshing(true);
-        } else {
-            setLoadingRecords(true);
-        }
-
-        try {
-            const response = await api.get<{ data: DNSRecordRow[] }>(
-                `/org/${orgId}/domain/${domainId}/dns-records`
-            );
-            setDnsRecords(response.data.data);
-        } catch (error) {
-            // Only show error if records exist (not a 404)
-            const err = error as any;
-            if (err?.response?.status !== 404) {
-                toast({
-                    title: t("error"),
-                    description: formatAxiosError(error),
-                    variant: "destructive"
-                });
-            }
-        } finally {
-            setLoadingRecords(false);
-            setIsRefreshing(false);
-        }
-    };
-
-    useEffect(() => {
-        if (domain.domainId) {
-            fetchDNSRecords();
-        }
-    }, [domain.domainId]);
-
-    const onSubmit = async (values: FormValues) => {
-        if (!orgId || !domainId) {
-            toast({
-                title: t("error"),
-                description: t("orgOrDomainIdMissing", {
-                    fallback: "Organization or Domain ID is missing"
-                }),
-                variant: "destructive"
-            });
-            return;
-        }
-
-        setSaveLoading(true);
-
-        try {
-            if (!values.certResolver) {
-                values.certResolver = null;
-            }
-
-            await api.patch(
-                `/org/${orgId}/domain/${domainId}`,
-                {
-                    certResolver: values.certResolver,
-                    preferWildcardCert: values.preferWildcardCert
-                }
-            );
-
-            updateDomain({
-                ...domain,
-                certResolver: values.certResolver || null,
-                preferWildcardCert: values.preferWildcardCert || false
-            });
-
-            toast({
-                title: t("success"),
-                description: t("domainSettingsUpdated", {
-                    fallback: "Domain settings updated successfully"
-                }),
-                variant: "default"
-            });
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: formatAxiosError(error),
-                variant: "destructive"
-            });
-        } finally {
-            setSaveLoading(false);
-        }
-    };
 
     const getTypeDisplay = (type: string) => {
         switch (type) {
@@ -250,243 +37,45 @@ export default function DomainInfoCard({
     };
 
     return (
-        <>
+        <Alert>
-            <Alert>
+            <AlertDescription>
-                <AlertDescription>
+                <InfoSections cols={3}>
-                    <InfoSections cols={3}>
+                    <InfoSection>
-                        <InfoSection>
+                        <InfoSectionTitle>{t("type")}</InfoSectionTitle>
-                            <InfoSectionTitle>{t("type")}</InfoSectionTitle>
+                        <InfoSectionContent>
-                            <InfoSectionContent>
+                            <span>
-                                <span>
+                                {getTypeDisplay(type ? type : "")}
-                                    {getTypeDisplay(
+                            </span>
-                                        domain.type ? domain.type : ""
+                        </InfoSectionContent>
-                                    )}
+                    </InfoSection>
-                                </span>
+                    <InfoSection>
-                            </InfoSectionContent>
+                        <InfoSectionTitle>{t("status")}</InfoSectionTitle>
-                        </InfoSection>
+                        <InfoSectionContent>
-                        <InfoSection>
+                            {failed ? (
-                            <InfoSectionTitle>{t("status")}</InfoSectionTitle>
+                                <Badge variant="red" className="ml-2">
-                            <InfoSectionContent>
+                                    {t("failed", { fallback: "Failed" })}
-                                {domain.verified ? (
+                                </Badge>
-                                    domain.type === "wildcard" ? (
+                            ) : verified ? (
-                                        <Badge variant="outlinePrimary">
+                                type === "wildcard" ? (
-                                            {t("manual", {
+                                    <Badge variant="outlinePrimary">
-                                                fallback: "Manual"
+                                        {t("manual", {
-                                            })}
+                                            fallback: "Manual"
-                                        </Badge>
+                                        })}
-                                    ) : (
-                                        <Badge variant="green">
-                                            {t("verified")}
-                                        </Badge>
-                                    )
-                                ) : (
-                                    <Badge variant="yellow">
-                                        {t("pending", { fallback: "Pending" })}
                                     </Badge>
-                                )}
+                                ) : (
-                            </InfoSectionContent>
+                                    <Badge variant="green">
-                        </InfoSection>
+                                        {t("verified")}
-                    </InfoSections>
+                                    </Badge>
-                </AlertDescription>
+                                )
-            </Alert>
+                            ) : (
-
+                                <Badge variant="yellow">
-            <DNSRecordsTable
+                                    {t("pending", { fallback: "Pending" })}
-                domainId={domain.domainId}
+                                </Badge>
-                records={dnsRecords}
+                            )}
-                isRefreshing={isRefreshing}
+                        </InfoSectionContent>
-                type={domain.type}
+                    </InfoSection>
-            />
+                </InfoSections>
-
+            </AlertDescription>
-            {domain.type === "wildcard" && (
+        </Alert>
-                <SettingsContainer>
-                    <SettingsSection>
-                        <SettingsSectionHeader>
-                            <SettingsSectionTitle>
-                                {t("domainSetting")}
-                            </SettingsSectionTitle>
-                        </SettingsSectionHeader>
-
-                        <SettingsSectionBody>
-                            <SettingsSectionForm>
-                                <Form {...form}>
-                                    <form
-                                        onSubmit={form.handleSubmit(onSubmit)}
-                                        className="space-y-4"
-                                        id="domain-settings-form"
-                                    >
-                                        <>
-                                            <FormField
-                                                control={form.control}
-                                                name="certResolver"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t("certResolver")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Select
-                                                                value={
-                                                                    field.value ===
-                                                                    null
-                                                                        ? "default"
-                                                                        : field.value ===
-                                                                                "" ||
-                                                                            (field.value &&
-                                                                                field.value !==
-                                                                                    "default")
-                                                                          ? "custom"
-                                                                          : "default"
-                                                                }
-                                                                onValueChange={(
-                                                                    val
-                                                                ) => {
-                                                                    if (
-                                                                        val ===
-                                                                        "default"
-                                                                    ) {
-                                                                        field.onChange(
-                                                                            null
-                                                                        );
-                                                                    } else if (
-                                                                        val ===
-                                                                        "custom"
-                                                                    ) {
-                                                                        field.onChange(
-                                                                            ""
-                                                                        );
-                                                                    } else {
-                                                                        field.onChange(
-                                                                            val
-                                                                        );
-                                                                    }
-                                                                }}
-                                                            >
-                                                                <SelectTrigger>
-                                                                    <SelectValue
-                                                                        placeholder={t(
-                                                                            "selectCertResolver"
-                                                                        )}
-                                                                    />
-                                                                </SelectTrigger>
-                                                                <SelectContent>
-                                                                    {certResolverOptions.map(
-                                                                        (
-                                                                            opt
-                                                                        ) => (
-                                                                            <SelectItem
-                                                                                key={
-                                                                                    opt.id
-                                                                                }
-                                                                                value={
-                                                                                    opt.id
-                                                                                }
-                                                                            >
-                                                                                {
-                                                                                    opt.title
-                                                                                }
-                                                                            </SelectItem>
-                                                                        )
-                                                                    )}
-                                                                </SelectContent>
-                                                            </Select>
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-                                            {form.watch("certResolver") !==
-                                                null &&
-                                                form.watch("certResolver") !==
-                                                    "default" && (
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="certResolver"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormControl>
-                                                                    <Input
-                                                                        placeholder={t(
-                                                                            "enterCustomResolver"
-                                                                        )}
-                                                                        value={
-                                                                            field.value ||
-                                                                            ""
-                                                                        }
-                                                                        onChange={(
-                                                                            e
-                                                                        ) =>
-                                                                            field.onChange(
-                                                                                e
-                                                                                    .target
-                                                                                    .value
-                                                                            )
-                                                                        }
-                                                                    />
-                                                                </FormControl>
-                                                                <FormMessage />
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                )}
-
-                                            {form.watch("certResolver") !==
-                                                null &&
-                                                form.watch("certResolver") !==
-                                                    "default" && (
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="preferWildcardCert"
-                                                        render={({
-                                                            field: switchField
-                                                        }) => (
-                                                            <FormItem className="items-center space-y-2 mt-4">
-                                                                <FormControl>
-                                                                    <div className="flex items-center space-x-2">
-                                                                        <Switch
-                                                                            checked={
-                                                                                switchField.value
-                                                                            }
-                                                                            onCheckedChange={
-                                                                                switchField.onChange
-                                                                            }
-                                                                        />
-                                                                        <FormLabel>
-                                                                            {t(
-                                                                                "preferWildcardCert"
-                                                                            )}
-                                                                        </FormLabel>
-                                                                    </div>
-                                                                </FormControl>
-
-                                                                <FormDescription>
-                                                                    {t(
-                                                                        "preferWildcardCertDescription"
-                                                                    )}
-                                                                </FormDescription>
-                                                                <FormMessage />
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                )}
-                                        </>
-                                    </form>
-                                </Form>
-                            </SettingsSectionForm>
-                        </SettingsSectionBody>
-
-                        <SettingsSectionFooter>
-                            <Button
-                                type="submit"
-                                loading={saveLoading}
-                                disabled={saveLoading}
-                                form="domain-settings-form"
-                            >
-                                {t("saveSettings")}
-                            </Button>
-                        </SettingsSectionFooter>
-                    </SettingsSection>
-                </SettingsContainer>
-            )}
-        </>
     );
 }

src/components/DomainsTable.tsx

@@ -3,7 +3,12 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { DomainsDataTable } from "@app/components/DomainsDataTable";
 import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
+import {
+    ArrowRight,
+    ArrowUpDown,
+    MoreHorizontal,
+    RefreshCw
+} from "lucide-react";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { formatAxiosError } from "@app/lib/api";
@@ -217,6 +222,9 @@ export default function DomainsTable({ domains, orgId }: Props) {
                                 onClick={() => restartDomain(domain.domainId)}
                                 disabled={isRestarting}
                             >
+                                <RefreshCw
+                                    className={`mr-2 h-4 w-4 ${isRestarting ? "animate-spin" : ""}`}
+                                />
                                 {isRestarting
                                     ? t("restarting", {
                                           fallback: "Restarting..."

src/components/RefreshButton.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@app/components/ui/button";
+import { useTranslations } from "next-intl";
+import { toast } from "@app/hooks/useToast";
+
+export default function RefreshButton() {
+    const router = useRouter();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const t = useTranslations();
+
+    const refreshData = async () => {
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    return (
+        <Button
+            variant="outline"
+            onClick={refreshData}
+            disabled={isRefreshing}
+        >
+            <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+            />
+            {t("refresh", { fallback: "Refresh" })}
+        </Button>
+    );
+}

src/components/RestartDomainButton.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@app/components/ui/button";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { useTranslations } from "next-intl";
+
+interface RestartDomainButtonProps {
+    orgId: string;
+    domainId: string;
+}
+
+export default function RestartDomainButton({ orgId, domainId }: RestartDomainButtonProps) {
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const [isRestarting, setIsRestarting] = useState(false);
+    const t = useTranslations();
+
+    const restartDomain = async () => {
+        setIsRestarting(true);
+        try {
+            await api.post(`/org/${orgId}/domain/${domainId}/restart`);
+            toast({
+                title: t("success"),
+                description: t("domainRestartedDescription", {
+                    fallback: "Domain verification restarted successfully"
+                })
+            });
+            // Wait a bit before refreshing to allow the restart to take effect
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRestarting(false);
+        }
+    };
+
+    return (
+        <Button
+            variant="outline"
+            onClick={restartDomain}
+            disabled={isRestarting}
+        >
+            {isRestarting ? (
+                <>
+                    <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                    {t("restarting", { fallback: "Restarting..." })}
+                </>
+            ) : (
+                <>
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    {t("restart", { fallback: "Restart" })}
+                </>
+            )}
+        </Button>
+    );
+}