feat: Favorites (#1094)

* Adding the favorite button

* favorites services and resolvers

* favorites schema

* favorite ability handler

* favorite module export

* front end UI

* front end graphql additions

* server ability handlers

* server resolvers and services

* css fix

* Adding the favorite button

* favorites services and resolvers

* favorites schema

* favorite ability handler

* favorite module export

* front end UI

* front end graphql additions

* server ability handlers

* server resolvers and services

* css fix

* delete favorites handler and resolver

* removed favorite from index list

* chip avatar size props

* index list additions

* UI additions for favorites functionality

* lint fixes

* graphql codegen

* UI fixes

* favorite hook addition

* moved to ~/modules

* Favorite mapping to workspaceMember

* graphql codegen

* cosmetic changes

* camel cased methods

* graphql codegen

front/src/modules/ui/button/components/IconButton.tsx

@@ -7,15 +7,18 @@ export type IconButtonSize = 'large' | 'medium' | 'small';
 
 export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
 
+export type IconButtonAccent = 'regular' | 'red';
+
 export type ButtonProps = {
   icon?: React.ReactNode;
   variant?: IconButtonVariant;
   size?: IconButtonSize;
   textColor?: IconButtonFontColor;
+  accent?: IconButtonAccent;
 } & React.ComponentProps<'button'>;
 
 const StyledIconButton = styled.button<
-  Pick<ButtonProps, 'variant' | 'size' | 'textColor'>
+  Pick<ButtonProps, 'variant' | 'size' | 'textColor' | 'accent'>
 >`
   align-items: center;
   background: ${({ theme, variant }) => {
@@ -66,12 +69,14 @@ const StyledIconButton = styled.button<
         return 'none';
     }
   }};
-  color: ${({ theme, disabled, textColor }) => {
+  color: ${({ theme, disabled, textColor, accent }) => {
     if (disabled) {
       return theme.font.color.extraLight;
     }
 
-    return theme.font.color[textColor ?? 'secondary'];
+    return accent
+      ? theme.color[accent]
+      : theme.font.color[textColor ?? 'secondary'];
   }};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
@@ -121,6 +126,7 @@ export function IconButton({
   size = 'medium',
   textColor = 'tertiary',
   disabled = false,
+  accent = 'regular',
   ...props
 }: ButtonProps) {
   return (
@@ -129,6 +135,7 @@ export function IconButton({
       size={size}
       disabled={disabled}
       textColor={textColor}
+      accent={accent}
       {...props}
     >
       {icon}

front/src/modules/ui/icon/index.ts

@@ -51,6 +51,7 @@ export { IconUserCircle } from '@tabler/icons-react';
 export { IconCalendar } from '@tabler/icons-react';
 export { IconPencil } from '@tabler/icons-react';
 export { IconCircleDot } from '@tabler/icons-react';
+export { IconHeart } from '@tabler/icons-react';
 export { IconBrandX } from '@tabler/icons-react';
 export { IconTag } from '@tabler/icons-react';
 export { IconHelpCircle } from '@tabler/icons-react';

front/src/modules/ui/layout/components/WithTopBarContainer.tsx

@@ -10,8 +10,10 @@ type OwnProps = {
   children: JSX.Element | JSX.Element[];
   title: string;
   hasBackButton?: boolean;
+  isFavorite?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
+  onFavouriteButtonClick?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -24,8 +26,10 @@ export function WithTopBarContainer({
   children,
   title,
   hasBackButton,
+  isFavorite,
   icon,
   onAddButtonClick,
+  onFavouriteButtonClick,
 }: OwnProps) {
   return (
     <StyledContainer>
@@ -33,8 +37,10 @@ export function WithTopBarContainer({
       <PageBar
         title={title}
         hasBackButton={hasBackButton}
+        isFavorite={isFavorite}
         icon={icon}
         onAddButtonClick={onAddButtonClick}
+        onFavouriteButtonClick={onFavouriteButtonClick}
       />
       <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
         {children}

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
+import { IconChevronLeft, IconHeart, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
@@ -58,18 +58,27 @@ const StyledTopBarIconTitleContainer = styled.div`
   width: 100%;
 `;
 
+const ActionButtonsContainer = styled.div`
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
 type OwnProps = {
   title: string;
   hasBackButton?: boolean;
+  isFavorite?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
+  onFavouriteButtonClick?: () => void;
 };
 
 export function PageBar({
   title,
   hasBackButton,
+  isFavorite,
   icon,
   onAddButtonClick,
+  onFavouriteButtonClick,
 }: OwnProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
@@ -104,16 +113,28 @@ export function PageBar({
             </TitleContainer>
           </StyledTopBarIconTitleContainer>
         </StyledLeftContainer>
-        {onAddButtonClick && (
-          <IconButton
-            icon={<IconPlus size={16} />}
-            size="large"
-            data-testid="add-button"
-            textColor="secondary"
-            onClick={onAddButtonClick}
-            variant="border"
-          />
-        )}
+        <ActionButtonsContainer>
+          {onFavouriteButtonClick && (
+            <IconButton
+              icon={<IconHeart size={16} />}
+              size="large"
+              data-testid="add-button"
+              accent={isFavorite ? 'red' : 'regular'}
+              onClick={onFavouriteButtonClick}
+              variant="border"
+            />
+          )}
+          {onAddButtonClick && (
+            <IconButton
+              icon={<IconPlus size={16} />}
+              size="large"
+              data-testid="add-button"
+              textColor="secondary"
+              onClick={onAddButtonClick}
+              variant="border"
+            />
+          )}
+        </ActionButtonsContainer>
       </TopBarContainer>
     </>
   );