feat(reader): B&W (grayscale) filter with shared scheduled-filter control (#221) (#222)

* docs(bw-filter): add design spec for B&W grayscale filter (#221)

Mirrors the invert-mode design (manual + scheduled) and refactors the
shared settings control into one reusable card used by night mode,
invert, and B&W. Adds a centralized imageFilter store and a G hotkey.

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

* docs(bw-filter): add implementation plan for B&W grayscale filter (#221)

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

* feat(settings): add grayscale setting, schedule, and grayscaleActive store

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

* feat(settings): add combined imageFilter derived store

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

* feat(reader): add reusable ScheduledFilterCard settings component

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

* refactor(settings-ui): use ScheduledFilterCard for night/invert/B&W

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

* docs(bw-filter): fix task split so Reader.svelte filter+import change together

Task 5 was changing Reader.svelte's filter to $imageFilter while deferring
the imageFilter import to Task 6, which would leave $imageFilter undefined
mid-task. Move Reader.svelte's filter-line change into Task 6 alongside its
import-block rewrite; Task 5 now covers only the two scroll readers.

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

* feat(reader): apply combined imageFilter (invert + grayscale) in scroll readers

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

* feat(reader): add B&W (G) hotkey via shared toggleScheduledFilter helper

Routes KeyN/KeyI/KeyG through one helper and applies the combined
imageFilter to the manga panel. Adds the G shortcut for the new
grayscale filter (issue #221). Night mode's scheduled toast casing is
normalized to "Night Mode" to share one label.

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

* style: prettier formatting for B&W filter changes

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

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: Gnathonic

docs/superpowers/plans/2026-06-06-bw-filter.md

@@ -0,0 +1,190 @@
+# B&W (Grayscale) Filter — Design
+
+**Issue:** [#221 — \[Feature\] B&W filter](https://github.com/Gnathonic/mokuro-reader/issues/221)
+**Date:** 2026-06-06
+**Branch:** `feat/bw-filter` (based on `develop`)
+
+## Problem
+
+Readers want to apply a black-and-white (grayscale) filter to pages. Use cases
+from the issue:
+
+- A scan is "mostly" grayscale but not pure grayscale, and the color tint is
+  distracting.
+- A colored scan is higher quality than the available B&W scan, but the reader
+  prefers to read in black and white.
+
+The reader already has a **night mode** filter and an **invert colors** filter,
+each with a Manual/Scheduled control and (for invert) a hotkey. B&W should fit
+in as a third member of that family.
+
+## Goals
+
+1. Add a B&W (grayscale) filter that mirrors the existing invert filter exactly:
+   Manual toggle **and** time-based Scheduled mode, an "(active)" indicator, and
+   a keyboard shortcut.
+2. Refactor the duplicated settings control so night mode, invert colors, and
+   B&W all share **one reusable component** instead of three hand-written copies.
+3. Centralize the manga-panel CSS filter string so it lives in one place rather
+   than being duplicated across the three reader components.
+
+## Non-Goals
+
+- Changing how **night mode** is _applied_. Night mode uses a separate global
+  mechanism (`NightModeFilter.svelte`, the `<dialog>` filter trick). Only its
+  _settings card_ is unified with invert/B&W; its application is untouched.
+- Adjustable filter intensity (e.g. partial grayscale). The filter is on/off,
+  matching invert.
+- Per-volume B&W overrides beyond what the existing profile/volume settings
+  system already provides for every setting.
+
+## Approach
+
+Chosen: **reusable card component + centralized filter store + DRY'd hotkey
+handler.** This adds the feature and removes the duplication in the same change,
+which is cleaner than copy-pasting a third filter card/handler/filter-string.
+
+### 1. New setting (`src/lib/settings/settings.ts`)
+
+Mirror `invertColors` / `invertColorsSchedule`:
+
+- Add to the `Settings` type:
+  - `grayscale: boolean`
+  - `grayscaleSchedule: TimeSchedule`
+- Add to `defaultSettings`:
+  - `grayscale: false`
+  - `grayscaleSchedule: { enabled: false, startTime: '21:00', endTime: '06:00' }`
+- Add `'grayscaleSchedule'` to the `ScheduleSettingKey` union.
+- Add a migration block mirroring the `invertColorsSchedule` one so existing
+  profiles get the new schedule object:
+  ```ts
+  migratedProfile.grayscaleSchedule = {
+    ...defaultSettings.grayscaleSchedule,
+    ...(profile.grayscaleSchedule || {})
+  };
+  ```
+- Add a derived store mirroring `invertColorsActive`:
+  ```ts
+  export const grayscaleActive = derived([settings, currentMinute], ([$settings, _]) => {
+    if (!$settings) return false;
+    if ($settings.grayscaleSchedule?.enabled) {
+      return isWithinSchedule($settings.grayscaleSchedule);
+    }
+    return $settings.grayscale ?? false;
+  });
+  ```
+
+### 2. New reusable component — `src/lib/components/Settings/Reader/ScheduledFilterCard.svelte`
+
+Encapsulates the bordered card currently duplicated for night mode and invert:
+title + "(active)" badge, Manual/Scheduled radio pair (with hotkey hint on the
+Manual label), and either the enable toggle (manual) or the Start/End time
+pickers (scheduled).
+
+Props:
+
+| Prop          | Type                 | Example                  |
+| ------------- | -------------------- | ------------------------ |
+| `title`       | `string`             | `'Black & white'`        |
+| `enableLabel` | `string`             | `'Enable black & white'` |
+| `hotkeyHint`  | `string`             | `'G'`                    |
+| `settingKey`  | `SettingsKey`        | `'grayscale'`            |
+| `scheduleKey` | `ScheduleSettingKey` | `'grayscaleSchedule'`    |
+| `active`      | `boolean`            | `$grayscaleActive`       |
+
+Internally it owns the `mode` derivation (`$settings[scheduleKey].enabled ?
+'scheduled' : 'manual'`) and the `setMode` logic that currently lives in
+`ReaderToggles.svelte` (switching to scheduled turns off the manual boolean).
+The radio-group `name` is derived from `scheduleKey` so the three card instances
+remain independent.
+
+### 3. `src/lib/components/Settings/Reader/ReaderToggles.svelte`
+
+Replace the two hand-written cards (night, invert) with **three**
+`<ScheduledFilterCard>` instances:
+
+- Night mode — `settingKey="nightMode"`, `scheduleKey="nightModeSchedule"`,
+  `hotkeyHint="N"`, `active={$nightModeActive}`
+- Invert colors — `settingKey="invertColors"`,
+  `scheduleKey="invertColorsSchedule"`, `hotkeyHint="I"`,
+  `active={$invertColorsActive}`
+- Black & white — `settingKey="grayscale"`,
+  `scheduleKey="grayscaleSchedule"`, `hotkeyHint="G"`, `active={$grayscaleActive}`
+
+Removes the now-unused `nightModeMode`, `invertMode`, `setNightModeMode`, and
+`setInvertMode` locals (moved into the component).
+
+### 4. Centralized filter store (`settings.ts` + 3 readers)
+
+Add a derived store combining the manga-panel filters:
+
+```ts
+export const imageFilter = derived(
+  [invertColorsActive, grayscaleActive],
+  ([$inv, $gray]) => `invert(${$inv ? 1 : 0}) grayscale(${$gray ? 1 : 0})`
+);
+```
+
+`invert()` and `grayscale()` commute (grayscale is linear, invert is `1 − x`),
+so combining them in one string is correct regardless of order.
+
+Replace the three inline usages of
+`style:filter={`invert(${$invertColorsActive ? 1 : 0})`}` with
+`style:filter={$imageFilter}` in:
+
+- `src/lib/components/Reader/Reader.svelte`
+- `src/lib/components/Reader/HorizontalScrollReader.svelte`
+- `src/lib/components/Reader/VerticalScrollReader.svelte`
+
+### 5. Hotkey (`src/lib/components/Reader/Reader.svelte`)
+
+The `KeyN` and `KeyI` handlers share an identical shape: if the schedule is
+enabled, show an "on automatic schedule" notification; otherwise toggle the
+manual boolean and show an On/Off notification. Extract a helper:
+
+```ts
+function toggleScheduledFilter(
+  settingKey: 'nightMode' | 'invertColors' | 'grayscale',
+  scheduleKey: ScheduleSettingKey,
+  label: string,      // e.g. 'Black & white', 'Invert', 'Night mode'
+  notifPrefix: string // e.g. 'grayscale'
+) { ... }
+```
+
+Route `KeyN`, `KeyI`, and the new **`KeyG`** through it. Keeps the three
+behaviors identical and adds B&W with one line.
+
+Hotkey choice: **G** (grayscale). `B` was the alternative; `G` chosen.
+
+## Testing
+
+No tests currently cover `invertColorsActive` / `nightModeActive`. Add Vitest
+unit tests (TDD) for the new logic:
+
+- `grayscaleActive`: returns the manual boolean when the schedule is disabled;
+  returns the schedule result when enabled.
+- `imageFilter`: produces the correct combined string for each of the four
+  invert/grayscale on/off combinations.
+
+Manual verification:
+
+- Toggle B&W via the settings card and via the **G** hotkey; both reflect each
+  other and show the correct notification.
+- Filter applies in all three reader modes (paged, horizontal scroll, vertical
+  scroll).
+- B&W combines correctly with invert (both on = inverted grayscale).
+- Scheduled mode activates/deactivates by time, and the "G" hotkey shows the
+  "on automatic schedule" notice when scheduled.
+- Setting persists across reload and is included in profile export/sync like
+  other settings.
+
+## Files Touched
+
+- `src/lib/settings/settings.ts` — type, defaults, `ScheduleSettingKey`,
+  migration, `grayscaleActive`, `imageFilter`
+- `src/lib/components/Settings/Reader/ScheduledFilterCard.svelte` — **new**
+- `src/lib/components/Settings/Reader/ReaderToggles.svelte` — use the component ×3
+- `src/lib/components/Reader/Reader.svelte` — hotkey helper + `KeyG` + `imageFilter`
+- `src/lib/components/Reader/HorizontalScrollReader.svelte` — `imageFilter`
+- `src/lib/components/Reader/VerticalScrollReader.svelte` — `imageFilter`
+- Test file(s) for `grayscaleActive` / `imageFilter`

docs/superpowers/specs/2026-06-06-bw-filter-design.md

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Page, VolumeMetadata } from '$lib/types';
   import type { VolumeSettings } from '$lib/settings/volume-data';
-  import { settings, invertColorsActive } from '$lib/settings';
+  import { settings, imageFilter } from '$lib/settings';
   import { matchFilesToPages } from '$lib/reader/image-cache';
   import { getCharCount } from '$lib/util/count-chars';
   import { activityTracker } from '$lib/util/activity-tracker';
@@ -656,7 +656,7 @@
       class="flex"
       style:align-items={userZoom > 1 ? 'flex-start' : 'center'}
       style:direction={rtl ? 'rtl' : 'ltr'}
-      style:filter={`invert(${$invertColorsActive ? 1 : 0})`}
+      style:filter={$imageFilter}
     >
       <div
         bind:this={zoomWrapperEl}

src/lib/components/Reader/HorizontalScrollReader.svelte

@@ -16,15 +16,16 @@
   } from '$lib/panzoom';
   import {
     effectiveVolumeSettings,
-    invertColorsActive,
+    imageFilter,
     progress,
     settings,
     updateProgress,
     updateSetting,
     updateVolumeSetting,
     volumes,
     type VolumeSettings,
-    type ContinuousZoomMode
+    type ContinuousZoomMode,
+    type ScheduleSettingKey
   } from '$lib/settings';
   import { clamp, debounce, fireExstaticEvent, resetScrollPosition } from '$lib/util';
   import { Input, Popover, Range, Spinner } from 'flowbite-svelte';
@@ -408,23 +409,13 @@
         toggleFullScreen();
         return;
       case 'KeyI':
-        if ($settings.invertColorsSchedule.enabled) {
-          showNotification('Invert is on automatic schedule', 'invert-scheduled');
-        } else {
-          updateSetting('invertColors', !$settings.invertColors);
-          showNotification($settings.invertColors ? 'Invert Off' : 'Invert On', 'invert-toggle');
-        }
+        toggleScheduledFilter('invertColors', 'invertColorsSchedule', 'Invert', 'invert');
         return;
       case 'KeyN':
-        if ($settings.nightModeSchedule.enabled) {
-          showNotification('Night mode is on automatic schedule', 'nightmode-scheduled');
-        } else {
-          updateSetting('nightMode', !$settings.nightMode);
-          showNotification(
-            $settings.nightMode ? 'Night Mode Off' : 'Night Mode On',
-            'nightmode-toggle'
-          );
-        }
+        toggleScheduledFilter('nightMode', 'nightModeSchedule', 'Night Mode', 'nightmode');
+        return;
+      case 'KeyG':
+        toggleScheduledFilter('grayscale', 'grayscaleSchedule', 'B&W', 'grayscale');
         return;
       case 'KeyC':
         if (volume) {
@@ -1134,6 +1125,28 @@
     }, 2000);
   }
 
+  // Shared toggle for the Manual/Scheduled display filters (night, invert, B&W).
+  // When the schedule owns the filter we only notify; otherwise we flip the
+  // manual boolean. This reproduces the original inline KeyI/KeyN handlers
+  // exactly, including reading $settings right after updateSetting for the
+  // On/Off label — keep this order and pattern; do not "simplify" it.
+  function toggleScheduledFilter(
+    settingKey: 'nightMode' | 'invertColors' | 'grayscale',
+    scheduleKey: ScheduleSettingKey,
+    label: string,
+    notifPrefix: string
+  ) {
+    if ($settings[scheduleKey].enabled) {
+      showNotification(`${label} is on automatic schedule`, `${notifPrefix}-scheduled`);
+    } else {
+      updateSetting(settingKey, !$settings[settingKey]);
+      showNotification(
+        $settings[settingKey] ? `${label} Off` : `${label} On`,
+        `${notifPrefix}-toggle`
+      );
+    }
+  }
+
   function rotateScrollMode() {
     const current = $settings.scrollMode;
     const order = ['auto', 'vertical', 'horizontal'] as const;
@@ -1420,7 +1433,7 @@
         ></button>
         <div
           class="grid"
-          style:filter={`invert(${$invertColorsActive ? 1 : 0})`}
+          style:filter={$imageFilter}
           ondblclick={onDoubleTap}
           onpointerdown={handleOverlayPointerDown}
           onclick={handleOverlayToggle}

src/lib/components/Reader/Reader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Page, VolumeMetadata } from '$lib/types';
   import type { VolumeSettings } from '$lib/settings/volume-data';
-  import { settings, invertColorsActive } from '$lib/settings';
+  import { settings, imageFilter } from '$lib/settings';
   import { matchFilesToPages } from '$lib/reader/image-cache';
   import { getCharCount } from '$lib/util/count-chars';
   import { activityTracker } from '$lib/util/activity-tracker';
@@ -587,7 +587,7 @@
     style:overscroll-behavior="none"
     onscroll={handleScroll}
   >
-    <div bind:this={zoomSpacerEl} style:filter={`invert(${$invertColorsActive ? 1 : 0})`}>
+    <div bind:this={zoomSpacerEl} style:filter={$imageFilter}>
       <div bind:this={zoomWrapperEl} style:transform-origin="top left">
         <!-- Centering spacer -->
         <div style:height="50vh"></div>