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/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>
     </>
   );