feat: two-way sync between support tickets and Gitea issues (v0.63.0)

Outbound (already existed one-way: ticket create -> Gitea issue) now
also mirrors status changes: closing/reopening a ticket in the admin
UI closes/reopens the linked Gitea issue, and replies posted from
Epicure (by the ticket owner or an admin) post as a comment on the
issue. Captures and stores the Gitea issue number at creation time
to address these follow-up calls without re-parsing the issue URL.

Inbound: new webhook receiver at /api/webhooks/gitea, verified via
HMAC-SHA256 signature (X-Gitea-Signature) with a configurable
GITEA_WEBHOOK_SECRET site setting, deduped by delivery id the same
way the existing Stripe receiver dedupes events. Handles "issues"
(closed/reopened -> ticket status) and "issue_comment" (created ->
appends to the ticket's comment thread), skipping comments Epicura
already posted itself (matched by Gitea comment id) to avoid loops.

New support_ticket_comments table backs a lightweight conversation
thread on both the user-facing support page and the admin support
manager, each comment tagged by author (user/admin/gitea).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/support/support-manager.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
-import { ExternalLink, Paperclip, X, FileText } from "lucide-react";
+import { ExternalLink, Paperclip, X, FileText, MessageSquare } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -25,6 +25,8 @@ type TicketStatus = "open" | "triaged" | "closed";
 
 type Attachment = { id: string; contentType: string; url: string };
 
+type Comment = { id: string; authorType: "user" | "admin" | "gitea"; body: string; createdAt: string };
+
 type Ticket = {
   id: string;
   type: TicketType;
@@ -76,6 +78,51 @@ export function SupportManager({
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
   const [uploadingCount, setUploadingCount] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [comments, setComments] = useState<Record<string, Comment[]>>({});
+  const [commentDraft, setCommentDraft] = useState("");
+  const [sendingComment, setSendingComment] = useState(false);
+
+  async function toggleConversation(ticketId: string) {
+    if (expandedId === ticketId) {
+      setExpandedId(null);
+      return;
+    }
+    setExpandedId(ticketId);
+    setCommentDraft("");
+    if (!comments[ticketId]) {
+      try {
+        const res = await fetch(`/api/v1/support/${ticketId}/comments`);
+        if (res.ok) {
+          const data = (await res.json()) as Comment[];
+          setComments((prev) => ({ ...prev, [ticketId]: data }));
+        }
+      } catch {
+        // leave the section empty — the send box below still works
+      }
+    }
+  }
+
+  async function sendComment(ticketId: string) {
+    const body = commentDraft.trim();
+    if (!body) return;
+    setSendingComment(true);
+    try {
+      const res = await fetch(`/api/v1/support/${ticketId}/comments`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ body }),
+      });
+      if (!res.ok) throw new Error();
+      const comment = (await res.json()) as Comment;
+      setComments((prev) => ({ ...prev, [ticketId]: [...(prev[ticketId] ?? []), comment] }));
+      setCommentDraft("");
+    } catch {
+      toast.error(t("commentSendFailed"));
+    } finally {
+      setSendingComment(false);
+    }
+  }
 
   async function handleFiles(files: FileList) {
     const room = MAX_ATTACHMENTS - pendingAttachments.length;
@@ -315,7 +362,52 @@ export function SupportManager({
                       <ExternalLink className="h-3 w-3" />
                     </Link>
                   )}
+                  <button
+                    type="button"
+                    onClick={() => { void toggleConversation(ticket.id); }}
+                    className="flex items-center gap-1 hover:text-foreground"
+                  >
+                    <MessageSquare className="h-3 w-3" />
+                    {t("conversation")}
+                  </button>
                 </div>
+
+                {expandedId === ticket.id && (
+                  <div className="mt-2 space-y-2 rounded-md border bg-muted/30 p-3">
+                    {(comments[ticket.id] ?? []).length === 0 ? (
+                      <p className="text-xs text-muted-foreground">{t("noComments")}</p>
+                    ) : (
+                      <div className="space-y-2">
+                        {(comments[ticket.id] ?? []).map((c) => (
+                          <div key={c.id} className="text-sm">
+                            <span className="text-xs font-medium text-muted-foreground">
+                              {t(`commentAuthor.${c.authorType}`)}
+                            </span>
+                            <p className="whitespace-pre-wrap">{c.body}</p>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    <div className="flex gap-2 pt-1">
+                      <Textarea
+                        value={commentDraft}
+                        onChange={(e) => setCommentDraft(e.target.value)}
+                        placeholder={t("commentPlaceholder")}
+                        maxLength={3000}
+                        rows={2}
+                        className="text-sm"
+                      />
+                      <Button
+                        type="button"
+                        size="sm"
+                        disabled={sendingComment || !commentDraft.trim()}
+                        onClick={() => { void sendComment(ticket.id); }}
+                      >
+                        {t("commentSend")}
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             ))}
           </div>