fix: discovery genres are a constrained AniList multi-select instead of free text

Author: chutch3

api/API/Controllers/DiscoverController.cs

@@ -23,6 +23,12 @@ public class DiscoverController(DiscoveryCache cache, KenkuSettings settings, AP
 {
     private static readonly TimeSpan Ttl = TimeSpan.FromHours(1);
 
+    /// <summary>AniList's supported genres — the set a genre rail can be configured for.</summary>
+    /// <response code="200"></response>
+    [HttpGet("Genres")]
+    [ProducesResponseType<IReadOnlyList<string>>(Status200OK, "application/json")]
+    public Ok<IReadOnlyList<string>> GetGenres() => TypedResults.Ok(AniListGenres.All);
+
     /// <summary>Manga trending on AniList right now.</summary>
     /// <response code="200"></response>
     [HttpGet("Manga")]

api/API/Controllers/SettingsController.cs

@@ -325,10 +325,12 @@ public Results<Ok, BadRequest<string>> SetReleaseSelection([FromBody] ReleaseSel
     [ProducesResponseType(Status200OK)]
     public Ok SetDiscoveryGenres([FromBody] string[] genres)
     {
+        // Keep only real AniList genres, in their canonical casing — anything else (e.g. "Gore")
+        // would just produce an empty rail, so it is dropped rather than persisted.
         settings.SetDiscoveryGenres(genres
-            .Select(g => g.Trim())
-            .Where(g => g.Length > 0)
-            .Distinct(StringComparer.OrdinalIgnoreCase)
+            .Select(API.Discovery.AniListGenres.Canonical)
+            .OfType<string>()
+            .Distinct()
             .ToList());
         return TypedResults.Ok();
     }

api/API/Discovery/AniListGenres.cs

@@ -0,0 +1,21 @@
+namespace API.Discovery;
+
+/// <summary>
+/// AniList's fixed genre vocabulary (its GenreCollection). A genre rail only returns results for one
+/// of these exact names, so the configured genres are constrained to this set — a free-text genre
+/// like "Gore" would silently match nothing.
+/// </summary>
+public static class AniListGenres
+{
+    public static readonly IReadOnlyList<string> All =
+    [
+        "Action", "Adventure", "Comedy", "Drama", "Ecchi", "Fantasy", "Horror", "Mahou Shoujo",
+        "Mecha", "Music", "Mystery", "Psychological", "Romance", "Sci-Fi", "Slice of Life",
+        "Sports", "Supernatural", "Thriller",
+    ];
+
+    /// <summary>The canonical genre matching <paramref name="name"/> case-insensitively, or null if
+    /// it is not an AniList genre.</summary>
+    public static string? Canonical(string name) =>
+        All.FirstOrDefault(g => g.Equals(name.Trim(), StringComparison.OrdinalIgnoreCase));
+}

api/API/openapi/API_v2.json

@@ -907,6 +907,29 @@
         }
       }
     },
+    "/v2/Discover/Genres": {
+      "get": {
+        "tags": [
+          "Discover"
+        ],
+        "summary": "AniList's supported genres — the set a genre rail can be configured for.",
+        "responses": {
+          "200": {
+            "description": "",
+            "content": {
+              "application/json; x-version=2.0": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/v2/Discover/Manga": {
       "get": {
         "tags": [

api/Tests/Unit/Controllers/DiscoverControllerTests.cs

@@ -35,6 +35,17 @@ private sealed class FakeLatestSource(KenkuSettings s, List<DiscoveryEntry> late
         internal override Task<string[]> GetChapterImageUrls(API.Schema.SeriesContext.SourceId<API.Schema.SeriesContext.Chapter> id) => throw new NotSupportedException();
     }
 
+    [Fact]
+    public void Genres_ReturnsAniListSupportedGenres()
+    {
+        var ok = CreateController().GetGenres();
+
+        Assert.Contains("Action", ok.Value!);
+        Assert.Contains("Slice of Life", ok.Value!);
+        // "Gore" is not an AniList genre — it must not be offered.
+        Assert.DoesNotContain("Gore", ok.Value!);
+    }
+
     [Fact]
     public async Task Manga_ReturnsTheTrendingRail()
     {

api/Tests/Unit/Controllers/SettingsControllerTests.cs

@@ -358,4 +358,16 @@ public void SetDiscoveryGenres_TrimsDedupesAndPersists()
         Assert.Equal(["Action", "Romance"], _settings.DiscoveryGenres);
         Assert.Contains("Romance", File.ReadAllText(_settings.SettingsFilePath));
     }
+
+    [Fact]
+    public void SetDiscoveryGenres_KeepsOnlyKnownAniListGenres_Canonicalized()
+    {
+        Directory.CreateDirectory(_settings.WorkingDirectory);
+
+        // "Gore" is not an AniList genre and must be dropped; valid genres are canonicalized to
+        // AniList's exact casing ("sci-fi" -> "Sci-Fi") so the rail query actually matches.
+        CreateController().SetDiscoveryGenres(["Gore", "sci-fi", "ACTION"]);
+
+        Assert.Equal(["Sci-Fi", "Action"], _settings.DiscoveryGenres);
+    }
 }

web/website/app/components/DiscoveryGenresField.vue

@@ -1,8 +1,12 @@
 <template>
     <UFormField label="Genre rails" description="AniList genres that each get their own rail on the Discover page — changes apply immediately.">
-        <!-- add-on-blur: a half-typed genre commits when focus leaves the input instead of being
-             silently dropped; every committed change saves itself (no Save button to race). -->
-        <UInputTags v-model="genres" add-on-blur placeholder="Add a genre…" class="w-72" />
+        <USelectMenu
+            v-model="genres"
+            :items="available ?? []"
+            multiple
+            searchable
+            placeholder="Pick genres…"
+            class="w-72" />
     </UFormField>
 </template>
 
@@ -11,20 +15,26 @@ const { $api } = useNuxtApp();
 const toast = useToast();
 
 const { data: settings } = useApi('/v2/Settings', { key: FetchKeys.Settings.All, server: false });
+const { data: available } = useApi('/v2/Discover/Genres', { key: FetchKeys.Discover.Genres, server: false });
+
+const same = (a: string[], b: string[]) => a.length === b.length && a.every((x, i) => x === b[i]);
+
 const genres = ref<string[]>([]);
-watch(settings, (s) => { if (s) genres.value = [...(s.discoveryGenres ?? [])]; }, { immediate: true });
+// Sync from settings only when it actually differs, so a post-save refetch doesn't reset the field.
+watch(settings, (s) => {
+    const saved = s?.discoveryGenres ?? [];
+    if (!same(genres.value, saved)) genres.value = [...saved];
+}, { immediate: true });
 
-// Self-stabilizing: edits that already match the saved list (initial load, post-save refresh) are
-// no-ops, so this can't loop with the settings watch above.
+// Auto-save on selection change; the saved/echo case is a no-op, so this never loops with the sync above.
 watch(genres, async (next) => {
     const saved = settings.value?.discoveryGenres ?? [];
-    if (next.length === saved.length && next.every((g, i) => g === saved[i])) return;
+    if (same(next, saved)) return;
     try {
         await $api('/v2/Settings/DiscoveryGenres', { method: 'PATCH', body: next });
         await refreshNuxtData(FetchKeys.Settings.All);
         toast.add({ title: 'Discovery genres saved', icon: 'i-lucide-check', color: 'success', duration: 1500 });
     } catch {
-        // A chip the server never accepted must not sit there looking saved.
         genres.value = [...saved];
         toast.add({ title: "Couldn't save discovery genres", icon: 'i-lucide-triangle-alert', color: 'error' });
     }

web/website/app/composables/FetchKeys.ts

@@ -20,6 +20,7 @@ export const FetchKeys = {
         Feed: 'Discover/Feed',
         TopRated: 'Discover/TopRated',
         New: 'Discover/New',
+        Genres: 'Discover/Genres',
         Genre: (genre: string) => `Discover/Genre/${genre}`,
     },
 };

web/website/test/component/DiscoveryGenresField.test.ts

@@ -11,9 +11,11 @@ registerEndpoint('/v2/Settings', () => ({
     apiKey: '',
     metronConfigured: false,
     discoveryGenres: ['Action', 'Romance'],
+    discoveryFeeds: ['manga'],
     syncedIndexers: [],
     downloadClients: [],
 }));
+registerEndpoint('/v2/Discover/Genres', () => ['Action', 'Horror', 'Romance', 'Sci-Fi', 'Thriller']);
 registerEndpoint('/v2/Settings/DiscoveryGenres', {
     method: 'PATCH',
     handler: async (event) => {
@@ -23,36 +25,42 @@ registerEndpoint('/v2/Settings/DiscoveryGenres', {
     },
 });
 
+const findSelect = (wrapper: Awaited<ReturnType<typeof mountSuspended>>) =>
+    wrapper.findComponent({ name: 'USelectMenu' });
+
 describe('DiscoveryGenresField', () => {
     beforeEach(() => {
         patchedBody = null;
         patchFails = false;
         clearNuxtData();
     });
 
-    it('reverts the chip when the save fails so the UI never lies about what is saved', async () => {
-        patchFails = true;
+    it('offers only AniList genres and pre-selects the configured ones', async () => {
         const wrapper = await mountSuspended(DiscoveryGenresField);
-        await vi.waitFor(() => expect(wrapper.text()).toContain('Action'));
-
-        const input = wrapper.find('input');
-        await input.setValue('Horror');
-        await input.trigger('keydown', { key: 'Enter' });
 
-        await vi.waitFor(() => expect(wrapper.text()).not.toContain('Horror'));
-        expect(wrapper.text()).toContain('Action');
-        expect(wrapper.text()).toContain('Romance');
+        await vi.waitFor(() => expect(findSelect(wrapper).props('items')).toContain('Action'));
+        const select = findSelect(wrapper);
+        expect(select.props('items')).toEqual(['Action', 'Horror', 'Romance', 'Sci-Fi', 'Thriller']);
+        expect(select.props('items')).not.toContain('Gore');
+        expect(select.props('modelValue')).toEqual(['Action', 'Romance']);
     });
 
-    it('shows the configured genres and saves as soon as one is committed', async () => {
+    it('saves the new selection when genres change', async () => {
         const wrapper = await mountSuspended(DiscoveryGenresField);
-        await vi.waitFor(() => expect(wrapper.text()).toContain('Action'));
-        expect(wrapper.text()).toContain('Romance');
+        await vi.waitFor(() => expect(findSelect(wrapper).props('modelValue')).toEqual(['Action', 'Romance']));
 
-        const input = wrapper.find('input');
-        await input.setValue('Horror');
-        await input.trigger('keydown', { key: 'Enter' });
+        await findSelect(wrapper).vm.$emit('update:modelValue', ['Action', 'Romance', 'Horror']);
 
         await vi.waitFor(() => expect(patchedBody).toEqual(['Action', 'Romance', 'Horror']));
     });
+
+    it('reverts the selection when the save fails', async () => {
+        patchFails = true;
+        const wrapper = await mountSuspended(DiscoveryGenresField);
+        await vi.waitFor(() => expect(findSelect(wrapper).props('modelValue')).toEqual(['Action', 'Romance']));
+
+        await findSelect(wrapper).vm.$emit('update:modelValue', ['Action', 'Romance', 'Horror']);
+
+        await vi.waitFor(() => expect(findSelect(wrapper).props('modelValue')).toEqual(['Action', 'Romance']));
+    });
 });

web/website/test/e2e/discover-genres.spec.ts

@@ -15,8 +15,9 @@ function stubApi(page: Page, state: { genres: string[] }) {
         page.route('**/v2/**', (r) => r.fulfill({ json: [] })),
         page.route('**/v2/Settings', (r) =>
             r.fulfill({
-                json: { apiKey: '', metronConfigured: false, discoveryGenres: state.genres, syncedIndexers: [], downloadClients: [] },
+                json: { apiKey: '', metronConfigured: false, discoveryGenres: state.genres, discoveryFeeds: ['manga'], syncedIndexers: [], downloadClients: [] },
             })),
+        page.route('**/v2/Discover/Genres', (r) => r.fulfill({ json: ['Action', 'Horror', 'Romance', 'Sci-Fi', 'Thriller'] })),
         page.route('**/v2/Settings/DiscoveryGenres', async (r) => {
             state.genres = r.request().postDataJSON() as string[];
             return r.fulfill({ json: {} });
@@ -27,38 +28,36 @@ function stubApi(page: Page, state: { genres: string[] }) {
     ]);
 }
 
-test('editing discovery genres updates the rails on the next Discover visit', async ({ page }) => {
+test('picking a genre updates the rails on the next Discover visit', async ({ page }) => {
     const state = { genres: ['Action'] };
     await stubApi(page, state);
 
     await page.goto('/discover');
     await expect(page.getByText('Sakamoto Days')).toBeVisible();
 
-    // Edit genres on the settings page (SPA navigation, warm caches). Committing a tag saves it.
+    // Edit genres on the settings page (SPA navigation, warm caches). Picking a genre auto-saves.
     await page.getByRole('link', { name: 'Settings' }).first().click();
     await page.getByRole('tab', { name: 'Discovery' }).click();
-    const tags = page.getByPlaceholder('Add a genre…');
-    await tags.click();
-    await tags.fill('Horror');
-    await tags.press('Enter');
+    await page.getByRole('button', { name: 'Show popup' }).click();
+    await page.getByRole('option', { name: 'Horror', exact: true }).click();
     await expect.poll(() => state.genres).toEqual(['Action', 'Horror']);
 
     // Back to Discover the way a user would — through the nav, not a reload.
+    await page.keyboard.press('Escape');
     await page.getByRole('link', { name: 'Discover' }).first().click();
     await expect(page.getByText('Uzumaki')).toBeVisible();
 });
 
-test('a genre typed but not committed with Enter is still saved', async ({ page }) => {
+test('the genre list offers only AniList genres — no free-text like "Gore"', async ({ page }) => {
     const state = { genres: ['Action'] };
     await stubApi(page, state);
 
     await page.goto('/settings');
     await page.getByRole('tab', { name: 'Discovery' }).click();
-    const tags = page.getByPlaceholder('Add a genre…');
-    await tags.click();
-    await tags.fill('Horror');
-    // No Enter — the user types it and moves on, expecting it to count.
-    await tags.press('Tab');
+    await page.getByRole('button', { name: 'Show popup' }).click();
 
-    await expect.poll(() => state.genres).toEqual(['Action', 'Horror']);
+    // The valid genres are offered; an unsupported genre simply isn't in the list to pick.
+    await expect(page.getByRole('option', { name: 'Horror', exact: true })).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Gore', exact: true })).toHaveCount(0);
+    expect(state.genres).toEqual(['Action']);
 });