feat: add logic that lets users favorite a template

codegen.json

@@ -49,9 +49,9 @@
           "ActionMeeting": "../../database/types/MeetingAction#default",
           "ActionMeetingMember": "../../database/types/ActionMeetingMember#default as ActionMeetingMemberDB",
           "AddApprovedOrganizationDomainsSuccess": "./types/AddApprovedOrganizationDomainsSuccess#AddApprovedOrganizationDomainsSuccessSource",
+          "AddPokerTemplateSuccess": "./types/AddPokerTemplateSuccess#AddPokerTemplateSuccessSource",
           "AddReactjiToReactableSuccess": "./types/AddReactjiToReactableSuccess#AddReactjiToReactableSuccessSource",
           "AddReflectTemplateSuccess": "./types/AddReflectTemplateSuccess#AddReflectTemplateSuccessSource",
-          "AddPokerTemplateSuccess": "./types/AddPokerTemplateSuccess#AddPokerTemplateSuccessSource",
           "AddTranscriptionBotSuccess": "./types/AddTranscriptionBotSuccess#AddTranscriptionBotSuccessSource",
           "AddedNotification": "./types/AddedNotification#AddedNotificationSource",
           "AgendaItem": "../../database/types/AgendaItem#default as AgendaItemDB",
@@ -132,6 +132,7 @@
           "TeamPromptResponse": "../../postgres/queries/getTeamPromptResponsesByIds#TeamPromptResponse",
           "TemplateDimension": "../../database/types/TemplateDimension#default",
           "TimelineEventTeamPromptComplete": "./types/TimelineEventTeamPromptComplete#TimelineEventTeamPromptCompleteSource",
+          "ToggleFavoriteTemplateSuccess": "./types/ToggleFavoriteTemplateSuccess#ToggleFavoriteTemplateSuccessSource",
           "ToggleSummaryEmailSuccess": "./types/ToggleSummaryEmailSuccess#ToggleSummaryEmailSuccessSource",
           "TopRetroTemplate": "./types/TopRetroTemplate#TopRetroTemplateSource",
           "UpdateAutoJoinSuccess": "./types/UpdateAutoJoinSuccess#UpdateAutoJoinSuccessSource",
@@ -140,9 +141,9 @@
           "UpdateFeatureFlagPayload": "./types/UpdateFeatureFlagPayload#UpdateFeatureFlagPayloadSource",
           "UpdateGitLabDimensionFieldSuccess": "./types/UpdateGitLabDimensionFieldSuccess#UpdateGitLabDimensionFieldSuccessSource",
           "UpdateMeetingPromptSuccess": "./types/UpdateMeetingPromptSuccess#UpdateMeetingPromptSuccessSource",
+          "UpdateMeetingTemplateSuccess": "./types/UpdateMeetingTemplateSuccess#UpdateMeetingTemplateSuccessSource",
           "UpdateOrgPayload": "./types/UpdateOrgPayload#UpdateOrgPayloadSource",
           "UpdateRecurrenceSettingsSuccess": "./types/UpdateRecurrenceSettingsSuccess#UpdateRecurrenceSettingsSuccessSource",
-          "UpdateMeetingTemplateSuccess": "./types/UpdateMeetingTemplateSuccess#UpdateMeetingTemplateSuccessSource",
           "UpdateTaskPayload": "./types/UpdateTaskPayload#UpdateTaskPayloadSource",
           "UpdateTemplateCategorySuccess": "./types/UpdateTemplateCategorySuccess#UpdateTemplateCategorySuccessSource",
           "UpdateUserProfilePayload": "./types/UpdateUserProfilePayload#UpdateUserProfilePayloadSource",

packages/client/components/ActivityLibrary/ActivityCardFavorite.tsx

@@ -0,0 +1,68 @@
+import {Favorite} from '@mui/icons-material'
+import graphql from 'babel-plugin-relay/macro'
+import clsx from 'clsx'
+import React from 'react'
+import {useFragment} from 'react-relay'
+import {ActivityCardFavorite_user$key} from '../../__generated__/ActivityCardFavorite_user.graphql'
+import useAtmosphere from '../../hooks/useAtmosphere'
+import useMutationProps from '../../hooks/useMutationProps'
+import ToggleFavoriteTemplateMutation from '../../mutations/ToggleFavoriteTemplateMutation'
+import {Tooltip} from '../../ui/Tooltip/Tooltip'
+import {TooltipContent} from '../../ui/Tooltip/TooltipContent'
+import {TooltipTrigger} from '../../ui/Tooltip/TooltipTrigger'
+
+type Props = {
+  className?: string
+  templateId: string
+  viewerRef: ActivityCardFavorite_user$key
+}
+
+const ActivityCardFavorite = (props: Props) => {
+  const {className, templateId, viewerRef} = props
+  const atmosphere = useAtmosphere()
+  const {onError, onCompleted} = useMutationProps()
+
+  const viewer = useFragment(
+    graphql`
+      fragment ActivityCardFavorite_user on User {
+        favoriteTemplates {
+          id
+        }
+      }
+    `,
+    viewerRef
+  )
+  const favoriteTemplateIds = viewer.favoriteTemplates.map((template) => template.id)
+  const isFavorite = favoriteTemplateIds.includes(templateId)
+  const tooltipCopy = isFavorite ? 'Remove from favorites' : 'Add to favorites'
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    ToggleFavoriteTemplateMutation(atmosphere, {templateId}, {onError, onCompleted})
+  }
+
+  return (
+    <Tooltip>
+      <div
+        className={clsx(
+          className,
+          `z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white`
+        )}
+      >
+        <TooltipTrigger asChild>
+          <button
+            onClick={handleClick}
+            className='flex h-full w-full cursor-pointer items-center justify-center bg-transparent'
+          >
+            <Favorite className={isFavorite ? 'text-rose-600' : 'text-slate-600'} />
+          </button>
+        </TooltipTrigger>
+      </div>
+      <TooltipContent side='bottom' align='center' sideOffset={20}>
+        {tooltipCopy}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export default ActivityCardFavorite

packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx

@@ -23,6 +23,7 @@ import {setActiveTemplate} from '../../../utils/relay/setActiveTemplate'
 import useTemplateDescription from '../../../utils/useTemplateDescription'
 import DetailAction from '../../DetailAction'
 import FlatButton from '../../FlatButton'
+import ActivityCardFavorite from '../ActivityCardFavorite'
 import {QUICK_START_CATEGORY_ID} from '../Categories'
 import TeamPickerModal from '../TeamPickerModal'
 import ActivityDetailsBadges from './ActivityDetailsBadges'
@@ -132,6 +133,7 @@ export const TemplateDetails = (props: Props) => {
   const viewer = useFragment(
     graphql`
       fragment TemplateDetails_user on User {
+        ...ActivityCardFavorite_user
         preferredTeamId
         teams {
           ...TeamPickerModal_teams
@@ -258,15 +260,22 @@ export const TemplateDetails = (props: Props) => {
           {!isOwner && __typename !== 'FixedActivity' && (
             <div className='flex items-center justify-between'>
               <div className='py-2 text-sm font-semibold text-slate-600'>{description}</div>
-              <div className='rounded-full border border-solid border-slate-400 text-slate-600'>
-                <FlatButton
-                  style={{padding: '8px 12px', border: '0'}}
-                  className='flex gap-1 px-12'
-                  onClick={toggleTeamPickerPortal}
-                >
-                  <ContentCopy className='text-slate-600' />
-                  <div className='font-semibold text-slate-700'>Clone & Edit</div>
-                </FlatButton>
+              <div className='flex items-center gap-2'>
+                <ActivityCardFavorite
+                  templateId={activityId}
+                  viewerRef={viewer}
+                  className='rounded-full border border-solid border-slate-400 hover:bg-slate-200'
+                />
+                <div className='rounded-full border border-solid border-slate-400'>
+                  <FlatButton
+                    style={{padding: '8px 12px', border: '0'}}
+                    className='flex cursor-pointer gap-1 px-12'
+                    onClick={toggleTeamPickerPortal}
+                  >
+                    <ContentCopy className='text-slate-600' />
+                    <div className='font-semibold text-slate-700'>Clone & Edit</div>
+                  </FlatButton>
+                </div>
               </div>
             </div>
           )}

packages/client/components/ActivityLibrary/ActivityGrid.tsx

@@ -1,16 +1,30 @@
+import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
+import {useFragment} from 'react-relay'
 import {Link} from 'react-router-dom'
+import {ActivityGrid_user$key} from '../../__generated__/ActivityGrid_user.graphql'
 import {ActivityCard, ActivityCardImage} from './ActivityCard'
+import ActivityCardFavorite from './ActivityCardFavorite'
 import {Template} from './ActivityLibrary'
 import {ActivityLibraryCardDescription} from './ActivityLibraryCardDescription'
 import {CATEGORY_THEMES, CategoryID} from './Categories'
 
 interface ActivityGridProps {
   templates: Template[]
   selectedCategory: string
+  viewerRef?: ActivityGrid_user$key
 }
 
-const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
+const ActivityGrid = (props: ActivityGridProps) => {
+  const {templates, selectedCategory, viewerRef} = props
+  const viewer = useFragment(
+    graphql`
+      fragment ActivityGrid_user on User {
+        ...ActivityCardFavorite_user
+      }
+    `,
+    viewerRef ?? null
+  )
   return (
     <>
       {templates.map((template) => {
@@ -36,6 +50,13 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
                 src={template.illustrationUrl}
                 category={template.category as CategoryID}
               />
+              {viewer && (
+                <ActivityCardFavorite
+                  templateId={template.id}
+                  className='absolute bottom-3 right-3'
+                  viewerRef={viewer}
+                />
+              )}
               <ActivityLibraryCardDescription
                 className='hidden group-hover/card:flex'
                 templateRef={template}

packages/client/components/ActivityLibrary/ActivityLibrary.tsx

@@ -78,6 +78,10 @@ graphql`
 const query = graphql`
   query ActivityLibraryQuery {
     viewer {
+      ...ActivityGrid_user
+      favoriteTemplates {
+        ...ActivityLibrary_template @relay(mask: false)
+      }
       availableTemplates(first: 2000) @connection(key: "ActivityLibrary_availableTemplates") {
         edges {
           node {
@@ -240,6 +244,9 @@ export const ActivityLibrary = (props: Props) => {
       // If there's a search query, just use the search filter results
       return filteredTemplates
     }
+    if (categoryId === 'favorite') {
+      return viewer.favoriteTemplates
+    }
 
     return filteredTemplates.filter((template) =>
       categoryId === QUICK_START_CATEGORY_ID
@@ -326,7 +333,7 @@ export const ActivityLibrary = (props: Props) => {
       <ScrollArea.Root className='w-full'>
         <ScrollArea.Viewport className='w-full'>
           <div className='flex gap-2 px-4 pt-6 md:flex-wrap md:pb-4 lg:mx-[15%]'>
-            {(availableCategoryIds as Array<CategoryID | typeof QUICK_START_CATEGORY_ID>).map(
+            {(availableCategoryIds as Array<AllCategoryID | typeof QUICK_START_CATEGORY_ID>).map(
               (category) => (
                 <Link
                   className={clsx(
@@ -341,6 +348,14 @@ export const ActivityLibrary = (props: Props) => {
                   to={`/activity-library/category/${category}`}
                   onClick={() => resetQuery()}
                   key={category}
+                  style={{
+                    color:
+                      category === 'favorite'
+                        ? category === categoryId && searchQuery.length === 0
+                          ? 'white'
+                          : 'red'
+                        : undefined
+                  }}
                 >
                   {CATEGORY_ID_TO_NAME[category]}
                 </Link>
@@ -380,6 +395,7 @@ export const ActivityLibrary = (props: Props) => {
                             <ActivityGrid
                               templates={subCategoryTemplates}
                               selectedCategory={categoryId}
+                              viewerRef={viewer}
                             />
                           </div>
                         </Fragment>
@@ -392,6 +408,7 @@ export const ActivityLibrary = (props: Props) => {
                     <ActivityGrid
                       templates={templatesToRender as Template[]}
                       selectedCategory={categoryId}
+                      viewerRef={viewer}
                     />
                   </div>
                 </>

packages/client/components/ActivityLibrary/ActivityLibraryEmptyState.tsx

@@ -1,4 +1,6 @@
+import FavoriteIcon from '@mui/icons-material/Favorite'
 import React from 'react'
+import favoriteImg from '../../../../static/images/illustrations/favorite-empty-state.png'
 import halloweenRetrospectiveTemplate from '../../../../static/images/illustrations/halloweenRetrospectiveTemplate.png'
 import {AllCategoryID, QUICK_START_CATEGORY_ID} from './Categories'
 import CreateActivityCard from './CreateActivityCard'
@@ -12,6 +14,32 @@ const ActivityLibraryEmptyState = (props: Props) => {
   const {categoryId, searchQuery} = props
   const showResultsNotFound = categoryId !== 'custom' || searchQuery !== ''
 
+  if (categoryId === 'favorite') {
+    return (
+      <div className='relative mx-auto flex p-2 text-slate-700'>
+        <div className='md:p-18 p-4 xl:p-24'>
+          <img className='w-82' src={favoriteImg} alt='Favorite placeholder' />
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform'>
+            <div className='flex flex-col items-center'>
+              <FavoriteIcon
+                className='icon-color-red icon-border-gold rounded-full p-3 text-5xl md:text-6xl lg:p-5 lg:text-8xl'
+                style={{
+                  color: 'red',
+                  border: '2px solid gold',
+                  borderRadius: '50%'
+                }}
+              />
+
+              <span className='mt-2 text-center md:text-lg'>
+                Activities you mark as favorite will show up here
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className='mx-auto flex p-2 text-slate-700'>
       <div className='ml-10'>

packages/client/components/ActivityLibrary/Categories.ts → packages/client/components/ActivityLibrary/Categories.tsx

@@ -1,3 +1,5 @@
+import FavoriteIcon from '@mui/icons-material/Favorite'
+import React from 'react'
 import {MeetingTypeEnum} from '../../__generated__/MeetingSelectorQuery.graphql'
 import {CardTheme} from './ActivityCard'
 
@@ -13,10 +15,12 @@ export const MAIN_CATEGORIES = [
 
 export const QUICK_START_CATEGORY_ID = 'recommended'
 export const CUSTOM_CATEGORY_ID = 'custom'
+export const FAVORITE_CATEGORY_ID = 'favorite'
 
 export const ALL_CATEGORIES = [
   QUICK_START_CATEGORY_ID,
   ...MAIN_CATEGORIES,
+  FAVORITE_CATEGORY_ID,
   CUSTOM_CATEGORY_ID
 ] as const
 
@@ -46,11 +50,25 @@ export const CATEGORY_THEMES: Record<AllCategoryID, CardTheme> = {
     primary: 'bg-fuscia-400',
     secondary: 'bg-slate-200',
     text: 'text-slate-500'
+  },
+  [FAVORITE_CATEGORY_ID]: {
+    primary: 'bg-grape-700',
+    secondary: 'bg-slate-200',
+    text: 'text-slate-500'
   }
 }
 
-export const CATEGORY_ID_TO_NAME: Record<AllCategoryID, string> = {
+export const CATEGORY_ID_TO_NAME: Record<AllCategoryID, string | JSX.Element> = {
   [QUICK_START_CATEGORY_ID]: 'Quick Start',
+  [FAVORITE_CATEGORY_ID]: (
+    <FavoriteIcon
+      style={{
+        color: 'inherit',
+        display: 'flex',
+        fontSize: '20px'
+      }}
+    />
+  ),
   [CUSTOM_CATEGORY_ID]: 'Custom',
   retrospective: 'Retrospective',
   estimation: 'Estimation',

packages/client/mutations/ToggleFavoriteTemplateMutation.ts

@@ -0,0 +1,41 @@
+import graphql from 'babel-plugin-relay/macro'
+import {commitMutation} from 'react-relay'
+import {ToggleFavoriteTemplateMutation as TToggleFavoriteTemplateMutation} from '../__generated__/ToggleFavoriteTemplateMutation.graphql'
+import {StandardMutation} from '../types/relayMutations'
+
+graphql`
+  fragment ToggleFavoriteTemplateMutation_viewer on ToggleFavoriteTemplateSuccess {
+    user {
+      id
+      ...ActivityCardFavorite_user
+    }
+  }
+`
+
+const mutation = graphql`
+  mutation ToggleFavoriteTemplateMutation($templateId: ID!) {
+    toggleFavoriteTemplate(templateId: $templateId) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
+      ...ToggleFavoriteTemplateMutation_viewer @relay(mask: false)
+    }
+  }
+`
+
+const ToggleFavoriteTemplateMutation: StandardMutation<TToggleFavoriteTemplateMutation> = (
+  atmosphere,
+  variables,
+  {onError, onCompleted}
+) => {
+  return commitMutation<TToggleFavoriteTemplateMutation>(atmosphere, {
+    mutation,
+    variables,
+    onCompleted,
+    onError
+  })
+}
+
+export default ToggleFavoriteTemplateMutation