Rework App Navigation, combined with my profile

seed-hypermedia · Mar 28, 2024 · 0e8405f · 0e8405f
1 parent 49b37d9
commit 0e8405f
Show file tree

Hide file tree

Showing 11 changed files with 430 additions and 109 deletions.
diff --git a/frontend/packages/app/components/sidebar-account.tsx b/frontend/packages/app/components/sidebar-account.tsx
@@ -37,7 +37,9 @@ export function AccountSidebar({
       keepPreviousData: false,
     },
   )
-  const frontDocEmbeds = usePublicationEmbeds(frontDoc.data, !!frontDoc.data)
+  const frontDocEmbeds = usePublicationEmbeds(frontDoc.data, !!frontDoc.data, {
+    skipCards: true,
+  })
   const isFeedActive =
     route.key === 'account-feed' && route.accountId === accountId
   const activeBlock = accountRoute?.blockId

diff --git a/frontend/packages/app/components/sidebar-base.tsx b/frontend/packages/app/components/sidebar-base.tsx
@@ -86,13 +86,16 @@ export function getRouteAccountId(
 ): string | null {
   let activeAccountId: string | null = null
   if (route.key === 'account') {
+    if (route.accountId === myAccount?.id) return null
     activeAccountId = route.accountId
   } else if (route.key === 'account-feed') {
+    if (route.accountId === myAccount?.id) return null
     activeAccountId = route.accountId
   } else if (route.key === 'account-content') {
+    if (route.accountId === myAccount?.id) return null
     activeAccountId = route.accountId
   } else if (route.key === 'draft' && route.isProfileDocument) {
-    return myAccount?.id || null
+    return null
   }
   return activeAccountId
 }
@@ -339,12 +342,12 @@ export function SidebarItem({
 export function MyAccountItem({
   account,
   onRoute,
+  active,
 }: {
   account?: Account
   onRoute: (route: NavRoute) => void
+  active: boolean
 }) {
-  const route = useNavRoute()
-  const active = route.key == 'account' && route.accountId == account?.id
   return (
     <ListItem
       hoverTheme
@@ -398,10 +401,12 @@ export function PinnedAccount({
   accountId,
   isPinned,
   onPress,
+  active,
 }: {
   accountId: string
   isPinned: boolean
   onPress: () => void
+  active: boolean
 }) {
   const route = useNavRoute()
   const account = useAccount(accountId)
@@ -415,7 +420,7 @@ export function PinnedAccount({
           onPress()
           // navigate({key: 'account', accountId})
         }}
-        active={route.key == 'account' && route.accountId == accountId}
+        active={active}
         color={isPinned ? undefined : '$color11'}
         icon={
           <Avatar
@@ -495,46 +500,46 @@ export function getDocOutline(
         id: child.block.id,
         children: child.children && getDocOutline(child.children, embeds),
       })
-    } else if (
-      child.block.type === 'embed' &&
-      child.block.attributes?.view === 'card' &&
-      embeds[child.block.id]
-    ) {
-      const embed = embeds[child.block.id]
-      if (embed?.type === 'd') {
-        outline.push({
-          id: child.block.id,
-          title: embed?.data?.document?.title || 'Untitled Document',
-          linkRoute: {
-            key: 'publication',
-            documentId: embed?.query?.refId?.qid,
-            versionId: embed?.query?.refId?.version || undefined,
-            variants: embed?.query?.refId?.variants || undefined,
-          },
-          children: child.children && getDocOutline(child.children, embeds),
-        })
-      } else if (embed?.type === 'a') {
-        outline.push({
-          id: child.block.id,
-          title: embed?.data?.profile?.alias || 'Untitled Account',
-          linkRoute: {
-            key: 'account',
-            accountId: embed?.query?.refId?.eid,
-          },
-          children: child.children && getDocOutline(child.children, embeds),
-        })
-      } else if (embed?.type === 'g') {
-        outline.push({
-          id: child.block.id,
-          title: embed?.data?.title || 'Untitled Group',
-          linkRoute: {
-            key: 'group',
-            groupId: embed?.query?.refId?.qid,
-            version: embed?.query?.refId?.version || undefined,
-          },
-          children: child.children && getDocOutline(child.children, embeds),
-        })
-      }
+      // } else if ( // disable card links for now
+      //   child.block.type === 'embed' &&
+      //   child.block.attributes?.view === 'card' &&
+      //   embeds[child.block.id]
+      // ) {
+      //   const embed = embeds[child.block.id]
+      //   if (embed?.type === 'd') {
+      //     outline.push({
+      //       id: child.block.id,
+      //       title: embed?.data?.document?.title || 'Untitled Document',
+      //       linkRoute: {
+      //         key: 'publication',
+      //         documentId: embed?.query?.refId?.qid,
+      //         versionId: embed?.query?.refId?.version || undefined,
+      //         variants: embed?.query?.refId?.variants || undefined,
+      //       },
+      //       children: child.children && getDocOutline(child.children, embeds),
+      //     })
+      //   } else if (embed?.type === 'a') {
+      //     outline.push({
+      //       id: child.block.id,
+      //       title: embed?.data?.profile?.alias || 'Untitled Account',
+      //       linkRoute: {
+      //         key: 'account',
+      //         accountId: embed?.query?.refId?.eid,
+      //       },
+      //       children: child.children && getDocOutline(child.children, embeds),
+      //     })
+      //   } else if (embed?.type === 'g') {
+      //     outline.push({
+      //       id: child.block.id,
+      //       title: embed?.data?.title || 'Untitled Group',
+      //       linkRoute: {
+      //         key: 'group',
+      //         groupId: embed?.query?.refId?.qid,
+      //         version: embed?.query?.refId?.version || undefined,
+      //       },
+      //       children: child.children && getDocOutline(child.children, embeds),
+      //     })
+      //   }
     } else if (child.block.type === 'embed' && embeds[child.block.id]) {
       const embed = embeds[child.block.id]
       if (embed?.type === 'd') {
@@ -629,7 +634,9 @@ export function SidebarDocument({
   const route = useNavRoute()
   const doc = usePublication({id: docId, version: docVersion || undefined})
   const isRouteActive = route.key == 'publication' && route.documentId == docId
-  const embeds = usePublicationEmbeds(doc.data, isRouteActive)
+  const embeds = usePublicationEmbeds(doc.data, isRouteActive, {
+    skipCards: true,
+  })
   const authorAccountsQuery = useAccounts(authors || [])
   const authorAccounts = authorAccountsQuery
     .map((query) => query.data)

diff --git a/frontend/packages/app/components/sidebar-group.tsx b/frontend/packages/app/components/sidebar-group.tsx
@@ -69,7 +69,9 @@ export function GroupSidebar({
     id: frontDocId?.qid,
     version: frontDocId?.version || undefined,
   })
-  const frontDocEmbeds = usePublicationEmbeds(frontDoc.data, !!frontDoc.data)
+  const frontDocEmbeds = usePublicationEmbeds(frontDoc.data, !!frontDoc.data, {
+    skipCards: true,
+  })
   const activeBlock = groupRoute?.blockId
   const frontDocOutline = getDocOutline(
     frontDoc?.data?.document?.children || [],

diff --git a/frontend/packages/app/components/sidebar-main.tsx b/frontend/packages/app/components/sidebar-main.tsx
@@ -5,14 +5,18 @@ import {
   stringArrayMatch,
 } from '@mintter/shared'
 import {Home, Separator, toast, Tooltip, View, YGroup} from '@mintter/ui'
-import {Contact, FileText, Library} from '@tamagui/lucide-icons'
+import {Contact, FileText, Library, Sparkles} from '@tamagui/lucide-icons'
 import {useMyAccount} from '../models/accounts'
+import {usePublication, usePublicationEmbeds} from '../models/documents'
 import {usePins} from '../models/pins'
 import {useHmIdToAppRouteResolver, useNavRoute} from '../utils/navigation'
 import {useNavigate} from '../utils/useNavigate'
 import {CreateGroupButton} from './new-group'
 import {
+  activeDocOutline,
   GenericSidebarContainer,
+  getDocOutline,
+  getRouteAccountId,
   getRouteGroupId,
   MyAccountItem,
   NewDocumentButton,
@@ -31,6 +35,7 @@ export function MainAppSidebar({
 }) {
   const route = useNavRoute()
   const navigate = useNavigate()
+  const replace = useNavigate('replace')
   const account = useMyAccount()
 
   const pins = usePins()
@@ -73,13 +78,58 @@ export function MainAppSidebar({
   )
     ? null
     : activeDocId
-  const accountRoute = route.key === 'account' ? route : null
-  const activeAccountId = accountRoute?.accountId
+  const myAccount = useMyAccount()
+  const activeAccountId = getRouteAccountId(route, myAccount.data)
   const unpinnedActiveAccountId = pins.data?.accounts.find(
     (pinned) => pinned === activeAccountId,
   )
+    ? null
+    : myAccount.data?.id === activeAccountId
     ? null
     : activeAccountId
+  const accountRoute = route.key === 'account' ? route : null
+  const activeBlock = accountRoute?.blockId
+  const myProfileDoc = usePublication(
+    {
+      id: myAccount.data?.profile?.rootDocument,
+    },
+    {
+      keepPreviousData: false,
+    },
+  )
+  const myProfileDocEmbeds = usePublicationEmbeds(
+    myProfileDoc.data,
+    !!myProfileDoc.data,
+    {skipCards: true},
+  )
+  const frontDocOutline = getDocOutline(
+    myProfileDoc?.data?.document?.children || [],
+    myProfileDocEmbeds,
+  )
+  const {outlineContent, isBlockActive} = activeDocOutline(
+    frontDocOutline,
+    activeBlock,
+    myProfileDocEmbeds,
+    (blockId) => {
+      const myAccountId = myAccount.data?.id
+      if (!myAccountId) return
+      const accountRoute =
+        route.key == 'account' && myAccountId === route.accountId ? route : null
+      if (!accountRoute) {
+        navigate({
+          key: 'account',
+          accountId: myAccountId,
+          blockId,
+        })
+      } else {
+        replace({
+          ...accountRoute,
+          blockId,
+        })
+      }
+    },
+    navigate,
+  )
   return (
     <GenericSidebarContainer>
       <YGroup
@@ -90,9 +140,18 @@ export function MainAppSidebar({
       >
         {account.data && (
           <YGroup.Item>
-            <MyAccountItem account={account.data} onRoute={navigate} />
+            <MyAccountItem
+              active={
+                route.key == 'account' &&
+                route.accountId == myAccount.data?.id &&
+                !isBlockActive
+              }
+              account={account.data}
+              onRoute={navigate}
+            />
           </YGroup.Item>
         )}
+        <YGroup borderRadius={0}>{outlineContent}</YGroup>
         <YGroup.Item>
           <SidebarItem
             active={route.key == 'feed'}
@@ -109,7 +168,7 @@ export function MainAppSidebar({
             active={route.key == 'documents'}
             data-testid="menu-item-global"
             onPress={() => {
-              navigate({key: 'documents', tab: 'trusted'})
+              navigate({key: 'documents', tab: 'mine'})
             }}
             title="Documents"
             bold
@@ -248,19 +307,18 @@ export function MainAppSidebar({
             ]
           })
           .flat()}
-
-        {/* <YGroup.Item>
-              <SidebarItem
-                active={route.key == 'drafts'}
-                data-testid="menu-item-drafts"
-                onPress={() => {
-                  navigate({key: 'documents', tab: 'drafts' })
-                }}
-                icon={Draft}
-                title="Drafts"
-                bold
-              />
-            </YGroup.Item> */}
+        <YGroup.Item>
+          <SidebarItem
+            active={route.key == 'explore'}
+            onPress={() => {
+              navigate({key: 'explore', tab: 'docs'})
+            }}
+            title="Explore Content"
+            bold
+            icon={Sparkles}
+            rightHover={[]}
+          />
+        </YGroup.Item>
         <YGroup.Item>
           <SidebarItem
             active={route.key == 'contacts'}
@@ -272,13 +330,14 @@ export function MainAppSidebar({
             bold
           />
         </YGroup.Item>
-        {unpinnedActiveAccountId && accountRoute ? (
+        {unpinnedActiveAccountId ? (
           <PinnedAccount
             onPress={() => {
               onSelectAccountId?.(unpinnedActiveAccountId)
             }}
             accountId={unpinnedActiveAccountId}
             isPinned={false}
+            active={true}
           />
         ) : null}
         {pins.data?.accounts.map((accountId) => {
@@ -291,6 +350,7 @@ export function MainAppSidebar({
                   navigate({key: 'account', accountId})
                 }
               }}
+              active={accountId === activeAccountId}
               isPinned={true}
               accountId={accountId}
               key={accountId}

diff --git a/frontend/packages/app/components/titlebar-title.tsx b/frontend/packages/app/components/titlebar-title.tsx
@@ -15,6 +15,7 @@ import {
   TitleText,
   XStack,
 } from '@mintter/ui'
+import {Sparkles} from '@tamagui/lucide-icons'
 import {useEffect} from 'react'
 import {useAccount} from '../models/accounts'
 import {useGroup} from '../models/groups'
@@ -102,6 +103,17 @@ export function TitleContent({size = '$4'}: {size?: FontSizeTokens}) {
       </>
     )
   }
+  if (route.key === 'explore') {
+    return (
+      <>
+        <Sparkles size={12} />
+        <TitleText size={size}>
+          Explore: {route.tab === 'docs' ? 'Documents' : 'Groups'}
+        </TitleText>
+      </>
+    )
+  }
+
   if (route.key === 'group' || route.key === 'group-feed') {
     return (
       <>