@nexttylabs/echo 0.2.0

package/components/portal/help-center.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon?: string; // Emoji icon
+}
+
+interface HelpCenterLayoutProps {
+  organizationSlug: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const navItems: NavItem[] = [
+  { label: "Feedback", href: "", icon: "💬" },
+  { label: "Roadmap", href: "/roadmap", icon: "🗺️" },
+  { label: "Changelog", href: "/changelog", icon: "📋" },
+];
+
+export function HelpCenterLayout({
+  organizationSlug,
+  children,
+  className,
+}: HelpCenterLayoutProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className={cn("flex flex-col lg:flex-row gap-8", className)}>
+      {/* Left Sidebar */}
+      <aside className="lg:w-64 shrink-0">
+        <nav className="sticky top-24 space-y-1">
+          {navItems.map((item) => {
+            const href = `/${organizationSlug}${item.href}`;
+            const isActive = pathname === href;
+
+            return (
+              <Link
+                key={item.href}
+                href={href}
+                className={cn(
+                  "flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                )}
+              >
+                <span className="text-lg">{item.icon}</span>
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
+
+interface HelpCenterSearchProps {
+  className?: string;
+}
+
+export function HelpCenterSearch({ className }: HelpCenterSearchProps) {
+  return (
+    <div className={cn("text-center space-y-8", className)}>
+      {/* Hero */}
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">
+          How can we help you?
+        </h1>
+        <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+          Search our knowledge base or browse categories below.
+        </p>
+      </div>
+
+      {/* Search Input */}
+      <div className="max-w-xl mx-auto relative">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+        <Input
+          type="search"
+          placeholder="Search for help..."
+          className="h-14 pl-12 text-lg rounded-full shadow-sm"
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface HelpArticle {
+  id: string;
+  title: string;
+  excerpt?: string;
+  category: string;
+}
+
+interface HelpArticleListProps {
+  articles: HelpArticle[];
+  className?: string;
+}
+
+export function HelpArticleList({ articles, className }: HelpArticleListProps) {
+  // Group by category
+  const grouped = articles.reduce(
+    (acc, article) => {
+      if (!acc[article.category]) {
+        acc[article.category] = [];
+      }
+      acc[article.category].push(article);
+      return acc;
+    },
+    {} as Record<string, HelpArticle[]>
+  );
+
+  if (articles.length === 0) {
+    return (
+      <div className="text-center py-16 text-muted-foreground">
+        <p>No articles available yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("grid gap-8 md:grid-cols-2 lg:grid-cols-3", className)}>
+      {Object.entries(grouped).map(([category, categoryArticles]) => (
+        <div key={category} className="space-y-4">
+          <h3 className="font-semibold text-lg">{category}</h3>
+          <div className="space-y-2">
+            {categoryArticles.map((article) => (
+              <Link
+                key={article.id}
+                href={`/help/${article.id}`}
+                className="block text-sm text-muted-foreground hover:text-primary transition-colors"
+              >
+                {article.title}
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/portal/leaderboard.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { getDefaultLeaderboardSettings } from "@/lib/portal/leaderboard-settings";
+
+export function Leaderboard() {
+  const settings = getDefaultLeaderboardSettings();
+  if (!settings.enabled) return null;
+  return (
+    <div className="leaderboard">
+      <h3>Leaderboard</h3>
+      <p>Coming soon...</p>
+    </div>
+  );
+}

package/components/portal/portal-header.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Bell, LayoutDashboard, LogIn } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { authClient } from "@/lib/auth/client";
+
+interface PortalHeaderProps {
+  logo: string;
+  organizationSlug: string;
+  user?: {
+    name: string;
+    email: string;
+    image?: string | null;
+  } | null;
+  className?: string;
+}
+
+export function PortalHeader({
+  logo,
+  organizationSlug,
+  user,
+  className,
+}: PortalHeaderProps) {
+  const router = useRouter();
+  const initials = user?.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+  const handleSignOut = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push(`/${organizationSlug}`);
+        },
+      },
+    });
+  };
+
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        className
+      )}
+    >
+      <div className="container mx-auto flex h-16 items-center justify-between px-4">
+        {/* Logo */}
+        <Link
+          href={`/${organizationSlug}`}
+          className="flex items-center gap-2 font-semibold text-lg hover:opacity-80 transition-opacity"
+        >
+          <span className="bg-primary text-primary-foreground rounded-lg px-2 py-1 text-sm font-bold">
+            {logo.charAt(0).toUpperCase()}
+          </span>
+          <span>{logo}</span>
+        </Link>
+
+        {/* Utility Area */}
+        <div className="flex items-center gap-2">
+          {/* Notifications */}
+          <Button variant="ghost" size="icon" className="relative">
+            <Bell className="h-5 w-5" />
+            <span className="sr-only">Notifications</span>
+          </Button>
+
+          {/* Dashboard Button */}
+          <Button variant="outline" size="sm" asChild className="hidden sm:flex">
+            <Link href="/dashboard">
+              <LayoutDashboard className="h-4 w-4 mr-2" />
+              Dashboard
+            </Link>
+          </Button>
+
+          {/* User Menu */}
+          {user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="rounded-full h-9 w-9"
+                >
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={user.image ?? undefined} alt={user.name} />
+                    <AvatarFallback className="bg-primary/10 text-primary text-xs">
+                      {initials || "U"}
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <div className="px-2 py-1.5">
+                  <p className="text-sm font-medium">{user.name}</p>
+                  <p className="text-xs text-muted-foreground">{user.email}</p>
+                </div>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link href="/dashboard">Dashboard</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/settings/profile">Settings</Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleSignOut}>
+                  Sign Out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Button variant="default" size="sm" asChild>
+              <Link href="/login">
+                <LogIn className="h-4 w-4 mr-2" />
+                Sign In
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

package/components/portal/portal-layout.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/config";
+import { PortalHeader } from "./portal-header";
+import { PortalTabNav, type PortalSection } from "./portal-tab-nav";
+import { cn } from "@/lib/utils";
+
+interface PortalLayoutProps {
+  organizationName: string;
+  organizationSlug: string;
+  sections: readonly PortalSection[];
+  children: React.ReactNode;
+  className?: string;
+}
+
+export async function PortalLayout({
+  organizationName,
+  organizationSlug,
+  sections,
+  children,
+  className,
+}: PortalLayoutProps) {
+  // Get current user session
+  const session = await auth.api.getSession({ headers: await headers() });
+  const user = session?.user
+    ? {
+        name: session.user.name ?? "User",
+        email: session.user.email ?? "",
+        image: session.user.image,
+      }
+    : null;
+
+  return (
+    <div className={cn("min-h-screen bg-muted/30", className)}>
+      <PortalHeader
+        logo={organizationName}
+        organizationSlug={organizationSlug}
+        user={user}
+      />
+      <PortalTabNav sections={sections} />
+      <main className="container mx-auto px-4 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}

package/components/portal/portal-modules-panel.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { updatePortalSettings } from "@/lib/services/portal-settings";
+import type { PortalConfig } from "@/lib/db/schema";
+
+interface PortalModulesPanelProps {
+  organizationId: string;
+  initialModules: NonNullable<PortalConfig["modules"]>;
+}
+
+export function PortalModulesPanel({ organizationId, initialModules }: PortalModulesPanelProps) {
+  const t = useTranslations("settings.portal.modules");
+  const [modules, setModules] = useState(initialModules);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const updateModule = (key: keyof typeof modules, value: boolean) => {
+    setModules((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const onSave = async () => {
+    setSaving(true);
+    setMessage(null);
+
+    const result = await updatePortalSettings(organizationId, "modules", modules);
+
+    if (result.success) {
+      setMessage(t("saved"));
+    } else {
+      setMessage(result.error || t("saveFailed"));
+    }
+
+    setSaving(false);
+  };
+
+  return (
+    <div className="space-y-4 rounded-xl border bg-white/80 p-5 shadow-sm">
+      <div>
+        <h3 className="text-sm font-semibold text-slate-900">{t("panelTitle")}</h3>
+        <p className="mt-1 text-sm text-slate-600">
+          {t("panelDescription")}
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <ModuleRow
+          label={t("rows.feedback.label")}
+          description={t("rows.feedback.description")}
+          checked={modules.feedback ?? true}
+          onChange={(value) => updateModule("feedback", value)}
+        />
+        <ModuleRow
+          label={t("rows.roadmap.label")}
+          description={t("rows.roadmap.description")}
+          checked={modules.roadmap ?? true}
+          onChange={(value) => updateModule("roadmap", value)}
+        />
+        <ModuleRow
+          label={t("rows.changelog.label")}
+          description={t("rows.changelog.description")}
+          checked={modules.changelog ?? true}
+          onChange={(value) => updateModule("changelog", value)}
+        />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Button onClick={onSave} disabled={saving}>
+          {saving ? t("saving") : t("saveButton")}
+        </Button>
+        {message && <span className="text-sm text-slate-600">{message}</span>}
+      </div>
+    </div>
+  );
+}
+
+function ModuleRow({
+  label,
+  description,
+  checked,
+  onChange,
+}: {
+  label: string;
+  description: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-white px-4 py-3">
+      <div>
+        <p className="text-sm font-medium text-slate-900">{label}</p>
+        <p className="text-xs text-slate-500">{description}</p>
+      </div>
+      <Switch checked={checked} onCheckedChange={onChange} />
+    </div>
+  );
+}

package/components/portal/portal-nav.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+type Section = {
+  label: string;
+  href: string;
+};
+
+type PortalNavProps = {
+  sections: readonly Section[];
+};
+
+export function PortalNav({ sections }: PortalNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex items-center gap-1">
+      {sections.map((section) => {
+        const isActive = pathname === section.href;
+        return (
+          <Link
+            key={section.href}
+            href={section.href}
+            className={cn(
+              "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              isActive
+                ? "bg-accent text-accent-foreground"
+                : "text-muted-foreground"
+            )}
+          >
+            {section.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}