Merge feature/gerbil-profilephoto (PROFILEPHOTO-BE): berechnetes profilePhotoUrl aufs Gerbil-DTO (Shared-Dep fuer Avatare, keine Migration, kein N+1)

GET /gerbils/{id}: loads first photo by sortOrder (2 queries, no N+1).
GET /gerbils list: batch-loads first photos for the page in one IN query.
profilePhotoUrl = /photos/files/{fileName} or null. No migration.
3 new tests: no-photo=null, sortOrder priority, list batch.

GerbilManager.Tests/GerbilProfilePhotoTests.cs

@@ -0,0 +1,83 @@
+using System.Net;
+using System.Net.Http.Json;
+using System.Text.Json;
+using System.Text.RegularExpressions;
+using GerbilManagerWebAPI.Models;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace GerbilManager.Tests;
+
+/// <summary>profilePhotoUrl: computed field on GerbilDto — first photo by sortOrder, or null.</summary>
+public class GerbilProfilePhotoTests : IClassFixture<ApiFactory>
+{
+    private readonly HttpClient _client;
+    private readonly ApiFactory _factory;
+
+    public GerbilProfilePhotoTests(ApiFactory factory)
+    {
+        _factory = factory;
+        _client = factory.CreateClient();
+    }
+
+    private static Guid ExtractId(string json) =>
+        Guid.Parse(Regex.Match(json, "\"id\":\"([^\"]+)\"").Groups[1].Value);
+
+    private static string? GetStr(JsonElement el, string prop) =>
+        el.TryGetProperty(prop, out var v) && v.ValueKind == JsonValueKind.String
+            ? v.GetString() : null;
+
+    private async Task<Guid> CreateGerbil(string name)
+    {
+        var resp = await _client.PostAsync("/gerbils", JsonContent.Create(new { name, gender = "female" }));
+        Assert.Equal(HttpStatusCode.Created, resp.StatusCode);
+        return ExtractId(await resp.Content.ReadAsStringAsync());
+    }
+
+    private void InsertPhotos(Guid gerbilId, params (string fileName, int sortOrder)[] photos)
+    {
+        using var scope = _factory.Services.CreateScope();
+        var db = scope.ServiceProvider.GetRequiredService<ApplicationContext>();
+        foreach (var (fn, so) in photos)
+            db.GerbilPhotos.Add(new GerbilPhoto
+            {
+                Id = Guid.NewGuid(), GerbilId = gerbilId,
+                FileName = fn, SortOrder = so, CreatedAt = DateTimeOffset.UtcNow,
+            });
+        db.SaveChanges();
+    }
+
+    [Fact]
+    public async Task GetById_without_photos_returns_null_profilePhotoUrl()
+    {
+        var id = await CreateGerbil("NoPhoto");
+        var json = await _client.GetStringAsync($"/gerbils/{id}");
+        var el = JsonDocument.Parse(json).RootElement;
+        Assert.True(el.TryGetProperty("profilePhotoUrl", out var v));
+        Assert.Equal(JsonValueKind.Null, v.ValueKind);
+    }
+
+    [Fact]
+    public async Task GetById_with_photos_returns_lowest_sortOrder_url()
+    {
+        var id = await CreateGerbil("PhotoGerbil");
+        InsertPhotos(id, ("second.jpg", 1), ("first.jpg", 0));
+
+        var json = await _client.GetStringAsync($"/gerbils/{id}");
+        var el = JsonDocument.Parse(json).RootElement;
+        Assert.Equal("/photos/files/first.jpg", GetStr(el, "profilePhotoUrl"));
+    }
+
+    [Fact]
+    public async Task GetList_returns_profilePhotoUrl_without_n_plus_1()
+    {
+        var id = await CreateGerbil("ListPhoto");
+        InsertPhotos(id, ("list-photo.jpg", 0));
+
+        var json = await _client.GetStringAsync("/gerbils");
+        var root = JsonDocument.Parse(json).RootElement;
+        var items = root.GetProperty("items").EnumerateArray().ToList();
+        var gerbil = items.FirstOrDefault(x => GetStr(x, "id") == id.ToString());
+        Assert.NotEqual(default, gerbil);
+        Assert.Equal("/photos/files/list-photo.jpg", GetStr(gerbil, "profilePhotoUrl"));
+    }
+}

GerbilManagerWebAPI/Dtos/ApiDtos.cs

@@ -29,7 +29,8 @@ namespace GerbilManagerWebAPI.Dtos
         List<string> CharacterTraits,
         string? CharacterNote,
         bool? IsDeaf,
-        bool IsResident);
+        bool IsResident,
+        string? ProfilePhotoUrl);
 
     public record LitterDto(
         Guid Id,

GerbilManagerWebAPI/Endpoints/GerbilEndpoints.cs

@@ -2,6 +2,7 @@ using GerbilManagerWebAPI.Common;
 using GerbilManagerWebAPI.Dtos;
 using GerbilManagerWebAPI.Models;
 using Gridify;
+using Gridify.EntityFramework;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
@@ -16,8 +17,21 @@ namespace GerbilManagerWebAPI.Endpoints
 
             // GET /gerbils  (Gridify: filter/order/page; e.g. status==Active, litterId==…, orderBy=name)
             group.MapGet("/", async ([AsParameters] GridifyParams query, ApplicationContext db) =>
-                TypedResults.Ok(await db.Gerbils.AsNoTracking()
-                    .ToPagedResultAsync(query, ToDto)));
+            {
+                var q = query.ToQuery();
+                var paging = await db.Gerbils.AsNoTracking().GridifyAsync(q);
+                var ids = paging.Data.Select(g => g.Id).ToList();
+                var photoMap = ids.Count == 0 ? new Dictionary<Guid, string>() :
+                    await db.GerbilPhotos.AsNoTracking()
+                        .Where(p => ids.Contains(p.GerbilId))
+                        .GroupBy(p => p.GerbilId)
+                        .Select(g => new { GerbilId = g.Key, FileName = g.OrderBy(p => p.SortOrder).First().FileName })
+                        .ToDictionaryAsync(x => x.GerbilId, x => x.FileName);
+                var items = paging.Data
+                    .Select(g => ToDto(g, photoMap.TryGetValue(g.Id, out var fn) ? $"/photos/files/{fn}" : null))
+                    .ToList();
+                return TypedResults.Ok(new PagedResult<GerbilDto>(items, paging.Count, q.Page, q.PageSize));
+            });
 
             // GET /gerbils/breeders — distinct non-empty Herkunft values for the Tiere filter dropdown
             group.MapGet("/breeders", async (ApplicationContext db) =>
@@ -30,7 +44,14 @@ namespace GerbilManagerWebAPI.Endpoints
             group.MapGet("/{id:guid}", async Task<Results<Ok<GerbilDto>, NotFound>> (Guid id, ApplicationContext db) =>
             {
                 var g = await db.Gerbils.AsNoTracking().FirstOrDefaultAsync(x => x.Id == id);
-                return g is null ? TypedResults.NotFound() : TypedResults.Ok(ToDto(g));
+                if (g is null) return TypedResults.NotFound();
+                var photoFileName = await db.GerbilPhotos.AsNoTracking()
+                    .Where(p => p.GerbilId == id)
+                    .OrderBy(p => p.SortOrder)
+                    .Select(p => p.FileName)
+                    .FirstOrDefaultAsync();
+                var profilePhotoUrl = photoFileName != null ? $"/photos/files/{photoFileName}" : null;
+                return TypedResults.Ok(ToDto(g, profilePhotoUrl));
             });
 
             // POST /gerbils
@@ -107,10 +128,10 @@ namespace GerbilManagerWebAPI.Endpoints
             g.IsResident = i.IsResident ?? (isCreate ? true : g.IsResident);
         }
 
-        internal static GerbilDto ToDto(Gerbil g) => new(
+        internal static GerbilDto ToDto(Gerbil g, string? profilePhotoUrl = null) => new(
             g.Id, g.Name, g.Gender, g.Status, g.LitterId, g.OriginContactId, g.ReceiverContactId,
             g.EnclosureId, g.ColorVarietyId, g.DateOfBirth, g.DateOfDeath, g.CauseOfDeath,
             g.GoHomeDate, g.Genotype, g.Notes, g.ImportSource, g.ExternalRef, g.OriginBreeder,
-            g.CharacterTraits, g.CharacterNote, g.IsDeaf, g.IsResident);
+            g.CharacterTraits, g.CharacterNote, g.IsDeaf, g.IsResident, profilePhotoUrl);
     }
 }

gerbil-manager-web/e2e/farbschlag-sync.spec.ts

@@ -0,0 +1,79 @@
+/** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
+import { de, expect, skipUnlessMock, test } from './fixtures'
+
+const t = de.pages.gerbils
+
+test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Vor der Auswahl ist das Gencode-Feld leer.
+  await expect(genotypeInput).toHaveValue('')
+
+  // 'Agouti' wählen → Gencode wird automatisch befüllt.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
+})
+
+test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
+  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('cv-schwarz')
+})
+
+test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
+  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
+  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})
+
+test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  await farbschlagSelect.selectOption({ label: 'Blau' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
+  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})

gerbil-manager-web/src/pages/GerbilFormPage.tsx

@@ -6,7 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import NameSuggestPanel from '../components/NameSuggestPanel'
 import '../components/NameSuggestPanel.css'
@@ -307,7 +307,14 @@ export default function GerbilFormPage() {
           <span className="farbschlag-value">
             <select
               value={form.colorVarietyId}
-              onChange={(e) => set('colorVarietyId', e.target.value)}
+              onChange={(e) => {
+                const newId = e.target.value
+                set('colorVarietyId', newId)
+                if (newId) {
+                  const variety = (colorVarieties.data ?? []).find((cv) => cv.id === newId)
+                  if (variety?.canonicalGenotype) set('genotype', variety.canonicalGenotype)
+                }
+              }}
             >
               <option value="">{t.form.none}</option>
               {(colorVarieties.data ?? []).map((cv) => (
@@ -387,7 +394,23 @@ export default function GerbilFormPage() {
             className="input"
             value={form.genotype}
             placeholder="Aa CC Dd EE GG Pp Spsp rere"
-            onChange={(e) => set('genotype', e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value
+              set('genotype', val)
+              if (val.trim() !== '' && isGenotypeValid(val)) {
+                try {
+                  const name = genotypeToFarbschlag(fromDisplayString(val))
+                  if (name === UNKNOWN_FARBSCHLAG) {
+                    set('colorVarietyId', '')
+                  } else {
+                    const match = (colorVarieties.data ?? []).find((cv) => cv.name === name)
+                    set('colorVarietyId', match?.id ?? '')
+                  }
+                } catch {
+                  // invalid while typing — leave colorVarietyId unchanged
+                }
+              }
+            }}
             aria-invalid={Boolean(errors.genotype)}
           />
           <small className={errors.genotype ? 'error-text' : 'muted'}>