@nexttylabs/echo 0.2.0

package/components/auth/register-form.tsx

@@ -0,0 +1,230 @@
+"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 Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function RegisterForm() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const t = useTranslations("auth.register");
+  const tValidation = useTranslations("auth.validation");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: "" }));
+    setFormError(null);
+  };
+
+  const validateForm = () => {
+    const nextErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      nextErrors.name = tValidation("nameRequired");
+    }
+
+    if (!formData.email) {
+      nextErrors.email = tValidation("emailRequired");
+    } else if (!emailPattern.test(formData.email)) {
+      nextErrors.email = tValidation("emailInvalid");
+    }
+
+    if (!formData.password) {
+      nextErrors.password = tValidation("passwordRequired");
+    } else if (formData.password.length < 8) {
+      nextErrors.password = tValidation("passwordMinLength");
+    } else if (!/[A-Z]/.test(formData.password)) {
+      nextErrors.password = tValidation("passwordUppercase");
+    } else if (!/[a-z]/.test(formData.password)) {
+      nextErrors.password = tValidation("passwordLowercase");
+    } else if (!/[0-9!@#$%^&*]/.test(formData.password)) {
+      nextErrors.password = tValidation("passwordNumberOrSpecial");
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      nextErrors.confirmPassword = tValidation("passwordMismatch");
+    }
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    setFormError(null);
+
+    try {
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          password: formData.password,
+        }),
+      });
+
+      const json = await res.json();
+
+      if (!res.ok) {
+        if (json.code === "VALIDATION_ERROR") {
+          const fieldErrors: Record<string, string> = {};
+          for (const issue of json.details ?? []) {
+            const key = issue.path?.[0];
+            if (key) fieldErrors[key] = issue.message;
+          }
+          setErrors(fieldErrors);
+        } else if (json.code === "EMAIL_EXISTS") {
+          setErrors({ email: t("emailExists") });
+        } else {
+          setFormError(json.error ?? t("registerFailed"));
+        }
+        return;
+      }
+
+      router.push("/dashboard");
+    } catch (error) {
+      setFormError(error instanceof Error ? error.message : t("registerFailed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("cardTitle")}</CardTitle>
+        <CardDescription>{t("cardDescription")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {formError ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {formError}
+            </div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label htmlFor="name">{t("nameLabel")}</Label>
+            <Input
+              id="name"
+              name="name"
+              type="text"
+              placeholder={t("namePlaceholder")}
+              value={formData.name}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.name ? "border-destructive" : ""}
+            />
+            {errors.name ? (
+              <p className="text-sm text-destructive">{errors.name}</p>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">{t("emailLabel")}</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="you@example.com"
+              value={formData.email}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.email ? "border-destructive" : ""}
+            />
+            {errors.email ? (
+              <p className="text-sm text-destructive">{errors.email}</p>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">{t("passwordLabel")}</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={formData.password}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.password ? "border-destructive" : ""}
+            />
+            {errors.password ? (
+              <p className="text-sm text-destructive">{errors.password}</p>
+            ) : null}
+            <p className="text-xs text-muted-foreground">
+              {t("passwordHint")}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">{t("confirmPasswordLabel")}</Label>
+            <Input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              value={formData.confirmPassword}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.confirmPassword ? "border-destructive" : ""}
+            />
+            {errors.confirmPassword ? (
+              <p className="text-sm text-destructive">{errors.confirmPassword}</p>
+            ) : null}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? t("submitting") : t("submitButton")}
+          </Button>
+
+          <p className="text-center text-sm text-muted-foreground">
+            {t("hasAccount")}
+            <Link className="ml-1 text-primary hover:underline" href="/login">
+              {t("login")}
+            </Link>
+          </p>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/components/comment/comment-form.tsx

@@ -0,0 +1,111 @@
+"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 { useId, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface CommentFormProps {
+  onSubmit: (content: string) => void | Promise<void>;
+  label: string;
+  placeholder?: string;
+  buttonText?: string;
+  submittingText?: string;
+  maxLength?: number;
+  className?: string;
+  textareaId?: string;
+  textareaName?: string;
+  autoComplete?: string;
+}
+
+export function CommentForm({
+  onSubmit,
+  label,
+  placeholder = "",
+  buttonText = "",
+  submittingText = "",
+  maxLength = 5000,
+  className,
+  textareaId,
+  textareaName = "comment",
+  autoComplete = "off",
+}: CommentFormProps) {
+  const generatedId = useId();
+  const resolvedId = textareaId ?? generatedId;
+  const [content, setContent] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!content.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit(content.trim());
+      setContent("");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={className}>
+      <div className="space-y-3">
+        <label htmlFor={resolvedId} className="sr-only">
+          {label}
+        </label>
+        <Textarea
+          id={resolvedId}
+          name={textareaName}
+          autoComplete={autoComplete}
+          aria-label={label}
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder={placeholder}
+          maxLength={maxLength}
+          rows={3}
+          className="resize-none"
+          disabled={isSubmitting}
+        />
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground tabular-nums">
+            {content.length} / {maxLength}
+          </span>
+          <Button
+            type="submit"
+            disabled={!content.trim() || isSubmitting}
+            size="sm"
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" aria-hidden="true" />
+                {submittingText || buttonText}
+              </>
+            ) : (
+              buttonText
+            )}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

package/components/comment/internal-notes.tsx

@@ -0,0 +1,219 @@
+"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, useEffect, useCallback } from "react";
+import { useTranslations, useLocale } from "next-intl";
+import { formatDistanceToNow } from "date-fns";
+import { zhCN, enUS, ja, type Locale } from "date-fns/locale";
+import { MessageSquare, Trash2, Loader2 } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { CommentForm } from "./comment-form";
+
+interface Comment {
+  commentId: number;
+  content: string;
+  isInternal: boolean;
+  createdAt: string;
+  author: {
+    userId: string;
+    name: string | null;
+    email: string;
+  };
+}
+
+interface InternalNotesProps {
+  feedbackId: number;
+  canDelete: boolean;
+  currentUserId: string;
+  className?: string;
+}
+
+const DATE_LOCALES: Record<string, Locale> = {
+  "zh-CN": zhCN,
+  "en": enUS,
+  "jp": ja,
+};
+
+export function InternalNotes({
+  feedbackId,
+  canDelete,
+  currentUserId,
+  className,
+}: InternalNotesProps) {
+  const t = useTranslations("comments.internal");
+  const locale = useLocale();
+  const dateLocale = DATE_LOCALES[locale] ?? enUS;
+  const [internalComments, setInternalComments] = useState<Comment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchComments = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`/api/feedback/${feedbackId}/comments`);
+      if (!response.ok) throw new Error("Failed to fetch comments");
+      const result = await response.json();
+      setInternalComments(result.data.internal || []);
+    } catch {
+      setError(t("errors.loadFailed"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [feedbackId, t]);
+
+  useEffect(() => {
+    fetchComments();
+  }, [fetchComments]);
+
+  const handleAddComment = async (content: string) => {
+    try {
+      const response = await fetch(`/api/feedback/${feedbackId}/comments`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content, isInternal: true }),
+      });
+
+      if (!response.ok) throw new Error("Failed to add comment");
+
+      await fetchComments();
+    } catch {
+      setError(t("errors.addFailed"));
+    }
+  };
+
+  const handleDeleteComment = async (commentId: number) => {
+    try {
+      const response = await fetch(
+        `/api/feedback/${feedbackId}/comments/${commentId}`,
+        { method: "DELETE" },
+      );
+
+      if (!response.ok) throw new Error("Failed to delete comment");
+
+      setInternalComments(
+        internalComments.filter((c) => c.commentId !== commentId),
+      );
+    } catch {
+      setError(t("errors.deleteFailed"));
+    }
+  };
+
+  const getInitials = (name: string | null, email: string) => {
+    if (name) {
+      return name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return email[0].toUpperCase();
+  };
+
+  return (
+    <Card className={className} data-testid="internal-notes">
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <MessageSquare className="w-5 h-5 text-blue-600" aria-hidden="true" />
+          {t("title")}
+          <span className="text-sm font-normal text-muted-foreground ml-2">
+            ({internalComments.length})
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <CommentForm
+          onSubmit={handleAddComment}
+          label={t("formLabel")}
+          placeholder={t("placeholder")}
+          buttonText={t("submit")}
+          submittingText={t("submitting")}
+        />
+
+        {error && (
+          <div className="text-sm text-destructive text-center py-2" aria-live="polite">
+            {error}
+          </div>
+        )}
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground" role="status" aria-live="polite">
+            <Loader2 className="w-5 h-5 animate-spin mr-2" aria-hidden="true" />
+            {t("loading")}
+          </div>
+        ) : internalComments.length === 0 ? (
+          <div className="text-center text-muted-foreground py-8 border-2 border-dashed rounded-lg">
+            <MessageSquare className="w-12 h-12 mx-auto mb-3 opacity-50" aria-hidden="true" />
+            <p>{t("empty")}</p>
+            <p className="text-sm">{t("beFirst")}</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {internalComments.map((comment) => (
+              <div key={comment.commentId} className="flex gap-3 group">
+                <Avatar className="w-8 h-8 shrink-0">
+                  <AvatarFallback className="text-xs bg-blue-100 text-blue-800">
+                    {getInitials(comment.author.name, comment.author.email)}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="font-medium text-sm">
+                          {comment.author.name || comment.author.email}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {formatDistanceToNow(new Date(comment.createdAt), {
+                            addSuffix: true,
+                            locale: dateLocale,
+                          })}
+                        </span>
+                      </div>
+                      <p className="text-sm whitespace-pre-wrap break-words">
+                        {comment.content}
+                      </p>
+                    </div>
+
+                    {(canDelete || comment.author.userId === currentUserId) && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                        onClick={() => handleDeleteComment(comment.commentId)}
+                        aria-label={t("deleteAriaLabel")}
+                      >
+                        <Trash2 className="w-4 h-4 text-destructive" aria-hidden="true" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}