@nexttylabs/echo 0.2.0

package/components/portal/portal-overview.tsx

@@ -0,0 +1,174 @@
+/*
+ * 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 { getTranslations } from "next-intl/server";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { PortalModulesPanel } from "@/components/portal/portal-modules-panel";
+import { getDefaultPortalModules } from "@/lib/portal/modules";
+import type { PortalConfig } from "@/lib/db/schema";
+
+interface PortalOverviewProps {
+  portalLink: string;
+  portalConfig: PortalConfig | null;
+  organizationId: string;
+}
+
+export async function PortalOverview({
+  portalLink,
+  portalConfig,
+  organizationId,
+}: PortalOverviewProps) {
+  const t = await getTranslations("settings.portal.overview");
+
+  const portalEnabled = portalConfig?.sharing?.enabled ?? true;
+  const themeSummary = portalConfig?.theme?.primaryColor
+    ? t("themeSummary.custom", { color: portalConfig.theme.primaryColor })
+    : t("themeSummary.default");
+  const languageSummary = portalConfig?.defaultLanguage ?? "zh-CN";
+  const seoSummary = portalConfig?.seo?.metaTitle
+    ? portalConfig.seo.metaTitle
+    : t("seoSummary.unset");
+
+  const modules = portalConfig?.modules ?? getDefaultPortalModules();
+
+  return (
+    <div className="space-y-8">
+      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+        <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div>
+            <CardTitle className="text-xl">{t("status.title")}</CardTitle>
+            <CardDescription>{t("status.description")}</CardDescription>
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <Badge variant={portalEnabled ? "default" : "outline"}>
+              {portalEnabled ? t("status.badgeEnabled") : t("status.badgeDisabled")}
+            </Badge>
+            <Button asChild variant="outline" size="sm">
+              <Link href={portalLink}>{t("status.preview")}</Link>
+            </Button>
+            <Button asChild size="sm">
+              <Link href={portalLink}>{t("status.open")}</Link>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="text-sm text-slate-600">
+            {t("status.portalLink")}{" "}
+            <span className="font-medium text-slate-900">{portalLink}</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <PortalGroupCard
+          title={t("cards.experience.title")}
+          description={t("cards.experience.description")}
+          items={[
+            themeSummary,
+            portalConfig?.copy?.title
+              ? t("cards.experience.items.copyTitle", { title: portalConfig.copy.title })
+              : t("cards.experience.items.copyTitleUnset"),
+            t("cards.experience.items.defaultLanguage", { locale: languageSummary }),
+          ]}
+          href={`/settings/portal-branding`}
+          actionLabel={t("cards.action")}
+        />
+        <PortalGroupCard
+          title={t("cards.growth.title")}
+          description={t("cards.growth.description")}
+          items={[
+            seoSummary,
+            portalConfig?.sharing?.socialSharing
+              ? t("cards.growth.items.socialSharingEnabled")
+              : t("cards.growth.items.socialSharingDisabled"),
+            portalConfig?.seo?.ogImage
+              ? t("cards.growth.items.ogImageSet")
+              : t("cards.growth.items.ogImageUnset"),
+          ]}
+          href={`/settings/portal-growth`}
+          actionLabel={t("cards.action")}
+        />
+        <PortalGroupCard
+          title={t("cards.visibility.title")}
+          description={t("cards.visibility.description")}
+          items={[
+            portalEnabled ? t("cards.visibility.items.portalEnabled") : t("cards.visibility.items.portalDisabled"),
+            portalConfig?.sharing?.allowPublicVoting
+              ? t("cards.visibility.items.publicVotingEnabled")
+              : t("cards.visibility.items.publicVotingDisabled"),
+            portalConfig?.seo?.noIndex
+              ? t("cards.visibility.items.noIndex")
+              : t("cards.visibility.items.index"),
+          ]}
+          href={`/settings/portal-access`}
+          actionLabel={t("cards.action")}
+        />
+      </div>
+
+      <details className="group">
+        <summary className="cursor-pointer list-none text-sm font-semibold text-slate-700">
+          <span className="inline-flex items-center gap-2">
+            <span className="rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-600">
+              {t("modules.badge")}
+            </span>
+            {t("modules.summary")}
+          </span>
+        </summary>
+        <div className="mt-4">
+          <PortalModulesPanel organizationId={organizationId} initialModules={modules} />
+        </div>
+      </details>
+    </div>
+  );
+}
+
+function PortalGroupCard({
+  title,
+  description,
+  items,
+  href,
+  actionLabel,
+}: {
+  title: string;
+  description: string;
+  items: string[];
+  href: string;
+  actionLabel: string;
+}) {
+  return (
+    <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <ul className="space-y-1 text-sm text-slate-600">
+          {items.map((item) => (
+            <li key={item}>• {item}</li>
+          ))}
+        </ul>
+        <Button asChild variant="outline" size="sm">
+          <Link href={href}>{actionLabel}</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/components/portal/portal-settings-nav.tsx

@@ -0,0 +1,62 @@
+"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";
+
+const navItems = [
+  { label: "概览", slug: "" },
+  { label: "体验", slug: "/experience" },
+  { label: "传播", slug: "/growth" },
+  { label: "可见性", slug: "/access" },
+];
+
+interface PortalSettingsNavProps {
+  baseHref: string;
+}
+
+export function PortalSettingsNav({ baseHref }: PortalSettingsNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex flex-wrap gap-2 rounded-xl border bg-white/70 p-2 shadow-sm">
+      {navItems.map((item) => {
+        const href = `${baseHref}${item.slug}`;
+        const isActive = pathname === href;
+
+        return (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-slate-900 text-white"
+                : "text-slate-700 hover:bg-slate-100",
+            )}
+          >
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

package/components/portal/portal-settings-shell.tsx

@@ -0,0 +1,71 @@
+"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 { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface PortalSettingsShellProps {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+export function PortalSettingsShell({
+  title,
+  description,
+  children,
+}: PortalSettingsShellProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+
+      {/* Settings Form Content */}
+      <Card>
+        <CardContent className="pt-6">{children}</CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function PortalSettingsShellSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-64" />
+        </div>
+        <Skeleton className="h-10 w-[200px]" />
+      </div>
+      <Card>
+        <CardContent className="pt-6">
+          <div className="space-y-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/components/portal/portal-shell.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 { Suspense } from "react";
+import { PortalNav } from "./portal-nav";
+import { EmbeddedFeedbackForm } from "@/components/feedback/embedded-feedback-form";
+
+type Section = {
+  label: string;
+  href: string;
+};
+
+type PortalShellProps = {
+  title: string;
+  sections: readonly Section[];
+  organizationId?: string;
+  children?: React.ReactNode;
+};
+
+export function PortalShell({ title, sections, organizationId, children }: PortalShellProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <h1 className="text-xl font-semibold">{title}</h1>
+          <PortalNav sections={sections} />
+        </div>
+      </header>
+      <main className="container mx-auto px-4 py-8">
+        <div className="mx-auto max-w-2xl space-y-8">
+          {children ?? (
+            <>
+              <div className="text-center">
+                <h2 className="text-2xl font-bold tracking-tight">分享你的反馈</h2>
+                <p className="mt-2 text-muted-foreground">
+                  帮助我们了解你的想法，让产品变得更好
+                </p>
+              </div>
+              <Suspense fallback={<div className="animate-pulse h-40 bg-muted rounded-lg" />}>
+                <EmbeddedFeedbackForm organizationId={organizationId} />
+              </Suspense>
+            </>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

package/components/portal/portal-tab-nav.tsx

@@ -0,0 +1,77 @@
+"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";
+
+export interface PortalSection {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+  exact?: boolean;
+}
+
+interface PortalTabNavProps {
+  sections: readonly PortalSection[];
+  className?: string;
+}
+
+export function PortalTabNav({ sections, className }: PortalTabNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <div className={cn("border-b bg-background", className)}>
+      <div className="container mx-auto px-4">
+        <nav className="flex items-center gap-2 py-2" role="tablist">
+          {sections.map((section) => {
+            // Check if current path matches this section
+            const isActive = section.exact
+              ? pathname === section.href
+              : pathname === section.href ||
+                (section.href !== "/" && pathname.startsWith(section.href + "/"));
+
+            return (
+              <Link
+                key={section.href}
+                href={section.href}
+                role="tab"
+                aria-selected={isActive}
+                className={cn(
+                  "relative inline-flex h-10 items-center px-4 text-sm font-medium transition-colors",
+                  "rounded-full border border-transparent hover:bg-muted/60 hover:border-border/40",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isActive
+                    ? "bg-muted/70 text-foreground border-border/60 font-semibold shadow-[inset_0_-1px_0_0_hsl(var(--border)),0_1px_2px_hsl(var(--foreground)/0.08)]"
+                    : "text-muted-foreground/70 hover:text-foreground"
+                )}
+              >
+                <span className="inline-flex items-center gap-2 leading-none [&_svg]:size-4 [&_svg]:align-middle">
+                  {section.icon}
+                  {section.label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}

package/components/portal/project-switcher.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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/>.
+ */
+
+export function ProjectSwitcher() {
+  return null;
+}

package/components/portal/roadmap-board.tsx

@@ -0,0 +1,82 @@
+"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 { RoadmapColumn, type RoadmapItem } from "./roadmap-column";
+import { Button } from "@/components/ui/button";
+import { Edit } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type RoadmapStatus = "backlog" | "next-up" | "in-progress" | "done";
+
+interface RoadmapBoardProps {
+  items: RoadmapItem[];
+  isAdmin?: boolean;
+  className?: string;
+}
+
+const columns: { status: RoadmapStatus; label: string; color: string }[] = [
+  { status: "backlog", label: "Backlog", color: "bg-gray-100 dark:bg-gray-800" },
+  { status: "next-up", label: "Next Up", color: "bg-blue-50 dark:bg-blue-950" },
+  { status: "in-progress", label: "In Progress", color: "bg-amber-50 dark:bg-amber-950" },
+  { status: "done", label: "Done", color: "bg-green-50 dark:bg-green-950" },
+];
+
+export function RoadmapBoard({
+  items,
+  isAdmin = false,
+  className,
+}: RoadmapBoardProps) {
+  // Group items by status
+  const groupedItems = columns.reduce(
+    (acc, column) => {
+      acc[column.status] = items.filter((item) => item.status === column.status);
+      return acc;
+    },
+    {} as Record<RoadmapStatus, RoadmapItem[]>
+  );
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Kanban Board */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {columns.map((column) => (
+          <RoadmapColumn
+            key={column.status}
+            status={column.status}
+            label={column.label}
+            items={groupedItems[column.status]}
+            headerColor={column.color}
+          />
+        ))}
+      </div>
+
+      {/* Admin Edit Button */}
+      {isAdmin && (
+        <Button
+          variant="secondary"
+          className="fixed bottom-6 right-6 shadow-lg gap-2 z-40"
+        >
+          <Edit className="h-4 w-4" />
+          Edit Roadmap
+        </Button>
+      )}
+    </div>
+  );
+}

package/components/portal/roadmap-card.tsx

@@ -0,0 +1,76 @@
+"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 { ChevronUp } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { RoadmapItem } from "./roadmap-column";
+
+interface RoadmapCardProps {
+  item: RoadmapItem;
+  className?: string;
+}
+
+export function RoadmapCard({ item, className }: RoadmapCardProps) {
+  const handleVote = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // TODO: Implement voting API call
+  };
+
+  return (
+    <Link
+      href={`/feedback/${item.id}`}
+      className={cn(
+        "group block rounded-lg border bg-card p-3 shadow-sm transition-all",
+        "hover:shadow-md hover:border-primary/30 hover:-translate-y-0.5",
+        className
+      )}
+    >
+      <div className="space-y-2">
+        {/* Title */}
+        <h4 className="font-medium text-sm line-clamp-2">{item.title}</h4>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between">
+          {/* Category Tag */}
+          {item.category && (
+            <Badge variant="secondary" className="text-xs">
+              {item.category}
+            </Badge>
+          )}
+
+          {/* Vote Button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-auto gap-1 px-2 py-1 text-xs hover:bg-primary/10 hover:text-primary"
+            onClick={handleVote}
+          >
+            <ChevronUp className="h-3 w-3" />
+            <span>{item.voteCount}</span>
+          </Button>
+        </div>
+      </div>
+    </Link>
+  );
+}