Revert "revert: foto de perfil e BIMI, para restaurar o servico"

Repoe as duas funcionalidades. A reversao foi uma precaucao enquanto o site
estava em baixo, e acabou por ser ela a provar que a culpa nao era delas: o
502 continuou depois de reverter.

A avaria era o servico web nao declarar porta nenhuma, o que levava o Coolify
a gerar um servico Traefik apontado ao porto 80. Fica corrigida no commit
anterior, com expose 3000.

As migracoes 0012 e 0013 nunca sairam do repositorio nem da base de dados, por
isso o codigo reposto encontra as tabelas que espera.

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

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -15,6 +15,7 @@ import {
   Plus,
   Lock,
   Languages,
+  UserRound,
 } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
 import { Badge } from "../../../../components/ui/Badge";
@@ -24,6 +25,8 @@ import { LanguageSwitcher } from "../../../../i18n/LanguageSwitcher";
 import { signatureToHtml, sanitizeSignature } from "../../../../lib/signature";
 import { buildSieve, parseSieve, type Rule, type RuleField, type RuleCondition, type RuleAction } from "../../../../lib/rules";
 import { useFolders } from "../../../../lib/useFolders";
+import { AvatarEditor } from "../../../../components/AvatarEditor";
+import { useAccount } from "../../../../lib/useAccount";
 import { moveTargets } from "../../../../lib/mailCounts";
 
 interface SieveRule {
@@ -51,11 +54,20 @@ interface WebSession {
   current: boolean;
 }
 
-type SettingsTab = "security" | "filters" | "vacation" | "signature" | "language";
+type SettingsTab = "profile" | "security" | "filters" | "vacation" | "signature" | "language";
 
 export default function UserSettingsPage() {
   const t = useTranslations();
-  const [activeTab, setActiveTab] = useState<SettingsTab>("security");
+  const [activeTab, setActiveTab] = useState<SettingsTab>("profile");
+  // Bumped after a save so the browser refetches instead of showing the photo
+  // it already holds under the same URL.
+  const [avatarVersion, setAvatarVersion] = useState(0);
+  const account = useAccount("user");
+  // Null until the account loads, so the editor is not told "no photo" before
+  // it is known whether there is one.
+  const avatarSrc = account?.email
+    ? `/api/v1/avatar?address=${encodeURIComponent(account.email)}&v=${avatarVersion}`
+    : null;
 
   const [mfaEnabled, setMfaEnabled] = useState(false);
   const [qrSecret, setQrSecret] = useState<string | null>(null);
@@ -285,6 +297,7 @@ export default function UserSettingsPage() {
      separated by everything else. The same panels now sit behind a tab strip,
      in the order the redesign groups them. */
   const tabs = [
+    { id: "profile" as const, label: t("avatar.title"), icon: UserRound },
     { id: "security" as const, label: t("settings.security"), icon: Shield },
     { id: "filters" as const, label: t("settings.sieveTitle"), icon: Filter },
     { id: "vacation" as const, label: t("settings.vacationTitle"), icon: Palmtree },
@@ -336,6 +349,21 @@ export default function UserSettingsPage() {
           </div>
         )}
 
+        {activeTab === "profile" && (
+          <section className={panel}>
+            <h2 className="text-[17px] font-medium leading-tight text-slate-100">{t("avatar.title")}</h2>
+            <p className="text-[12.5px] leading-relaxed text-slate-400">{t("avatar.explainer")}</p>
+            <AvatarEditor
+              src={avatarSrc}
+              onSaved={() => {
+                // The query string changes so the browser fetches the new
+                // photo instead of the one it already has under this URL.
+                setAvatarVersion((v) => v + 1);
+              }}
+            />
+          </section>
+        )}
+
         {activeTab === "security" && (
           <div className="flex flex-col gap-4">
             {/* 2FA TOTP SECTION */}