Initial commit

2026-01-05 09:58:59 +07:00 · 2026-01-05 09:58:59 +07:00 · 3857598de4
commit 3857598de4
159 changed files with 14537 additions and 0 deletions
--- a/src/shared/components/Header.js
+++ b/src/shared/components/Header.js
@ -0,0 +1,109 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ThemeToggle } from "@/shared/components";
+import { APP_CONFIG, OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
+
+const getPageInfo = (pathname) => {
+  if (!pathname) return { title: "", description: "", breadcrumbs: [] };
+  
+  // Provider detail page: /dashboard/providers/[id]
+  const providerMatch = pathname.match(/\/providers\/([^/]+)$/);
+  if (providerMatch) {
+    const providerId = providerMatch[1];
+    const providerInfo = OAUTH_PROVIDERS[providerId] || APIKEY_PROVIDERS[providerId];
+    if (providerInfo) {
+      return {
+        title: providerInfo.name,
+        description: "",
+        breadcrumbs: [
+          { label: "Providers", href: "/dashboard/providers" },
+          { label: providerInfo.name, image: `/providers/${providerInfo.id}.png` }
+        ]
+      };
+    }
+  }
+  
+  if (pathname.includes("/providers")) return { title: "Providers", description: "Manage your AI provider connections", breadcrumbs: [] };
+  if (pathname.includes("/combos")) return { title: "Combos", description: "Model combos with fallback", breadcrumbs: [] };
+  if (pathname.includes("/cli-tools")) return { title: "CLI Tools", description: "Configure CLI tools", breadcrumbs: [] };
+  if (pathname.includes("/endpoint")) return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
+  if (pathname.includes("/profile")) return { title: "Settings", description: "Manage your preferences", breadcrumbs: [] };
+  if (pathname === "/dashboard") return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
+  return { title: "", description: "", breadcrumbs: [] };
+};
+
+export default function Header({ onMenuClick, showMenuButton = true }) {
+  const pathname = usePathname();
+  const { title, description, breadcrumbs } = getPageInfo(pathname);
+
+  return (
+    <header className="flex items-center justify-between px-8 py-5 border-b border-border bg-bg/80 backdrop-blur-md z-10 sticky top-0">
+      {/* Mobile menu button */}
+      <div className="flex items-center gap-3 lg:hidden">
+        {showMenuButton && (
+          <button
+            onClick={onMenuClick}
+            className="text-text-main hover:text-primary transition-colors"
+          >
+            <span className="material-symbols-outlined">menu</span>
+          </button>
+        )}
+      </div>
+
+      {/* Page title with breadcrumbs - desktop */}
+      <div className="hidden lg:flex flex-col">
+        {breadcrumbs.length > 0 ? (
+          <div className="flex items-center gap-2">
+            {breadcrumbs.map((crumb, index) => (
+              <div key={index} className="flex items-center gap-2">
+                {index > 0 && (
+                  <span className="material-symbols-outlined text-text-muted text-base">
+                    chevron_right
+                  </span>
+                )}
+                {crumb.href ? (
+                  <Link
+                    href={crumb.href}
+                    className="text-text-muted hover:text-primary transition-colors"
+                  >
+                    {crumb.label}
+                  </Link>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    {crumb.image && (
+                      <img
+                        src={crumb.image}
+                        alt={crumb.label}
+                        className="size-7 object-contain rounded"
+                        onError={(e) => { e.target.style.display = "none"; }}
+                      />
+                    )}
+                    <h1 className="text-2xl font-semibold text-text-main tracking-tight">
+                      {crumb.label}
+                    </h1>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : title ? (
+          <div>
+            <h1 className="text-2xl font-semibold text-text-main tracking-tight">{title}</h1>
+            {description && (
+              <p className="text-sm text-text-muted">{description}</p>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      {/* Right actions */}
+      <div className="flex items-center gap-3 ml-auto">
+        {/* Theme toggle */}
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}
+