Feed page and query

frontend/packages/app/components/sidebar.tsx

@@ -9,6 +9,7 @@ import {
 } from '@mintter/shared'
 import {
   Button,
+  Home,
   ListItem,
   ListItemProps,
   Separator,
@@ -158,6 +159,17 @@ function FullAppSidebar() {
               <MyAccountItem account={account.data} onRoute={navigate} />
             </YGroup.Item>
           )}
+          <YGroup.Item>
+            <SidebarItem
+              active={route.key == 'feed'}
+              onPress={() => {
+                navigate({key: 'feed', tab: 'trusted'})
+              }}
+              title="Home Feed"
+              bold
+              icon={Home}
+            />
+          </YGroup.Item>
           <YGroup.Item>
             <SidebarItem
               active={route.key == 'documents'}

frontend/packages/app/components/titlebar-title.tsx

@@ -2,14 +2,18 @@ import {useDraftTitle} from '@mintter/app/models/documents'
 import {usePublicationVariant} from '@mintter/app/models/publication'
 import {useNavRoute} from '@mintter/app/utils/navigation'
 import {
+  Book,
+  Contact,
   ErrorIcon,
+  FileText,
   FontSizeTokens,
+  Home,
+  Library,
   SizableText,
   Spinner,
   TitleText,
   XStack,
 } from '@mintter/ui'
-import {Book, Contact, FileText, Library} from '@tamagui/lucide-icons'
 import {useEffect} from 'react'
 import {useAccount} from '../models/accounts'
 import {useGroup} from '../models/groups'
@@ -40,6 +44,24 @@ export function TitleContent({size = '$4'}: {size?: FontSizeTokens}) {
     })
   }, [route])
 
+  if (route.key === 'feed') {
+    let subtitle: string | null = null
+    if (route.tab === 'all') {
+      subtitle = '- All Content'
+    } else {
+      subtitle = '- Trusted Content'
+    }
+    return (
+      <>
+        <Home size={12} />
+        <TitleText size={size} fontWeight="bold" data-testid="titlebar-title">
+          Home Feed
+        </TitleText>
+        <SizableText>{subtitle}</SizableText>
+      </>
+    )
+  }
+
   if (route.key === 'documents') {
     let subtitle: string | null = null
     if (route.tab === 'drafts') {

frontend/packages/app/models/feed.ts

@@ -0,0 +1,16 @@
+import {useQuery} from '@tanstack/react-query'
+import {useGRPCClient} from '../app-context'
+import {queryKeys} from './query-keys'
+
+export function useFeed() {
+  const grpcClient = useGRPCClient()
+  return useQuery({
+    queryKey: [queryKeys.FEED],
+    queryFn: async () => {
+      return await grpcClient.activityFeed.listEvents({
+        pageSize: 100,
+        pageToken: '',
+      })
+    },
+  })
+}

frontend/packages/app/models/query-keys.ts

@@ -8,6 +8,9 @@ export const queryKeys = {
 
   // NOTE: Arguments to query keys documented in comments
 
+  // feed
+  FEED: 'FEED',
+
   // daemon
   GET_DAEMON_INFO: 'GET_DAEMON_INFO',
 

frontend/packages/app/pages/feed.tsx

@@ -0,0 +1,56 @@
+import {
+  Globe,
+  PageContainer,
+  RadioButtons,
+  SizableText,
+  XStack,
+  YStack,
+} from '@mintter/ui'
+import {Verified} from '@tamagui/lucide-icons'
+import Footer from '../components/footer'
+import {MainWrapperNoScroll} from '../components/main-wrapper'
+import {useFeed} from '../models/feed'
+import {useNavRoute} from '../utils/navigation'
+import {useNavigate} from '../utils/useNavigate'
+
+const feedTabsOptions = [
+  {key: 'trusted', label: 'Trusted Content', icon: Verified},
+  {key: 'all', label: 'All Content', icon: Globe},
+] as const
+
+function Feed({tab}: {tab: 'trusted' | 'all'}) {
+  const feed = useFeed()
+  console.log(feed.data)
+  return (
+    <YStack f={1}>
+      <SizableText>{tab}</SizableText>
+    </YStack>
+  )
+}
+
+export default function FeedPage() {
+  const route = useNavRoute()
+  if (route.key !== 'feed') throw new Error('invalid route')
+  const replace = useNavigate('replace')
+  return (
+    <>
+      <MainWrapperNoScroll>
+        <YStack f={1}>
+          <PageContainer>
+            <XStack>
+              <RadioButtons
+                value={route.tab}
+                options={feedTabsOptions}
+                onValue={(tab) => {
+                  replace({...route, tab})
+                }}
+              />
+            </XStack>
+          </PageContainer>
+          <Feed tab={route.tab} />
+        </YStack>
+      </MainWrapperNoScroll>
+      <Footer />
+    </>
+  )
+}

frontend/packages/app/pages/main.tsx

@@ -17,6 +17,7 @@ import {NotFoundPage} from './base'
 import {DocumentPlaceholder} from './document-placeholder'
 import './polyfills'
 
+var Feed = lazy(() => import('@mintter/app/pages/feed'))
 var Documents = lazy(() => import('@mintter/app/pages/documents'))
 var Account = lazy(() => import('@mintter/app/pages/account-page'))
 var Contacts = lazy(() => import('@mintter/app/pages/contacts-page'))
@@ -38,6 +39,11 @@ function BaseLoading() {
 
 function getPageComponent(navRoute: NavRoute) {
   switch (navRoute.key) {
+    case 'feed':
+      return {
+        PageComponent: Feed,
+        Fallback: BaseLoading,
+      }
     case 'documents':
       return {
         PageComponent: Documents,

frontend/packages/app/pages/publication-list-page.tsx

@@ -9,9 +9,8 @@ import {
   DialogTitle,
   List,
   PageContainer,
-  Separator,
+  RadioButtons,
   Spinner,
-  XGroup,
   XStack,
 } from '@mintter/ui'
 
@@ -30,7 +29,7 @@ import {
   BadgeCheck as Verified,
 } from '@tamagui/lucide-icons'
 import copyTextToClipboard from 'copy-text-to-clipboard'
-import {ComponentProps, memo} from 'react'
+import {memo} from 'react'
 import {useAppContext} from '../app-context'
 import {DeleteDocumentDialog} from '../components/delete-dialog'
 import {useDeleteDraftDialog} from '../components/delete-draft-dialog'
@@ -71,31 +70,6 @@ export function PublicationListPageUnmemo() {
   )
 }
 
-function ToggleGroupItem({
-  label,
-  icon,
-  active,
-  onPress,
-}: {
-  label: string
-  icon: ComponentProps<typeof Button>['icon'] | undefined
-  active: boolean
-  onPress: () => void
-}) {
-  return (
-    <XGroup.Item>
-      <Button
-        disabled={active}
-        icon={icon}
-        backgroundColor={active ? '$color7' : undefined}
-        onPress={onPress}
-      >
-        {label}
-      </Button>
-    </XGroup.Item>
-  )
-}
-
 export function PublishedFirstDocDialog({
   input,
   onClose,
@@ -151,59 +125,26 @@ export function PublishedFirstDocDialog({
     </>
   )
 }
+const documentTabsOptions = [
+  {key: 'trusted', label: 'Trusted Creators', icon: Verified},
+  {key: 'all', label: 'All Creators', icon: Globe},
+  {key: 'drafts', label: 'My Drafts', icon: Pencil},
+] as const
 
 function DocumentTabs() {
   const route = useNavRoute()
   if (route.key !== 'documents') throw new Error('invalid route')
-  const trustedOnly = route.tab === 'trusted' || route.tab == null
-  const draftsOnly = route.tab === 'drafts'
-  const allDocs = !trustedOnly && !draftsOnly
   const replace = useNavigate('replace')
-
   return (
     <PageContainer>
       <XStack>
-        <XGroup separator={<Separator backgroundColor={'red'} />}>
-          <ToggleGroupItem
-            label="Trusted Creators"
-            icon={Verified}
-            active={trustedOnly}
-            onPress={() => {
-              if (!trustedOnly) {
-                replace({
-                  ...route,
-                  tab: null,
-                })
-              }
-            }}
-          />
-          <ToggleGroupItem
-            label="All Creators"
-            icon={Globe}
-            active={allDocs}
-            onPress={() => {
-              if (!allDocs) {
-                replace({
-                  ...route,
-                  tab: 'all',
-                })
-              }
-            }}
-          />
-          <ToggleGroupItem
-            label="My Drafts"
-            icon={Pencil}
-            active={draftsOnly}
-            onPress={() => {
-              if (!draftsOnly) {
-                replace({
-                  ...route,
-                  tab: 'drafts',
-                })
-              }
-            }}
-          />
-        </XGroup>
+        <RadioButtons
+          value={route.tab}
+          options={documentTabsOptions}
+          onValue={(tab) => {
+            replace({...route, tab})
+          }}
+        />
       </XStack>
     </PageContainer>
   )

frontend/packages/app/utils/routes.tsx

@@ -1,7 +1,13 @@
 import {groupVariantSchema, publicationVariantSchema} from '@mintter/shared'
 import {z} from 'zod'
 
-export const defaultRoute: NavRoute = {key: 'documents', tab: 'trusted'}
+export const defaultRoute: NavRoute = {key: 'feed', tab: 'trusted'}
+
+export const feedRouteSchema = z.object({
+  key: z.literal('feed'),
+  tab: z.union([z.literal('all'), z.literal('trusted')]),
+})
+export type FeedRoute = z.infer<typeof feedRouteSchema>
 
 export const documentsRouteSchema = z.object({
   key: z.literal('documents'),
@@ -100,6 +106,7 @@ export const groupRouteSchema = z.object({
 export type GroupRoute = z.infer<typeof groupRouteSchema>
 
 export const navRouteSchema = z.discriminatedUnion('key', [
+  feedRouteSchema,
   contactsRouteSchema,
   accountRouteSchema,
   settingsRouteSchema,