@nexttylabs/echo 0.2.0

package/components/layout/sidebar.tsx

@@ -0,0 +1,279 @@
+"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, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuGroup,
+} from "@/components/ui/dropdown-menu";
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Settings,
+  LogOut,
+  ChevronUp,
+  Building2,
+  Plus,
+  Check,
+  Languages,
+} from "lucide-react";
+import type { UserRole } from "@/lib/auth/permissions";
+import { authClient } from "@/lib/auth/client";
+import { useLocale } from "next-intl";
+import { useTransition, useEffect, useRef } from "react";
+import { LOCALE_COOKIE_NAME, SUPPORTED_LOCALES, type AppLocale } from "@/i18n/config";
+import {
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "@/components/ui/dropdown-menu";
+
+interface SidebarProps {
+  user: {
+    name: string;
+    email: string;
+    image?: string | null;
+    role: UserRole;
+  };
+  organizations?: Array<{ id: string; name: string; slug: string; role: string }>;
+  currentOrgId?: string | null;
+  onClose?: () => void;
+}
+
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
+
+export function Sidebar({ user, organizations = [], currentOrgId, onClose }: SidebarProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations("navigation");
+  const tLang = useTranslations("language");
+  const locale = useLocale() as AppLocale;
+  const [isPending, startTransition] = useTransition();
+  const pendingOrgIdRef = useRef<string | null>(null);
+  const pendingLocaleRef = useRef<AppLocale | null>(null);
+
+  const navItems = [
+    { href: "/dashboard", label: t("dashboard"), icon: LayoutDashboard },
+    { href: "/admin/feedback", label: t("feedback"), icon: MessageSquare },
+  ];
+
+  const handleLinkClick = () => {
+    onClose?.();
+  };
+
+  const handleLogout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/");
+        },
+      },
+    });
+    onClose?.();
+  };
+
+  // Set organization cookie when pendingOrgId changes
+  useEffect(() => {
+    const orgId = pendingOrgIdRef.current;
+    if (!orgId) return;
+    const params = new URLSearchParams(searchParams);
+    params.set("organizationId", orgId);
+    document.cookie = `orgId=${orgId};path=/;max-age=${COOKIE_MAX_AGE_SECONDS};samesite=lax`;
+    router.replace(`/dashboard?${params.toString()}`);
+    startTransition(() => {
+      pendingOrgIdRef.current = null;
+    });
+    onClose?.();
+  }, [searchParams, router, onClose]);
+
+  const handleOrgSwitch = (orgId: string) => {
+    pendingOrgIdRef.current = orgId;
+  };
+
+  // Set locale cookie when pendingLocale changes
+  useEffect(() => {
+    const nextLocale = pendingLocaleRef.current;
+    if (!nextLocale) return;
+    if (nextLocale === locale) {
+      startTransition(() => {
+        pendingLocaleRef.current = null;
+      });
+      return;
+    }
+    const secure = window.location.protocol === "https:" ? ";secure" : "";
+    document.cookie = `${LOCALE_COOKIE_NAME}=${nextLocale};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax${secure}`;
+    startTransition(() => {
+      router.refresh();
+      pendingLocaleRef.current = null;
+    });
+  }, [locale, router]);
+
+  const handleLocaleChange = (nextLocale: AppLocale) => {
+    pendingLocaleRef.current = nextLocale;
+  };
+
+  const currentOrg = organizations.find((org) => org.id === currentOrgId);
+
+  return (
+    <div className="flex h-full flex-col bg-background">
+      {/* Logo */}
+      <div className="flex h-14 items-center border-b px-4">
+        <Link href="/dashboard" className="flex items-center gap-2 font-semibold" onClick={handleLinkClick}>
+          <span className="text-xl">Echo</span>
+        </Link>
+      </div>
+
+      <div className="flex-1 overflow-auto py-4">
+        {/* Navigation */}
+        <div className="px-4 mb-4">
+          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 block">
+            {t("sectionLabel")}
+          </span>
+          <nav className="space-y-1">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={handleLinkClick}
+                className={cn(
+                  "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-muted",
+                  pathname === item.href && "bg-muted font-medium"
+                )}
+              >
+                <item.icon className="h-4 w-4 text-muted-foreground" />
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+      </div>
+
+      {/* User Profile Dropdown */}
+      <div className="border-t p-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex w-full items-center gap-3 rounded-lg px-2 py-2 hover:bg-muted transition-colors">
+              <Avatar className="h-9 w-9">
+                <AvatarImage src={user.image || undefined} alt={user.name} />
+                <AvatarFallback>{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0 text-left">
+                <p className="text-sm font-medium truncate">{user.name}</p>
+                <p className="text-xs text-muted-foreground truncate">
+                  {currentOrg?.name || user.email}
+                </p>
+              </div>
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            {/* Settings - Most commonly used */}
+            <DropdownMenuGroup>
+              <DropdownMenuItem asChild>
+                <Link href="/settings" onClick={handleLinkClick}>
+                  <Settings className="mr-2 h-4 w-4" />
+                  {t("settings")}
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            {/* Organization Switcher */}
+            {organizations.length > 0 && (
+              <DropdownMenuGroup>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <Building2 className="mr-2 h-4 w-4" />
+                    <span className="flex-1 truncate">{currentOrg?.name || t("selectOrganization")}</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent className="w-48">
+                    {organizations.map((org) => (
+                      <DropdownMenuItem
+                        key={org.id}
+                        onClick={() => handleOrgSwitch(org.id)}
+                        className="flex items-center justify-between"
+                      >
+                        <span className="truncate">{org.name}</span>
+                        {org.id === currentOrgId && (
+                          <Check className="ml-2 h-4 w-4 text-primary flex-shrink-0" />
+                        )}
+                      </DropdownMenuItem>
+                    ))}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                      <Link href="/settings/organizations/new" onClick={handleLinkClick}>
+                        <Plus className="mr-2 h-4 w-4" />
+                        {t("newOrganization")}
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+            )}
+
+            {/* Language Switcher */}
+            <DropdownMenuGroup>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger disabled={isPending}>
+                  <Languages className="mr-2 h-4 w-4" />
+                  {tLang("label")}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup value={locale}>
+                    {SUPPORTED_LOCALES.map((supportedLocale) => (
+                      <DropdownMenuRadioItem
+                        key={supportedLocale}
+                        value={supportedLocale}
+                        onClick={() => handleLocaleChange(supportedLocale)}
+                      >
+                        {tLang(supportedLocale)}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+
+            <DropdownMenuSeparator />
+
+            {/* Logout - Destructive action at the bottom */}
+            <DropdownMenuItem onClick={handleLogout} className="text-destructive focus:text-destructive">
+              <LogOut className="mr-2 h-4 w-4" />
+              {t("logout")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

package/components/portal/changelog-entry.tsx

@@ -0,0 +1,132 @@
+"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 Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export interface ChangelogItem {
+  id: string;
+  title: string;
+  content: string;
+  type: "feature" | "improvement" | "fix" | "announcement";
+  publishedAt: string;
+  image?: string | null;
+  author?: {
+    name: string;
+    image?: string | null;
+  } | null;
+}
+
+interface ChangelogEntryProps {
+  entry: ChangelogItem;
+  className?: string;
+}
+
+const typeConfig: Record<
+  ChangelogItem["type"],
+  { label: string; className: string }
+> = {
+  feature: {
+    label: "New Feature",
+    className: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+  },
+  improvement: {
+    label: "Improvement",
+    className: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+  },
+  fix: {
+    label: "Bug Fix",
+    className: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300",
+  },
+  announcement: {
+    label: "Announcement",
+    className: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+  },
+};
+
+export function ChangelogEntry({ entry, className }: ChangelogEntryProps) {
+  const typeInfo = typeConfig[entry.type];
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      {/* Image */}
+      {entry.image && (
+        <div className="relative aspect-video bg-muted">
+          <Image
+            src={entry.image}
+            alt={entry.title}
+            fill
+            className="object-cover"
+          />
+        </div>
+      )}
+
+      <CardHeader className="space-y-2">
+        {/* Date and Type */}
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          <time
+            dateTime={entry.publishedAt}
+            className="text-muted-foreground"
+          >
+            {new Date(entry.publishedAt).toLocaleDateString("en-US", {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </time>
+          <Badge variant="secondary" className={cn("text-xs", typeInfo.className)}>
+            {typeInfo.label}
+          </Badge>
+        </div>
+
+        {/* Title */}
+        <h3 className="text-xl font-semibold tracking-tight">{entry.title}</h3>
+      </CardHeader>
+
+      <CardContent>
+        {/* Content */}
+        <div
+          className="prose prose-sm dark:prose-invert max-w-none"
+          dangerouslySetInnerHTML={{ __html: entry.content }}
+        />
+
+        {/* Author */}
+        {entry.author && (
+          <div className="flex items-center gap-2 mt-4 pt-4 border-t">
+            {entry.author.image && (
+              <Image
+                src={entry.author.image}
+                alt={entry.author.name}
+                width={24}
+                height={24}
+                className="rounded-full"
+              />
+            )}
+            <span className="text-sm text-muted-foreground">
+              Posted by {entry.author.name}
+            </span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/components/portal/changelog-list.tsx

@@ -0,0 +1,85 @@
+"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 { ChangelogEntry, type ChangelogItem } from "./changelog-entry";
+import { cn } from "@/lib/utils";
+
+interface ChangelogListProps {
+  entries: ChangelogItem[];
+  className?: string;
+}
+
+export function ChangelogList({ entries, className }: ChangelogListProps) {
+  if (entries.length === 0) {
+    return (
+      <div className="text-center py-16">
+        <h3 className="text-lg font-semibold text-muted-foreground">
+          No updates yet
+        </h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Check back later for product updates and announcements.
+        </p>
+      </div>
+    );
+  }
+
+  // Group entries by month/year
+  const groupedEntries = entries.reduce(
+    (acc, entry) => {
+      const date = new Date(entry.publishedAt);
+      const key = date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+      });
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(entry);
+      return acc;
+    },
+    {} as Record<string, ChangelogItem[]>
+  );
+
+  return (
+    <div className={cn("max-w-3xl mx-auto space-y-12", className)}>
+      {Object.entries(groupedEntries).map(([month, monthEntries], index) => (
+        <div
+          key={month}
+          className={cn(
+            "pt-8 border-t border-border",
+            index === 0 && "pt-0 border-0"
+          )}
+        >
+          {/* Month Header */}
+          <h2 className="text-lg font-semibold text-muted-foreground mb-6 sticky top-20 bg-background/95 py-2 backdrop-blur">
+            {month}
+          </h2>
+
+          {/* Entries */}
+          <div className="space-y-8">
+            {monthEntries.map((entry) => (
+              <ChangelogEntry key={entry.id} entry={entry} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/portal/contributor-badge.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 { getContributorLevel } from "@/lib/portal/contributors";
+
+interface ContributorBadgeProps {
+  votes: number;
+  comments: number;
+  accepted: number;
+}
+
+export function ContributorBadge(props: ContributorBadgeProps) {
+  const level = getContributorLevel(props);
+  return <span className="contributor-badge">Lv.{level}</span>;
+}

package/components/portal/contributors-sidebar.tsx

@@ -0,0 +1,98 @@
+"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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+
+export interface Contributor {
+  id: string;
+  name: string;
+  image?: string | null;
+  points: number;
+}
+
+interface ContributorsSidebarProps {
+  contributors: Contributor[];
+  className?: string;
+}
+
+export function ContributorsSidebar({
+  contributors,
+  className,
+}: ContributorsSidebarProps) {
+  const t = useTranslations("portal.contributors");
+  return (
+    <Card className={cn("sticky top-24", className)}>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base font-semibold">{t("mostHelpful")}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {contributors.slice(0, 10).map((contributor, index) => (
+          <div
+            key={contributor.id}
+            className="flex items-center gap-3"
+          >
+            <span className="w-5 text-center text-sm font-medium text-muted-foreground">
+              {index + 1}
+            </span>
+            <Avatar className="h-8 w-8">
+              <AvatarImage
+                src={contributor.image ?? undefined}
+                alt={contributor.name}
+              />
+              <AvatarFallback className="text-xs">
+                {contributor.name
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{contributor.name}</p>
+            </div>
+            <span className="text-sm font-semibold text-primary">
+              {contributor.points}
+            </span>
+          </div>
+        ))}
+
+        {contributors.length === 0 && (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No contributors yet
+          </p>
+        )}
+      </CardContent>
+
+      {/* Powered by badge */}
+      <div className="px-6 pb-4">
+        <div className="pt-4 border-t">
+          <p className="text-xs text-muted-foreground text-center">
+            Powered by{" "}
+            <span className="font-semibold text-foreground">Echo</span>
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}