From fb848fa6d02ca4e2011df07caef36673b7d84443 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 1 Feb 2022 13:52:58 -0600
Subject: [PATCH] feat: tag breadcrumbs in nav bar (#540)

* feat: with tag breadcrumbs in the tag list

* fix: nested padding and subtitle conditional

* fix: types
---
 src/AppStack.tsx                          | 24 ++++++++++-------
 src/screens/Notes/Notes.tsx               | 33 ++++++++++++++---------
 src/screens/SideMenu/MainSideMenu.tsx     | 10 +++----
 src/screens/SideMenu/TagSelectionList.tsx |  4 +--
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/src/AppStack.tsx b/src/AppStack.tsx
index ff0fd25f..53027360 100644
--- a/src/AppStack.tsx
+++ b/src/AppStack.tsx
@@ -52,13 +52,13 @@ type AppStackNavigatorParamList = {
 
 export type AppStackNavigationProp<
   T extends keyof AppStackNavigatorParamList
-  > = {
-    navigation: CompositeNavigationProp<
-      ModalStackNavigationProp<'AppStack'>['navigation'],
-      StackNavigationProp<AppStackNavigatorParamList, T>
-    >;
-    route: RouteProp<AppStackNavigatorParamList, T>;
-  };
+> = {
+  navigation: CompositeNavigationProp<
+    ModalStackNavigationProp<'AppStack'>['navigation'],
+    StackNavigationProp<AppStackNavigatorParamList, T>
+  >;
+  route: RouteProp<AppStackNavigatorParamList, T>;
+};
 
 const AppStack = createStackNavigator<AppStackNavigatorParamList>();
 
@@ -201,10 +201,16 @@ export const AppStackComponent = (
                 const screenStatus = isInTabletMode
                   ? composeStatus || notesStatus
                   : notesStatus;
+
+                const title = route.params?.title ?? (children || '');
+                const subtitle = [screenStatus?.status, route.params?.subTitle]
+                  .filter(x => !!x)
+                  .join(' • ');
+
                 return (
                   <HeaderTitleView
-                    title={route.params?.title ?? (children || '')}
-                    subtitle={screenStatus?.status}
+                    title={title}
+                    subtitle={subtitle}
                     subtitleColor={screenStatus?.color}
                   />
                 );
diff --git a/src/screens/Notes/Notes.tsx b/src/screens/Notes/Notes.tsx
index 3d38cc49..14b045c1 100644
--- a/src/screens/Notes/Notes.tsx
+++ b/src/screens/Notes/Notes.tsx
@@ -106,31 +106,38 @@ export const Notes = React.memo(
     ] = useState<boolean>(false);
     const [shouldFocusSearch, setShouldFocusSearch] = useState<boolean>(false);
 
-    // Ref
     const haveDisplayOptions = useRef(false);
     const protectionsEnabled = useRef(
       application!.hasProtectionSources() &&
-        !application!.hasUnprotectedAccessSession()
+      !application!.hasUnprotectedAccessSession()
     );
 
     const reloadTitle = useCallback(
       (newNotes?: SNNote[], newFilter?: string) => {
         let title = '';
+        let subTitle: string | undefined;
+
+        const selectedTag = application?.getAppState().selectedTag;
+
         if (newNotes && (newFilter ?? searchText).length > 0) {
           const resultCount = newNotes.length;
           title =
             resultCount === 1
               ? `${resultCount} search result`
               : `${resultCount} search results`;
-        } else if (application?.getAppState().selectedTag) {
-          title = application.getAppState().selectedTag!.title;
+        } else if (selectedTag) {
+          title = selectedTag.title;
+          if (selectedTag.parentId) {
+            const parents = application!.getTagParentChain(selectedTag);
+            const hierarchy = parents.map(tag => tag.title).join(' ⫽ ');
+            subTitle = hierarchy.length > 0 ? `in ${hierarchy}` : undefined;
+          }
         }
 
-        if (title) {
-          navigation.setParams({
-            title,
-          });
-        }
+        navigation.setParams({
+          title,
+          subTitle,
+        });
       },
       [application, navigation, searchText]
     );
@@ -237,10 +244,10 @@ export const Notes = React.memo(
         const searchQuery =
           searchText || searchFilter
             ? {
-                query: searchFilter?.toLowerCase() ?? searchText.toLowerCase(),
-                includeProtectedNoteText:
-                  includeProtected ?? includeProtectedNoteText,
-              }
+              query: searchFilter?.toLowerCase() ?? searchText.toLowerCase(),
+              includeProtectedNoteText:
+                includeProtected ?? includeProtectedNoteText,
+            }
             : undefined;
 
         let applyFilters = false;
diff --git a/src/screens/SideMenu/MainSideMenu.tsx b/src/screens/SideMenu/MainSideMenu.tsx
index 07bb0928..0d00dc61 100644
--- a/src/screens/SideMenu/MainSideMenu.tsx
+++ b/src/screens/SideMenu/MainSideMenu.tsx
@@ -263,11 +263,11 @@ export const MainSideMenu = React.memo(({ drawerRef }: Props) => {
   const outOfSyncPressed = async () => {
     const confirmed = await application!.alertService!.confirm(
       "We've detected that the data in the current application session may " +
-      'not match the data on the server. This can happen due to poor' +
-      'network conditions, or if a large note fails to download on your ' +
-      'device. To resolve this issue, we recommend first creating a backup ' +
-      'of your data in the Settings screen, then signing out of your account ' +
-      'and signing back in.',
+        'not match the data on the server. This can happen due to poor' +
+        'network conditions, or if a large note fails to download on your ' +
+        'device. To resolve this issue, we recommend first creating a backup ' +
+        'of your data in the Settings screen, then signing out of your account ' +
+        'and signing back in.',
       'Potentially Out of Sync',
       'Open Settings',
       undefined
diff --git a/src/screens/SideMenu/TagSelectionList.tsx b/src/screens/SideMenu/TagSelectionList.tsx
index 9401ec00..9ea56037 100644
--- a/src/screens/SideMenu/TagSelectionList.tsx
+++ b/src/screens/SideMenu/TagSelectionList.tsx
@@ -119,10 +119,8 @@ export const TagSelectionList = React.memo(
       ]);
     };
 
-    // Nesting
     const isRootTag = (tag: SNTag | SNSmartTag): boolean =>
       !(application?.getTagParent(tag) || false);
-
     const isRegularTag = (tag: SNTag | SNSmartTag): boolean =>
       tag.content_type === ContentType.Tag;
 
@@ -170,7 +168,7 @@ export const TagSelectionList = React.memo(
             <FlatList
               // eslint-disable-next-line react-native/no-inline-styles
               style={{
-                paddingLeft: 15,
+                paddingLeft: 25,
               }}
               initialNumToRender={10}
               windowSize={10}