From 48893f727e0c0aa97300941747fee913f04e25fb Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 17 Apr 2022 11:42:55 -0700
Subject: [PATCH] fix: Tabs on document references don't show active state
 'Referenced by' -> 'Backlinks'

---
 app/components/NavLink.tsx                    |  6 +-
 app/scenes/Document/components/References.tsx | 67 +++++++++++++------
 shared/i18n/locales/en_US/translation.json    |  4 +-
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/app/components/NavLink.tsx b/app/components/NavLink.tsx
index 6d8adc274..311f8e180 100644
--- a/app/components/NavLink.tsx
+++ b/app/components/NavLink.tsx
@@ -14,9 +14,11 @@ function NavLinkWithChildrenFunc(
 ) {
   return (
     <Route path={to} exact={exact}>
-      {({ match }) => (
+      {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
-          {children ? children(match) : null}
+          {children
+            ? children(rest.isActive ? rest.isActive(match, location) : match)
+            : null}
         </NavLink>
       )}
     </Route>
diff --git a/app/scenes/Document/components/References.tsx b/app/scenes/Document/components/References.tsx
index 008999aa6..6c4b88c33 100644
--- a/app/scenes/Document/components/References.tsx
+++ b/app/scenes/Document/components/References.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import styled from "styled-components";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
 import Tab from "~/components/Tab";
@@ -29,6 +30,7 @@ function References({ document }: Props) {
   const showBacklinks = !!backlinks.length;
   const showChildDocuments = !!children.length;
   const isBacklinksTab = location.hash === "#backlinks" || !showChildDocuments;
+  const height = Math.max(backlinks.length, children.length) * 40;
 
   return showBacklinks || showChildDocuments ? (
     <Fade>
@@ -40,35 +42,56 @@ function References({ document }: Props) {
         )}
         {showBacklinks && (
           <Tab to="#backlinks" isActive={() => isBacklinksTab}>
-            <Trans>Referenced by</Trans>
+            <Trans>Backlinks</Trans>
           </Tab>
         )}
       </Tabs>
-      {isBacklinksTab
-        ? backlinks.map((backlinkedDocument) => (
-            <ReferenceListItem
-              anchor={document.urlId}
-              key={backlinkedDocument.id}
-              document={backlinkedDocument}
-              showCollection={
-                backlinkedDocument.collectionId !== document.collectionId
-              }
-            />
-          ))
-        : children.map((node) => {
-            // If we have the document in the store already then use it to get the extra
-            // contextual info, otherwise the collection node will do (only has title and id)
-            const document = documents.get(node.id);
-            return (
+      <Content style={{ height }}>
+        {showBacklinks && (
+          <List $active={isBacklinksTab}>
+            {backlinks.map((backlinkedDocument) => (
               <ReferenceListItem
-                key={node.id}
-                document={document || node}
-                showCollection={false}
+                anchor={document.urlId}
+                key={backlinkedDocument.id}
+                document={backlinkedDocument}
+                showCollection={
+                  backlinkedDocument.collectionId !== document.collectionId
+                }
               />
-            );
-          })}
+            ))}
+          </List>
+        )}
+        {showChildDocuments && (
+          <List $active={!isBacklinksTab}>
+            {children.map((node) => {
+              // If we have the document in the store already then use it to get the extra
+              // contextual info, otherwise the collection node will do (only has title and id)
+              const document = documents.get(node.id);
+              return (
+                <ReferenceListItem
+                  key={node.id}
+                  document={document || node}
+                  showCollection={false}
+                />
+              );
+            })}
+          </List>
+        )}
+      </Content>
     </Fade>
   ) : null;
 }
 
+const Content = styled.div`
+  position: relative;
+`;
+
+const List = styled.div<{ $active: boolean }>`
+  visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
+
 export default observer(References);
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 18e9e5e36..804cd5281 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -150,7 +150,6 @@
   "Starred documents could not be loaded": "Starred documents could not be loaded",
   "Starred": "Starred",
   "Show more": "Show more",
-  "Show less": "Show less",
   "Toggle sidebar": "Toggle sidebar",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
   "Return to App": "Back to App",
@@ -258,7 +257,6 @@
   "Move": "Move",
   "Permanently delete": "Permanently delete",
   "Enable embeds": "Enable embeds",
-  "Disable embeds": "Disable embeds",
   "Full width": "Full width",
   "Move {{ documentName }}": "Move {{ documentName }}",
   "Permanently delete {{ documentName }}": "Permanently delete {{ documentName }}",
@@ -401,7 +399,7 @@
   "Deleted by {{userName}}": "Deleted by {{userName}}",
   "Observing {{ userName }}": "Observing {{ userName }}",
   "Nested documents": "Nested documents",
-  "Referenced by": "Referenced by",
+  "Backlinks": "Backlinks",
   "Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
   "Share": "Share",
   "Share this document": "Share this document",