Create continuous scroll view

__mocks__/platform-bible-react.tsx

@@ -82,3 +82,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

@@ -4,7 +4,11 @@
     "en": {
       "%interlinearizer_dialog_open_title%": "Open Interlinearizer",
       "%interlinearizer_dialog_open_prompt%": "Choose a project to open in the Interlinearizer:",
-      "%interlinearizer_openForProject%": "Open Interlinearizer for this Project"
+      "%interlinearizer_openForProject%": "Open Interlinearizer for this Project",
+      "%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,13 @@
-[]
+[
+  {
+    "label": "%interlinearizer_projectSettings_title%",
+    "properties": {
+      "interlinearizer.continuousScroll": {
+        "label": "%interlinearizer_projectSettings_continuousScroll%",
+        "description": "%interlinearizer_projectSettings_continuousScrollDescription%",
+        "default": true,
+        "type": "boolean"
+      }
+    }
+  }
+]

src/__tests__/components/ContinuousScrollToggle.test.tsx

@@ -0,0 +1,30 @@
+/** @file Unit tests for components/ContinuousScrollToggle.tsx. */
+/// <reference types="jest" />
+/// <reference types="@testing-library/jest-dom" />
+
+import { useLocalizedStrings } from '@papi/frontend/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ContinuousScrollToggle from '../../components/ContinuousScrollToggle';
+
+describe('ContinuousScrollToggle', () => {
+  beforeEach(() => {
+    jest
+      .mocked(useLocalizedStrings)
+      .mockReturnValue([
+        { '%interlinearizer_continuousScrollToggle%': 'Continuous Scroll' },
+        false,
+      ]);
+  });
+
+  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);
+  });
+});