Added scroll group service, hook to use scroll groups, added to web v…

…iews, added tab nav bar with simple UI (#1096)

assets/localization/en.json

@@ -14,15 +14,23 @@
   "%mainMenu_window%": "Window",
   "%some_localization_key%": "This is the English text for %some_localization_key%.",
   "%submitButton%": "Submit",
+  "%scrollGroup_undefined%": "Ø",
+  "%scrollGroup_0%": "A",
+  "%scrollGroup_1%": "B",
+  "%scrollGroup_2%": "C",
+  "%scrollGroup_3%": "D",
+  "%scrollGroup_4%": "E",
   "%webView_edit%": "Edit",
   "%webView_openProjectSettings%": "Open Project Settings",
   "%webView_project%": "Project",
   "%webView_projectAssignmentsAndProgress%": "Assignments and Progress",
   "%wordList%": "Word List",
   "%settings_platform_group1_label%": "Platform Settings",
   "%settings_platform_group1_description%": "Settings pertaining to the software overall",
-  "%settings_platform_verseRef_label%": "Current Verse Reference",
+  "%settings_platform_verseRef_label%": "Current Verse Reference for Scroll Group A (Deprecated)",
+  "%settings_platform_verseRef_description%": "Current Verse Reference for Scroll Group A. Deprecated - please use `papi.scrollGroups` and `useWebViewScrollGroupScrRef`",
   "%settings_platform_interfaceLanguage_label%": "Interface Language",
+  "%settings_platform_interfaceLanguage_description%": "List of locales to use when localizing the interface. First in the list receives highest priority. 'en' (English) is always added at the end, so everything localizes to English if it does not have a localization in a higher-priority locale.",
   "%settings_platform_ptxUtilsMementoData_label%": "PtxUtils Memento Data",
   "%settings_platform_paratextDataLastRegistryDataCachedTimes_label%": "ParatextData Last Registry Data Cached Times",
   "%project_settings_platform_group1_label%": "Platform Settings",

extensions/src/hello-world/src/web-views/hello-world.web-view.tsx

@@ -21,20 +21,14 @@ import {
 import type { WebViewProps } from '@papi/core';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { HelloWorldEvent } from 'hello-world';
-import { debounce, ScriptureReference } from 'platform-bible-utils';
+import { debounce } from 'platform-bible-utils';
 import Clock from './components/clock.component';
 import Logo from '../../assets/offline.svg';
 import ProjectSettingsEditor from './hello-world-project/project-settings-editor.component';
 import useHelloWorldProjectSettings from './hello-world-project/use-hello-world-project-settings.hook';
 
 const NAME = 'Hello World React WebView';
 
-const defaultScrRef: ScriptureReference = {
-  bookNum: 1,
-  chapterNum: 1,
-  verseNum: 1,
-};
-
 // Test fetching
 papi
   .fetch('https://www.example.com', { mode: 'no-cors' })
@@ -45,9 +39,10 @@ globalThis.webViewComponent = function HelloWorld({
   projectId,
   useWebViewState,
   updateWebViewDefinition,
+  useWebViewScrollGroupScrRef,
 }: WebViewProps) {
   const [clicks, setClicks] = useWebViewState<number>('clicks', 0);
-  const [scrRef, setScrRef] = useSetting('platform.verseRef', defaultScrRef);
+  const [scrRef, setScrRef] = useWebViewScrollGroupScrRef();
   const verseRef = useMemo(
     () => new VerseRef(scrRef.bookNum, scrRef.chapterNum, scrRef.verseNum),
     [scrRef],

extensions/src/platform-scripture-editor/src/platform-scripture-editor.web-view.tsx

@@ -10,7 +10,7 @@ import { VerseRef } from '@sillsdev/scripture';
 import { JSX, useCallback, useEffect, useMemo, useRef } from 'react';
 import type { WebViewProps } from '@papi/core';
 import { logger } from '@papi/frontend';
-import { useProjectData, useSetting } from '@papi/frontend/react';
+import { useProjectData } from '@papi/frontend/react';
 import { ScriptureReference, debounce } from 'platform-bible-utils';
 
 /** The offset in pixels from the top of the window to scroll to show the verse number */
@@ -22,12 +22,6 @@ const VERSE_NUMBER_SCROLL_OFFSET = 80;
  */
 const EDITOR_LOAD_DELAY_TIME = 100;
 
-const defaultScrRef: ScriptureReference = {
-  bookNum: 1,
-  chapterNum: 1,
-  verseNum: 1,
-};
-
 const usjDocumentDefault: Usj = { type: 'USJ', version: '0.2.1', content: [] };
 
 /**
@@ -67,14 +61,15 @@ function scrollToScrRef(scrRef: ScriptureReference): HTMLElement | undefined {
 globalThis.webViewComponent = function PlatformScriptureEditor({
   projectId,
   useWebViewState,
+  useWebViewScrollGroupScrRef,
 }: WebViewProps): JSX.Element {
   const [isReadOnly] = useWebViewState<boolean>('isReadOnly', true);
   const Editor = isReadOnly ? Editorial : Marginal;
 
   // Using react's ref api which uses null, so we must use null
   // eslint-disable-next-line no-null/no-null
   const editorRef = useRef<EditorRef | MarginalRef | null>(null);
-  const [scrRef, setScrRefInternal] = useSetting('platform.verseRef', defaultScrRef);
+  const [scrRef, setScrRefInternal] = useWebViewScrollGroupScrRef();
 
   /**
    * Scripture reference we set most recently. Used so we don't scroll on updates to scrRef that

extensions/src/platform-scripture/src/inventory.web-view.tsx

@@ -1,5 +1,5 @@
 import { WebViewProps } from '@papi/core';
-import { useLocalizedStrings, useProjectSetting, useSetting } from '@papi/frontend/react';
+import { useLocalizedStrings, useProjectSetting } from '@papi/frontend/react';
 import { Scope, usePromise, INVENTORY_STRING_KEYS } from 'platform-bible-react';
 import { ScriptureReference } from 'platform-bible-utils';
 import { useCallback, useMemo, useState } from 'react';
@@ -9,8 +9,6 @@ import papi from '@papi/frontend';
 import CharacterInventory from './character-inventory.component';
 import RepeatedWordsInventory from './repeated-words-inventory.component';
 
-const defaultVerseRef: ScriptureReference = { bookNum: 1, chapterNum: 1, verseNum: 1 };
-
 /**
  * Get scripture text for the provided scope and reference for the specified projectId
  *
@@ -47,15 +45,18 @@ const getText = async (
   throw new Error('Cannot get scripture for unknown scope');
 };
 
-global.webViewComponent = function InventoryWebView({ useWebViewState }: WebViewProps) {
+global.webViewComponent = function InventoryWebView({
+  useWebViewState,
+  useWebViewScrollGroupScrRef,
+}: WebViewProps) {
   const [localizedStrings] = useLocalizedStrings(
     useMemo(() => {
       return Array.from(INVENTORY_STRING_KEYS);
     }, []),
   );
   const [projectId] = useWebViewState('projectId', '');
   const [webViewType] = useWebViewState('webViewType', '');
-  const [scriptureRef, setScriptureRef] = useSetting('platform.verseRef', defaultVerseRef);
+  const [scriptureRef, setScriptureRef] = useWebViewScrollGroupScrRef();
 
   let InventoryVariant;
   let validItemsSetting: keyof ProjectSettingTypes;