From a42b5447986e6388a3c834283c0788aa9c19b408 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:27:06 +0700
Subject: [PATCH] Refactor: Simplify CaCard UI and move Smart CLI to Install
 Guide

---
 src/app/(public)/HomeClient.tsx | 91 ++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/app/(public)/HomeClient.tsx b/src/app/(public)/HomeClient.tsx
index 2049de1..751fa49 100644
--- a/src/app/(public)/HomeClient.tsx
+++ b/src/app/(public)/HomeClient.tsx
@@ -237,26 +237,49 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro
                         <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('guide_linux_shortcut_desc')}</p>
                     </div>
 
+                    {/* Distro Selection for Individual Certs */}
+                     <div className="flex flex-wrap gap-2 mb-2">
+                        <button onClick={() => setLinuxDistro?.('debian')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'debian' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Debian</button>
+                        <button onClick={() => setLinuxDistro?.('rhel')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'rhel' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>RHEL</button>
+                        <button onClick={() => setLinuxDistro?.('arch')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'arch' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Arch</button>
+                        <button onClick={() => setLinuxDistro?.('other')} className={`px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wider font-bold border transition-colors ${linuxDistro === 'other' ? 'bg-brand-50 border-brand-200 text-brand-700 dark:bg-brand-500/10 dark:border-brand-500/20 dark:text-brand-400' : 'bg-transparent border-transparent text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Universal</button>
+                    </div>
+
                     <div className="grid grid-cols-1 gap-6">
-                        {/* Root CAs */}
-                        {certificates.filter(c => c.type === 'root').map(c => (
-                            <CliSnippet 
-                                key={c.serial} 
-                                label={`${t('root_ca')}: ${c.name}`} 
-                                command={c.linux_cdn_url ? `curl -sL ${c.linux_cdn_url} | sudo bash` : ''} 
-                                t={t} 
-                            />
-                        ))}
-                        
-                        {/* Intermediate CAs */}
-                        {certificates.filter(c => c.type !== 'root').map(c => (
-                            <CliSnippet 
-                                key={c.serial} 
-                                label={`${t('intermediate_ca')}: ${c.name}`} 
-                                command={c.linux_cdn_url ? `curl -sL ${c.linux_cdn_url} | sudo bash` : ''} 
-                                t={t} 
-                            />
-                        ))}
+                        {/* Function to generate smart command */}
+                        {(() => {
+                            const getSmartCommand = (url: string | null) => {
+                                if (!url) return '';
+                                if (linuxDistro === 'debian') return `sudo apt install -y curl && curl -sL ${url} | sudo bash`;
+                                if (linuxDistro === 'rhel') return `(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL ${url} | sudo bash`;
+                                if (linuxDistro === 'arch') return `sudo pacman -Sy curl && curl -sL ${url} | sudo bash`;
+                                return `curl -sL ${url} | sudo bash`;
+                            };
+
+                            return (
+                                <>
+                                    {/* Root CAs */}
+                                    {certificates.filter(c => c.type === 'root').map(c => (
+                                        <CliSnippet 
+                                            key={c.serial} 
+                                            label={`${t('root_ca')}: ${c.name} [${linuxDistro?.toUpperCase()}]`} 
+                                            command={getSmartCommand(c.linux_cdn_url || null)} 
+                                            t={t} 
+                                        />
+                                    ))}
+                                    
+                                    {/* Intermediate CAs */}
+                                    {certificates.filter(c => c.type !== 'root').map(c => (
+                                        <CliSnippet 
+                                            key={c.serial} 
+                                            label={`${t('intermediate_ca')}: ${c.name} [${linuxDistro?.toUpperCase()}]`} 
+                                            command={getSmartCommand(c.linux_cdn_url || null)} 
+                                            t={t} 
+                                        />
+                                    ))}
+                                </>
+                            );
+                        })()}
                     </div>
                 </div>
             )}
@@ -264,7 +287,7 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro
     );
 }
 
-function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs, linuxDistro, setLinuxDistro }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void, linuxDistro?: string, setLinuxDistro?: (distro: any) => void }) {
+function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void }) {
     return (
         <div className="group relative bg-white/40 dark:bg-gray-900/40 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/50 dark:border-gray-800/50 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
             {/* Sync Status Badge */}
@@ -342,30 +365,6 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs, linuxDistro, setLi
                         variant="gray"
                         isFullWidth
                     />
-                    
-                    {selectedOs === 'linux' && setLinuxDistro && (
-                        <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
-                             <div className="flex flex-wrap gap-2 mb-3 justify-center">
-                                <button onClick={() => setLinuxDistro('debian')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'debian' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Debian</button>
-                                <button onClick={() => setLinuxDistro('rhel')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'rhel' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>RHEL</button>
-                                <button onClick={() => setLinuxDistro('arch')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'arch' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Arch</button>
-                                <button onClick={() => setLinuxDistro('other')} className={`px-2 py-1 rounded text-[10px] font-bold border ${linuxDistro === 'other' ? 'bg-brand-50 border-brand-200 text-brand-600' : 'bg-transparent border-transparent text-gray-400'}`}>Other</button>
-                            </div>
-                            
-                            {linuxDistro === 'debian' && (
-                                <CliSnippet label="Debian/Ubuntu" command={`sudo apt install -y curl && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
-                            )}
-                            {linuxDistro === 'rhel' && (
-                                <CliSnippet label="CentOS/RHEL" command={`(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
-                            )}
-                            {linuxDistro === 'arch' && (
-                                <CliSnippet label="Arch Linux" command={`sudo pacman -Sy curl && curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
-                            )}
-                             {linuxDistro === 'other' && (
-                                <CliSnippet label="Universal" command={`curl -sL ${cert.linux_cdn_url} | sudo bash`} t={t} />
-                            )}
-                        </div>
-                    )}
                  </div>
             )}
         </div>
@@ -634,7 +633,7 @@ export default function HomeClient() {
                                             </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} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
                                                 ))}
                                             </div>
                                         </div>
@@ -649,7 +648,7 @@ export default function HomeClient() {
                                             </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} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
                                                 ))}
                                             </div>
                                         </div>