Initial open-source self-hosted Songs2YT edition

2026-07-17 02:23:59 +02:00
commit 2aa8a84781
134 changed files with 17758 additions and 0 deletions
@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { signOut } from "next-auth/react";
+import { Logo } from "@/components/Logo";
+import { SignOutButton } from "@/components/SignOutButton";
+import { MobileMenuButton, MobileSidebar, dashboardSidebarLinkClass } from "@/components/MobileSidebar";
+
+const NAV_LINKS = [
+  { href: "/dashboard", label: "Create", match: (path: string) => path === "/dashboard" },
+  {
+    href: "/dashboard/history",
+    label: "History",
+    match: (path: string) => path.startsWith("/dashboard/history"),
+  },
+  {
+    href: "/dashboard/settings",
+    label: "Settings",
+    match: (path: string) => path.startsWith("/dashboard/settings"),
+  },
+] as const;
+
+type Props = {
+  channelTitle?: string | null;
+};
+
+export function DashboardNav({ channelTitle }: Props) {
+  const pathname = usePathname();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <>
+      <header className="border-b border-gray-800 bg-surface">
+        <div className="mx-auto flex max-w-4xl items-center justify-between px-6 py-4">
+          <div className="min-w-0">
+            <Logo href="/dashboard" size="sm" />
+            {channelTitle && (
+              <p className="truncate text-xs text-gray-500">Channel: {channelTitle}</p>
+            )}
+          </div>
+
+          <div className="hidden items-center gap-4 sm:flex">
+            <nav className="flex items-center gap-4">
+              {NAV_LINKS.map(({ href, label, match }) => {
+                const active = match(pathname);
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    className={`text-sm font-medium transition-colors duration-200 ${
+                      active ? "text-white" : "text-gray-400 hover:text-white"
+                    }`}
+                  >
+                    {label}
+                  </Link>
+                );
+              })}
+            </nav>
+            <SignOutButton />
+          </div>
+
+          <MobileMenuButton
+            open={menuOpen}
+            onClick={() => setMenuOpen((prev) => !prev)}
+          />
+        </div>
+      </header>
+
+      <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Dashboard">
+        {NAV_LINKS.map(({ href, label, match }) => (
+          <Link
+            key={href}
+            href={href}
+            onClick={() => setMenuOpen(false)}
+            className={dashboardSidebarLinkClass(match(pathname))}
+          >
+            {label}
+          </Link>
+        ))}
+        <button
+          type="button"
+          onClick={() => {
+            setMenuOpen(false);
+            signOut({ callbackUrl: "/" });
+          }}
+          className={`${dashboardSidebarLinkClass(false, true)} w-full text-left`}
+        >
+          Sign out
+        </button>
+      </MobileSidebar>
+    </>
+  );
+}