From a884d25c9341c66da58462925e8c62e2e0605d07 Mon Sep 17 00:00:00 2001
From: Eric Vicenti <eric@vicenti.net>
Date: Mon, 31 Jul 2023 12:04:42 -0700
Subject: [PATCH] Contacts List Trusting

---
 frontend/apps/electron/src/preload.ts         |   5 +-
 .../packages/app/src/components/footer.tsx    |   6 +-
 .../app/src/components/titlebar/common.tsx    |  14 +-
 .../app/src/components/titlebar/linux.tsx     |   4 +-
 .../app/src/components/titlebar/title.tsx     |   9 +-
 .../app/src/components/titlebar/windows.tsx   |   4 +-
 frontend/packages/app/src/models/accounts.ts  |   2 +
 .../app/src/pages/connections-page.tsx        |  83 ---------
 .../packages/app/src/pages/contacts-page.tsx  | 163 ++++++++++++++++++
 frontend/packages/app/src/pages/main.tsx      |   6 +-
 .../packages/app/src/utils/navigation.tsx     |   4 +-
 11 files changed, 190 insertions(+), 110 deletions(-)
 delete mode 100644 frontend/packages/app/src/pages/connections-page.tsx
 create mode 100644 frontend/packages/app/src/pages/contacts-page.tsx

diff --git a/frontend/apps/electron/src/preload.ts b/frontend/apps/electron/src/preload.ts
index b6e83ce39b..4e853eeed3 100644
--- a/frontend/apps/electron/src/preload.ts
+++ b/frontend/apps/electron/src/preload.ts
@@ -7,21 +7,18 @@ process.once('loaded', async () => {
 
 ipcRenderer.addListener('initWindow', (info, event) => {
   // const {route, windowId} = event
-  console.log('INIT WINDOW', event)
+  // console.log('INIT WINDOW', event)
   contextBridge.exposeInMainWorld('windowInfo', event)
 })
 
 contextBridge.exposeInMainWorld('ipc', {
   send: (cmd, args) => {
-    console.log('IPC SENDING', cmd, args)
     ipcRenderer.send(cmd, args)
   },
   listen: async (cmd: string, handler: (event: any) => void) => {
     const innerHandler = (value: any) => {
-      console.log('IPC event received', cmd, value)
       handler(value)
     }
-    console.log('listening!', cmd)
     ipcRenderer.addListener(cmd, innerHandler)
     return () => {
       ipcRenderer.removeListener(cmd, innerHandler)
diff --git a/frontend/packages/app/src/components/footer.tsx b/frontend/packages/app/src/components/footer.tsx
index 339e136128..10ed46dba5 100644
--- a/frontend/packages/app/src/components/footer.tsx
+++ b/frontend/packages/app/src/components/footer.tsx
@@ -50,10 +50,10 @@ function FooterContactsButton() {
     <XStack alignItems="center" theme="mint" gap="$2">
       <Button
         size="$1"
-        chromeless={route.key != 'connections'}
-        color={route.key == 'connections' ? '$blue10' : undefined}
+        chromeless={route.key != 'contacts'}
+        color={route.key == 'contacts' ? '$blue10' : undefined}
         onPress={() => {
-          navigate({key: 'connections'})
+          navigate({key: 'contacts'})
         }}
         paddingHorizontal="$2"
       >
diff --git a/frontend/packages/app/src/components/titlebar/common.tsx b/frontend/packages/app/src/components/titlebar/common.tsx
index ddf63dbe9a..92c42ce55b 100644
--- a/frontend/packages/app/src/components/titlebar/common.tsx
+++ b/frontend/packages/app/src/components/titlebar/common.tsx
@@ -39,7 +39,7 @@ import {
 import toast from 'react-hot-toast'
 import {TitleBarProps} from '.'
 import {PublicationDropdown, PublishShareButton} from './publish-share'
-import {FilePlus2, Pencil} from '@tamagui/lucide-icons'
+import {FilePlus2, Folder, Pencil} from '@tamagui/lucide-icons'
 import {Tooltip} from '@mintter/app/src/components/tooltip'
 import {memo} from 'react'
 import {usePopoverState} from '@mintter/app/src/use-popover-state'
@@ -59,7 +59,7 @@ export function ActionButtons(props: TitleBarProps) {
 
       {route.key == 'draft' ? null : (
         <div className="button-group">
-          {route.key == 'connections' ? (
+          {route.key == 'contacts' ? (
             <ContactsPrompt />
           ) : (
             <Tooltip content="New Document">
@@ -195,8 +195,8 @@ function NavMenuContentUnpure({
             onPress={() => {
               onRoute({key: 'home'})
             }}
-            title="Trusted Publications"
-            icon={File}
+            title="Publications"
+            icon={Folder}
             iconAfter={
               <SizableText size="$1" color="$mint5">
                 &#8984; 1
@@ -238,12 +238,12 @@ function NavMenuContentUnpure({
         </YGroup.Item>
         <YGroup.Item>
           <MenuItem
-            disabled={route.key == 'connections'}
+            disabled={route.key == 'contacts'}
             onPress={() => {
-              onRoute({key: 'connections'})
+              onRoute({key: 'contacts'})
             }}
             icon={User}
-            title="Connections"
+            title="Contacts"
             iconAfter={
               <SizableText size="$1" color="$mint5">
                 &#8984; 9
diff --git a/frontend/packages/app/src/components/titlebar/linux.tsx b/frontend/packages/app/src/components/titlebar/linux.tsx
index 5db471fa4f..a0a66e7d99 100644
--- a/frontend/packages/app/src/components/titlebar/linux.tsx
+++ b/frontend/packages/app/src/components/titlebar/linux.tsx
@@ -146,8 +146,8 @@ function NavMenu() {
             }
           />
           <Dropdown.Item
-            disabled={route.key == 'connections'}
-            onPress={() => navigate({key: 'connections'})}
+            disabled={route.key == 'contacts'}
+            onPress={() => navigate({key: 'contacts'})}
             icon={User}
             title="Connections"
             iconAfter={
diff --git a/frontend/packages/app/src/components/titlebar/title.tsx b/frontend/packages/app/src/components/titlebar/title.tsx
index 8fa1d93941..b9c27e5cf8 100644
--- a/frontend/packages/app/src/components/titlebar/title.tsx
+++ b/frontend/packages/app/src/components/titlebar/title.tsx
@@ -15,15 +15,16 @@ import {
   User,
   XStack,
 } from '@mintter/ui'
+import {Folder} from '@tamagui/lucide-icons'
 
 export function TitleContent({size = '$4'}: {size?: FontSizeTokens}) {
   const route = useNavRoute()
   if (route.key === 'home') {
     return (
       <>
-        <File size={12} />
+        <Folder size={12} />
         <TitleText data-tauri-drag-region size={size}>
-          Trusted Publications
+          Publications
         </TitleText>
       </>
     )
@@ -38,12 +39,12 @@ export function TitleContent({size = '$4'}: {size?: FontSizeTokens}) {
       </>
     )
   }
-  if (route.key === 'connections') {
+  if (route.key === 'contacts') {
     return (
       <>
         <User size={12} />
         <TitleText data-tauri-drag-region size={size}>
-          Connections
+          Contacts
         </TitleText>
       </>
     )
diff --git a/frontend/packages/app/src/components/titlebar/windows.tsx b/frontend/packages/app/src/components/titlebar/windows.tsx
index 0fed39815f..267d03c6e2 100644
--- a/frontend/packages/app/src/components/titlebar/windows.tsx
+++ b/frontend/packages/app/src/components/titlebar/windows.tsx
@@ -414,8 +414,8 @@ function SystemMenu() {
             icon: Search,
           },
           {
-            id: 'connections',
-            title: 'Connections',
+            id: 'contacts',
+            title: 'Contacts',
             accelerator: 'Ctrl+9',
             onSelect: () => {},
             icon: Reload,
diff --git a/frontend/packages/app/src/models/accounts.ts b/frontend/packages/app/src/models/accounts.ts
index 89b62497c5..dfce09fb98 100644
--- a/frontend/packages/app/src/models/accounts.ts
+++ b/frontend/packages/app/src/models/accounts.ts
@@ -56,6 +56,8 @@ export function useSetTrusted(
     },
     onSuccess: (result, input, ctx) => {
       invalidate([queryKeys.GET_ACCOUNT, input.accountId])
+      invalidate([queryKeys.GET_ALL_ACCOUNTS])
+      invalidate([queryKeys.GET_PUBLICATION_LIST])
       opts?.onSuccess?.(result, input, ctx)
     },
     ...opts,
diff --git a/frontend/packages/app/src/pages/connections-page.tsx b/frontend/packages/app/src/pages/connections-page.tsx
deleted file mode 100644
index 8a5eddb049..0000000000
--- a/frontend/packages/app/src/pages/connections-page.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  useAccountIsConnected,
-  useAllAccounts,
-} from '@mintter/app/src/models/accounts'
-import {useNavigate} from '@mintter/app/src/utils/navigation'
-import {Avatar} from '@mintter/app/src/components/avatar'
-import Footer from '@mintter/app/src/components/footer'
-import {OnlineIndicator} from '@mintter/app/src/components/indicator'
-import {Account} from '@mintter/shared'
-import {
-  Button,
-  Container,
-  MainWrapper,
-  Spinner,
-  Text,
-  XStack,
-  YStack,
-} from '@mintter/ui'
-
-function ContactItem({account}: {account: Account}) {
-  const navigate = useNavigate()
-  const isConnected = useAccountIsConnected(account)
-  const alias = account.profile?.alias
-  return (
-    <Button
-      chromeless
-      theme="gray"
-      tag="li"
-      gap="$4"
-      onPress={() => {
-        navigate({key: 'account', accountId: account.id})
-      }}
-    >
-      <XStack alignItems="center" gap="$4" flex={1}>
-        <Avatar
-          size="$2"
-          accountId={account.id}
-          alias={account.profile?.alias || ''}
-        />
-        {alias ? (
-          <Text fontWeight="700" fontFamily="$body">
-            {alias}
-          </Text>
-        ) : (
-          <Text fontFamily="$body" fontWeight="bold" color="muted">
-            {account.id.slice(0, 5)}...{account.id.slice(-5)}
-          </Text>
-        )}
-      </XStack>
-      <OnlineIndicator online={isConnected} />
-    </Button>
-  )
-}
-
-export default function ConnectionsPage() {
-  const contacts = useAllAccounts()
-  const accounts = contacts.data?.accounts || []
-  let content = contacts.isLoading ? (
-    <Spinner />
-  ) : accounts.length > 0 ? (
-    accounts.map((account) => {
-      return <ContactItem key={account.id} account={account} />
-    })
-  ) : (
-    <YStack gap="$5" paddingVertical="$8">
-      <Text fontFamily="$body" fontSize="$3">
-        You have no Connections yet.
-      </Text>
-    </YStack>
-  )
-  return (
-    <>
-      <MainWrapper>
-        <Container>
-          <YStack tag="ul" padding={0} gap="$2">
-            {content}
-          </YStack>
-        </Container>
-      </MainWrapper>
-      <Footer />
-    </>
-  )
-}
diff --git a/frontend/packages/app/src/pages/contacts-page.tsx b/frontend/packages/app/src/pages/contacts-page.tsx
new file mode 100644
index 0000000000..87df5303e2
--- /dev/null
+++ b/frontend/packages/app/src/pages/contacts-page.tsx
@@ -0,0 +1,163 @@
+import {
+  useAccountIsConnected,
+  useAllAccounts,
+} from '@mintter/app/src/models/accounts'
+import {useNavigate} from '@mintter/app/src/utils/navigation'
+import {Avatar} from '@mintter/app/src/components/avatar'
+import Footer from '@mintter/app/src/components/footer'
+import {OnlineIndicator} from '@mintter/app/src/components/indicator'
+import {Account} from '@mintter/shared'
+import {
+  Button,
+  Container,
+  Heading,
+  MainWrapper,
+  Spinner,
+  Text,
+  XStack,
+  YStack,
+  styled,
+} from '@mintter/ui'
+import {useSetTrusted} from '../models/accounts'
+import {PlusCircle} from '@tamagui/lucide-icons'
+
+const PageHeading = styled(Heading, {
+  color: '$gray10',
+  fontSize: '$7',
+  fontWeight: 'normal',
+})
+
+function ContactItem({
+  account,
+  isTrusted,
+}: {
+  account: Account
+  isTrusted: boolean
+}) {
+  const navigate = useNavigate()
+  const isConnected = useAccountIsConnected(account)
+  const alias = account.profile?.alias
+  const setTrusted = useSetTrusted()
+  return (
+    <Button
+      chromeless
+      theme="gray"
+      tag="li"
+      gap="$4"
+      onPress={() => {
+        navigate({key: 'account', accountId: account.id})
+      }}
+    >
+      <XStack alignItems="center" gap="$4" flex={1}>
+        <Avatar
+          size="$2"
+          accountId={account.id}
+          alias={account.profile?.alias || ''}
+        />
+        {alias ? (
+          <Text fontWeight="700" fontFamily="$body">
+            {alias}
+          </Text>
+        ) : (
+          <Text fontFamily="$body" fontWeight="bold" color="muted">
+            {account.id.slice(0, 5)}...{account.id.slice(-5)}
+          </Text>
+        )}
+      </XStack>
+      {!isTrusted && (
+        <Button
+          onPress={(e) => {
+            e.stopPropagation()
+            setTrusted.mutate({accountId: account.id, isTrusted: true})
+          }}
+          icon={PlusCircle}
+        >
+          Trust
+        </Button>
+      )}
+      <OnlineIndicator online={isConnected} />
+    </Button>
+  )
+}
+
+function ErrorPage({}: {error: any}) {
+  // todo, this!
+  return (
+    <MainWrapper>
+      <Container>
+        <Text fontFamily="$body" fontSize="$3">
+          Error
+        </Text>
+      </Container>
+    </MainWrapper>
+  )
+}
+
+export default function ContactsPage() {
+  const contacts = useAllAccounts()
+  const allAccounts = contacts.data?.accounts || []
+  const trustedAccounts = allAccounts.filter((account) => account.isTrusted)
+  const untrustedAccounts = allAccounts.filter((account) => !account.isTrusted)
+  if (contacts.isLoading) {
+    return (
+      <MainWrapper>
+        <Container>
+          <Spinner />
+        </Container>
+      </MainWrapper>
+    )
+  }
+  if (contacts.error) {
+    return <ErrorPage error={contacts.error} />
+  }
+  if (allAccounts.length === 0) {
+    return (
+      <MainWrapper>
+        <Container>
+          <YStack gap="$5" paddingVertical="$8">
+            <Text fontFamily="$body" fontSize="$3">
+              You have no Contacts yet.
+            </Text>
+          </YStack>
+        </Container>
+      </MainWrapper>
+    )
+  }
+  return (
+    <>
+      <MainWrapper>
+        <Container marginVertical="$4">
+          {trustedAccounts.length ? (
+            <>
+              <PageHeading>Trusted Contacts</PageHeading>
+              <YStack tag="ul" padding={0} gap="$2">
+                {trustedAccounts.map((account) => {
+                  return (
+                    <ContactItem
+                      key={account.id}
+                      account={account}
+                      isTrusted={true}
+                    />
+                  )
+                })}
+              </YStack>
+              <PageHeading marginTop="$4">Other Contacts</PageHeading>
+            </>
+          ) : null}
+          <YStack tag="ul" padding={0} gap="$2">
+            {untrustedAccounts.map((account) => {
+              return (
+                <ContactItem
+                  key={account.id}
+                  account={account}
+                  isTrusted={false}
+                />
+              )
+            })}
+          </YStack>
+        </Container>
+      </MainWrapper>
+      <Footer />
+    </>
+  )
+}
diff --git a/frontend/packages/app/src/pages/main.tsx b/frontend/packages/app/src/pages/main.tsx
index 14eadfe5ba..2a9faf1e48 100644
--- a/frontend/packages/app/src/pages/main.tsx
+++ b/frontend/packages/app/src/pages/main.tsx
@@ -23,7 +23,7 @@ const GlobalPublicationList = lazy(
 )
 var DraftList = lazy(() => import('@mintter/app/src/pages/draft-list-page'))
 var Account = lazy(() => import('@mintter/app/src/pages/account-page'))
-var Connections = lazy(() => import('@mintter/app/src/pages/connections-page'))
+var Contacts = lazy(() => import('@mintter/app/src/pages/contacts-page'))
 var Site = lazy(() => import('@mintter/app/src/pages/site-page'))
 var Publication = lazy(() => import('@mintter/app/src/pages/publication'))
 var Draft = lazy(() => import('@mintter/app/src/pages/draft'))
@@ -40,8 +40,8 @@ function getPageComponent(navRoute: NavRoute) {
       return DraftList
     case 'site':
       return Site
-    case 'connections':
-      return Connections
+    case 'contacts':
+      return Contacts
     case 'account':
       return Account
     case 'publication':
diff --git a/frontend/packages/app/src/utils/navigation.tsx b/frontend/packages/app/src/utils/navigation.tsx
index 4d5f789563..3c8c175b1a 100644
--- a/frontend/packages/app/src/utils/navigation.tsx
+++ b/frontend/packages/app/src/utils/navigation.tsx
@@ -13,7 +13,7 @@ global.Buffer = global.Buffer || Buffer
 
 export type HomeRoute = {key: 'home'}
 export type GlobalPublications = {key: 'global-publications'}
-export type ConnectionsRoute = {key: 'connections'}
+export type ContactsRoute = {key: 'contacts'}
 export type AccountRoute = {key: 'account'; accountId: string}
 export type SitesRoute = {key: 'sites'}
 export type SiteRoute = {key: 'site'; hostname: string}
@@ -43,7 +43,7 @@ export type SettingsRoute = {key: 'settings'}
 
 export type NavRoute =
   | HomeRoute
-  | ConnectionsRoute
+  | ContactsRoute
   | AccountRoute
   | SettingsRoute
   | SitesRoute