feat: add named highlight colors with sync and picker ux fixes (#3741)

* fix: add highlight color label fields

* fix: add default highlight label sync fields

* fix: add highlight prefs sync helpers

* fix: add highlight color name inputs

* fix: persist and sync highlight color names

* fix: add highlight color label helpers

* fix: add long press highlight label preview

* fix: pull highlight color prefs during library sync

* test: cover highlight color label helpers

* fix: widen highlight color name inputs

* fix: show highlight names on hover and touch hold

* fix: prevent highlight name input overlap

* fix: improve highlight name input responsiveness

* fix: support drag scrolling for highlight colors

* fix: batch custom color and label updates

* fix: serialize highlight prefs saves

* fix: align color strip drag and restore color clicks

* fix: translate default highlight color labels

* refactor: remove highlight preference sync wiring

* fix: align highlight option i18n with existing pattern

* fix: remove redundant english highlight keys

* fix: support raw and normalized highlight label keys

* fix: use underscore translator in highlight options

* fix: translate custom highlight color labels in editor

* refactor: simplify highlight settings persistence

* fix: maintianer review

* refactor: simplify highlight prefs save and clean up editor

- Drop the skipUserColors/skipLabels options from handleHighlightPrefsChange
  and always persist both arrays; the flags only masked a no-op caller.
- Type handleHighlightColorsChange with Record<HighlightColor, string>
  instead of typeof so the signature reads clearly.
- Remove the always-true `|| true` guard around the custom colors section.
- Stop wrapping user-typed custom color labels with _(), matching the
  built-in color inputs and keeping the input value equal to what the
  user typed.

* refactor: couple highlight labels to their colors

Replace the parallel `highlightColorLabels: Record<string, string>` map
with label storage that lives next to each color. This removes the hex
key normalization layer and its whole class of orphan/case-drift bugs.

Data model:
  userHighlightColors: string[]                    ->  UserHighlightColor[]
                                                       ({ hex, label? })
  highlightColorLabels: Record<string, string>     ->  (removed)
                                                       defaultHighlightLabels:
                                                         Partial<Record<DefaultHighlightColor, string>>

A `migrateHighlightColorPrefs` helper runs during `loadSettings` and
handles both the shipped `string[]` layout and the draft-build
`highlightColorLabels` layout: hex-keyed labels attach to matching user
colors, name-keyed labels move into `defaultHighlightLabels`. Malformed
entries are dropped.

Editor:
  - Label inputs commit on blur (Enter also commits), so typing a long
    label no longer fires `setSettings`/`saveSettings` on every
    keystroke. A small `LabelInput` component owns the draft state and
    syncs if the prop changes externally.
  - Three explicit callbacks (`onCustomHighlightColorsChange`,
    `onUserHighlightColorsChange`, `onDefaultHighlightLabelsChange`)
    replace the previous single callback with opaque skip flags.

Picker:
  - Extracted a reusable `useDragScroll` hook (mouse only, 6px
    threshold, 120ms click suppression) from the inline state machine
    in `HighlightOptions`. The picker drops to ~280 lines.
  - Long-press preview stays touch/pen only. It now reads labels via
    `getHighlightColorLabel` (which returns `undefined` when no user
    label is set), letting the component layer decide whether to fall
    back to a translated default name.

i18n:
  - Default color names ('red' | 'yellow' | 'green' | 'blue' | 'violet')
    are registered once at module scope via `stubTranslation` and
    translated at the picker layer through `useTranslation`. User-typed
    labels are never run through `_()`, so what the user types is what
    the editor shows.

Tests:
  - `annotator-util.test.ts`: rewritten around the new helper contract
    (user label -> undefined fallback) and case-insensitive hex matching.
  - `settings-highlight-migration.test.ts`: new, covers legacy
    `string[]`, already-migrated entries, malformed hex filtering, and
    the two draft-label fold paths.

---------

Co-authored-by: Huang Xin <chrox.huang@gmail.com>

apps/readest-app/src/__tests__/utils/annotator-util.test.ts

@@ -1,6 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
-import { getExternalDragHandle, toParentViewportPoint } from '@/app/reader/utils/annotatorUtil';
+import {
+  getExternalDragHandle,
+  getHighlightColorLabel,
+  toParentViewportPoint,
+} from '@/app/reader/utils/annotatorUtil';
 import { Point } from '@/utils/sel';
+import { UserHighlightColor } from '@/types/book';
+import { SystemSettings } from '@/types/settings';
 
 describe('getExternalDragHandle', () => {
   const currentStart: Point = { x: 100, y: 200 };
@@ -99,3 +105,38 @@ describe('toParentViewportPoint', () => {
     expect(result).toEqual({ x: 300, y: 100 });
   });
 });
+
+describe('getHighlightColorLabel', () => {
+  const makeSettings = (
+    userHighlightColors: UserHighlightColor[],
+    defaultHighlightLabels: Partial<Record<string, string>> = {},
+  ): SystemSettings =>
+    ({
+      globalReadSettings: {
+        userHighlightColors,
+        defaultHighlightLabels,
+      },
+    }) as SystemSettings;
+
+  it('returns the user-set label for a built-in color', () => {
+    const settings = makeSettings([], { yellow: 'Foreshadowing' });
+    expect(getHighlightColorLabel(settings, 'yellow')).toBe('Foreshadowing');
+  });
+
+  it('returns the user-set label for a hex color, matching case-insensitively', () => {
+    const settings = makeSettings([{ hex: '#aabbcc', label: 'Romance' }]);
+    expect(getHighlightColorLabel(settings, '#AABBCC')).toBe('Romance');
+  });
+
+  it('returns undefined when the user has not set a label', () => {
+    const settings = makeSettings([]);
+    expect(getHighlightColorLabel(settings, 'green')).toBeUndefined();
+    expect(getHighlightColorLabel(settings, '#123456')).toBeUndefined();
+  });
+
+  it('ignores labels that collapse to whitespace', () => {
+    const settings = makeSettings([{ hex: '#abcdef', label: '   ' }], { red: '  ' });
+    expect(getHighlightColorLabel(settings, '#abcdef')).toBeUndefined();
+    expect(getHighlightColorLabel(settings, 'red')).toBeUndefined();
+  });
+});