feat: add favorite activities UI to activity library (#9680)

ParabolInc · May 20, 2024 · d6a775d · d6a775d
1 parent 63e1ebd
commit d6a775d
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 11 deletions.
diff --git a/packages/client/components/ActivityLibrary/ActivityCardFavorite.tsx b/packages/client/components/ActivityLibrary/ActivityCardFavorite.tsx
@@ -0,0 +1,46 @@
+import {Favorite} from '@mui/icons-material'
+import clsx from 'clsx'
+import React, {useState} from 'react'
+import {Tooltip} from '../../ui/Tooltip/Tooltip'
+import {TooltipContent} from '../../ui/Tooltip/TooltipContent'
+import {TooltipTrigger} from '../../ui/Tooltip/TooltipTrigger'
+
+type Props = {
+  className?: string
+}
+
+const ActivityCardFavorite = (props: Props) => {
+  const {className} = props
+  const [isSelected, setIsSelected] = useState(false)
+  const tooltipCopy = isSelected ? 'Remove from favorites' : 'Add to favorites'
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    setIsSelected((prev) => !prev)
+  }
+
+  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={isSelected ? 'text-rose-600' : 'text-slate-600'} />
+          </button>
+        </TooltipTrigger>
+      </div>
+      <TooltipContent side='bottom' align='center' sideOffset={20}>
+        {tooltipCopy}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export default ActivityCardFavorite
diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx b/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'
@@ -258,15 +259,18 @@ 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 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>
           )}

diff --git a/packages/client/components/ActivityLibrary/ActivityGrid.tsx b/packages/client/components/ActivityLibrary/ActivityGrid.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {Link} from 'react-router-dom'
 import {ActivityBadge} from './ActivityBadge'
 import {ActivityCard, ActivityCardImage} from './ActivityCard'
+import ActivityCardFavorite from './ActivityCardFavorite'
 import {Template} from './ActivityLibrary'
 import {ActivityLibraryCardDescription} from './ActivityLibraryCardDescription'
 import {CATEGORY_THEMES, CategoryID} from './Categories'
@@ -42,6 +43,7 @@ const ActivityGrid = ({templates, selectedCategory}: ActivityGridProps) => {
                 src={template.illustrationUrl}
                 category={template.category as CategoryID}
               />
+              <ActivityCardFavorite className='absolute bottom-3 right-3' />
               <ActivityLibraryCardDescription
                 className='hidden group-hover/card:flex'
                 templateRef={template}

diff --git a/packages/client/components/ActivityLibrary/ActivityLibrary.tsx b/packages/client/components/ActivityLibrary/ActivityLibrary.tsx
@@ -326,7 +326,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 +341,14 @@ export const ActivityLibrary = (props: Props) => {
                   to={`/activity-library/category/${category}`}
                   onClick={() => resetQuery()}
                   key={category}
+                  style={{
+                    color:
+                      category === 'favorite'
+                        ? category === categoryId
+                          ? 'white'
+                          : 'red'
+                        : undefined
+                  }}
                 >
                   {CATEGORY_ID_TO_NAME[category]}
                 </Link>

diff --git a/packages/client/components/ActivityLibrary/ActivityLibraryEmptyState.tsx b/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'>

diff --git a/.../components/ActivityLibrary/Categories.ts → ...components/ActivityLibrary/Categories.tsx b/.../components/ActivityLibrary/Categories.ts → ...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,26 @@ 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',
+        alignItems: 'center',
+        fontSize: '18px'
+      }}
+    />
+  ),
   [CUSTOM_CATEGORY_ID]: 'Custom',
   retrospective: 'Retrospective',
   estimation: 'Estimation',

diff --git a/static/images/illustrations/favorite-empty-state.png b/static/images/illustrations/favorite-empty-state.png