From a7c7a58fcc5c0c31d500ae2a04d12b189405f3d8 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Wed, 7 Jan 2026 11:53:20 +0700
Subject: [PATCH] feat: implement public ca relevancy (only latest &
 hierarchical)

---
 src/app/(public)/HomeClient.tsx | 59 ++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/app/(public)/HomeClient.tsx b/src/app/(public)/HomeClient.tsx
index a7ca85b..f586cc7 100644
--- a/src/app/(public)/HomeClient.tsx
+++ b/src/app/(public)/HomeClient.tsx
@@ -559,31 +559,44 @@ export default function HomeClient() {
                                 <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-brand-500"></div>
                             </div>
                         ) : (
-                            <div className="space-y-16">
-                                {/* Root CA Section */}
-                                <div className="flex flex-col items-center">
-                                    <h3 className="text-sm font-bold text-brand-500 uppercase tracking-widest mb-8 px-4 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">
-                                        {t('root_ca_hierarchy')}
-                                    </h3>
-                                    <div className="grid grid-cols-1 gap-8 w-full max-w-2xl px-4">
-                                        {certificates.filter(c => c.type === 'root').map((cert) => (
-                                            <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
-                                        ))}
-                                    </div>
-                                </div>
+                            <div className="space-y-24">
+                                {Object.entries(
+                                    certificates.reduce((acc, cert) => {
+                                        const famId = cert.family_id || 'unknown';
+                                        if (!acc[famId]) acc[famId] = [];
+                                        acc[famId].push(cert);
+                                        return acc;
+                                    }, {} as Record<string, CaCertificate[]>)
+                                ).map(([famId, familyCerts]) => (
+                                    <div key={famId} className="flex flex-col items-center">
+                                        {/* Root Section of the Family */}
+                                        <div className="w-full flex flex-col items-center">
+                                            <h3 className="text-sm font-bold text-brand-500 uppercase tracking-widest mb-8 px-4 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">
+                                                {t('root_ca_hierarchy')}
+                                            </h3>
+                                            <div className="grid grid-cols-1 gap-8 w-full max-w-3xl px-4">
+                                                {familyCerts.filter(c => c.type === 'root').map((cert) => (
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
+                                                ))}
+                                            </div>
+                                        </div>
 
-                                {/* Intermediate CAs Section */}
-                                <div className="flex flex-col items-center">
-                                    <div className="w-px h-12 bg-gradient-to-b from-brand-500/50 to-transparent mb-8"></div>
-                                    <h3 className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-8 px-4 py-1 bg-blue-50 dark:bg-blue-500/10 rounded-full border border-blue-100 dark:border-blue-500/20">
-                                        {t('intermediate_ca_hierarchy')}
-                                    </h3>
-                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4">
-                                        {certificates.filter(c => c.type !== 'root').map((cert) => (
-                                            <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
-                                        ))}
+                                        {/* Connecting Line */}
+                                        <div className="w-px h-16 bg-gradient-to-b from-brand-500/50 via-blue-500/30 to-transparent my-4"></div>
+
+                                        {/* Intermediates Section of the Family */}
+                                        <div className="w-full flex flex-col items-center">
+                                            <h3 className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-8 px-4 py-1 bg-blue-50 dark:bg-blue-500/10 rounded-full border border-blue-100 dark:border-blue-500/20">
+                                                {t('intermediate_ca_hierarchy')}
+                                            </h3>
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4">
+                                                {familyCerts.filter(c => c.type !== 'root').map((cert) => (
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
+                                                ))}
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
+                                ))}
 
                                 {/* OS Selection Tabs for Global Guide */}
                                 <div className="max-w-4xl mx-auto mt-20 p-8 rounded-[2rem] bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">