added tab UI for tn notes changes

.vscode/settings.json

@@ -27,7 +27,7 @@
 	"eslint.codeAction.disableRuleComment": {},
 	"eslint.codeAction.showDocumentation": {},
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"eslint.workingDirectories": [],
 	"editor.tabSize": 2

renderer/src/components/EditorPage/Reference/TabSelector.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Tab } from '@headlessui/react';
+import PropTypes from 'prop-types';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function TabSelector({ currentTab, setCurrentTab, tabData }) {
+  return (
+    <div className="w-full px-2 sm:px-0 pb-2">
+      <Tab.Group manual selectedIndex={currentTab} onChange={setCurrentTab}>
+        <Tab.List className="flex space-x-1 rounded-xl bg-gray-200 p-1">
+          {tabData.map((data) => (
+            <Tab
+              key={data.id}
+              className={({ selected }) => classNames(
+                  'w-full rounded-lg py-1 text-sm font-medium leading-5',
+                  'ring-white/60 ring-offset-2 ring-offset-gray-400 focus:outline-none focus:ring-2',
+                  selected
+                    ? 'bg-primary/80 text-white shadow'
+                    : 'text-[#4b5563] hover:bg-[#4b5563]/40 hover:text-white',
+                )}
+            >
+              {data.title}
+            </Tab>
+          ))}
+        </Tab.List>
+      </Tab.Group>
+    </div>
+  );
+}
+
+export default TabSelector;
+
+TabSelector.propTypes = {
+  currentTab: PropTypes.object,
+  setCurrentTab: PropTypes.func,
+  tabData: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }),
+};

renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js

@@ -8,6 +8,13 @@ import LoadingScreen from '@/components/Loading/LoadingScreen';
 import ReferenceCard from './ReferenceCard';
 import * as logger from '../../../logger';
 import packageInfo from '../../../../../package.json';
+import TabSelector from './TabSelector';
+
+const tnTabHeads = [
+  { id: 1, title: 'verse' },
+  { id: 2, title: 'chapter Overview' },
+  { id: 3, title: 'book Overview' },
+];
 
 export default function TranslationHelpsCard({
   title,
@@ -31,10 +38,14 @@ export default function TranslationHelpsCard({
   const [offlineMarkdown, setOfflineMarkdown] = useState('');
   const [resetTrigger, setResetTrigger] = useState(false);
 
+  const [currentTnTab, setCurrentTnTab] = useState(0);
+
+  const [currentChapterVerse, setCurrentChapterVerse] = useState({ verse, chapter });
+
   // eslint-disable-next-line prefer-const
   let { items, markdown, isLoading } = useContent({
-    verse,
-    chapter,
+    verse: currentChapterVerse.verse,
+    chapter: currentChapterVerse.chapter,
     projectId,
     branch,
     languageId,
@@ -45,6 +56,16 @@ export default function TranslationHelpsCard({
     readyToFetch: true,
   });
 
+  useEffect(() => {
+    if (currentTnTab === 1) {
+      setCurrentChapterVerse({ chapter, verse: 'intro' });
+    } else if (currentTnTab === 2) {
+      setCurrentChapterVerse({ verse: 'intro', chapter: 'front' });
+    } else {
+      setCurrentChapterVerse({ verse, chapter });
+    }
+  }, [currentTnTab, verse, chapter]);
+
   useEffect(() => {
     if (offlineResource && offlineResource.offline) {
       // read tn tsv contents and pass to items
@@ -225,22 +246,27 @@ export default function TranslationHelpsCard({
   items = !offlineItemsDisable && offlineResource?.offline ? offlineItems : items;
   markdown = offlineResource?.offline ? offlineMarkdown : markdown;
 
+  console.log({ currentTnTab });
+
   return (
     (markdown || items) ? (
-      <ReferenceCard
-        items={items}
-        filters={['OccurrenceNote']}
-        markdown={markdown}
-        isLoading={isLoading}
-        languageId={languageId}
-        title={title}
-        viewMode={viewMode}
-        selectedQuote={selectedQuote}
-        setQuote={setQuote}
-        font={font}
-        setResetTrigger={setResetTrigger}
-        resetTrigger={resetTrigger}
-      />
+      <>
+        {resourceId === 'tn' && (<TabSelector currentTab={currentTnTab} setCurrentTab={setCurrentTnTab} tabData={tnTabHeads} />)}
+        <ReferenceCard
+          items={items}
+          filters={['OccurrenceNote']}
+          markdown={markdown}
+          isLoading={isLoading}
+          languageId={languageId}
+          title={title}
+          viewMode={viewMode}
+          selectedQuote={selectedQuote}
+          setQuote={setQuote}
+          font={font}
+          setResetTrigger={setResetTrigger}
+          resetTrigger={resetTrigger}
+        />
+      </>
     ) : <LoadingScreen />
 
   );