Mobile context menu

apps/backend/api/graphql/makeModels.js

@@ -463,6 +463,7 @@ export default function makeModels (userId, isAdmin, apiClient) {
         'banner_url',
         'created_at',
         'description',
+        'homeWidget',
         'location',
         'geo_shape',
         'memberCount',
@@ -615,6 +616,7 @@ export default function makeModels (userId, isAdmin, apiClient) {
       ],
       getters: {
         // commonRoles: async g => g.commonRoles(),
+        homeWidget: g => g.homeWidget(),
         invitePath: g =>
           GroupMembership.hasResponsibility(userId, g, Responsibility.constants.RESP_ADD_MEMBERS)
             .then(canInvite => canInvite ? Frontend.Route.invitePath(g) : null),

apps/backend/api/graphql/schema.graphql

@@ -676,6 +676,8 @@ type Group {
   description: String
   # A geoJSON object outlining a geographic shape describing the border/boundaries of the group in the world
   geoShape: JSON
+  # home widget
+  homeWidget: ContextWidget
   # The current invite link for this group
   invitePath: String
   # A string describing the physical location of this group in the world

apps/backend/api/models/Group.js

@@ -98,7 +98,7 @@ module.exports = bookshelf.Model.extend(merge({
   },
 
   contextWidgets () {
-    return this.hasMany(ContextWidget) // TODO CONTEXT: sometimes we want all widgets, sometimes only want the ordered ones. need to handle this
+    return this.hasMany(ContextWidget)
   },
 
   creator: function () {
@@ -143,6 +143,24 @@ module.exports = bookshelf.Model.extend(merge({
     })
   },
 
+  homeWidget () {
+    return ContextWidget.query(q => {
+      q.with('home_widget', qb => {
+        qb.from('context_widgets')
+          .where({
+            group_id: this.id,
+            type: 'home'
+          })
+          .select('id')
+      })
+      .from('context_widgets')
+      .whereRaw('parent_id = (select id from home_widget)')
+      .andWhere('group_id', this.id)
+      .orderBy('order', 'asc')
+      .limit(1)
+    }).fetch()
+  },
+
   isHidden() {
     return this.get('visibility') === Group.Visibility.HIDDEN
   },

apps/mobile/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
   plugins: [
     [
       'module-resolver',
@@ -23,7 +23,8 @@ module.exports = {
       }
     ],
     'import-graphql',
-    'react-native-reanimated/plugin'
+    'react-native-reanimated/plugin',
+    ['@babel/plugin-syntax-decorators', { 'version': '2023-11' }]
   ],
   env: {
     test: {

apps/mobile/index.js

@@ -19,6 +19,7 @@ import VersionCheck from 'components/VersionCheck'
 import RootNavigator from 'navigation/RootNavigator'
 import './i18n'
 import 'intl-pluralrules'
+import './src/style/global.css'
 import { ActionSheetProvider } from '@expo/react-native-action-sheet'
 import { baseStyle, tagsStyles, classesStyles } from 'components/HyloHTML/HyloHTML.styles'
 

apps/mobile/locales/en.json

@@ -132,6 +132,7 @@
   "Lets get started!": "Let's get started!",
   "Link to group agreements": "Link to group agreements",
   "Link to platform agreements": "Link to platform agreements",
+  "Loading...": "Loading...",
   "Location": "Location",
   "Log In": "Log In",
   "Log in now": "Log in now",
@@ -312,6 +313,47 @@
   "Who can see this group": "",
   "Who can see this group?": "Who can see this group?",
   "Why was this": "Why was this",
+  "widget-about": "About",
+  "widget-all": "All",
+  "widget-ask-and-offer": "Ask And Offer",
+  "widget-auto-view": "What's happening",
+  "widget-chats": "Chats",
+  "widget-custom-views": "Custom Views",
+  "widget-decisions": "Decisions",
+  "widget-discussions": "Discussions",
+  "widget-events": "Events",
+  "widget-groups": "Groups",
+  "widget-hearth": "Hearth",
+  "widget-home": "Home",
+  "widget-map": "Map",
+  "widget-members": "Members",
+  "widget-my-account": "Account",
+  "widget-my-all": "All My Group's Posts",
+  "widget-my-announcements": "Announcements",
+  "widget-my-content": "My Content",
+  "widget-my-edit-profile": "Edit Profile",
+  "widget-my-groups": "My Groups",
+  "widget-my-groups-content": "My Group's Content",
+  "widget-my-groups-events": "My Group's Events",
+  "widget-my-groups-map": "My Group's Map",
+  "widget-my-groups-stream": "My Group's Stream",
+  "widget-my-interactions": "My Interactions",
+  "widget-my-invites": "My Invites",
+  "widget-my-locale": "Language/Locale",
+  "widget-my-logout": "Logout",
+  "widget-my-mentions": "Mentions",
+  "widget-my-notifications": "Notifications",
+  "widget-my-posts": "My Posts",
+  "widget-my-profile": "My Profile",
+  "widget-my-saved-searches": "Saved Searches",
+  "widget-myself": "My Account",
+  "widget-projects": "Projects",
+  "widget-public-events": "Public Events",
+  "widget-public-groups": "Group Explorer",
+  "widget-public-map": "Public Map",
+  "widget-public-stream": "Public Stream",
+  "widget-setup": "Setup",
+  "widget-stream": "Stream",
   "Write a comment": "Write a comment...",
   "Write something": "Write something...",
   "Yes": "Yes",

apps/mobile/locales/es.json

@@ -132,6 +132,7 @@
   "Lets get started!": "¡Empecemos!",
   "Link to group agreements": "Enlace a acuerdos de grupo",
   "Link to platform agreements": "Enlace a acuerdos de plataforma",
+  "Loading...": "Cargando...",
   "Location": "Ubicación",
   "Log In": "Acceso",
   "Log in now": "Inicia sesión ahora",
@@ -365,6 +366,47 @@
   "status-active": "Estado: Activo",
   "status-cleared": "Estado: Borrado por el moderador",
   "we just need to know your name and password and youre account will be created": "sólo necesitamos saber su nombre y contraseña y se creará su cuenta",
+  "widget-about": "Acerca De",
+  "widget-all": "Todos",
+  "widget-ask-and-offer": "Pedir Y Ofrecer",
+  "widget-auto-view": "Qué Está Pasando",
+  "widget-chats": "Chats",
+  "widget-custom-views": "Vistas Personalizadas",
+  "widget-decisions": "Decisiones",
+  "widget-discussions": "Discusiones",
+  "widget-events": "Eventos",
+  "widget-groups": "Grupos",
+  "widget-hearth": "Hogar",
+  "widget-home": "Inicio",
+  "widget-map": "Mapa",
+  "widget-members": "Miembros",
+  "widget-my-account": "Cuenta",
+  "widget-my-all": "Todas Las Publicaciones",
+  "widget-my-announcements": "Anuncios",
+  "widget-my-content": "Mi Contenido",
+  "widget-my-edit-profile": "Editar Perfil",
+  "widget-my-groups": "Mis Grupos",
+  "widget-my-groups-content": "Contenido de Mis Grupos",
+  "widget-my-groups-events": "Eventos de Mis Grupos",
+  "widget-my-groups-map": "Mapa de Mis Grupos",
+  "widget-my-groups-stream": "Flujo de Mis Grupos",
+  "widget-my-interactions": "Mis Interacciones",
+  "widget-my-invites": "Mis Invitaciones",
+  "widget-my-locale": "Idioma/Región",
+  "widget-my-logout": "Cerrar Sesión",
+  "widget-my-mentions": "Menciones",
+  "widget-my-notifications": "Notificaciones",
+  "widget-my-posts": "Mis Publicaciones",
+  "widget-my-profile": "Perfil",
+  "widget-my-saved-searches": "Búsquedas Guardadas",
+  "widget-myself": "Mi Cuenta",
+  "widget-projects": "Proyectos",
+  "widget-public-events": "Eventos Públicos",
+  "widget-public-groups": "Explorador de Grupos",
+  "widget-public-map": "Mapa Público",
+  "widget-public-stream": "Flujo Público",
+  "widget-setup": "Configuración",
+  "widget-stream": "Flujo",
   "welcome page backup text": "Tómese un momento para explorar y ver qué hay vivo en nuestro grupo.\n \n Preséntate haciendo clic en Crear y publicando una discusión para compartir quién eres y qué te trae aquí.\n \n  No olvide completar nuestro perfil para que personas con ideas afines puedan conectarse con usted.",
   "{{childGroupsLength}} Group(s) are a part of {{currentGroupName}}": "Los grupos {{childGroupsLength}} son parte de {{currentGroupName}}",
   "{{currentGroupName}} is a part of {{parentGroupsLength}} Group(s)": "{{currentGroupName}} es parte de {{parentGroupsLength}} grupo(s)"

apps/mobile/metro.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { withNativeWind } = require("nativewind/metro");
 
 /**
  * Metro configuration
@@ -31,4 +32,4 @@ const config = {
   ]
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withNativeWind(mergeConfig(getDefaultConfig(__dirname), config), { input: path.resolve(__dirname, './src/style/global.css') });

apps/mobile/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

apps/mobile/package.json

@@ -20,6 +20,7 @@
     "pod-install": "cd ios && pod install"
   },
   "dependencies": {
+    "@babel/plugin-syntax-decorators": "^7.25.9",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@expo/react-native-action-sheet": "^4.1.0",
@@ -44,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",
@@ -53,9 +55,11 @@
     "i18next": "^23.12.2",
     "intl-pluralrules": "^2.0.1",
     "lodash": "^4.17.21",
+    "lucide-react-native": "0.471.0",
     "luxon": "^3.5.0",
     "mixpanel-react-native": "^3.0.8",
     "moment-timezone": "^0.5.46",
+    "nativewind": "^4.1.23",
     "path-to-regexp": "^6.2.2",
     "prettier": "2.8.8",
     "prop-types": "^15.8.1",
@@ -88,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",
@@ -105,6 +110,7 @@
     "reselect": "^4.1.6",
     "sails.io.js": "^1.2.1",
     "socket.io-client": "2.3.1",
+    "tailwindcss": "^3.4.17",
     "tinycolor2": "^1.6.0",
     "urql": "^4.2.1"
   },
@@ -154,6 +160,7 @@
     "redux-logger": "^3.0.6",
     "reselect-tools": "^0.0.7",
     "standard": "^17.1.2",
+    "tailwind-merge": "^2.5.4",
     "timezone-mock": "^1.3.6",
     "typescript": "5.0.4",
     "validator": "^13.12.0"

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'