From 211684deea842921be807554481b690cfb0b00f1 Mon Sep 17 00:00:00 2001 From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com> Date: Wed, 2 Sep 2026 16:04:42 +0200 Subject: [PATCH 1/2] feat(settings): allow hide/blur adult items Add AdultDisplayMode 'show'|'blur'|'hide' to ProviderSettingsService (default blur, extends not new service), persist via localStorage with normalize fallback. Filter view-layer only in ItemList filteredItems and Home backlog/paused when mode is hide (keep WatchListService and StatsService counts honest). Blur adult poster in ItemCard with filter:blur(12px) + click-to-reveal signal; keep Next Series/Movie visible but blurred even in hide mode. Settings adds radio group for display mode. Hide removes cards from All Items/Backlog/Paused, Next stays blurred; blur obscures posters until clicked. --- src/app/components/home/home.component.ts | 30 ++++++---- .../item-card/item-card.component.ts | 26 ++++++++ .../item-list/item-list.component.ts | 7 +++ .../components/settings/settings.component.ts | 59 +++++++++++++++++++ src/app/services/provider-settings.service.ts | 30 ++++++++++ 5 files changed, 140 insertions(+), 12 deletions(-) diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 0cac5b2..2606419 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -6,6 +6,7 @@ import { WatchListService } from '../../services/watch-list.service'; import { ItemCardComponent } from '../item-card/item-card.component'; import { Item, ItemType } from '../../models/item.model'; import { isEpisodicType } from '../../domain/item.constants'; +import { ProviderSettingsService } from '../../services/provider-settings.service'; @Component({ selector: 'app-home', @@ -215,22 +216,27 @@ import { isEpisodicType } from '../../domain/item.constants'; export class HomeComponent { private roundRobinService = inject(RoundRobinService); private watchListService = inject(WatchListService); + private providerSettings = inject(ProviderSettingsService); nextSeries = this.roundRobinService.nextSeries; nextMovie = this.roundRobinService.nextMovie; - backlogItems = computed(() => - this.watchListService - .items() - .filter((item) => item.status === 'not-started') - .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()), - ); + backlogItems = computed(() => { + const adultMode = this.providerSettings.settings().adultDisplayMode; + let items = this.watchListService.items().filter((item) => item.status === 'not-started'); + if (adultMode === 'hide') { + items = items.filter((item) => !item.isAdult); + } + return items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); + }); - pausedItems = computed(() => - this.watchListService - .items() - .filter((item) => item.status === 'paused') - .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()), - ); + pausedItems = computed(() => { + const adultMode = this.providerSettings.settings().adultDisplayMode; + let items = this.watchListService.items().filter((item) => item.status === 'paused'); + if (adultMode === 'hide') { + items = items.filter((item) => !item.isAdult); + } + return items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); + }); protected hasSeries = computed(() => this.watchListService.items().some((item) => isEpisodicType(item.type)), diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts index 6d9345e..6014aeb 100644 --- a/src/app/components/item-card/item-card.component.ts +++ b/src/app/components/item-card/item-card.component.ts @@ -7,6 +7,7 @@ import { calculateProgress, getMostRecentWatchDate } from '../../utils/progress. import { statusLineColor } from '../../utils/status.utils'; import { getPlaceholderUrl } from '../../utils/tmdb-image.utils'; import { ImageStorageService } from '../../services/image-storage.service'; +import { ProviderSettingsService } from '../../services/provider-settings.service'; @Component({ selector: 'app-item-card', @@ -23,6 +24,7 @@ import { ImageStorageService } from '../../services/image-storage.service'; [src]="posterUrl()" [alt]="item().title + ' poster'" class="w-full aspect-[2/3] object-cover" + [style.filter]="shouldBlur() ? 'blur(12px)' : null" /> } @else { } + @if (shouldBlur()) { + + } @if (item().progress) { (); @@ -73,6 +86,13 @@ export class ItemCardComponent { posterUrl = signal(null); placeholderUrl = computed(() => getPlaceholderUrl()); statusColorClass = computed(() => statusLineColor(this.item().status)); + revealed = signal(false); + shouldBlur = computed(() => { + const mode = this.providerSettings.settings().adultDisplayMode; + // 'blur' blurs everywhere; 'hide' still blurs where card remains visible (next*), since next* is not filtered + // 'show' never blurs + return this.item().isAdult && mode !== 'show' && !!this.posterUrl() && !this.revealed(); + }); progressPercent = computed(() => { return calculateProgress(this.item()); @@ -91,6 +111,12 @@ export class ItemCardComponent { const version = this.imageStorage.version(); void this.loadPoster(this.item().posterId, version); }); + + effect(() => { + // Reset click-to-reveal when item identity changes + void this.item().id; + this.revealed.set(false); + }); } private async loadPoster(id: string | undefined, loadedVersion: number): Promise { diff --git a/src/app/components/item-list/item-list.component.ts b/src/app/components/item-list/item-list.component.ts index c2ace14..9de3022 100644 --- a/src/app/components/item-list/item-list.component.ts +++ b/src/app/components/item-list/item-list.component.ts @@ -24,6 +24,7 @@ import { } from '../../utils/sort.utils'; import { ItemCardComponent } from '../item-card/item-card.component'; +import { ProviderSettingsService } from '../../services/provider-settings.service'; @Component({ selector: 'app-item-list', @@ -166,6 +167,7 @@ export class ItemListComponent { private watchListService = inject(WatchListService); private groupService = inject(GroupService); private itemSortService = inject(ItemSortService); + private providerSettings = inject(ProviderSettingsService); readonly groups = this.groupService.groups; readonly itemStatuses = ITEM_STATUSES; @@ -216,6 +218,11 @@ export class ItemListComponent { const groupFilter = this.groupFilter(); const sortField = this.sortField(); const sortDirection = this.sortDirection(); + const adultMode = this.providerSettings.settings().adultDisplayMode; + + if (adultMode === 'hide') { + items = items.filter((item) => !item.isAdult); + } if (search) { items = items.filter((item) => item.title.toLowerCase().includes(search)); diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts index 5e32b86..2faf8eb 100644 --- a/src/app/components/settings/settings.component.ts +++ b/src/app/components/settings/settings.component.ts @@ -4,6 +4,7 @@ import { DatePipe } from '@angular/common'; import { ImportExportService } from '../../services/import-export.service'; import { + AdultDisplayMode, DEFAULT_TITLE_PREFERENCE, ProviderSettingsService, TitleLanguage, @@ -154,6 +155,58 @@ import { environment } from '../../../environments/environment';

When enabled, adult results may appear in suggestions. Default is off (SFW only).

+ +
+ + Display adult items in your collection + +
+ + + +
+

+ Hide removes adult cards from All Items, Backlog and Paused (view only — stats still + count). Next Series/Movie stay visible but blurred even in Hide. Blur keeps all cards + but obscures adult posters until clicked. +

+
@@ -402,6 +455,7 @@ export class SettingsComponent implements OnInit { jikanEnabled = signal(this.providerSettingsService.isEnabled('jikan')); anilistEnabled = signal(this.providerSettingsService.isEnabled('anilist')); includeAdult = signal(this.providerSettingsService.isAdultIncluded()); + adultDisplayMode = signal(this.providerSettingsService.getAdultDisplayMode()); titleOrder = signal(this.providerSettingsService.getTitlePreference()); recoveryBackups = signal<{ key: string; timestamp: Date }[]>([]); @@ -437,6 +491,11 @@ export class SettingsComponent implements OnInit { this.includeAdult.set(this.providerSettingsService.isAdultIncluded()); } + setAdultDisplayMode(mode: AdultDisplayMode): void { + this.providerSettingsService.setAdultDisplayMode(mode); + this.adultDisplayMode.set(this.providerSettingsService.getAdultDisplayMode()); + } + titleLanguageLabel(lang: TitleLanguage): string { switch (lang) { case 'romaji': diff --git a/src/app/services/provider-settings.service.ts b/src/app/services/provider-settings.service.ts index ae92285..e3360cb 100644 --- a/src/app/services/provider-settings.service.ts +++ b/src/app/services/provider-settings.service.ts @@ -14,17 +14,25 @@ export const DEFAULT_TITLE_PREFERENCE: readonly TitleLanguage[] = Object.freeze( 'native', ] as const); +export type AdultDisplayMode = 'show' | 'blur' | 'hide'; + +const VALID_ADULT_DISPLAY_MODES: readonly AdultDisplayMode[] = ['show', 'blur', 'hide'] as const; + +const DEFAULT_ADULT_DISPLAY_MODE: AdultDisplayMode = 'blur'; + const DEFAULT_PROVIDER_SETTINGS: ProviderSettings = { tmdb: true, jikan: true, anilist: true, includeAdult: false, titlePreference: [...DEFAULT_TITLE_PREFERENCE], + adultDisplayMode: DEFAULT_ADULT_DISPLAY_MODE, }; export type ProviderSettings = Record & { includeAdult: boolean; titlePreference: TitlePreference; + adultDisplayMode: AdultDisplayMode; }; const PROVIDER_SOURCES: readonly SuggestionSource[] = ['tmdb', 'jikan', 'anilist'] as const; @@ -79,6 +87,17 @@ export class ProviderSettingsService { this.save(next); } + getAdultDisplayMode(): AdultDisplayMode { + return this.normalizeAdultDisplayMode(this.enabled().adultDisplayMode); + } + + setAdultDisplayMode(mode: AdultDisplayMode): void { + const normalized = this.normalizeAdultDisplayMode(mode); + const next = { ...this.enabled(), adultDisplayMode: normalized }; + this.enabled.set(next); + this.save(next); + } + private load(): ProviderSettings { try { const raw = localStorage.getItem(PROVIDER_SETTINGS_KEY); @@ -106,6 +125,7 @@ export class ProviderSettingsService { ? obj['includeAdult'] : DEFAULT_PROVIDER_SETTINGS.includeAdult, titlePreference: this.normalizeTitlePreference(obj['titlePreference']), + adultDisplayMode: this.normalizeAdultDisplayMode(obj['adultDisplayMode']), }; } catch { return { @@ -115,6 +135,16 @@ export class ProviderSettingsService { } } + private normalizeAdultDisplayMode(value: unknown): AdultDisplayMode { + if ( + typeof value === 'string' && + (VALID_ADULT_DISPLAY_MODES as readonly string[]).includes(value) + ) { + return value as AdultDisplayMode; + } + return DEFAULT_ADULT_DISPLAY_MODE; + } + // Strict reset: any invalid entry (wrong length, duplicate, unknown lang) falls back to default. // Alternative lenient dedup/filter was considered but we prefer explicit reset to avoid drift. private normalizeTitlePreference(value: unknown): TitlePreference { From 89e686d81842f91982cb0c5b4a52c9b64817438f Mon Sep 17 00:00:00 2001 From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com> Date: Wed, 2 Sep 2026 16:14:10 +0200 Subject: [PATCH 2/2] refactor(settings): remove adult explanations Remove helper paragraphs under adult toggles and drop (default) label from blur option per review. --- src/app/components/settings/settings.component.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts index 2faf8eb..6d394ee 100644 --- a/src/app/components/settings/settings.component.ts +++ b/src/app/components/settings/settings.component.ts @@ -152,9 +152,6 @@ import { environment } from '../../../environments/environment'; >Include adult / NSFW results (TMDB, Jikan, AniList) -

- When enabled, adult results may appear in suggestions. Default is off (SFW only). -

@@ -184,7 +181,7 @@ import { environment } from '../../../environments/environment'; class="w-4 h-4" /> Blur posters — click to reveal (default)Blur posters — click to reveal
-

- Hide removes adult cards from All Items, Backlog and Paused (view only — stats still - count). Next Series/Movie stay visible but blurred even in Hide. Blur keeps all cards - but obscures adult posters until clicked. -