Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

apps/web/app/_components/NavTabs.tsx

@@ -2,32 +2,35 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { MessageSquare, FileSearch } from "lucide-react";
 import { cn } from "@duoc-thu/ui";
 
 const TABS = [
-  { href: "/", label: "Trò chuyện" },
-  { href: "/tra-cuu", label: "Tra cứu cùng PDF" },
+  { href: "/", label: "Trò chuyện AI", icon: MessageSquare },
+  { href: "/tra-cuu", label: "Tra cứu Dược thư", icon: FileSearch },
 ];
 
 export function NavTabs() {
   const pathname = usePathname();
 
   return (
-    <nav className="flex gap-1" aria-label="Chuyển chế độ">
+    <nav className="flex items-center gap-1 rounded-full border border-border-subtle bg-surface p-1 shadow-sm" aria-label="Chuyển chế độ">
       {TABS.map((tab) => {
         const isActive = pathname === tab.href;
+        const Icon = tab.icon;
         return (
           <Link
             key={tab.href}
             href={tab.href}
             className={cn(
-              "rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors",
+              "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all duration-200",
               isActive
-                ? "bg-white/20 text-primary-foreground"
-                : "text-primary-foreground/70 hover:bg-white/10 hover:text-primary-foreground"
+                ? "bg-accent-soft text-accent-primary border border-border-accent/40 shadow-sm"
+                : "text-txt-muted hover:bg-surface-hover hover:text-txt-primary"
             )}
           >
-            {tab.label}
+            <Icon className={cn("h-3.5 w-3.5", isActive ? "text-accent-primary" : "text-txt-muted")} />
+            <span>{tab.label}</span>
           </Link>
         );
       })}