feat: in-app support form with email + Gitea issue integration (v0.49.0)

Users can now report bugs, suggestions, or questions from a new /support
page. Each submission sends a confirmation email and, when GITEA_URL/
GITEA_TOKEN/GITEA_REPO are configured in admin Settings, opens a labeled
issue on that repo automatically (best-effort — failure doesn't block the
ticket). Admins get a Support section to triage status and retry failed
Gitea issue creation.

New support_tickets table, gitea.ts client, site-settings entries for the
three new secrets, and OpenAPI docs for the two user-facing endpoints.

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

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

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type TicketStatus = "open" | "triaged" | "closed";
+
+type Ticket = {
+  id: string;
+  userEmail: string;
+  username: string | null;
+  type: string;
+  title: string;
+  description: string;
+  status: TicketStatus;
+  giteaIssueUrl: string | null;
+  giteaError: string | null;
+  createdAt: string;
+};
+
+function formatDateTime(iso: string) {
+  return new Date(iso).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+const statusVariant: Record<TicketStatus, "default" | "secondary" | "outline"> = {
+  open: "default",
+  triaged: "secondary",
+  closed: "outline",
+};
+
+export function AdminSupportManager({ initialTickets }: { initialTickets: Ticket[] }) {
+  const [tickets, setTickets] = useState<Ticket[]>(initialTickets);
+  const [retrying, setRetrying] = useState<string | null>(null);
+
+  async function handleStatusChange(id: string, status: TicketStatus) {
+    try {
+      const res = await fetch(`/api/v1/admin/support/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status }),
+      });
+      if (!res.ok) throw new Error();
+      setTickets((prev) => prev.map((t) => (t.id === id ? { ...t, status } : t)));
+    } catch {
+      toast.error("Failed to update status");
+    }
+  }
+
+  async function handleRetryGitea(id: string) {
+    setRetrying(id);
+    try {
+      const res = await fetch(`/api/v1/admin/support/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ retryGitea: true }),
+      });
+      if (!res.ok) throw new Error();
+      // Re-fetch the single ticket's fields isn't wired up server-side, so
+      // reload the list to pick up the new giteaIssueUrl/giteaError.
+      const listRes = await fetch("/api/v1/admin/support");
+      if (listRes.ok) {
+        const data = (await listRes.json()) as Ticket[];
+        setTickets(data);
+      }
+      toast.success("Retried Gitea issue creation");
+    } catch {
+      toast.error("Retry failed");
+    } finally {
+      setRetrying(null);
+    }
+  }
+
+  if (tickets.length === 0) {
+    return <p className="text-sm text-muted-foreground">No support tickets yet.</p>;
+  }
+
+  return (
+    <div className="divide-y rounded-md border">
+      {tickets.map((ticket) => (
+        <div key={ticket.id} className="px-4 py-3 space-y-1.5">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <p className="text-sm font-medium">{ticket.title}</p>
+              <p className="text-xs text-muted-foreground">
+                {ticket.username ? `@${ticket.username}` : ticket.userEmail} · {formatDateTime(ticket.createdAt)}
+              </p>
+            </div>
+            <Select value={ticket.status} onValueChange={(v) => { void handleStatusChange(ticket.id, v as TicketStatus); }}>
+              <SelectTrigger className="w-32 shrink-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="open">Open</SelectItem>
+                <SelectItem value="triaged">Triaged</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <p className="text-sm text-muted-foreground whitespace-pre-wrap">{ticket.description}</p>
+          <div className="flex items-center gap-2 text-xs flex-wrap pt-1">
+            <Badge variant="outline" className="text-xs">{ticket.type}</Badge>
+            <Badge variant={statusVariant[ticket.status]} className="text-xs">{ticket.status}</Badge>
+            {ticket.giteaIssueUrl ? (
+              <Link
+                href={ticket.giteaIssueUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-primary hover:underline"
+              >
+                View Gitea issue
+                <ExternalLink className="h-3 w-3" />
+              </Link>
+            ) : (
+              <>
+                {ticket.giteaError && (
+                  <span className="text-destructive" title={ticket.giteaError}>Gitea issue failed</span>
+                )}
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  disabled={retrying === ticket.id}
+                  onClick={() => { void handleRetryGitea(ticket.id); }}
+                >
+                  {retrying === ticket.id ? "Retrying…" : "Create Gitea issue"}
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/components/layout/nav.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
-import { BookOpen, Calendar, Package, ChefHat, User, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu, Sun, Moon, Monitor, Apple } from "lucide-react";
+import { BookOpen, Calendar, Package, ChefHat, User, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu, Sun, Moon, Monitor, Apple, LifeBuoy } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -130,6 +130,12 @@ export function Nav() {
               <DropdownMenuItem>
                 <Link href="/settings" className="w-full">{t("settings")}</Link>
               </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Link href="/support" className="w-full flex items-center gap-2">
+                  <LifeBuoy className="h-3.5 w-3.5" />
+                  {t("support")}
+                </Link>
+              </DropdownMenuItem>
               <div
                 role="group"
                 aria-label={t("systemMode")}

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

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type TicketType = "bug" | "suggestion" | "question";
+type TicketStatus = "open" | "triaged" | "closed";
+
+type Ticket = {
+  id: string;
+  type: TicketType;
+  title: string;
+  description: string;
+  status: TicketStatus;
+  giteaIssueUrl: string | null;
+  createdAt: string;
+};
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function SupportManager({ initialTickets }: { initialTickets: Ticket[] }) {
+  const t = useTranslations("support");
+  const [tickets, setTickets] = useState<Ticket[]>(initialTickets);
+  const [type, setType] = useState<TicketType>("bug");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (title.trim().length < 3 || description.trim().length < 10) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/v1/support", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type, title: title.trim(), description: description.trim() }),
+      });
+      if (!res.ok) {
+        const data = (await res.json()) as { error?: string };
+        throw new Error(data.error ?? t("submitFailed"));
+      }
+      const ticket = (await res.json()) as Ticket;
+      setTickets((prev) => [ticket, ...prev]);
+      setTitle("");
+      setDescription("");
+      setType("bug");
+      toast.success(t("submitSuccess"));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("submitFailed"));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const statusVariant: Record<TicketStatus, "default" | "secondary" | "outline"> = {
+    open: "default",
+    triaged: "secondary",
+    closed: "outline",
+  };
+
+  return (
+    <div className="space-y-8">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="support-type">{t("typeLabel")}</Label>
+          <Select value={type} onValueChange={(v) => setType(v as TicketType)}>
+            <SelectTrigger id="support-type" className="w-full sm:w-64">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="bug">{t("typeBug")}</SelectItem>
+              <SelectItem value="suggestion">{t("typeSuggestion")}</SelectItem>
+              <SelectItem value="question">{t("typeQuestion")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="support-title">{t("titleLabel")}</Label>
+          <Input
+            id="support-title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={t("titlePlaceholder")}
+            maxLength={200}
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="support-description">{t("descriptionLabel")}</Label>
+          <Textarea
+            id="support-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t("descriptionPlaceholder")}
+            maxLength={5000}
+            rows={6}
+            required
+          />
+        </div>
+
+        <Button type="submit" disabled={submitting || title.trim().length < 3 || description.trim().length < 10}>
+          {submitting ? t("submitting") : t("submitButton")}
+        </Button>
+      </form>
+
+      <div className="space-y-3">
+        <h2 className="font-semibold text-lg">{t("historyTitle")}</h2>
+        {tickets.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t("noTickets")}</p>
+        ) : (
+          <div className="divide-y rounded-md border">
+            {tickets.map((ticket) => (
+              <div key={ticket.id} className="px-4 py-3 space-y-1.5">
+                <div className="flex items-start justify-between gap-4">
+                  <p className="text-sm font-medium">{ticket.title}</p>
+                  <Badge variant={statusVariant[ticket.status]} className="text-xs shrink-0">
+                    {t(`status.${ticket.status}`)}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground whitespace-pre-wrap">{ticket.description}</p>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground pt-1">
+                  <Badge variant="outline" className="text-xs">{t(`type.${ticket.type}`)}</Badge>
+                  <span>{formatDate(ticket.createdAt)}</span>
+                  {ticket.giteaIssueUrl && (
+                    <Link
+                      href={ticket.giteaIssueUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1 text-primary hover:underline"
+                    >
+                      {t("viewIssue")}
+                      <ExternalLink className="h-3 w-3" />
+                    </Link>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}