show cert status in public reosurces table

src/components/CertificateStatus.tsx

@@ -1,10 +1,187 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { CheckCircle2, Clock, Loader2, RotateCw, XCircle } from "lucide-react";
+import { FileBadge, RotateCw } from "lucide-react";
 import { useCertificate } from "@app/hooks/useCertificate";
+import type { GetCertificateResponse } from "@server/routers/certificates/types";
 import { useTranslations } from "next-intl";
 
+export type CertificateStatusContentProps = {
+    cert: GetCertificateResponse | null;
+    certLoading: boolean;
+    certError: string | null;
+    refreshing: boolean;
+    refreshCert: () => Promise<void>;
+    showLabel?: boolean;
+    className?: string;
+    onRefresh?: () => void;
+};
+
+/** Presentation-only certificate row (shared hook state possible via props). */
+export function CertificateStatusContent({
+    cert,
+    certLoading,
+    certError,
+    refreshing,
+    refreshCert,
+    showLabel = true,
+    className = "",
+    onRefresh
+}: CertificateStatusContentProps) {
+    const t = useTranslations();
+
+    const labelClass =
+        "inline-flex shrink-0 items-center self-center text-sm font-medium leading-none";
+    const valueClass = "inline-flex items-center gap-2 text-sm leading-none";
+
+    const handleRefresh = async () => {
+        await refreshCert();
+        onRefresh?.();
+    };
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case "valid":
+                return "text-green-500";
+            case "pending":
+            case "requested":
+                return "text-yellow-500";
+            case "expired":
+            case "failed":
+                return "text-red-500";
+            default:
+                return "text-muted-foreground";
+        }
+    };
+
+    const shouldShowRefreshButton = (status: string, updatedAt: number) => {
+        return (
+            status === "failed" ||
+            status === "expired" ||
+            (status === "requested" &&
+                updatedAt &&
+                new Date(updatedAt * 1000).getTime() <
+                    Date.now() - 5 * 60 * 1000)
+        );
+    };
+
+    if (certLoading) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 animate-pulse text-muted-foreground"
+                        aria-hidden
+                    />
+                    {t("loading")}
+                </span>
+            </div>
+        );
+    }
+
+    if (certError) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 text-red-500"
+                        aria-hidden
+                    />
+                    {certError}
+                </span>
+            </div>
+        );
+    }
+
+    if (!cert) {
+        return (
+            <div className={`flex items-center gap-2 ${className}`}>
+                {showLabel && (
+                    <span className={labelClass}>
+                        {t("certificateStatus")}:
+                    </span>
+                )}
+                <span className={valueClass}>
+                    <FileBadge
+                        className="h-4 w-4 shrink-0 text-muted-foreground"
+                        aria-hidden
+                    />
+                    {t("none", { defaultValue: "None" })}
+                </span>
+            </div>
+        );
+    }
+
+    const isPending = cert.status === "pending";
+    const disableRestartButton = cert.domainType === "wildcard";
+
+    return (
+        <div className={`flex items-center gap-2 ${className}`}>
+            {showLabel && (
+                <span className={labelClass}>{t("certificateStatus")}:</span>
+            )}
+            {isPending && !disableRestartButton ? (
+                <Button
+                    variant="ghost"
+                    className="h-auto min-h-0 shrink-0 p-0 text-sm font-normal leading-none inline-flex items-center self-center"
+                    onClick={handleRefresh}
+                    disabled={refreshing}
+                    title={t("restartCertificate", {
+                        defaultValue: "Restart Certificate"
+                    })}
+                >
+                    <span className="inline-flex items-center gap-2 leading-none">
+                        <FileBadge
+                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                            aria-hidden
+                        />
+                        {cert.status.charAt(0).toUpperCase() +
+                            cert.status.slice(1)}
+                        <RotateCw
+                            className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                        />
+                    </span>
+                </Button>
+            ) : (
+                <span className={valueClass}>
+                    <FileBadge
+                        className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
+                        aria-hidden
+                    />
+                    {cert.status.charAt(0).toUpperCase() + cert.status.slice(1)}
+                    {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
+                    !disableRestartButton ? (
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            className="inline-flex h-auto min-h-0 w-3 shrink-0 items-center justify-center self-center p-0"
+                            onClick={handleRefresh}
+                            disabled={refreshing}
+                            title={t("restartCertificate", {
+                                defaultValue: "Restart Certificate"
+                            })}
+                        >
+                            <RotateCw
+                                className={`h-3 w-3 shrink-0 ${refreshing ? "animate-spin" : ""}`}
+                            />
+                        </Button>
+                    ) : null}
+                </span>
+            )}
+        </div>
+    );
+}
+
 type CertificateStatusProps = {
     orgId: string;
     domainId: string;
@@ -28,174 +205,25 @@ export default function CertificateStatus({
     polling = false,
     pollingInterval = 5000
 }: CertificateStatusProps) {
-    const t = useTranslations();
-    const { cert, certLoading, certError, refreshing, refreshCert } =
-        useCertificate({
-            orgId,
-            domainId,
-            fullDomain,
-            autoFetch,
-            polling,
-            pollingInterval
-        });
-
-    const handleRefresh = async () => {
-        await refreshCert();
-        onRefresh?.();
-    };
-
-    const getStatusColor = (status: string) => {
-        switch (status) {
-            case "valid":
-                return "text-green-500";
-            case "pending":
-            case "requested":
-                return "text-yellow-500";
-            case "expired":
-            case "failed":
-                return "text-red-500";
-            default:
-                return "text-muted-foreground";
-        }
-    };
-
-    const getStatusIcon = (status: string) => {
-        switch (status) {
-            case "valid":
-                return CheckCircle2;
-            case "pending":
-            case "requested":
-                return Clock;
-            case "expired":
-            case "failed":
-                return XCircle;
-            default:
-                return Clock;
-        }
-    };
-
-    const shouldShowRefreshButton = (status: string, updatedAt: number) => {
-        return (
-            status === "failed" ||
-            status === "expired" ||
-            (status === "requested" &&
-                updatedAt &&
-                new Date(updatedAt * 1000).getTime() <
-                    Date.now() - 5 * 60 * 1000)
-        );
-    };
-
-    if (certLoading) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <Loader2
-                        className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground"
-                        aria-hidden
-                    />
-                    {t("loading")}
-                </span>
-            </div>
-        );
-    }
-
-    if (certError) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <XCircle className="h-4 w-4 shrink-0 text-red-500" />
-                    {certError}
-                </span>
-            </div>
-        );
-    }
-
-    if (!cert) {
-        return (
-            <div className={`flex items-center gap-2 ${className}`}>
-                {showLabel && (
-                    <span className="text-sm font-medium">
-                        {t("certificateStatus")}:
-                    </span>
-                )}
-                <span className="inline-flex items-center gap-1.5 text-sm">
-                    <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
-                    {t("none", { defaultValue: "None" })}
-                </span>
-            </div>
-        );
-    }
-
-    const isPending = cert.status === "pending";
-    const disableRestartButton = cert.domainType === "wildcard";
-    const StatusIcon = getStatusIcon(cert.status);
+    const hook = useCertificate({
+        orgId,
+        domainId,
+        fullDomain,
+        autoFetch,
+        polling,
+        pollingInterval
+    });
 
     return (
-        <div className={`flex items-center gap-2 ${className}`}>
-            {showLabel && (
-                <span className="text-sm font-medium">
-                    {t("certificateStatus")}:
-                </span>
-            )}
-            {isPending && !disableRestartButton ? (
-                <Button
-                    variant="ghost"
-                    className="h-auto p-0 text-sm font-normal"
-                    onClick={handleRefresh}
-                    disabled={refreshing}
-                    title={t("restartCertificate", {
-                        defaultValue: "Restart Certificate"
-                    })}
-                >
-                    <span className="inline-flex items-center gap-2">
-                        <StatusIcon
-                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
-                        />
-                        {cert.status.charAt(0).toUpperCase() +
-                            cert.status.slice(1)}
-                        <RotateCw
-                            className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`}
-                        />
-                    </span>
-                </Button>
-            ) : (
-                <span className="text-sm">
-                    <span className="inline-flex items-center gap-2">
-                        <StatusIcon
-                            className={`h-4 w-4 shrink-0 ${getStatusColor(cert.status)}`}
-                        />
-                        {cert.status.charAt(0).toUpperCase() +
-                            cert.status.slice(1)}
-                        {shouldShowRefreshButton(cert.status, cert.updatedAt) &&
-                        !disableRestartButton ? (
-                            <Button
-                                size="icon"
-                                variant="ghost"
-                                className="p-0 w-3 h-auto align-middle"
-                                onClick={handleRefresh}
-                                disabled={refreshing}
-                                title={t("restartCertificate", {
-                                    defaultValue: "Restart Certificate"
-                                })}
-                            >
-                                <RotateCw
-                                    className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`}
-                                />
-                            </Button>
-                        ) : null}
-                    </span>
-                </span>
-            )}
-        </div>
+        <CertificateStatusContent
+            cert={hook.cert}
+            certLoading={hook.certLoading}
+            certError={hook.certError}
+            refreshing={hook.refreshing}
+            refreshCert={hook.refreshCert}
+            showLabel={showLabel}
+            className={className}
+            onRefresh={onRefresh}
+        />
     );
 }