Implemented tailwind and localization in verse ref view extension

paranext · Oct 17, 2024 · ececd49 · ececd49
1 parent 256080b
commit ececd49
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 23 deletions.
diff --git a/src/verse-ref-view/contributions/localizedStrings.json b/src/verse-ref-view/contributions/localizedStrings.json
@@ -2,7 +2,10 @@
   "metadata": {},
   "localizedStrings": {
     "en": {
-      "%mainMenu_openVerseRefView%": "Open Verse Ref View"
+      "%mainMenu_openVerseRefView%": "Open Verse Ref View",
+      "%verseRefView_dialog_openVerseRefView_title%": "Select Project to open with Verse Ref View",
+      "%verseRefView_dialog_openVerseRefView_prompt%": "Choose the project to open with Verse Ref View:",
+      "%verseRefView_title_format%": "Verse Ref View: {projectName}"
     }
   }
 }
diff --git a/src/verse-ref-view/src/main.ts b/src/verse-ref-view/src/main.ts
@@ -7,6 +7,7 @@ import {
   WebViewDefinition,
 } from '@papi/core';
 import verseRefWebView from './verse-ref.web-view?inline';
+import verseRefWebViewStyles from './verse-ref.web-view.scss?inline';
 import { getWebViewTitle } from './utils';
 
 const verseRefWebViewType = 'verseRefView.webView';
@@ -23,8 +24,8 @@ async function openVerseRefView(projectId: string | undefined): Promise<string |
   let projectIdForWebView = projectId;
   if (!projectIdForWebView) {
     projectIdForWebView = await papi.dialogs.selectProject({
-      title: 'Select Project to open with Verse Ref View',
-      prompt: 'Choose the project to open with Verse Ref View:',
+      title: '%verseRefView_dialog_openVerseRefView_title%',
+      prompt: '%verseRefView_dialog_openVerseRefView_prompt%',
       includeProjectInterfaces: 'platformScripture.USFM_Verse',
     });
   }
@@ -49,14 +50,20 @@ const verseRefWebViewProvider: IWebViewProvider = {
     // We know that the projectId (if present in the state) will be a string.
     const projectId = getWebViewOptions.projectId || savedWebView.projectId || undefined;
     const projectName = projectId
-      ? (await (
+      ? ((await (
           await papi.projectDataProviders.get('platform.base', projectId)
-        ).getSetting('platform.name')) ?? projectId
+        ).getSetting('platform.name')) ?? projectId)
       : undefined;
+
+    const titleFormatString = await papi.localization.getLocalizedString({
+      localizeKey: '%verseRefView_title_format%',
+    });
+
     return {
-      title: getWebViewTitle(projectName),
+      title: getWebViewTitle(titleFormatString, projectName),
       ...savedWebView,
       content: verseRefWebView,
+      styles: verseRefWebViewStyles,
       projectId,
     };
   },

diff --git a/src/verse-ref-view/src/utils.ts b/src/verse-ref-view/src/utils.ts
@@ -1,9 +1,13 @@
+import { formatReplacementString } from 'platform-bible-utils';
+
 /**
  * Get the name of the web view based on the name of the project
  *
+ * @param titleStringFormat String with `{projectName}` in it to be replaced with the project name
+ *   e.g. `Verse Ref View: {projectName}`
  * @param projectName Should generally be the project's short name
  * @returns Web view title
  */
-export function getWebViewTitle(projectName: string | undefined) {
-  return `Verse Ref View${projectName ? `: ${projectName}` : ''}`;
+export function getWebViewTitle(titleStringFormat: string, projectName: string | undefined) {
+  return formatReplacementString(titleStringFormat, { projectName });
 }
diff --git a/src/verse-ref-view/src/verse-ref.web-view.scss b/src/verse-ref-view/src/verse-ref.web-view.scss
@@ -0,0 +1 @@
+@import './tailwind.scss';
diff --git a/src/verse-ref-view/src/verse-ref.web-view.tsx b/src/verse-ref-view/src/verse-ref.web-view.tsx
@@ -1,9 +1,17 @@
 import { WebViewProps } from '@papi/core';
-import papi from '@papi/frontend';
-import { useProjectData } from '@papi/frontend/react';
+import papi, { logger } from '@papi/frontend';
+import { useLocalizedStrings, useProjectData } from '@papi/frontend/react';
 import { VerseRef } from '@sillsdev/scripture';
-import { usePromise } from 'platform-bible-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  usePromise,
+} from 'platform-bible-react';
 import { useCallback, useMemo } from 'react';
+import { LocalizeKey } from 'platform-bible-utils';
 import { getWebViewTitle } from './utils';
 
 /**
@@ -32,12 +40,17 @@ function stripUSFM(usfm: string | undefined) {
   );
 }
 
+const titleFormatKey = '%verseRefView_title_format%';
+const localizedStringKeys: LocalizeKey[] = [titleFormatKey];
+
 global.webViewComponent = function VerseRefView({
   projectId,
   title,
   updateWebViewDefinition,
   useWebViewScrollGroupScrRef,
 }: WebViewProps) {
+  const [{ [titleFormatKey]: titleFormatString }] = useLocalizedStrings(localizedStringKeys);
+
   const [projects] = usePromise(
     useCallback(async () => {
       const projectsMetadata = await papi.projectLookup.getMetadataForAllProjects({
@@ -61,13 +74,21 @@ global.webViewComponent = function VerseRefView({
 
   const setProjectId = useCallback(
     (pId: string) => {
+      // If localization hasn't come in, just don't set the project id yet
+      if (titleFormatString === titleFormatKey) {
+        logger.warn(
+          `Verse Ref Web View: Localization has not come in yet, so skipping setting project id to ${pId}`,
+        );
+        return;
+      }
+
       const projectName = projects?.find((project) => project.id === pId)?.name;
       updateWebViewDefinition({
-        title: projectName ? getWebViewTitle(projectName) : title,
+        title: projectName ? getWebViewTitle(titleFormatString, projectName) : title,
         projectId: pId,
       });
     },
-    [updateWebViewDefinition, projects, title],
+    [updateWebViewDefinition, projects, title, titleFormatString],
   );
 
   // Get current verse reference
@@ -82,16 +103,26 @@ global.webViewComponent = function VerseRefView({
   const [verse] = useProjectData('platformScripture.USFM_Verse', projectId).VerseUSFM(verseRef, '');
 
   return (
-    <div className="top">
-      <div>
-        {verseRef.toString()}:{' '}
-        <select value={projectId} onChange={(e) => setProjectId(e.target.value)}>
-          {projects?.map((project) => (
-            <option key={project.id} value={project.id}>
-              {project.name}
-            </option>
-          ))}
-        </select>
+    <div className="tw-m-4">
+      <div className="tw-flex tw-items-center">
+        <div className="tw-flex-shrink-0 tw-me-4">{verseRef.toString()}</div>
+        <Select
+          // Don't allow setting the project id if localization hasn't come in
+          disabled={titleFormatString === titleFormatKey}
+          value={projectId}
+          onValueChange={(pId) => setProjectId(pId)}
+        >
+          <SelectTrigger className="tw-w-auto">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {projects?.map((project) => (
+              <SelectItem key={project.id} value={project.id}>
+                {project.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
       <div>{stripUSFM(verse)}</div>
     </div>