Group Edit functionality hidden for non-members

frontend/packages/app/components/commit-draft-button.tsx

@@ -17,7 +17,7 @@ import {
   YStackProps,
 } from '@mintter/ui'
 import {Check, ChevronDown, Upload} from '@tamagui/lucide-icons'
-import {PropsWithChildren} from 'react'
+import {PropsWithChildren, useEffect} from 'react'
 import {useGRPCClient} from '../app-context'
 import {useMyAccount} from '../models/accounts'
 import {useDraftTitle, usePublishDraft} from '../models/documents'
@@ -89,6 +89,17 @@ export default function CommitDraftButton() {
   })
   const publishPopover = usePopoverState()
   const authorGroups = useAccountGroups(myAccount.data?.id)
+  useEffect(() => {
+    if (
+      authorGroups.data?.items &&
+      groupVariant &&
+      !authorGroups.data.items.find((authorGroup) => {
+        return authorGroup.group?.id === groupVariant.groupId
+      })
+    ) {
+      navReplace({...draftRoute, variant: null})
+    }
+  }, [authorGroups.data?.items, groupVariant, draftRoute])
   const docGroups = useDocumentGroups(draftId || undefined)
   const authorGroupsSet = new Set(
     authorGroups.data?.items.map((g) => g.group?.id).filter(Boolean),

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

@@ -39,7 +39,11 @@ import {ReactNode, useState} from 'react'
 import toast from 'react-hot-toast'
 import {useAppContext} from '../app-context'
 import {useEntityTimeline} from '../models/changes'
-import {useGroup, useInvertedGroupContent} from '../models/groups'
+import {
+  useCanEditGroup,
+  useGroup,
+  useInvertedGroupContent,
+} from '../models/groups'
 import {usePinAccount, usePinDocument, usePinGroup} from '../models/pins'
 import {SidebarWidth, useSidebarContext} from '../src/sidebar-context'
 import {GroupVariant} from '../utils/navigation'
@@ -422,6 +426,8 @@ function NewDocumentButton({
   label?: string
 }) {
   const openDraft = useOpenDraft('push')
+  const canEdit = useCanEditGroup(groupVariant?.groupId)
+  if (groupVariant && !canEdit) return null
   return (
     <Tooltip content={`New ${label || 'Document'}`}>
       <Button

frontend/packages/app/models/accounts.ts

@@ -14,7 +14,9 @@ import {useConnectedPeers} from './networking'
 
 export function useAccount(accountId?: string) {
   const grpcClient = useGRPCClient()
-  return useQuery<Account, ConnectError>(getAccountQuery(grpcClient, accountId))
+  return useQuery<Account | null, ConnectError>(
+    getAccountQuery(grpcClient, accountId),
+  )
 }
 
 export function useAccounts(accountIds: string[]) {

frontend/packages/app/models/groups.ts

@@ -297,6 +297,15 @@ function getGroupContentQuery(
   }
 }
 
+export function useCanEditGroup(groupId: string | undefined) {
+  const myAccount = useMyAccount()
+  const groups = useAccountGroups(myAccount.data?.id)
+  if (!groupId) return false
+  return !!groups.data?.items?.find(
+    (item) => !!item.group?.id && item.group.id === groupId,
+  )
+}
+
 export function useGroupContent(
   groupId?: string | undefined,
   version?: string,

frontend/packages/app/pages/group.tsx

@@ -364,17 +364,19 @@ export default function GroupPage() {
                         />
                       ) : null}
                       <XGroup>
-                        <EditDocButton
-                          contextRoute={route}
-                          variant={{
-                            key: 'group',
-                            groupId,
-                            pathName: '/',
-                          }}
-                          docId={frontPageId?.docId}
-                          baseVersion={frontPageId?.version || undefined}
-                          navMode="push"
-                        />
+                        {isMember && (
+                          <EditDocButton
+                            contextRoute={route}
+                            variant={{
+                              key: 'group',
+                              groupId,
+                              pathName: '/',
+                            }}
+                            docId={frontPageId?.docId}
+                            baseVersion={frontPageId?.version || undefined}
+                            navMode="push"
+                          />
+                        )}
                       </XGroup>
                       <Tooltip content="Open in New Window">
                         <Button