refactor: Migrate documentation content, rebuild UI components, and update core architecture.

styles/algolia.css

@@ -1,14 +1,3 @@
-/*
-================================================================================
- DocSearch Component Styling (Refactored Version)
-================================================================================
-*/
-
-/* -- LANGKAH 1: Definisi Variabel Global --
-  Variabel tema DocSearch sekarang didefinisikan secara global di :root.
-  Ini menyederhanakan pewarisan tema dan memastikan konsistensi.
-  Mode gelap secara otomatis menimpa variabel ini karena .dark di globals.css.
-*/
 :root {
   --docsearch-primary-color: hsl(var(--primary));
   --docsearch-text-color: hsl(var(--muted-foreground));
@@ -18,47 +7,43 @@
   --docsearch-muted-color: hsl(var(--muted-foreground));
   --docsearch-container-background: rgba(0, 0, 0, 0.7);
   --docsearch-logo-color: hsl(var(--primary-foreground));
-  
+
   /* Modal */
   --docsearch-modal-width: 560px;
   --docsearch-modal-height: 600px;
   --docsearch-modal-background: hsl(var(--background));
   --docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
-  
+
   /* SearchBox */
   --docsearch-searchbox-height: 56px;
   --docsearch-searchbox-background: hsl(var(--input));
   --docsearch-searchbox-focus-background: hsl(var(--card));
   --docsearch-searchbox-shadow: none;
-  
-  /* Hit (Hasil Pencarian) */
+
+  /* Hit (Search Result) */
   --docsearch-hit-height: 56px;
   --docsearch-hit-color: hsl(var(--foreground));
   --docsearch-hit-active-color: hsl(var(--primary-foreground));
   --docsearch-hit-background: hsl(var(--card));
   --docsearch-hit-shadow: none;
-  
+
   /* Keys */
   --docsearch-key-gradient: none;
   --docsearch-key-shadow: none;
   --docsearch-key-pressed-shadow: none;
-  
+
   /* Footer */
   --docsearch-footer-height: 44px;
   --docsearch-footer-background: hsl(var(--background));
   --docsearch-footer-shadow: none;
 }
 
-/* -- LANGKAH 2: Gaya untuk Tombol Awal --
-  Gaya ini spesifik untuk tombol yang ada di Navbar, 
-  yang dibungkus oleh <div class="docsearch">.
-*/
 .docsearch .DocSearch-Button {
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
   border-radius: 9999px;
-  width: 160px;
-  height: 40px;
+  width: 250px;
+  height: 35px;
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
@@ -71,8 +56,8 @@
 
 .docsearch .DocSearch-Search-Icon {
   color: var(--docsearch-muted-color);
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .docsearch .DocSearch-Button-Placeholder {
@@ -85,7 +70,7 @@
 
 .docsearch .DocSearch-Button-Key {
   background: var(--docsearch-primary-color);
-  color: var(--docsearch-logo-color); /* Menggunakan variabel yg relevan */
+  color: var(--docsearch-logo-color);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -96,10 +81,6 @@
   top: 0;
 }
 
-/* -- LANGKAH 3: Gaya untuk Modal dan Isinya --
-  Gaya ini menargetkan elemen-elemen modal yang dirender terpisah.
-  Karena variabel sudah global, kita hanya perlu menata elemennya.
-*/
 .DocSearch-Container .DocSearch-Modal {
   backdrop-filter: blur(8px);
 }
@@ -117,7 +98,6 @@
   border-top: 1px solid hsl(var(--border));
 }
 
-/* Gaya untuk tombol keyboard di footer */
 .DocSearch-Footer--commands kbd {
   background-color: hsl(var(--secondary));
   border: 1px solid hsl(var(--border));
@@ -130,7 +110,6 @@
   justify-content: center;
 }
 
-/* Menghilangkan gaya default dari ikon di dalam tombol footer */
 .DocSearch-Commands-Key {
   background: none;
   color: hsl(var(--muted-foreground));
@@ -143,9 +122,6 @@
   border-radius: 6px;
 }
 
-/* -- LANGKAH 4: Gaya Responsif --
-  Tidak ada perubahan, hanya mempertahankan fungsionalitas mobile.
-*/
 @media (max-width: 768px) {
   .docsearch .DocSearch-Button {
     width: 40px;
@@ -155,6 +131,7 @@
     background: none;
     border: none;
   }
+
   .docsearch .DocSearch-Button-Placeholder,
   .docsearch .DocSearch-Button-Key {
     display: none;