Add membership indicators and link to see group

web/components/groups/group-selector.tsx

@@ -5,6 +5,7 @@ import {
   CheckIcon,
   PlusCircleIcon,
   SelectorIcon,
+  UserIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { CreateGroupButton } from 'web/components/groups/create-group-button'
@@ -12,6 +13,7 @@ import { useState } from 'react'
 import { useMemberGroups, useOpenGroups } from 'web/hooks/use-group'
 import { User } from 'common/user'
 import { searchInAny } from 'common/util/parse'
+import { Row } from 'web/components/layout/row'
 
 export function GroupSelector(props: {
   selectedGroup: Group | undefined
@@ -28,13 +30,26 @@ export function GroupSelector(props: {
   const { showSelector, showLabel, ignoreGroupIds } = options
   const [query, setQuery] = useState('')
   const openGroups = useOpenGroups()
+  const memberGroups = useMemberGroups(creator?.id)
+  const memberGroupIds = memberGroups?.map((g) => g.id) ?? []
   const availableGroups = openGroups
     .concat(
-      (useMemberGroups(creator?.id) ?? []).filter(
+      (memberGroups ?? []).filter(
         (g) => !openGroups.map((og) => og.id).includes(g.id)
       )
     )
     .filter((group) => !ignoreGroupIds?.includes(group.id))
+    .sort((a, b) => b.totalContracts - a.totalContracts)
+    // put the groups the user is a member of first
+    .sort((a, b) => {
+      if (memberGroupIds.includes(a.id)) {
+        return -1
+      }
+      if (memberGroupIds.includes(b.id)) {
+        return 1
+      }
+      return 0
+    })
 
   const filteredGroups = availableGroups.filter((group) =>
     searchInAny(query, group.name)
@@ -97,7 +112,7 @@ export function GroupSelector(props: {
                     value={group}
                     className={({ active }) =>
                       clsx(
-                        'relative h-12 cursor-pointer select-none py-2 pl-4 pr-6',
+                        'relative h-12 cursor-pointer select-none py-2 pr-6',
                         active ? 'bg-indigo-500 text-white' : 'text-gray-900'
                       )
                     }
@@ -120,7 +135,14 @@ export function GroupSelector(props: {
                             selected && 'font-semibold'
                           )}
                         >
-                          <span className={'truncate'}>{group.name}</span>
+                          <Row className={'items-center gap-1 truncate pl-5'}>
+                            {memberGroupIds.includes(group.id) && (
+                              <UserIcon
+                                className={'text-primary h-4 w-4 shrink-0'}
+                              />
+                            )}
+                            {group.name}
+                          </Row>
                           <span
                             className={clsx(
                               'ml-1 w-[1.4rem] shrink-0 rounded-full bg-indigo-500 text-center text-white',

web/pages/create.tsx

@@ -20,7 +20,7 @@ import {
 import { formatMoney } from 'common/util/format'
 import { removeUndefinedProps } from 'common/util/object'
 import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
-import { getGroup } from 'web/lib/firebase/groups'
+import { getGroup, groupPath } from 'web/lib/firebase/groups'
 import { Group } from 'common/group'
 import { useTracking } from 'web/hooks/use-tracking'
 import { useWarnUnsavedChanges } from 'web/hooks/use-warn-unsaved-changes'
@@ -34,6 +34,8 @@ import { Title } from 'web/components/title'
 import { SEO } from 'web/components/SEO'
 import { MultipleChoiceAnswers } from 'web/components/answers/multiple-choice-answers'
 import { MINUTE_MS } from 'common/util/time'
+import { ExternalLinkIcon } from '@heroicons/react/outline'
+import { SiteLink } from 'web/components/site-link'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
   return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@@ -406,13 +408,19 @@ export function NewContract(props: {
 
       <Spacer h={6} />
 
+      <Row className={'items-end gap-x-2'}>
         <GroupSelector
           selectedGroup={selectedGroup}
           setSelectedGroup={setSelectedGroup}
           creator={creator}
           options={{ showSelector: showGroupSelector, showLabel: true }}
         />
-
+        {showGroupSelector && selectedGroup && (
+          <SiteLink href={groupPath(selectedGroup.slug)}>
+            <ExternalLinkIcon className=" ml-1 mb-3 h-5 w-5 text-gray-500" />
+          </SiteLink>
+        )}
+      </Row>
       <Spacer h={6} />
 
       <div className="form-control mb-1 items-start">