Mobile context menu

apps/mobile/ios/Podfile.lock

@@ -2553,4 +2553,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3e09ec78a46571d778d176698b8b2375a1cecbbe
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

apps/mobile/package.json

@@ -45,6 +45,7 @@
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-graphcache": "^7.2.1",
     "babel-plugin-import-graphql": "^2.8.1",
+    "clsx": "2.1.1",
     "cross-fetch": "^4.1.0",
     "emoji-datasource-apple": "^15.1.2",
     "emoji-mart": "^5.6.0",
@@ -91,6 +92,7 @@
     "react-native-reanimated": "3.16.7",
     "react-native-render-html": "patch:react-native-render-html@npm:6.3.4#.yarn/patches/react-native-render-html+6.3.4.patch",
     "react-native-restart": "^0.0.27",
+    "react-native-root-toast": "^3.6.0",
     "react-native-safe-area-context": "^5.1.0",
     "react-native-screens": "^4.5.0",
     "react-native-share": "^12.0.3",

apps/mobile/src/components/GroupMenuHeader/GroupMenuHeader.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import { Settings, Users, ChevronRight } from 'lucide-react-native'
+import { View, Text, TouchableOpacity } from 'react-native'
+import { useTranslation } from 'react-i18next'
+import { useNavigation } from '@react-navigation/native'
+import FastImage from 'react-native-fast-image'
+import Avatar from 'components/Avatar'
+import { RESP_ADMINISTRATION } from 'store/constants'
+// import { DEFAULT_BANNER, DEFAULT_AVATAR } from 'store/models/Group'
+import useHasResponsibility from 'hooks/useHasResponsibility'
+import { cn } from '../../util'
+
+export default function GroupMenuHeader ({ group }) {
+  const { t } = useTranslation()
+  const navigation = useNavigation()
+  const avatarUrl = group.avatarUrl
+  const bannerUrl = group.bannerUrl
+  const [textColor, setTextColor] = useState('background')
+  const hasResponsibility = useHasResponsibility({ forCurrentGroup: true, forCurrentUser: true })
+  const canAdmin = hasResponsibility(RESP_ADMINISTRATION)
+
+  useEffect(() => {
+    /* 
+      TODO: Web has a bunch of code that checks the color of the group background
+      image to select a good constrasting color for the text.
+
+      Its very dependent on the DOM, so need to consider a different option for mobile
+    */
+    setTextColor('primary-foreground')
+  }, [bannerUrl])
+
+  return (
+    <View className='relative flex flex-col justify-end h-[140px] shadow-md pb-2' testID='group-header'>
+      <FastImage
+        source={{ uri: bannerUrl }}
+        style={{
+          height: 146,
+          width: '100%',
+          position: 'absolute',
+          opacity: 0.8,
+        }}
+      />
+
+      {canAdmin && (
+        <View className='absolute top-2 right-2'>
+          <TouchableOpacity 
+            // TODO redesign: make this actually navigate correctly
+            onPress={() => navigation.navigate('Group Settings')}
+          > 
+          <View className='w-6 h-6 drop-shadow-md'>
+            <Settings color='white' size={24}/>
+          </View>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      <View className='relative flex flex-row items-center text-background ml-2 mr-2 gap-1'>
+        <FastImage
+          source={{ uri: avatarUrl }}
+          style={{
+            height: 36,
+            width: 36,
+            marginRight: 6,
+            borderRadius: 4
+          }}
+        />
+
+        <View className={cn(
+          'flex flex-col flex-1',
+          `text-${textColor} drop-shadow-md`
+        )}>
+          <Text className='text-xl font-bold m-0 text-white'>
+            {group.name}
+          </Text>
+
+          <TouchableOpacity 
+            onPress={() => navigation.navigate('Members', { groupSlug: group.slug })}
+            className='flex-row items-center'
+          >
+            <View className='w-4 h-4 mr-1 align-bottom' >
+              <Users color='white' size={16} />
+            </View>
+            <Text className='text-xs align-middle text-white underline'>
+              {t('{{count}} Members', { count: group.memberCount })}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <TouchableOpacity 
+          onPress={() => navigation.navigate('About', { groupSlug: group.slug })}
+          hitSlop={6}
+        >
+          <View className='cursor-pointer'>
+            <ChevronRight color='white' size={24} strokeWidth={3}/>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}

apps/mobile/src/components/GroupMenuHeader/index.js

@@ -0,0 +1,3 @@
+import component from './GroupMenuHeader'
+
+export default component

apps/mobile/src/components/PostCard/PostBodyProposal/PostBodyProposal.js

@@ -10,7 +10,7 @@ import {
   VOTING_METHOD_SINGLE
 } from 'urql-shared/presenters/PostPresenter'
 import { addProposalVote, removeProposalVote, swapProposalVote } from 'store/actions/proposals'
-import QuorumBar from 'components/QuorumBar/QuorumBar'
+import QuorumBar from 'components/QuorumBar'
 import Icon from 'components/Icon'
 import Avatar from 'components/Avatar'
 import { useTranslation } from 'react-i18next'

apps/mobile/src/components/PostListRow/PostListRow.js

@@ -10,6 +10,21 @@ import HyloHTML from 'components/HyloHTML'
 import Icon from 'components/Icon'
 import { personUrl } from 'util/navigation'
 
+const formatEventDate = (startTime) => {
+  if (!startTime) return null
+  try {
+    const dateTime = DateTime.fromJSDate(startTime)
+    if (!dateTime.isValid) return null
+    return {
+      month: dateTime.toFormat('MMM'),
+      day: dateTime.toFormat('D')
+    }
+  } catch (error) {
+    console.error('Error formatting event date:', error)
+    return null
+  }
+}
+
 const PostListRow = (props) => {
   const {
     childPost,
@@ -39,7 +54,7 @@ const PostListRow = (props) => {
   const creatorUrl = personUrl(creator.id, slug)
   const numOtherCommentors = commentersTotal - 1
   const unread = false
-  const start = DateTime.fromJSDate(post.startTime)
+  const eventDate = formatEventDate(post.startTime)
   const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroupId)
   const { t } = useTranslation()
 
@@ -59,11 +74,11 @@ const PostListRow = (props) => {
             <Icon name={typeName} />
           </View>
           <View style={styles.participants}>
-            {post.type === 'event'
+            {post.type === 'event' && eventDate
               ? (
                 <View style={styles.date}>
-                  <Text style={styles.dateText}>{start.toFormat('MMM')}</Text>
-                  <Text style={styles.dateText}>{start.toFormat('D')}</Text>
+                  <Text style={styles.dateText}>{eventDate.month}</Text>
+                  <Text style={styles.dateText}>{eventDate.day}</Text>
                 </View>
                 )
               : (

apps/mobile/src/components/StreamList/PostRow/PostRow.js

@@ -38,7 +38,7 @@ export default function PostRow ({
           showMember={showMember}
           showTopic={showTopic}
           groupId={forGroupId}
-          childPost={forGroupId !== 'all' && forGroupId !== 'public' && context !== 'my' && !groupIds.includes(forGroupId)}
+          childPost={forGroupId !== 'all' && forGroupId !== 'public' && forGroupId !== 'my' && !groupIds.includes(forGroupId)}
         />
       </TouchableOpacity>
     </View>

apps/mobile/src/components/WidgetIconResolver/WidgetIconResolver.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import FastImage from 'react-native-fast-image'
+import Icon from 'components/Icon'
+import { Grid3x3 } from 'lucide-react-native'
+import Avatar from 'components/Avatar'
+import { ViewHelpers, WidgetHelpers } from '@hylo/shared'
+const { widgetTypeResolver } = WidgetHelpers
+
+export function WidgetIconResolver({ widget, style, className }) {
+  const type = widgetTypeResolver({ widget })
+  if (widget.icon) {
+    return <Icon name={widget.icon} style={style} className={className} />
+  }
+
+  if (widget.viewUser) {
+    return (
+      <Avatar 
+        avatarUrl={widget.viewUser.avatarUrl} 
+        name={widget.viewUser.name}
+        style={style}
+        className={className}
+      />
+    )
+  }
+
+  if (widget.viewGroup) {
+    return (
+      <Avatar 
+        avatarUrl={widget.viewGroup.avatarUrl} 
+        name={widget.viewGroup.name}
+        style={style}
+        className={className}
+      />
+    )
+  }
+
+  if (widget.customView?.icon) {
+    return <Icon name={widget.customView.icon} style={style} className={className} />
+  }
+
+  if (widget.context === 'my') {
+    return null
+  }
+
+  if (ViewHelpers.COMMON_VIEWS[type]) {
+    return <Icon name={ViewHelpers.COMMON_VIEWS[type].icon} style={style} className={className} />
+  }
+
+  // TODO redesign: - make a iconName method in WidgetHelpers / WidgetPresenter
+  // the name icon name is shared by web mobile?
+  // TOM COMMENT: waiting for full shake-out of Lucide transition before cleaning this up
+  switch (type) {
+    case 'chats':
+      return <Icon name='Message' style={style} className={className} />
+    case 'setup':
+      return <Icon name='Settings' style={style} className={className} />
+    case 'custom-views':
+      return <Icon name='Stack' style={style} className={className} />
+    case 'viewChat':
+      return <Icon name='Message' style={style} className={className} />
+    case 'chat':
+      return <Icon name='Message' style={style} className={className} />
+    case 'viewPost':
+      return <Icon name='Posticon' style={style} className={className} />
+    case 'about':
+      return <Icon name='Info' style={style} className={className} />
+    case 'all-views':
+      return <Grid3x3 className='h-[16px]'/>
+  }
+  return null
+}
+
+export default WidgetIconResolver

apps/mobile/src/components/WidgetIconResolver/index.js

@@ -0,0 +1,3 @@
+import component from './WidgetIconResolver'
+
+export default component

apps/mobile/src/graphql/fragments/groupFieldsFragment.js

@@ -8,6 +8,33 @@ export default gql`
     avatarUrl
     bannerUrl
     description
+    homeWidget {
+      id
+      type
+      view
+      highlightNumber
+      secondaryNumber
+      customView {
+        id
+        groupId
+        collectionId
+        externalLink
+        isActive
+        icon
+        name
+        order
+        postTypes
+        topics {
+          id
+          name
+        }
+        type
+      }
+      viewChat {
+        id
+        name
+      }
+    }
     geoShape
     location
     memberCount

apps/mobile/src/graphql/fragments/groupWidgetsFieldsFragment.js

@@ -1,14 +1,65 @@
 import { gql } from 'urql'
 
 export default gql`
-  fragment GroupWidgetsFieldsFragment on Group {
-    widgets {
+  fragment GroupContextWidgetsFieldsFragment on Group {
+    contextWidgets {
       items {
         id
-        name
-        context
+        title
+        type
         order
-        isVisible
+        visibility
+        view
+        icon
+        highlightNumber
+        secondaryNumber
+        parentId
+        viewGroup {
+          id
+          avatarUrl
+          bannerUrl
+          name
+          memberCount
+          visibility
+          accessibility
+          slug
+        }
+        viewPost {
+          id
+          announcement
+          title
+          details
+          type
+          createdAt
+          startTime
+          endTime
+          isPublic
+        }
+        customView {
+          id
+          groupId
+          collectionId
+          externalLink
+          isActive
+          icon
+          name
+          order
+          postTypes
+          topics {
+            id
+            name
+          }
+          type
+        }
+        viewUser {
+          id
+          name
+          avatarUrl
+        }
+        viewChat {
+          id
+          name
+        }
       }
     }
   }