Create continuous scroll view (#40)

* feat: add interlinearizer.continuousScroll project setting with toggle UI

* feat: extract SegmentView component with token-chip and baseline-text display modes

* Add ContinuousView core (continuous token strip, smooth incremental arrows, boundary/fade behavior)

* Compose ContinuousView above chapter rows and finalize conditional display rules

* Propagate verse change from ContinuousView arrow navigation to scroll group

* Add PhraseBox-based phrase navigation and clickable focus behavior

* Use optimistic continuous-scroll state across webview

* Fix bugs

* Refine continuous view behavior and stabilize web-view tests

* Extract book data into hook and restructure sticky layout

- Create useInterlinearizerBookData hook to consolidate USJ fetch, tokenization, and state
- Remove ProjectBookFetcher component entirely
- Simplify root rendering to directly use hook output
- Move ContinuousView into toolbar sticky container to prevent overlap
- Remove ResizeObserver and stickyTopOffset complexity
- Clean up jest.setup.ts mock (no longer needed)

* Add comprehensive web view, hook, and component tests

* Add border below ContinuousView

* Memoize segment onClick

* Memoize PhraseBox, SegmentView, TokenChip

* Avoid first-load extra fire; Tidy code

* Add timeout if setting-save fails

* Extract settings hook and add testing

* Complete Web View coverage

* Complete ContinuousView test coverage

* Replace left/right with prev/next for RTL support

* Fix arrows and RTL support

* Show loading while waiting for setting

* Use existing type

* Split up main Web View into pieces

* Complete ContinuousView coverage

* Add setting type

* Smooth-scroll for internal clicks

* Remove useless setting type specification

* Add comment

* Clean up dead code; Fix deps

* Remove excess test setup

* Improve test

* Consolidate tests

* Cover missing branch

* Stabilize toggle

* Simplify layout

Author: imnasnainaec

__mocks__/platform-bible-react.tsx

@@ -220,3 +220,41 @@ export function BookChapterControl({
     </div>
   );
 }
+
+export function Switch({
+  checked,
+  disabled,
+  id,
+  onCheckedChange,
+}: Readonly<{
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  onCheckedChange?: (checked: boolean) => void;
+}>): ReactElement {
+  return (
+    <input
+      checked={checked ?? false}
+      disabled={disabled}
+      id={id}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      type="checkbox"
+    />
+  );
+}
+
+export function Label({
+  children,
+  className,
+  htmlFor,
+}: Readonly<{
+  children?: ReactNode;
+  className?: string;
+  htmlFor?: string;
+}>): ReactElement {
+  return (
+    <label className={className} htmlFor={htmlFor}>
+      {children}
+    </label>
+  );
+}

contributions/localizedStrings.json

@@ -44,7 +44,11 @@
       "%interlinearizer_modal_select_create_new%": "Create New",
       "%interlinearizer_modal_select_cancel%": "Cancel",
       "%interlinearizer_modal_select_name_unnamed%": "Unnamed",
-      "%interlinearizer_modal_select_info_button_label%": "Project info"
+      "%interlinearizer_modal_select_info_button_label%": "Project info",
+      "%interlinearizer_projectSettings_title%": "Interlinearizer",
+      "%interlinearizer_projectSettings_continuousScroll%": "Continuous Scroll",
+      "%interlinearizer_projectSettings_continuousScrollDescription%": "Display tokens in a continuous horizontal scroll strip instead of chapter-segmented rows",
+      "%interlinearizer_continuousScrollToggle%": "Continuous Scroll"
     }
   }
 }

contributions/projectSettings.json

@@ -1 +1,12 @@
-[]
+[
+  {
+    "label": "%interlinearizer_projectSettings_title%",
+    "properties": {
+      "interlinearizer.continuousScroll": {
+        "label": "%interlinearizer_projectSettings_continuousScroll%",
+        "description": "%interlinearizer_projectSettings_continuousScrollDescription%",
+        "default": true
+      }
+    }
+  }
+]

src/__tests__/components/ContinuousScrollToggle.test.tsx

@@ -0,0 +1,31 @@
+/** @file Unit tests for components/ContinuousScrollToggle.tsx. */
+/// <reference types="jest" />
+/// <reference types="@testing-library/jest-dom" />
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ContinuousScrollToggle from '../../components/ContinuousScrollToggle';
+
+describe('ContinuousScrollToggle', () => {
+  it('renders with a label', async () => {
+    render(
+      <ContinuousScrollToggle checked label="Continuous Scroll" onCheckedChange={jest.fn()} />,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    const label = screen.getByText('Continuous Scroll');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', checkbox.id);
+  });
+
+  it('calls onCheckedChange when toggled', async () => {
+    const onCheckedChange = jest.fn();
+    render(<ContinuousScrollToggle checked onCheckedChange={onCheckedChange} />);
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox).toBeChecked();
+    await userEvent.click(checkbox);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(false);
+  });
+});