From 1bdd8f51fb90ab62157d8910996529eb310a3491 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:02:20 +0700
Subject: [PATCH] Fix: TS error and Feat: Add multi-distro support

---
 src/app/(public)/HomeClient.tsx | 77 ++++++++++++++++++++++++++++-----
 1 file changed, 67 insertions(+), 10 deletions(-)

diff --git a/src/app/(public)/HomeClient.tsx b/src/app/(public)/HomeClient.tsx
index b8ef9df..2049de1 100644
--- a/src/app/(public)/HomeClient.tsx
+++ b/src/app/(public)/HomeClient.tsx
@@ -128,7 +128,7 @@ function CliSnippet({ label, command, t }: { label: string, command: string, t:
     );
 }
 
-function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title: string, steps: string[], selectedOs: string, certificates: CaCertificate[], t: any }) {
+function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro, setLinuxDistro }: { title: string, steps: string[], selectedOs: string, certificates: CaCertificate[], t: any, linuxDistro?: string, setLinuxDistro?: (distro: any) => void }) {
     return (
         <div className="p-8 bg-white dark:bg-gray-800 rounded-[2rem] border border-gray-100 dark:border-gray-700 shadow-sm space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500">
             <div>
@@ -171,11 +171,43 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title:
                             {(selectedOs === 'linux' || selectedOs === 'windows' || selectedOs === 'macos') && (
                                 <div className="space-y-4">
                                     {(selectedOs === 'linux') && (
-                                        <CliSnippet 
-                                            label={t('bundle_cli_label')} 
-                                            command={`sudo apt update && sudo apt install -y curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} 
-                                            t={t} 
-                                        />
+                                        <div className="space-y-4">
+                                            <div className="flex flex-wrap gap-2 mb-4">
+                                                <button onClick={() => setLinuxDistro?.('debian')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Debian/Ubuntu</button>
+                                                <button onClick={() => setLinuxDistro?.('rhel')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>CentOS/RHEL</button>
+                                                <button onClick={() => setLinuxDistro?.('arch')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Arch Linux</button>
+                                                <button onClick={() => setLinuxDistro?.('other')} className={`px-3 py-1.5 rounded-lg text-xs 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-500 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>Other</button>
+                                            </div>
+                                            
+                                            {linuxDistro === 'debian' && (
+                                                <CliSnippet 
+                                                    label={`${t('bundle_cli_label')} (Debian/Ubuntu)`}
+                                                    command={`sudo apt update && sudo apt install -y curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} 
+                                                    t={t} 
+                                                />
+                                            )}
+                                            {linuxDistro === 'rhel' && (
+                                                <CliSnippet 
+                                                    label={`${t('bundle_cli_label')} (RHEL/CentOS)`}
+                                                    command={`(sudo yum install -y curl || sudo dnf install -y curl) && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} 
+                                                    t={t} 
+                                                />
+                                            )}
+                                            {linuxDistro === 'arch' && (
+                                                <CliSnippet 
+                                                    label={`${t('bundle_cli_label')} (Arch Linux)`}
+                                                    command={`sudo pacman -Sy --noconfirm curl && curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} 
+                                                    t={t} 
+                                                />
+                                            )}
+                                            {linuxDistro === 'other' && (
+                                                <CliSnippet 
+                                                    label={`${t('bundle_cli_label')} (Universal)`}
+                                                    command={`curl -sL https://cdn.trustlab.dyzulk.com/ca/bundles/trustlab-all.sh | sudo bash`} 
+                                                    t={t} 
+                                                />
+                                            )}
+                                        </div>
                                     )}
                                     {(selectedOs === 'windows' || selectedOs === 'macos') && (
                                         <div className="flex flex-wrap gap-2">
@@ -232,7 +264,7 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t }: { title:
     );
 }
 
-function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertificate, isRoot: boolean, t: any, selectedOs: string, setSelectedOs: (os: any) => void }) {
+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 }) {
     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 */}
@@ -310,6 +342,30 @@ function CaCard({ cert, isRoot, t, selectedOs, setSelectedOs }: { cert: CaCertif
                         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>
@@ -392,6 +448,7 @@ export default function HomeClient() {
     const [certificates, setCertificates] = useState<CaCertificate[]>([]);
     const [loadingCerts, setLoadingCerts] = useState(true);
     const [selectedOs, setSelectedOs] = useState<'windows' | 'macos' | 'linux' | 'mobile'>('windows');
+    const [linuxDistro, setLinuxDistro] = useState<'debian' | 'rhel' | 'arch' | 'other'>('debian');
 
     useEffect(() => {
         const fetchCertificates = async () => {
@@ -577,7 +634,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} />
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
                                                 ))}
                                             </div>
                                         </div>
@@ -592,7 +649,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} />
+                                                    <CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />
                                                 ))}
                                             </div>
                                         </div>
@@ -616,7 +673,7 @@ export default function HomeClient() {
                                     <div className="space-y-4">
                                         {selectedOs === 'windows' && <OsGuideContent title="Windows Installation" steps={t.raw('guide_steps_windows')} selectedOs={selectedOs} certificates={certificates} t={t} />}
                                         {selectedOs === 'macos' && <OsGuideContent title="macOS Installation" steps={t.raw('guide_steps_macos')} selectedOs={selectedOs} certificates={certificates} t={t} />}
-                                        {selectedOs === 'linux' && <OsGuideContent title="Linux Installation" steps={t.raw('guide_steps_linux')} selectedOs={selectedOs} certificates={certificates} t={t} />}
+                                        {selectedOs === 'linux' && <OsGuideContent title="Linux Installation" steps={t.raw('guide_steps_linux')} selectedOs={selectedOs} certificates={certificates} t={t} linuxDistro={linuxDistro} setLinuxDistro={setLinuxDistro} />}
                                         {selectedOs === 'mobile' && <OsGuideContent title="Mobile Installation" steps={t.raw('guide_steps_mobile')} selectedOs={selectedOs} certificates={certificates} t={t} />}
                                     </div>
                                 </div>