Merge branch 'main' into context-menu-vertical

front/src/AppNavbar.tsx

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { Favorites } from '@/favorites/components/Favorites';
 import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
 import {
   IconBell,
@@ -56,6 +57,7 @@ export function AppNavbar() {
             active={currentPath === '/tasks'}
             icon={<IconCheckbox size={theme.icon.size.md} />}
           />
+          <Favorites />
           <NavTitle label="Workspace" />
           <NavItem
             label="Companies"

front/src/generated/graphql.tsx

@@ -640,6 +640,7 @@ export enum CommentableType {
 export type Company = {
   __typename?: 'Company';
   ActivityTarget?: Maybe<Array<ActivityTarget>>;
+  Favorite?: Maybe<Array<Favorite>>;
   PipelineProgress?: Maybe<Array<PipelineProgress>>;
   _activityCount: Scalars['Int'];
   accountOwner?: Maybe<User>;
@@ -659,6 +660,7 @@ export type Company = {
 
 export type CompanyCreateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutCompanyInput>;
+  Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutCompanyInput>;
   PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutCompanyInput>;
   accountOwner?: InputMaybe<UserCreateNestedOneWithoutCompaniesInput>;
   address: Scalars['String'];
@@ -696,6 +698,7 @@ export type CompanyOrderByRelationAggregateInput = {
 
 export type CompanyOrderByWithRelationInput = {
   ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
+  Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
   PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
   accountOwner?: InputMaybe<UserOrderByWithRelationInput>;
   accountOwnerId?: InputMaybe<SortOrder>;
@@ -731,6 +734,7 @@ export enum CompanyScalarFieldEnum {
 
 export type CompanyUpdateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutCompanyNestedInput>;
+  Favorite?: InputMaybe<FavoriteUpdateManyWithoutCompanyNestedInput>;
   PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutCompanyNestedInput>;
   accountOwner?: InputMaybe<UserUpdateOneWithoutCompaniesNestedInput>;
   address?: InputMaybe<Scalars['String']>;
@@ -769,6 +773,7 @@ export type CompanyUpdateOneWithoutPipelineProgressNestedInput = {
 export type CompanyWhereInput = {
   AND?: InputMaybe<Array<CompanyWhereInput>>;
   ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
+  Favorite?: InputMaybe<FavoriteListRelationFilter>;
   NOT?: InputMaybe<Array<CompanyWhereInput>>;
   OR?: InputMaybe<Array<CompanyWhereInput>>;
   PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
@@ -860,6 +865,71 @@ export type EnumViewTypeFilter = {
   notIn?: InputMaybe<Array<ViewType>>;
 };
 
+export type Favorite = {
+  __typename?: 'Favorite';
+  company?: Maybe<Company>;
+  companyId?: Maybe<Scalars['String']>;
+  id: Scalars['ID'];
+  person?: Maybe<Person>;
+  personId?: Maybe<Scalars['String']>;
+  workspaceId?: Maybe<Scalars['String']>;
+  workspaceMember?: Maybe<WorkspaceMember>;
+  workspaceMemberId?: Maybe<Scalars['String']>;
+};
+
+export type FavoriteCreateNestedManyWithoutCompanyInput = {
+  connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+};
+
+export type FavoriteCreateNestedManyWithoutPersonInput = {
+  connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+};
+
+export type FavoriteListRelationFilter = {
+  every?: InputMaybe<FavoriteWhereInput>;
+  none?: InputMaybe<FavoriteWhereInput>;
+  some?: InputMaybe<FavoriteWhereInput>;
+};
+
+export type FavoriteMutationForCompanyArgs = {
+  companyId: Scalars['String'];
+};
+
+export type FavoriteMutationForPersonArgs = {
+  personId: Scalars['String'];
+};
+
+export type FavoriteOrderByRelationAggregateInput = {
+  _count?: InputMaybe<SortOrder>;
+};
+
+export type FavoriteUpdateManyWithoutCompanyNestedInput = {
+  connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+  disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+  set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+};
+
+export type FavoriteUpdateManyWithoutPersonNestedInput = {
+  connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+  disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+  set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
+};
+
+export type FavoriteWhereInput = {
+  AND?: InputMaybe<Array<FavoriteWhereInput>>;
+  NOT?: InputMaybe<Array<FavoriteWhereInput>>;
+  OR?: InputMaybe<Array<FavoriteWhereInput>>;
+  companyId?: InputMaybe<StringNullableFilter>;
+  id?: InputMaybe<StringFilter>;
+  personId?: InputMaybe<StringNullableFilter>;
+  workspaceId?: InputMaybe<StringNullableFilter>;
+  workspaceMemberId?: InputMaybe<StringNullableFilter>;
+};
+
+export type FavoriteWhereUniqueInput = {
+  id?: InputMaybe<Scalars['String']>;
+};
+
 export enum FileFolder {
   Attachment = 'Attachment',
   PersonPicture = 'PersonPicture',
@@ -915,6 +985,8 @@ export type Mutation = {
   allowImpersonation: WorkspaceMember;
   challenge: LoginToken;
   createEvent: Analytics;
+  createFavoriteForCompany: Favorite;
+  createFavoriteForPerson: Favorite;
   createManyViewField: AffectedRows;
   createManyViewSort: AffectedRows;
   createOneActivity: Activity;
@@ -924,6 +996,7 @@ export type Mutation = {
   createOnePipelineProgress: PipelineProgress;
   createOneViewField: ViewField;
   deleteCurrentWorkspace: Workspace;
+  deleteFavorite: Favorite;
   deleteManyActivities: AffectedRows;
   deleteManyCompany: AffectedRows;
   deleteManyPerson: AffectedRows;
@@ -970,6 +1043,16 @@ export type MutationCreateEventArgs = {
 };
 
 
+export type MutationCreateFavoriteForCompanyArgs = {
+  data: FavoriteMutationForCompanyArgs;
+};
+
+
+export type MutationCreateFavoriteForPersonArgs = {
+  data: FavoriteMutationForPersonArgs;
+};
+
+
 export type MutationCreateManyViewFieldArgs = {
   data: Array<ViewFieldCreateManyInput>;
   skipDuplicates?: InputMaybe<Scalars['Boolean']>;
@@ -1012,6 +1095,11 @@ export type MutationCreateOneViewFieldArgs = {
 };
 
 
+export type MutationDeleteFavoriteArgs = {
+  where: FavoriteWhereInput;
+};
+
+
 export type MutationDeleteManyActivitiesArgs = {
   where?: InputMaybe<ActivityWhereInput>;
 };
@@ -1279,6 +1367,7 @@ export type NestedStringNullableFilter = {
 export type Person = {
   __typename?: 'Person';
   ActivityTarget?: Maybe<Array<ActivityTarget>>;
+  Favorite?: Maybe<Array<Favorite>>;
   PipelineProgress?: Maybe<Array<PipelineProgress>>;
   _activityCount: Scalars['Int'];
   activities: Array<Activity>;
@@ -1303,6 +1392,7 @@ export type Person = {
 
 export type PersonCreateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutPersonInput>;
+  Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutPersonInput>;
   PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutPersonInput>;
   avatarUrl?: InputMaybe<Scalars['String']>;
   city?: InputMaybe<Scalars['String']>;
@@ -1348,6 +1438,7 @@ export type PersonOrderByRelationAggregateInput = {
 
 export type PersonOrderByWithRelationInput = {
   ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
+  Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
   PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
   avatarUrl?: InputMaybe<SortOrder>;
   city?: InputMaybe<SortOrder>;
@@ -1391,6 +1482,7 @@ export enum PersonScalarFieldEnum {
 
 export type PersonUpdateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutPersonNestedInput>;
+  Favorite?: InputMaybe<FavoriteUpdateManyWithoutPersonNestedInput>;
   PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutPersonNestedInput>;
   avatarUrl?: InputMaybe<Scalars['String']>;
   city?: InputMaybe<Scalars['String']>;
@@ -1433,6 +1525,7 @@ export type PersonUpdateOneWithoutPipelineProgressNestedInput = {
 export type PersonWhereInput = {
   AND?: InputMaybe<Array<PersonWhereInput>>;
   ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
+  Favorite?: InputMaybe<FavoriteListRelationFilter>;
   NOT?: InputMaybe<Array<PersonWhereInput>>;
   OR?: InputMaybe<Array<PersonWhereInput>>;
   PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
@@ -1806,6 +1899,7 @@ export type Query = {
   clientConfig: ClientConfig;
   currentUser: User;
   currentWorkspace: Workspace;
+  findFavorites: Array<Favorite>;
   findManyActivities: Array<Activity>;
   findManyCompany: Array<Company>;
   findManyPerson: Array<Person>;
@@ -2507,6 +2601,7 @@ export type WorkspaceInviteHashValid = {
 
 export type WorkspaceMember = {
   __typename?: 'WorkspaceMember';
+  Favorite?: Maybe<Array<Favorite>>;
   allowImpersonation: Scalars['Boolean'];
   createdAt: Scalars['DateTime'];
   id: Scalars['ID'];
@@ -2517,6 +2612,7 @@ export type WorkspaceMember = {
 };
 
 export type WorkspaceMemberOrderByWithRelationInput = {
+  Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
   allowImpersonation?: InputMaybe<SortOrder>;
   createdAt?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
@@ -2543,6 +2639,7 @@ export type WorkspaceMemberUpdateManyWithoutWorkspaceNestedInput = {
 
 export type WorkspaceMemberWhereInput = {
   AND?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
+  Favorite?: InputMaybe<FavoriteListRelationFilter>;
   NOT?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
   OR?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
   allowImpersonation?: InputMaybe<BoolFilter>;
@@ -2734,7 +2831,7 @@ export type GetCompanyQueryVariables = Exact<{
 }>;
 
 
-export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
+export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
 
 export type UpdateOneCompanyMutationVariables = Exact<{
   where: CompanyWhereUniqueInput;
@@ -2760,6 +2857,32 @@ export type DeleteManyCompaniesMutationVariables = Exact<{
 
 export type DeleteManyCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } };
 
+export type GetFavoritesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetFavoritesQuery = { __typename?: 'Query', findFavorites: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null }> };
+
+export type InsertPersonFavoriteMutationVariables = Exact<{
+  data: FavoriteMutationForPersonArgs;
+}>;
+
+
+export type InsertPersonFavoriteMutation = { __typename?: 'Mutation', createFavoriteForPerson: { __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null } };
+
+export type InsertCompanyFavoriteMutationVariables = Exact<{
+  data: FavoriteMutationForCompanyArgs;
+}>;
+
+
+export type InsertCompanyFavoriteMutation = { __typename?: 'Mutation', createFavoriteForCompany: { __typename?: 'Favorite', id: string, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
+
+export type DeleteFavoriteMutationVariables = Exact<{
+  where: FavoriteWhereInput;
+}>;
+
+
+export type DeleteFavoriteMutation = { __typename?: 'Mutation', deleteFavorite: { __typename?: 'Favorite', id: string } };
+
 export type GetPeopleQueryVariables = Exact<{
   orderBy?: InputMaybe<Array<PersonOrderByWithRelationInput> | PersonOrderByWithRelationInput>;
   where?: InputMaybe<PersonWhereInput>;
@@ -2823,7 +2946,7 @@ export type GetPersonQueryVariables = Exact<{
 }>;
 
 
-export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
+export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
 
 export type UpdateOnePersonMutationVariables = Exact<{
   where: PersonWhereUniqueInput;
@@ -4097,6 +4220,15 @@ export const GetCompanyDocument = gql`
       displayName
       avatarUrl
     }
+    Favorite {
+      id
+      person {
+        id
+      }
+      company {
+        id
+      }
+    }
   }
 }
     `;
@@ -4241,6 +4373,166 @@ export function useDeleteManyCompaniesMutation(baseOptions?: Apollo.MutationHook
 export type DeleteManyCompaniesMutationHookResult = ReturnType<typeof useDeleteManyCompaniesMutation>;
 export type DeleteManyCompaniesMutationResult = Apollo.MutationResult<DeleteManyCompaniesMutation>;
 export type DeleteManyCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteManyCompaniesMutation, DeleteManyCompaniesMutationVariables>;
+export const GetFavoritesDocument = gql`
+    query GetFavorites {
+  findFavorites {
+    id
+    person {
+      id
+      firstName
+      lastName
+      avatarUrl
+    }
+    company {
+      id
+      name
+      domainName
+      accountOwner {
+        id
+        displayName
+        avatarUrl
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetFavoritesQuery__
+ *
+ * To run a query within a React component, call `useGetFavoritesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetFavoritesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetFavoritesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetFavoritesQuery(baseOptions?: Apollo.QueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
+      }
+export function useGetFavoritesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
+        }
+export type GetFavoritesQueryHookResult = ReturnType<typeof useGetFavoritesQuery>;
+export type GetFavoritesLazyQueryHookResult = ReturnType<typeof useGetFavoritesLazyQuery>;
+export type GetFavoritesQueryResult = Apollo.QueryResult<GetFavoritesQuery, GetFavoritesQueryVariables>;
+export const InsertPersonFavoriteDocument = gql`
+    mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
+  createFavoriteForPerson(data: $data) {
+    id
+    person {
+      id
+      firstName
+      lastName
+      displayName
+    }
+  }
+}
+    `;
+export type InsertPersonFavoriteMutationFn = Apollo.MutationFunction<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
+
+/**
+ * __useInsertPersonFavoriteMutation__
+ *
+ * To run a mutation, you first call `useInsertPersonFavoriteMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useInsertPersonFavoriteMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [insertPersonFavoriteMutation, { data, loading, error }] = useInsertPersonFavoriteMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useInsertPersonFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>(InsertPersonFavoriteDocument, options);
+      }
+export type InsertPersonFavoriteMutationHookResult = ReturnType<typeof useInsertPersonFavoriteMutation>;
+export type InsertPersonFavoriteMutationResult = Apollo.MutationResult<InsertPersonFavoriteMutation>;
+export type InsertPersonFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
+export const InsertCompanyFavoriteDocument = gql`
+    mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
+  createFavoriteForCompany(data: $data) {
+    id
+    company {
+      id
+      name
+      domainName
+    }
+  }
+}
+    `;
+export type InsertCompanyFavoriteMutationFn = Apollo.MutationFunction<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
+
+/**
+ * __useInsertCompanyFavoriteMutation__
+ *
+ * To run a mutation, you first call `useInsertCompanyFavoriteMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useInsertCompanyFavoriteMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [insertCompanyFavoriteMutation, { data, loading, error }] = useInsertCompanyFavoriteMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useInsertCompanyFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>(InsertCompanyFavoriteDocument, options);
+      }
+export type InsertCompanyFavoriteMutationHookResult = ReturnType<typeof useInsertCompanyFavoriteMutation>;
+export type InsertCompanyFavoriteMutationResult = Apollo.MutationResult<InsertCompanyFavoriteMutation>;
+export type InsertCompanyFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
+export const DeleteFavoriteDocument = gql`
+    mutation DeleteFavorite($where: FavoriteWhereInput!) {
+  deleteFavorite(where: $where) {
+    id
+  }
+}
+    `;
+export type DeleteFavoriteMutationFn = Apollo.MutationFunction<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
+
+/**
+ * __useDeleteFavoriteMutation__
+ *
+ * To run a mutation, you first call `useDeleteFavoriteMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteFavoriteMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteFavoriteMutation, { data, loading, error }] = useDeleteFavoriteMutation({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useDeleteFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>(DeleteFavoriteDocument, options);
+      }
+export type DeleteFavoriteMutationHookResult = ReturnType<typeof useDeleteFavoriteMutation>;
+export type DeleteFavoriteMutationResult = Apollo.MutationResult<DeleteFavoriteMutation>;
+export type DeleteFavoriteMutationOptions = Apollo.BaseMutationOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
 export const GetPeopleDocument = gql`
     query GetPeople($orderBy: [PersonOrderByWithRelationInput!], $where: PersonWhereInput, $limit: Int) {
   people: findManyPerson(orderBy: $orderBy, where: $where, take: $limit) {
@@ -4575,6 +4867,15 @@ export const GetPersonDocument = gql`
       name
       domainName
     }
+    Favorite {
+      id
+      person {
+        id
+      }
+      company {
+        id
+      }
+    }
   }
 }
     `;

front/src/modules/activities/components/TaskList.tsx

@@ -20,6 +20,7 @@ const StyledContainer = styled.div`
 
 const StyledTitle = styled.h3`
   color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;

front/src/modules/activities/hooks/useCompleteTask.ts

@@ -16,8 +16,6 @@ export function useCompleteTask(task: Task) {
     fragment: ACTIVITY_UPDATE_FRAGMENT,
   });
 
-  console.log('cachedTask', cachedTask);
-
   const completeTask = useCallback(
     (value: boolean) => {
       const completedAt = value ? new Date().toISOString() : null;

front/src/modules/auth/components/Logo.tsx

@@ -6,40 +6,62 @@ type Props = React.ComponentProps<'div'> & {
   workspaceLogo?: string | null;
 };
 
-const StyledLogo = styled.div`
+const StyledContainer = styled.div`
   height: 48px;
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 
-  img {
-    height: 100%;
-    width: 100%;
-  }
-
   position: relative;
   width: 48px;
 `;
 
-type StyledWorkspaceLogoProps = {
+const StyledTwentyLogo = styled.img`
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledTwentyLogoContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  bottom: ${({ theme }) => `-${theme.spacing(3)}`};
+  display: flex;
+  height: 28px;
+  justify-content: center;
+
+  position: absolute;
+  right: ${({ theme }) => `-${theme.spacing(3)}`};
+  width: 28px;
+`;
+
+type StyledMainLogoProps = {
   logo?: string | null;
 };
 
-const StyledWorkspaceLogo = styled.div<StyledWorkspaceLogoProps>`
+const StyledMainLogo = styled.div<StyledMainLogoProps>`
   background: url(${(props) => props.logo});
   background-size: cover;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 100%;
-  bottom: ${({ theme }) => `-${theme.spacing(3)}`};
+
-  height: ${({ theme }) => theme.spacing(6)};
+  width: 100%;
-  position: absolute;
-  right: ${({ theme }) => `-${theme.spacing(3)}`};
-  width: ${({ theme }) => theme.spacing(6)};
 `;
 
 export function Logo({ workspaceLogo, ...props }: Props) {
+  if (!workspaceLogo) {
+    return (
+      <StyledContainer {...props}>
+        <StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
+      </StyledContainer>
+    );
+  }
+
   return (
-    <StyledLogo {...props}>
+    <StyledContainer {...props}>
-      <StyledWorkspaceLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
+      <StyledMainLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
-      <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
+      <StyledTwentyLogoContainer>
-    </StyledLogo>
+        <StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
+      </StyledTwentyLogoContainer>
+    </StyledContainer>
   );
 }

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -76,7 +76,7 @@ export function SignInUpForm() {
 
   const title = useMemo(() => {
     if (signInUpMode === SignInUpMode.Invite) {
-      return `Join ${workspace?.displayName ?? ''} Team`;
+      return `Join ${workspace?.displayName ?? ''} team`;
     }
 
     return signInUpMode === SignInUpMode.SignIn

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -3,17 +3,18 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
+import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
 import {
   Checkbox,
   CheckboxVariant,
 } from '@/ui/input/checkbox/components/Checkbox';
 import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -112,7 +113,7 @@ export function CompanyBoardCard() {
   const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
     selectedBoardCardIdsState,
   );
-  const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
+  const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
 
   const selected = selectedBoardCards.includes(boardCardId ?? '');
   const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
@@ -128,7 +129,8 @@ export function CompanyBoardCard() {
     }
   }
 
-  if (!company || !pipelineProgress) {
+  // boardCardId check can be moved to a wrapper to avoid unnecessary logic above
+  if (!company || !pipelineProgress || !boardCardId) {
     return null;
   }
 
@@ -149,42 +151,52 @@ export function CompanyBoardCard() {
   }
 
   return (
-    <EntityUpdateMutationHookContext.Provider
+    <StyledBoardCardWrapper>
-      value={useUpdateOnePipelineProgressMutation}
+      <StyledBoardCard
-    >
+        selected={selected}
-      <StyledBoardCardWrapper>
+        onClick={() => setSelected(!selected)}
-        <StyledBoardCard
+      >
-          selected={selected}
+        <StyledBoardCardHeader>
-          onClick={() => setSelected(!selected)}
+          <CompanyChip
-        >
+            id={company.id}
-          <StyledBoardCardHeader>
+            name={company.name}
-            <CompanyChip
+            pictureUrl={getLogoUrlFromDomainName(company.domainName)}
-              id={company.id}
+            variant={EntityChipVariant.Transparent}
-              name={company.name}
+          />
-              pictureUrl={getLogoUrlFromDomainName(company.domainName)}
+          <StyledCheckboxContainer className="checkbox-container">
-              variant={EntityChipVariant.Transparent}
+            <Checkbox
+              checked={selected}
+              onChange={() => setSelected(!selected)}
+              variant={CheckboxVariant.Secondary}
             />
-            <StyledCheckboxContainer className="checkbox-container">
+          </StyledCheckboxContainer>
-              <Checkbox
+        </StyledBoardCardHeader>
-                checked={selected}
+        <StyledBoardCardBody>
-                onChange={() => setSelected(!selected)}
+          <EditableFieldMutationContext.Provider
-                variant={CheckboxVariant.Secondary}
+            value={useUpdateOnePipelineProgressMutation}
-              />
+          >
-            </StyledCheckboxContainer>
+            <EditableFieldEntityIdContext.Provider value={boardCardId}>
-          </StyledBoardCardHeader>
+              {viewFieldsDefinitions.map((viewField) => {
-          <StyledBoardCardBody>
+                return (
-            {fieldsDefinitions.map((viewField) => {
+                  <PreventSelectOnClickContainer key={viewField.id}>
-              return (
+                    <EditableFieldDefinitionContext.Provider
-                <PreventSelectOnClickContainer key={viewField.id}>
+                      value={{
-                  <EditableFieldEntityIdContext.Provider value={boardCardId}>
+                        id: viewField.id,
-                    <GenericEditableField viewField={viewField} />
+                        label: viewField.columnLabel,
-                  </EditableFieldEntityIdContext.Provider>
+                        icon: viewField.columnIcon,
-                </PreventSelectOnClickContainer>
+                        type: viewField.metadata.type,
-              );
+                        metadata: viewField.metadata,
-            })}
+                      }}
-          </StyledBoardCardBody>
+                    >
-        </StyledBoardCard>
+                      <GenericEditableField />
-      </StyledBoardCardWrapper>
+                    </EditableFieldDefinitionContext.Provider>
-    </EntityUpdateMutationHookContext.Provider>
+                  </PreventSelectOnClickContainer>
+                );
+              })}
+            </EditableFieldEntityIdContext.Provider>
+          </EditableFieldMutationContext.Provider>
+        </StyledBoardCardBody>
+      </StyledBoardCard>
+    </StyledBoardCardWrapper>
   );
 }

front/src/modules/companies/components/CompanyTeam.tsx

@@ -12,6 +12,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledTitleContainer = styled.div`
@@ -32,7 +33,6 @@ const StyledListContainer = styled.div`
   border-radius: ${({ theme }) => theme.spacing(1)};
   display: flex;
   flex-direction: column;
-  max-height: ${({ theme }) => theme.spacing(35)};
   overflow: auto;
   width: 100%;
 `;
@@ -63,8 +63,12 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
             <StyledTitle>Team</StyledTitle>
           </StyledTitleContainer>
           <StyledListContainer>
-            {data?.people?.map((person) => (
+            {data?.people?.map((person, id) => (
-              <PeopleCard key={person.id} person={person} />
+              <PeopleCard
+                key={person.id}
+                person={person}
+                hasBottomBorder={id !== data.people.length - 1}
+              />
             ))}
           </StyledListContainer>
         </StyledContainer>

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@@ -27,7 +27,9 @@ export function HooksCompanyBoard({
 }: {
   orderBy: PipelineProgresses_Order_By[];
 }) {
-  const setFieldsDefinitionsState = useSetRecoilState(fieldsDefinitionsState);
+  const setFieldsDefinitionsState = useSetRecoilState(
+    viewFieldsDefinitionsState,
+  );
 
   useEffect(() => {
     setFieldsDefinitionsState(pipelineViewFields);

front/src/modules/companies/queries/show.ts

@@ -19,6 +19,15 @@ export const GET_COMPANY = gql`
         displayName
         avatarUrl
       }
+      Favorite {
+        id
+        person {
+          id
+        }
+        company {
+          id
+        }
+      }
     }
   }
 `;

front/src/modules/favorites/components/Favorites.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+
+import NavItem from '@/ui/navbar/components/NavItem';
+import NavTitle from '@/ui/navbar/components/NavTitle';
+import { Avatar } from '@/users/components/Avatar';
+import { useGetFavoritesQuery } from '~/generated/graphql';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  width: 100%;
+`;
+
+export function Favorites() {
+  const { data } = useGetFavoritesQuery();
+  const favorites = data?.findFavorites;
+
+  if (!favorites || favorites.length === 0) return <></>;
+
+  return (
+    <StyledContainer>
+      <NavTitle label="Favorites" />
+      {favorites.map(
+        ({ id, person, company }) =>
+          (person && (
+            <NavItem
+              key={id}
+              label={`${person.firstName} ${person.lastName}`}
+              icon={
+                <Avatar
+                  key={id}
+                  colorId={person.id}
+                  avatarUrl={person.avatarUrl ?? ''}
+                  type="rounded"
+                  placeholder={`${person.firstName} ${person.lastName}`}
+                  size="md"
+                />
+              }
+              to={`/person/${person.id}`}
+            />
+          )) ||
+          (company && (
+            <NavItem
+              key={id}
+              label={company.name}
+              icon={
+                <Avatar
+                  key={id}
+                  avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
+                  type="squared"
+                  placeholder={company.name}
+                  size="md"
+                />
+              }
+              to={`/companies/${company.id}`}
+            />
+          )),
+      )}
+    </StyledContainer>
+  );
+}

front/src/modules/favorites/hooks/useFavorites.ts

@@ -0,0 +1,84 @@
+import { getOperationName } from '@apollo/client/utilities';
+
+import { GET_COMPANY } from '@/companies/queries';
+import { GET_PERSON } from '@/people/queries/show';
+import {
+  useDeleteFavoriteMutation,
+  useInsertCompanyFavoriteMutation,
+  useInsertPersonFavoriteMutation,
+} from '~/generated/graphql';
+
+import { GET_FAVORITES } from '../queries/show';
+
+export function useFavorites() {
+  const [insertCompanyFavoriteMutation] = useInsertCompanyFavoriteMutation();
+  const [insertPersonFavoriteMutation] = useInsertPersonFavoriteMutation();
+  const [deleteFavoriteMutation] = useDeleteFavoriteMutation();
+
+  function insertCompanyFavorite(companyId: string) {
+    insertCompanyFavoriteMutation({
+      variables: {
+        data: {
+          companyId,
+        },
+      },
+      refetchQueries: [
+        getOperationName(GET_FAVORITES) ?? '',
+        getOperationName(GET_COMPANY) ?? '',
+      ],
+    });
+  }
+
+  function insertPersonFavorite(personId: string) {
+    insertPersonFavoriteMutation({
+      variables: {
+        data: {
+          personId,
+        },
+      },
+      refetchQueries: [
+        getOperationName(GET_FAVORITES) ?? '',
+        getOperationName(GET_PERSON) ?? '',
+      ],
+    });
+  }
+
+  function deleteCompanyFavorite(companyId: string) {
+    deleteFavoriteMutation({
+      variables: {
+        where: {
+          companyId: {
+            equals: companyId,
+          },
+        },
+      },
+      refetchQueries: [
+        getOperationName(GET_FAVORITES) ?? '',
+        getOperationName(GET_COMPANY) ?? '',
+      ],
+    });
+  }
+
+  function deletePersonFavorite(personId: string) {
+    deleteFavoriteMutation({
+      variables: {
+        where: {
+          personId: {
+            equals: personId,
+          },
+        },
+      },
+      refetchQueries: [
+        getOperationName(GET_FAVORITES) ?? '',
+        getOperationName(GET_PERSON) ?? '',
+      ],
+    });
+  }
+
+  return {
+    insertCompanyFavorite,
+    insertPersonFavorite,
+    deleteCompanyFavorite,
+    deletePersonFavorite,
+  };
+}

front/src/modules/favorites/queries/show.ts

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+export const GET_FAVORITES = gql`
+  query GetFavorites {
+    findFavorites {
+      id
+      person {
+        id
+        firstName
+        lastName
+        avatarUrl
+      }
+      company {
+        id
+        name
+        domainName
+        accountOwner {
+          id
+          displayName
+          avatarUrl
+        }
+      }
+    }
+  }
+`;

front/src/modules/favorites/queries/update.ts

@@ -0,0 +1,36 @@
+import { gql } from '@apollo/client';
+
+export const INSERT_PERSON_FAVORITE = gql`
+  mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
+    createFavoriteForPerson(data: $data) {
+      id
+      person {
+        id
+        firstName
+        lastName
+        displayName
+      }
+    }
+  }
+`;
+
+export const INSERT_COMPANY_FAVORITE = gql`
+  mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
+    createFavoriteForCompany(data: $data) {
+      id
+      company {
+        id
+        name
+        domainName
+      }
+    }
+  }
+`;
+
+export const DELETE_FAVORITE = gql`
+  mutation DeleteFavorite($where: FavoriteWhereInput!) {
+    deleteFavorite(where: $where) {
+      id
+    }
+  }
+`;

front/src/modules/people/components/PeopleCard.tsx

@@ -4,14 +4,17 @@ import styled from '@emotion/styled';
 import { Avatar } from '@/users/components/Avatar';
 import { Person } from '~/generated/graphql';
 
-export type PeopleCardPropsType = {
+export type PeopleCardProps = {
   person: Pick<Person, 'id' | 'avatarUrl' | 'displayName' | 'jobTitle'>;
+  hasBottomBorder?: boolean;
 };
 
-const StyledCard = styled.div`
+const StyledCard = styled.div<{ hasBottomBorder: boolean }>`
   align-items: center;
   align-self: stretch;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid
+    ${({ theme, hasBottomBorder }) =>
+      hasBottomBorder ? theme.border.color.light : 'transparent'};
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(8)};
@@ -49,10 +52,16 @@ const StyledJobTitle = styled.div`
   }
 `;
 
-export function PeopleCard({ person }: PeopleCardPropsType) {
+export function PeopleCard({
+  person,
+  hasBottomBorder = true,
+}: PeopleCardProps) {
   const navigate = useNavigate();
   return (
-    <StyledCard onClick={() => navigate(`/person/${person.id}`)}>
+    <StyledCard
+      onClick={() => navigate(`/person/${person.id}`)}
+      hasBottomBorder={hasBottomBorder}
+    >
       <Avatar
         size="lg"
         type="rounded"
@@ -61,7 +70,7 @@ export function PeopleCard({ person }: PeopleCardPropsType) {
       />
       <StyledCardInfo>
         <StyledTitle>{person.displayName}</StyledTitle>
-        <StyledJobTitle> {person.jobTitle ?? 'Add job title'}</StyledJobTitle>
+        {person.jobTitle && <StyledJobTitle>{person.jobTitle}</StyledJobTitle>}
       </StyledCardInfo>
     </StyledCard>
   );

front/src/modules/people/constants/peopleViewFields.tsx

@@ -123,7 +123,7 @@ export const peopleViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
   } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
   {
     id: 'x',
-    columnLabel: 'X',
+    columnLabel: 'Twitter',
     columnIcon: <IconBrandX />,
     columnSize: 150,
     columnOrder: 9,

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -48,8 +48,8 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <DoubleTextInputEdit
-        firstValuePlaceholder={'First name'}
+        firstValuePlaceholder={'F​irst n​ame'} // Hack: Fake character to prevent password-manager from filling the field
-        secondValuePlaceholder={'Last name'}
+        secondValuePlaceholder={'L​ast n​ame'} // Hack: Fake character to prevent password-manager from filling the field
         firstValue={internalValueFirstName ?? ''}
         secondValue={internalValueLastName ?? ''}
         onChange={handleChange}

front/src/modules/people/queries/show.ts

@@ -23,6 +23,15 @@ export const GET_PERSON = gql`
         name
         domainName
       }
+      Favorite {
+        id
+        person {
+          id
+        }
+        company {
+          id
+        }
+      }
     }
   }
 `;

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -7,6 +7,7 @@ import { IconList } from '@tabler/icons-react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
+import { GET_PIPELINE_PROGRESS } from '@/pipeline/queries';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { StyledBoard } from '@/ui/board/components/StyledBoard';
 import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds';
@@ -22,7 +23,6 @@ import {
   useUpdateOnePipelineProgressStageMutation,
 } from '~/generated/graphql';
 
-import { GET_PIPELINE_PROGRESS } from '../../../pipeline/queries';
 import { BoardColumnContext } from '../states/BoardColumnContext';
 import { boardColumnsState } from '../states/boardColumnsState';
 import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -91,14 +91,14 @@ export function EntityBoardColumn({
                 />
               </BoardCardIdContext.Provider>
             ))}
-            <Draggable draggableId={`new-${column.id}`} index={cardIds.length}>
+            <Draggable
+              draggableId={`new-${column.id}`}
+              index={cardIds.length}
+              isDragDisabled={true}
+            >
               {(draggableProvided) => (
                 <div
                   ref={draggableProvided?.innerRef}
-                  {...{
-                    ...draggableProvided.dragHandleProps,
-                    draggable: false,
-                  }}
                   {...draggableProvided?.draggableProps}
                 >
                   <StyledNewCardButtonContainer>

front/src/modules/ui/board/components/NewButton.tsx

@@ -8,7 +8,7 @@ const StyledButton = styled.button`
   align-self: baseline;
   background-color: ${({ theme }) => theme.background.primary};
   border: none;
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
   display: flex;

front/src/modules/ui/board/states/FieldDefinitionContext.ts

@@ -1,9 +1,14 @@
 import { createContext } from 'react';
 
-import {
+import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
-  ViewFieldDefinition,
+import { FieldMetadata } from '@/ui/editable-field/types/FieldMetadata';
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
 
-export const FieldDefinitionContext =
+export const FieldDefinitionContext = createContext<
-  createContext<ViewFieldDefinition<ViewFieldMetadata> | null>(null);
+  FieldDefinition<FieldMetadata>
+>({
+  id: '',
+  label: '',
+  icon: undefined,
+  type: '',
+  metadata: {} as FieldMetadata,
+});

front/src/modules/ui/board/states/viewFieldsDefinitionsState.ts

@@ -5,9 +5,9 @@ import type {
   ViewFieldMetadata,
 } from '../../editable-field/types/ViewField';
 
-export const fieldsDefinitionsState = atom<
+export const viewFieldsDefinitionsState = atom<
   ViewFieldDefinition<ViewFieldMetadata>[]
 >({
-  key: 'fieldsDefinitionState',
+  key: 'viewFieldsDefinitionState',
   default: [],
 });

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

@@ -5,7 +5,11 @@ export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
 
 export type IconButtonSize = 'large' | 'medium' | 'small';
 
-export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
+export type IconButtonFontColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger';
 
 export type ButtonProps = {
   icon?: React.ReactNode;
@@ -71,7 +75,9 @@ const StyledIconButton = styled.button<
       return theme.font.color.extraLight;
     }
 
-    return theme.font.color[textColor ?? 'secondary'];
+    return textColor === 'danger'
+      ? theme.color.red
+      : theme.font.color[textColor ?? 'secondary'];
   }};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -1,47 +1,40 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
-import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { parseDate } from '~/utils/date-utils';
 
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldDateMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
+import { GenericEditableDateFieldDisplayMode } from './GenericEditableDateFieldDisplayMode';
 import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
 
-type OwnProps = {
+export function GenericEditableDateField() {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
-};
-
-export function GenericEditableDateField({ viewField }: OwnProps) {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldDateMetadata>;
 
   const fieldValue = useRecoilValue<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
-  const internalDateValue = fieldValue
-    ? parseDate(fieldValue).toJSDate()
-    : null;
-
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        editModeContent={
+        editModeContent={<GenericEditableDateFieldEditMode />}
-          <GenericEditableDateFieldEditMode viewField={viewField} />
+        displayModeContent={<GenericEditableDateFieldDisplayMode />}
-        }
-        displayModeContent={<DateInputDisplay value={internalDateValue} />}
         isDisplayModeContentEmpty={!fieldValue}
       />
     </RecoilScope>

front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
+import { parseDate } from '~/utils/date-utils';
+
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldDateMetadata } from '../types/FieldMetadata';
+
+export function GenericEditableDateFieldDisplayMode() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldDateMetadata>;
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  const internalDateValue = fieldValue
+    ? parseDate(fieldValue).toJSDate()
+    : null;
+
+  return <DateInputDisplay value={internalDateValue} />;
+}

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -1,28 +1,27 @@
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
-
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldDateMetadata } from '../types/FieldMetadata';
 import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
 
-type OwnProps = {
+export function GenericEditableDateFieldEditMode() {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
-};
-
-export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldDateMetadata>;
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -34,7 +33,11 @@ export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
     setFieldValue(newDateISO);
 
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newDateISO);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newDateISO,
+      );
     }
   }
 

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -1,34 +1,30 @@
-import {
+import { useContext } from 'react';
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
 
-import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
-import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isFieldDate } from '../types/guards/isFieldDate';
-import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isFieldNumber } from '../types/guards/isFieldNumber';
-import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+import { isFieldProbability } from '../types/guards/isFieldProbability';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
 
 import { GenericEditableDateField } from './GenericEditableDateField';
 import { GenericEditableNumberField } from './GenericEditableNumberField';
 import { GenericEditableRelationField } from './GenericEditableRelationField';
 import { ProbabilityEditableField } from './ProbabilityEditableField';
 
-type OwnProps = {
+export function GenericEditableField() {
-  viewField: ViewFieldDefinition<ViewFieldMetadata>;
+  const fieldDefinition = useContext(EditableFieldDefinitionContext);
-};
 
-export function GenericEditableField({ viewField: fieldDefinition }: OwnProps) {
+  if (isFieldRelation(fieldDefinition)) {
-  if (isViewFieldDate(fieldDefinition)) {
+    return <GenericEditableRelationField />;
-    return <GenericEditableDateField viewField={fieldDefinition} />;
+  } else if (isFieldDate(fieldDefinition)) {
-  } else if (isViewFieldNumber(fieldDefinition)) {
+    return <GenericEditableDateField />;
-    return <GenericEditableNumberField viewField={fieldDefinition} />;
+  } else if (isFieldNumber(fieldDefinition)) {
-  } else if (isViewFieldRelation(fieldDefinition)) {
+    return <GenericEditableNumberField />;
-    return <GenericEditableRelationField viewField={fieldDefinition} />;
+  } else if (isFieldProbability(fieldDefinition)) {
-  } else if (isViewFieldProbability(fieldDefinition)) {
+    return <ProbabilityEditableField />;
-    return <ProbabilityEditableField viewField={fieldDefinition} />;
   } else {
     console.warn(
-      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableField`,
+      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,
     );
     return <></>;
   }

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -1,40 +1,38 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
 import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
 
-type OwnProps = {
+export function GenericEditableNumberField() {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
-};
-
-export function GenericEditableNumberField({ viewField }: OwnProps) {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldNumberMetadata>;
 
   const fieldValue = useRecoilValue<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        editModeContent={
+        editModeContent={<GenericEditableNumberFieldEditMode />}
-          <GenericEditableNumberFieldEditMode viewField={viewField} />
-        }
         displayModeContent={fieldValue}
         isDisplayModeContentEmpty={!fieldValue}
       />

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -1,10 +1,6 @@
 import { useContext, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
 import {
   canBeCastAsIntegerOrNull,
@@ -13,21 +9,25 @@ import {
 
 import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
 
-type OwnProps = {
+export function GenericEditableNumberFieldEditMode() {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
-};
-
-export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldNumberMetadata>;
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<number | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
   const [internalValue, setInternalValue] = useState(
@@ -36,6 +36,10 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
 
   const updateField = useUpdateGenericEntityField();
 
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
   function handleSubmit() {
     if (!canBeCastAsIntegerOrNull(internalValue)) {
       return;
@@ -47,7 +51,7 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
     if (currentEditableFieldEntityId && updateField) {
       updateField(
         currentEditableFieldEntityId,
-        viewField,
+        currentEditableFieldDefinition,
         castAsIntegerOrNull(internalValue),
       );
     }
@@ -60,9 +64,6 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
   function handleChange(newValue: string) {
     setInternalValue(newValue);
   }
-  const wrapperRef = useRef(null);
-
-  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
 
   return (
     <div ref={wrapperRef}>

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -1,58 +1,32 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { PersonChip } from '@/people/components/PersonChip';
-import {
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/editable-field/types/ViewField';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldRelationMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
+import { GenericEditableRelationFieldDisplayMode } from './GenericEditableRelationFieldDisplayMode';
 import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
 
-type OwnProps = {
+export function GenericEditableRelationField() {
-  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
-};
-
-function RelationChip({
-  fieldDefinition,
-  fieldValue,
-}: {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
-  fieldValue: any | null;
-}) {
-  switch (fieldDefinition.metadata.relationType) {
-    case Entity.Person: {
-      return (
-        <PersonChip
-          id={fieldValue?.id ?? ''}
-          name={fieldValue?.displayName ?? ''}
-          pictureUrl={fieldValue?.avatarUrl ?? ''}
-        />
-      );
-    }
-    default:
-      console.warn(
-        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
-      );
-      return <> </>;
-  }
-}
-
-export function GenericEditableRelationField({ viewField }: OwnProps) {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldRelationMetadata>;
 
   const fieldValue = useRecoilValue<any | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -64,13 +38,9 @@ export function GenericEditableRelationField({ viewField }: OwnProps) {
           customEditHotkeyScope={{
             scope: RelationPickerHotkeyScope.RelationPicker,
           }}
-          iconLabel={viewField.columnIcon}
+          iconLabel={currentEditableFieldDefinition.icon}
-          editModeContent={
+          editModeContent={<GenericEditableRelationFieldEditMode />}
-            <GenericEditableRelationFieldEditMode viewField={viewField} />
+          displayModeContent={<GenericEditableRelationFieldDisplayMode />}
-          }
-          displayModeContent={
-            <RelationChip fieldDefinition={viewField} fieldValue={fieldValue} />
-          }
           isDisplayModeContentEmpty={!fieldValue}
           isDisplayModeFixHeight
         />

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx

@@ -0,0 +1,45 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { PersonChip } from '@/people/components/PersonChip';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldRelationMetadata } from '../types/FieldMetadata';
+
+export function GenericEditableRelationFieldDisplayMode() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldRelationMetadata>;
+
+  const fieldValue = useRecoilValue<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  switch (currentEditableFieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PersonChip
+          id={fieldValue?.id ?? ''}
+          name={fieldValue?.displayName ?? ''}
+          pictureUrl={fieldValue?.avatarUrl ?? ''}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}"
+          in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -3,18 +3,17 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { PeoplePicker } from '@/people/components/PeoplePicker';
-import {
+import { ViewFieldRelationValue } from '@/ui/editable-field/types/ViewField';
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-  ViewFieldRelationValue,
-} from '@/ui/editable-field/types/ViewField';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 
 import { useEditableField } from '../hooks/useEditableField';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldRelationMetadata } from '../types/FieldMetadata';
 
 const RelationPickerContainer = styled.div`
   left: 0px;
@@ -22,17 +21,13 @@ const RelationPickerContainer = styled.div`
   top: -8px;
 `;
 
-type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
-};
-
 function RelationPicker({
   fieldDefinition,
   fieldValue,
   handleEntitySubmit,
   handleCancel,
 }: {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldDefinition: FieldDefinition<FieldRelationMetadata>;
   fieldValue: ViewFieldRelationValue;
   handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
   handleCancel: () => void;
@@ -55,14 +50,19 @@ function RelationPicker({
   }
 }
 
-export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
+export function GenericEditableRelationFieldEditMode() {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldRelationMetadata>;
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<any | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -79,7 +79,11 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
     });
 
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newRelation);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newRelation,
+      );
     }
 
     closeEditableField();
@@ -92,7 +96,7 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
   return (
     <RelationPickerContainer>
       <RelationPicker
-        fieldDefinition={viewField}
+        fieldDefinition={currentEditableFieldDefinition}
         fieldValue={fieldValue}
         handleEntitySubmit={handleSubmit}
         handleCancel={handleCancel}

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -1,25 +1,25 @@
+import { useContext } from 'react';
+
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import {
-  ViewFieldDefinition,
-  ViewFieldProbabilityMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldProbabilityMetadata } from '../types/FieldMetadata';
+
 import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
 
-type OwnProps = {
+export function ProbabilityEditableField() {
-  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+  const currentEditableFieldDefinition = useContext(
-};
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldProbabilityMetadata>;
 
-export function ProbabilityEditableField({ viewField }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        displayModeContent={
+        displayModeContent={<ProbabilityEditableFieldEditMode />}
-          <ProbabilityEditableFieldEditMode viewField={viewField} />
-        }
         displayModeContentOnly
         disableHoverEffect
       />

front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx

@@ -5,12 +5,11 @@ import { useRecoilState } from 'recoil';
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
 
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
-import {
+import { FieldDefinition } from '../types/FieldDefinition';
-  ViewFieldDefinition,
+import { FieldProbabilityMetadata } from '../types/FieldMetadata';
-  ViewFieldProbabilityMetadata,
-} from '../types/ViewField';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -60,10 +59,6 @@ const StyledLabel = styled.div`
   width: ${({ theme }) => theme.spacing(12)};
 `;
 
-type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
-};
-
 const PROBABILITY_VALUES = [
   { label: '0%', value: 0 },
   { label: '25%', value: 25 },
@@ -72,28 +67,38 @@ const PROBABILITY_VALUES = [
   { label: '100%', value: 100 },
 ];
 
-export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
+export function ProbabilityEditableFieldEditMode() {
   const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
     number | null
   >(null);
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldProbabilityMetadata>;
 
   const [fieldValue, setFieldValue] = useRecoilState<number>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
-  const probabilityIndex = Math.ceil(fieldValue / 25);
   const { closeEditableField } = useEditableField();
 
   const updateField = useUpdateGenericEntityField();
 
+  const probabilityIndex = Math.ceil(fieldValue / 25);
+
   function handleChange(newValue: number) {
     setFieldValue(newValue);
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newValue);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newValue,
+      );
     }
     closeEditableField();
   }

front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts

@@ -1,100 +1,97 @@
 import { useContext } from 'react';
 
-import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
+import { isFieldChip } from '@/ui/editable-field/types/guards/isFieldChip';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 
-import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
+import { EditableFieldMutationContext } from '../states/EditableFieldMutationContext';
-import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { FieldDefinition } from '../types/FieldDefinition';
-import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
-import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
-import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
-import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
-import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
-import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
-import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
-import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
-import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
-import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
-import { isViewFieldProbabilityValue } from '../types/guards/isViewFieldProbabilityValue';
-import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
-import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
-import { isViewFieldText } from '../types/guards/isViewFieldText';
-import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
-import { isViewFieldURL } from '../types/guards/isViewFieldURL';
-import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
 import {
-  ViewFieldChipMetadata,
+  FieldChipMetadata,
-  ViewFieldChipValue,
+  FieldChipValue,
-  ViewFieldDateMetadata,
+  FieldDateMetadata,
-  ViewFieldDateValue,
+  FieldDateValue,
-  ViewFieldDefinition,
+  FieldDoubleTextChipMetadata,
-  ViewFieldDoubleTextChipMetadata,
+  FieldDoubleTextChipValue,
-  ViewFieldDoubleTextChipValue,
+  FieldDoubleTextMetadata,
-  ViewFieldDoubleTextMetadata,
+  FieldDoubleTextValue,
-  ViewFieldDoubleTextValue,
+  FieldMetadata,
-  ViewFieldMetadata,
+  FieldNumberMetadata,
-  ViewFieldNumberMetadata,
+  FieldNumberValue,
-  ViewFieldNumberValue,
+  FieldPhoneMetadata,
-  ViewFieldPhoneMetadata,
+  FieldPhoneValue,
-  ViewFieldPhoneValue,
+  FieldProbabilityMetadata,
-  ViewFieldProbabilityMetadata,
+  FieldProbabilityValue,
-  ViewFieldProbabilityValue,
+  FieldRelationMetadata,
-  ViewFieldRelationMetadata,
+  FieldRelationValue,
-  ViewFieldRelationValue,
+  FieldTextMetadata,
-  ViewFieldTextMetadata,
+  FieldTextValue,
-  ViewFieldTextValue,
+  FieldURLMetadata,
-  ViewFieldURLMetadata,
+  FieldURLValue,
-  ViewFieldURLValue,
+} from '../types/FieldMetadata';
-} from '../types/ViewField';
+import { isFieldChipValue } from '../types/guards/isFieldChipValue';
+import { isFieldDate } from '../types/guards/isFieldDate';
+import { isFieldDateValue } from '../types/guards/isFieldDateValue';
+import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
+import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
+import { isFieldDoubleTextChipValue } from '../types/guards/isFieldDoubleTextChipValue';
+import { isFieldDoubleTextValue } from '../types/guards/isFieldDoubleTextValue';
+import { isFieldNumber } from '../types/guards/isFieldNumber';
+import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
+import { isFieldPhone } from '../types/guards/isFieldPhone';
+import { isFieldPhoneValue } from '../types/guards/isFieldPhoneValue';
+import { isFieldProbability } from '../types/guards/isFieldProbability';
+import { isFieldProbabilityValue } from '../types/guards/isFieldProbabilityValue';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
+import { isFieldRelationValue } from '../types/guards/isFieldRelationValue';
+import { isFieldText } from '../types/guards/isFieldText';
+import { isFieldTextValue } from '../types/guards/isFieldTextValue';
+import { isFieldURL } from '../types/guards/isFieldURL';
+import { isFieldURLValue } from '../types/guards/isFieldURLValue';
 
 export function useUpdateGenericEntityField() {
-  const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
+  const useUpdateEntityMutation = useContext(EditableFieldMutationContext);
 
   const [updateEntity] = useUpdateEntityMutation();
 
-  return function updatePeopleField<
+  return function updateEntityField<
-    MetadataType extends ViewFieldMetadata,
+    MetadataType extends FieldMetadata,
-    ValueType extends MetadataType extends ViewFieldDoubleTextMetadata
+    ValueType extends MetadataType extends FieldDoubleTextMetadata
-      ? ViewFieldDoubleTextValue
+      ? FieldDoubleTextValue
-      : MetadataType extends ViewFieldTextMetadata
+      : MetadataType extends FieldTextMetadata
-      ? ViewFieldTextValue
+      ? FieldTextValue
-      : MetadataType extends ViewFieldPhoneMetadata
+      : MetadataType extends FieldPhoneMetadata
-      ? ViewFieldPhoneValue
+      ? FieldPhoneValue
-      : MetadataType extends ViewFieldURLMetadata
+      : MetadataType extends FieldURLMetadata
-      ? ViewFieldURLValue
+      ? FieldURLValue
-      : MetadataType extends ViewFieldNumberMetadata
+      : MetadataType extends FieldNumberMetadata
-      ? ViewFieldNumberValue
+      ? FieldNumberValue
-      : MetadataType extends ViewFieldDateMetadata
+      : MetadataType extends FieldDateMetadata
-      ? ViewFieldDateValue
+      ? FieldDateValue
-      : MetadataType extends ViewFieldChipMetadata
+      : MetadataType extends FieldChipMetadata
-      ? ViewFieldChipValue
+      ? FieldChipValue
-      : MetadataType extends ViewFieldDoubleTextChipMetadata
+      : MetadataType extends FieldDoubleTextChipMetadata
-      ? ViewFieldDoubleTextChipValue
+      ? FieldDoubleTextChipValue
-      : MetadataType extends ViewFieldRelationMetadata
+      : MetadataType extends FieldRelationMetadata
-      ? ViewFieldRelationValue
+      ? FieldRelationValue
-      : MetadataType extends ViewFieldProbabilityMetadata
+      : MetadataType extends FieldProbabilityMetadata
-      ? ViewFieldProbabilityValue
+      ? FieldProbabilityValue
       : unknown,
   >(
     currentEntityId: string,
-    viewField: ViewFieldDefinition<MetadataType>,
+    field: FieldDefinition<MetadataType>,
     newFieldValue: ValueType,
   ) {
     const newFieldValueUnknown = newFieldValue as unknown;
-    // TODO: improve type guards organization, maybe with a common typeguard for all view fields
+    // TODO: improve type guards organization, maybe with a common typeguard for all fields
-    //    taking an object of options as parameter ?
+    // taking an object of options as parameter ?
     //
-    // The goal would be to check that the view field value not only is valid,
+    // The goal would be to check that the field value not only is valid,
-    //    but also that it is validated against the corresponding view field type
+    // but also that it is validated against the corresponding field type
 
     // Relation
-    if (
+    if (isFieldRelation(field) && isFieldRelationValue(newFieldValueUnknown)) {
-      isViewFieldRelation(viewField) &&
-      isViewFieldRelationValue(newFieldValueUnknown)
-    ) {
       const newSelectedEntity = newFieldValueUnknown;
 
-      const fieldName = viewField.metadata.fieldName;
+      const fieldName = field.metadata.fieldName;
 
       if (!newSelectedEntity) {
         updateEntity({
@@ -120,35 +117,29 @@ export function useUpdateGenericEntityField() {
         });
       }
       // Chip
-    } else if (
+    } else if (isFieldChip(field) && isFieldChipValue(newFieldValueUnknown)) {
-      isViewFieldChip(viewField) &&
-      isViewFieldChipValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.contentFieldName]: newContent },
+          data: { [field.metadata.contentFieldName]: newContent },
         },
       });
       // Text
-    } else if (
+    } else if (isFieldText(field) && isFieldTextValue(newFieldValueUnknown)) {
-      isViewFieldText(viewField) &&
-      isViewFieldTextValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Double text
     } else if (
-      isViewFieldDoubleText(viewField) &&
+      isFieldDoubleText(field) &&
-      isViewFieldDoubleTextValue(newFieldValueUnknown)
+      isFieldDoubleTextValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
@@ -156,15 +147,15 @@ export function useUpdateGenericEntityField() {
         variables: {
           where: { id: currentEntityId },
           data: {
-            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [field.metadata.firstValueFieldName]: newContent.firstValue,
-            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+            [field.metadata.secondValueFieldName]: newContent.secondValue,
           },
         },
       });
       //  Double Text Chip
     } else if (
-      isViewFieldDoubleTextChip(viewField) &&
+      isFieldDoubleTextChip(field) &&
-      isViewFieldDoubleTextChipValue(newFieldValueUnknown)
+      isFieldDoubleTextChipValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
@@ -172,73 +163,64 @@ export function useUpdateGenericEntityField() {
         variables: {
           where: { id: currentEntityId },
           data: {
-            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [field.metadata.firstValueFieldName]: newContent.firstValue,
-            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+            [field.metadata.secondValueFieldName]: newContent.secondValue,
           },
         },
       });
       // Phone
-    } else if (
+    } else if (isFieldPhone(field) && isFieldPhoneValue(newFieldValueUnknown)) {
-      isViewFieldPhone(viewField) &&
-      isViewFieldPhoneValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // URL
-    } else if (
+    } else if (isFieldURL(field) && isFieldURLValue(newFieldValueUnknown)) {
-      isViewFieldURL(viewField) &&
-      isViewFieldURLValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Number
     } else if (
-      isViewFieldNumber(viewField) &&
+      isFieldNumber(field) &&
-      isViewFieldNumberValue(newFieldValueUnknown)
+      isFieldNumberValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Date
-    } else if (
+    } else if (isFieldDate(field) && isFieldDateValue(newFieldValueUnknown)) {
-      isViewFieldDate(viewField) &&
-      isViewFieldDateValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
     } else if (
-      isViewFieldProbability(viewField) &&
+      isFieldProbability(field) &&
-      isViewFieldProbabilityValue(newFieldValueUnknown)
+      isFieldProbabilityValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
     }

front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+import { FieldDefinition } from '../types/FieldDefinition';
+import { ViewFieldMetadata } from '../types/ViewField';
+
+export const EditableFieldDefinitionContext = createContext<
+  FieldDefinition<ViewFieldMetadata>
+>({} as FieldDefinition<ViewFieldMetadata>);

front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts

@@ -1,3 +1,3 @@
 import { createContext } from 'react';
 
-export const EditableFieldEntityIdContext = createContext<string | null>(null);
+export const EditableFieldEntityIdContext = createContext<string>('');

front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EditableFieldMutationContext = createContext<any>(undefined);

front/src/modules/ui/editable-field/types/FieldDefinition.ts

@@ -0,0 +1,9 @@
+import { FieldMetadata } from './FieldMetadata';
+
+export type FieldDefinition<T extends FieldMetadata | unknown> = {
+  id: string;
+  label: string;
+  icon?: JSX.Element;
+  type: string;
+  metadata: T;
+};

front/src/modules/ui/editable-field/types/FieldMetadata.ts

@@ -0,0 +1,113 @@
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export type FieldType =
+  | 'text'
+  | 'relation'
+  | 'chip'
+  | 'double-text-chip'
+  | 'double-text'
+  | 'number'
+  | 'date'
+  | 'phone'
+  | 'url'
+  | 'probability';
+
+export type FieldTextMetadata = {
+  type: 'text';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldPhoneMetadata = {
+  type: 'phone';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldURLMetadata = {
+  type: 'url';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldDateMetadata = {
+  type: 'date';
+  fieldName: string;
+};
+
+export type FieldNumberMetadata = {
+  type: 'number';
+  fieldName: string;
+};
+
+export type FieldRelationMetadata = {
+  type: 'relation';
+  relationType: Entity;
+  fieldName: string;
+};
+
+export type FieldChipMetadata = {
+  type: 'chip';
+  relationType: Entity;
+  contentFieldName: string;
+  urlFieldName: string;
+  placeHolder: string;
+};
+
+export type FieldDoubleTextMetadata = {
+  type: 'double-text';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+};
+
+export type FieldDoubleTextChipMetadata = {
+  type: 'double-text-chip';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+  avatarUrlFieldName: string;
+  entityType: Entity;
+};
+
+export type FieldProbabilityMetadata = {
+  type: 'probability';
+  fieldName: string;
+};
+
+export type FieldMetadata = { type: FieldType } & (
+  | FieldTextMetadata
+  | FieldRelationMetadata
+  | FieldChipMetadata
+  | FieldDoubleTextChipMetadata
+  | FieldDoubleTextMetadata
+  | FieldPhoneMetadata
+  | FieldURLMetadata
+  | FieldNumberMetadata
+  | FieldDateMetadata
+  | FieldProbabilityMetadata
+);
+
+export type FieldTextValue = string;
+
+export type FieldChipValue = string;
+export type FieldDateValue = string;
+export type FieldPhoneValue = string;
+export type FieldURLValue = string;
+export type FieldNumberValue = number | null;
+export type FieldProbabilityValue = number;
+
+export type FieldDoubleTextValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type FieldDoubleTextChipValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type FieldRelationValue = EntityForSelect | null;

front/src/modules/ui/editable-field/types/guards/isFieldChip.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldChipMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldChip(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldChipMetadata> {
+  return field.type === 'chip';
+}

front/src/modules/ui/editable-field/types/guards/isFieldChipValue.ts

@@ -0,0 +1,12 @@
+import { FieldChipValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldChipValue(
+  fieldValue: unknown,
+): fieldValue is FieldChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDate.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDateMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDate(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDateMetadata> {
+  return field.type === 'date';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDateValue.ts

@@ -0,0 +1,12 @@
+import { FieldDateValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDateValue(
+  fieldValue: unknown,
+): fieldValue is FieldDateValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleText.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDoubleTextMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDoubleText(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDoubleTextMetadata> {
+  return field.type === 'double-text';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChip.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDoubleTextChipMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDoubleTextChip(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDoubleTextChipMetadata> {
+  return field.type === 'double-text-chip';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChipValue.ts

@@ -0,0 +1,12 @@
+import { FieldDoubleTextChipValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDoubleTextChipValue(
+  fieldValue: unknown,
+): fieldValue is FieldDoubleTextChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextValue.ts

@@ -0,0 +1,12 @@
+import { FieldDoubleTextValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDoubleTextValue(
+  fieldValue: unknown,
+): fieldValue is FieldDoubleTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldNumber.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldNumberMetadata } from '../FieldMetadata';
+
+export function isFieldNumber(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldNumberMetadata> {
+  return field.type === 'number';
+}

front/src/modules/ui/editable-field/types/guards/isFieldNumberValue.ts

@@ -0,0 +1,12 @@
+import { FieldNumberValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldNumberValue(
+  fieldValue: unknown,
+): fieldValue is FieldNumberValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldPhone.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
+
+export function isFieldPhone(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldPhoneMetadata> {
+  return field.type === 'phone';
+}

front/src/modules/ui/editable-field/types/guards/isFieldPhoneValue.ts

@@ -0,0 +1,12 @@
+import { FieldPhoneValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldPhoneValue(
+  fieldValue: unknown,
+): fieldValue is FieldPhoneValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldProbability.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldProbabilityMetadata } from '../FieldMetadata';
+
+export function isFieldProbability(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldProbabilityMetadata> {
+  return field.type === 'probability';
+}

front/src/modules/ui/editable-field/types/guards/isFieldProbabilityValue.ts

@@ -0,0 +1,12 @@
+import { FieldProbabilityValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldProbabilityValue(
+  fieldValue: unknown,
+): fieldValue is FieldProbabilityValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldRelation.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldRelationMetadata } from '../FieldMetadata';
+
+export function isFieldRelation(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldRelationMetadata> {
+  return field.type === 'relation';
+}

front/src/modules/ui/editable-field/types/guards/isFieldRelationValue.ts

@@ -0,0 +1,12 @@
+import { FieldRelationValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldRelationValue(
+  fieldValue: unknown,
+): fieldValue is FieldRelationValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldText.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldTextMetadata } from '../FieldMetadata';
+
+export function isFieldText(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldTextMetadata> {
+  return field.type === 'text';
+}

front/src/modules/ui/editable-field/types/guards/isFieldTextValue.ts

@@ -0,0 +1,12 @@
+import { FieldTextValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldTextValue(
+  fieldValue: unknown,
+): fieldValue is FieldTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldURL.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldURLMetadata } from '../FieldMetadata';
+
+export function isFieldURL(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldURLMetadata> {
+  return field.type === 'url';
+}

front/src/modules/ui/editable-field/types/guards/isFieldURLValue.ts

@@ -0,0 +1,12 @@
+import { FieldURLValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldURLValue(
+  fieldValue: unknown,
+): fieldValue is FieldURLValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

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/input/checkbox/components/Checkbox.tsx

@@ -38,6 +38,7 @@ const StyledInput = styled.input<{
   variant: CheckboxVariant;
   indeterminate?: boolean;
   shape?: CheckboxShape;
+  isChecked: boolean;
 }>`
   cursor: pointer;
   margin: 0;
@@ -58,10 +59,10 @@ const StyledInput = styled.input<{
   & + label:before {
     --size: ${({ checkboxSize }) =>
       checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
-    background: ${({ theme, indeterminate }) =>
+    background: ${({ theme, indeterminate, isChecked }) =>
-      indeterminate ? theme.color.blue : 'transparent'};
+      indeterminate || isChecked ? theme.color.blue : 'transparent'};
-    border-color: ${({ theme, indeterminate, variant }) =>
+    border-color: ${({ theme, indeterminate, isChecked, variant }) =>
-      indeterminate
+      indeterminate || isChecked
         ? theme.color.blue
         : variant === CheckboxVariant.Primary
         ? theme.border.color.inverted
@@ -79,11 +80,6 @@ const StyledInput = styled.input<{
     width: var(--size);
   }
 
-  &:checked + label:before {
-    background: ${({ theme }) => theme.color.blue};
-    border-color: ${({ theme }) => theme.color.blue};
-  }
-
   & + label > svg {
     --padding: ${({ checkboxSize }) =>
       checkboxSize === CheckboxSize.Large ? '2px' : '1px'};
@@ -112,7 +108,6 @@ export function Checkbox({
   React.useEffect(() => {
     setIsInternalChecked(checked);
   }, [checked]);
-
   function handleChange(value: boolean) {
     onChange?.(value);
     setIsInternalChecked(!isInternalChecked);
@@ -130,6 +125,7 @@ export function Checkbox({
         variant={variant}
         checkboxSize={size}
         shape={shape}
+        isChecked={isInternalChecked}
         onChange={(event) => handleChange(event.target.checked)}
       />
       <label htmlFor="checkbox">

front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx

@@ -20,13 +20,13 @@ type OwnProps = {
 
 const checkUrlType = (url: string) => {
   if (
-    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/.test(
+    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
       url,
     )
   ) {
     return LinkType.LinkedIn;
   }
-  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?$/i)) {
+  if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
     return LinkType.Twitter;
   }
 

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

@@ -19,7 +19,20 @@ const StyledLayout = styled.div`
   flex-direction: row;
   height: 100vh;
   position: relative;
+  scrollbar-color: ${({ theme }) => theme.border.color.medium};
+
+  scrollbar-width: 4px;
   width: 100vw;
+
+  *::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.border.color.medium};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+  }
 `;
 
 const NAVBAR_WIDTH = '236px';

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;
+  onFavoriteButtonClick?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -24,8 +26,10 @@ export function WithTopBarContainer({
   children,
   title,
   hasBackButton,
+  isFavorite,
   icon,
   onAddButtonClick,
+  onFavoriteButtonClick,
 }: OwnProps) {
   return (
     <StyledContainer>
@@ -33,8 +37,10 @@ export function WithTopBarContainer({
       <PageBar
         title={title}
         hasBackButton={hasBackButton}
+        isFavorite={isFavorite}
         icon={icon}
         onAddButtonClick={onAddButtonClick}
+        onFavoriteButtonClick={onFavoriteButtonClick}
       />
       <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;
+  onFavoriteButtonClick?: () => void;
 };
 
 export function PageBar({
   title,
   hasBackButton,
+  isFavorite,
   icon,
   onAddButtonClick,
+  onFavoriteButtonClick,
 }: OwnProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
@@ -104,16 +113,28 @@ export function PageBar({
             </TitleContainer>
           </StyledTopBarIconTitleContainer>
         </StyledLeftContainer>
-        {onAddButtonClick && (
+        <ActionButtonsContainer>
-          <IconButton
+          {onFavoriteButtonClick && (
-            icon={<IconPlus size={16} />}
+            <IconButton
-            size="large"
+              icon={<IconHeart size={16} />}
-            data-testid="add-button"
+              size="large"
-            textColor="secondary"
+              data-testid="add-button"
-            onClick={onAddButtonClick}
+              textColor={isFavorite ? 'danger' : 'secondary'}
-            variant="border"
+              onClick={onFavoriteButtonClick}
-          />
+              variant="border"
-        )}
+            />
+          )}
+          {onAddButtonClick && (
+            <IconButton
+              icon={<IconPlus size={16} />}
+              size="large"
+              data-testid="add-button"
+              textColor="secondary"
+              onClick={onAddButtonClick}
+              variant="border"
+            />
+          )}
+        </ActionButtonsContainer>
       </TopBarContainer>
     </>
   );

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -14,6 +14,7 @@ export const ShowPageLeftContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};
+  overflow-y: scroll;
   padding: 0px ${({ theme }) => theme.spacing(3)};
   width: ${({ theme }) => {
     const isMobile = useIsMobile();

front/src/modules/ui/link/components/RoundedLink.tsx

@@ -30,7 +30,7 @@ export function RoundedLink({ children, href, onClick }: OwnProps) {
             <Chip
               label={`${children}`}
               variant={ChipVariant.Rounded}
-              size={ChipSize.Large}
+              size={ChipSize.Small}
             />
           </ReactLink>
         </StyledClickable>

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -9,7 +9,9 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode';
+import { useEditableCell } from '../hooks/useEditableCell';
 import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
+import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
 
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
@@ -39,6 +41,7 @@ type OwnProps = {
   editHotkeyScope?: HotkeyScope;
   transparent?: boolean;
   maxContentWidth?: number;
+  useEditButton?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -55,27 +58,19 @@ export function EditableCell({
   editHotkeyScope,
   transparent = false,
   maxContentWidth,
+  useEditButton,
 }: OwnProps) {
-  const { isCurrentCellInEditMode, setCurrentCellInEditMode } =
+  const { isCurrentCellInEditMode } = useCurrentCellEditMode();
-    useCurrentCellEditMode();
   const [isHovered, setIsHovered] = useState(false);
 
-  function isValidUrl(value: string) {
+  const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
-    let testUrl = value;
-    if (testUrl && !testUrl.startsWith('http')) {
-      testUrl = 'http://' + testUrl;
-    }
-    try {
-      new URL(testUrl);
-      return true;
-    } catch (err) {
-      return false;
-    }
-  }
 
-  const handleClick = () => {
+  const { openEditableCell } = useEditableCell();
-    setCurrentCellInEditMode();
+
-  };
+  function handlePenClick() {
+    setSoftFocusOnCurrentCell();
+    openEditableCell();
+  }
 
   function handleContainerMouseEnter() {
     setIsHovered(true);
@@ -85,9 +80,7 @@ export function EditableCell({
     setIsHovered(false);
   }
 
-  const value = nonEditModeContent.props.value;
+  const showEditButton = useEditButton && isHovered && !isCurrentCellInEditMode;
-  const showEditButton =
-    !isCurrentCellInEditMode && isValidUrl(value) && isHovered;
 
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
@@ -124,7 +117,7 @@ export function EditableCell({
                 <IconButton
                   variant="shadow"
                   size="small"
-                  onClick={handleClick}
+                  onClick={handlePenClick}
                   icon={<IconPencil size={14} />}
                 />
               </StyledEditButtonContainer>

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -16,9 +16,9 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
   margin-top: -1px;
 
   max-width: ${({ maxContentWidth }) =>
-    maxContentWidth ? `${maxContentWidth}px` : 'auto'};
+    maxContentWidth ? `${maxContentWidth}px` : 'none'};
   min-height: 100%;
-  min-width: 100%;
+  min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
 
   position: absolute;
   right: ${(props) =>

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx

@@ -21,6 +21,7 @@ export function GenericEditableRelationCell({
 }: OwnProps) {
   return (
     <EditableCell
+      maxContentWidth={160}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={

front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx

@@ -32,6 +32,7 @@ export function GenericEditableURLCell({
 
   return (
     <EditableCell
+      useEditButton
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
       nonEditModeContent={

front/src/pages/companies/CompanyShow.tsx

@@ -9,6 +9,7 @@ import { CompanyCreatedAtEditableField } from '@/companies/editable-field/compon
 import { CompanyDomainNameEditableField } from '@/companies/editable-field/components/CompanyDomainNameEditableField';
 import { CompanyEmployeesEditableField } from '@/companies/editable-field/components/CompanyEmployeesEditableField';
 import { useCompanyQuery } from '@/companies/queries';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@@ -23,19 +24,28 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
 
 export function CompanyShow() {
   const companyId = useParams().companyId ?? '';
-
+  const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
-  const { data } = useCompanyQuery(companyId);
-  const company = data?.findUniqueCompany;
 
   const theme = useTheme();
+  const { data } = useCompanyQuery(companyId);
+  const company = data?.findUniqueCompany;
+  const isFavorite =
+    company?.Favorite && company?.Favorite?.length > 0 ? true : false;
 
   if (!company) return <></>;
 
+  async function handleFavoriteButtonClick() {
+    if (isFavorite) deleteCompanyFavorite(companyId);
+    else insertCompanyFavorite(companyId);
+  }
+
   return (
     <WithTopBarContainer
       title={company?.name ?? ''}
       hasBackButton
+      isFavorite={isFavorite}
       icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
+      onFavoriteButtonClick={handleFavoriteButtonClick}
     >
       <ShowPageContainer>
         <ShowPageLeftContainer>

front/src/pages/people/PersonShow.tsx

@@ -3,6 +3,7 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 
 import { Timeline } from '@/activities/timeline/components/Timeline';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { PersonPropertyBox } from '@/people/components/PersonPropertyBox';
 import { GET_PERSON, usePersonQuery } from '@/people/queries';
 import { IconUser } from '@/ui/icon';
@@ -20,9 +21,12 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
 
 export function PersonShow() {
   const personId = useParams().personId ?? '';
+  const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
 
   const { data } = usePersonQuery(personId);
   const person = data?.findUniquePerson;
+  const isFavorite =
+    person?.Favorite && person?.Favorite?.length > 0 ? true : false;
 
   const theme = useTheme();
   const [uploadPicture] = useUploadPersonPictureMutation();
@@ -40,11 +44,18 @@ export function PersonShow() {
     });
   }
 
+  async function handleFavoriteButtonClick() {
+    if (isFavorite) deletePersonFavorite(personId);
+    else insertPersonFavorite(personId);
+  }
+
   return (
     <WithTopBarContainer
       title={person?.firstName ?? ''}
       icon={<IconUser size={theme.icon.size.md} />}
       hasBackButton
+      isFavorite={isFavorite}
+      onFavoriteButtonClick={handleFavoriteButtonClick}
     >
       <ShowPageContainer>
         <ShowPageLeftContainer>

front/src/utils/__tests__/is-domain.test.ts

@@ -0,0 +1,35 @@
+import { isDomain } from '~/utils/is-domain';
+
+describe('isDomain', () => {
+  it(`should return false if null`, () => {
+    expect(isDomain(null)).toBeFalsy();
+  });
+
+  it(`should return false if undefined`, () => {
+    expect(isDomain(undefined)).toBeFalsy();
+  });
+
+  it(`should return true if string google`, () => {
+    expect(isDomain('google')).toBeFalsy();
+  });
+
+  it(`should return true if string google.com`, () => {
+    expect(isDomain('google.com')).toBeTruthy();
+  });
+
+  it(`should return true if string bbc.co.uk`, () => {
+    expect(isDomain('bbc.co.uk')).toBeTruthy();
+  });
+
+  it(`should return true if string web.io`, () => {
+    expect(isDomain('web.io')).toBeTruthy();
+  });
+
+  it(`should return true if string x.com`, () => {
+    expect(isDomain('x.com')).toBeTruthy();
+  });
+
+  it(`should return true if string 2.com`, () => {
+    expect(isDomain('2.com')).toBeTruthy();
+  });
+});

front/src/utils/__tests__/is-url.test.ts

@@ -32,4 +32,12 @@ describe('isURL', () => {
   it(`should return true if string 2.com`, () => {
     expect(isURL('2.com')).toBeTruthy();
   });
+
+  it(`should return true if string https://2.com/test/`, () => {
+    expect(isURL('https://2.com/test/')).toBeTruthy();
+  });
+
+  it(`should return false if string https://2.com/test/sldkfj!?`, () => {
+    expect(isURL('https://2.com/test/sldkfj!?')).toBeFalsy();
+  });
 });

front/src/utils/is-domain.ts

@@ -0,0 +1,10 @@
+import { isDefined } from './isDefined';
+
+export function isDomain(url: string | undefined | null) {
+  return (
+    isDefined(url) &&
+    /^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/.test(
+      url,
+    )
+  );
+}

front/src/utils/is-url.ts

@@ -1,10 +1,14 @@
 import { isDefined } from './isDefined';
 
 export function isURL(url: string | undefined | null) {
-  return (
+  const pattern = new RegExp(
-    isDefined(url) &&
+    '^(https?:\\/\\/)?' +
-    /^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/.test(
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
-      url,
+      '((\\d{1,3}\\.){3}\\d{1,3}))' +
-    )
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+      '(\\?[;&a-z\\d%_.~+=-]*)?' +
+      '(\\#[-a-z\\d_]*)?$',
+    'i',
   );
+  return isDefined(url) && !!pattern.test(url);
 }

infra/dev/postgres/init.sql

@@ -6,3 +6,4 @@ CREATE DATABASE "test";
 
 -- Create a twenty user
 CREATE USER twenty PASSWORD 'twenty';
+ALTER USER twenty CREATEDB;

infra/prod/front/Dockerfile

@@ -13,6 +13,8 @@ COPY ./front .
 RUN yarn install
 RUN yarn build
 
+COPY ./infra/prod/front/serve.json ./build
+
 FROM node:18.16.0-alpine as front
 
 WORKDIR /app/front
@@ -20,4 +22,4 @@ COPY --from=build /app/front/build ./build
 
 RUN yarn global add serve
 
-CMD ["serve", "-s", "build"]
+CMD ["serve", "build"]

infra/prod/front/serve.json

@@ -0,0 +1,6 @@
+{
+  "rewrites": [
+    { "source": "!static/**", "destination": "/index.html" }
+  ],
+  "directoryListing": false
+}

server/src/ability/ability.factory.ts

@@ -19,6 +19,7 @@ import {
   UserSettings,
   View,
   ViewField,
+  Favorite,
   ViewSort,
 } from '@prisma/client';
 
@@ -41,6 +42,7 @@ type SubjectsAbility = Subjects<{
   UserSettings: UserSettings;
   View: View;
   ViewField: ViewField;
+  Favorite: Favorite;
   ViewSort: ViewSort;
 }>;
 
@@ -143,6 +145,12 @@ export class AbilityFactory {
     can(AbilityAction.Read, 'ViewField', { workspaceId: workspace.id });
     can(AbilityAction.Create, 'ViewField', { workspaceId: workspace.id });
     can(AbilityAction.Update, 'ViewField', { workspaceId: workspace.id });
+    //Favorite
+    can(AbilityAction.Read, 'Favorite', { workspaceId: workspace.id });
+    can(AbilityAction.Create, 'Favorite');
+    can(AbilityAction.Delete, 'Favorite', {
+      workspaceId: workspace.id,
+    });
 
     // ViewSort
     can(AbilityAction.Read, 'ViewSort', { workspaceId: workspace.id });

server/src/ability/ability.module.ts

@@ -99,6 +99,11 @@ import {
   ReadViewFieldAbilityHandler,
   UpdateViewFieldAbilityHandler,
 } from './handlers/view-field.ability-handler';
+import {
+  CreateFavoriteAbilityHandler,
+  ReadFavoriteAbilityHandler,
+  DeleteFavoriteAbilityHandler,
+} from './handlers/favorite.ability-handler';
 import {
   CreateViewSortAbilityHandler,
   ReadViewSortAbilityHandler,
@@ -193,6 +198,10 @@ import {
     ReadViewFieldAbilityHandler,
     CreateViewFieldAbilityHandler,
     UpdateViewFieldAbilityHandler,
+    //Favorite
+    ReadFavoriteAbilityHandler,
+    CreateFavoriteAbilityHandler,
+    DeleteFavoriteAbilityHandler,
     // ViewSort
     ReadViewSortAbilityHandler,
     CreateViewSortAbilityHandler,
@@ -283,6 +292,10 @@ import {
     ReadViewFieldAbilityHandler,
     CreateViewFieldAbilityHandler,
     UpdateViewFieldAbilityHandler,
+    //Favorite
+    ReadFavoriteAbilityHandler,
+    CreateFavoriteAbilityHandler,
+    DeleteFavoriteAbilityHandler,
     // ViewSort
     ReadViewSortAbilityHandler,
     CreateViewSortAbilityHandler,

server/src/ability/handlers/favorite.ability-handler.ts

@@ -0,0 +1,74 @@
+import {
+  ExecutionContext,
+  Injectable,
+  NotFoundException,
+} from '@nestjs/common';
+import { GqlExecutionContext } from '@nestjs/graphql';
+
+import { subject } from '@casl/ability';
+
+import { IAbilityHandler } from 'src/ability/interfaces/ability-handler.interface';
+
+import { PrismaService } from 'src/database/prisma.service';
+import { AbilityAction } from 'src/ability/ability.action';
+import { AppAbility } from 'src/ability/ability.factory';
+import { relationAbilityChecker } from 'src/ability/ability.util';
+import { FavoriteWhereInput } from 'src/core/@generated/favorite/favorite-where.input';
+import { assert } from 'src/utils/assert';
+
+class FavoriteArgs {
+  where?: FavoriteWhereInput;
+}
+
+@Injectable()
+export class ManageFavoriteAbilityHandler implements IAbilityHandler {
+  async handle(ability: AppAbility) {
+    return ability.can(AbilityAction.Manage, 'Favorite');
+  }
+}
+
+@Injectable()
+export class ReadFavoriteAbilityHandler implements IAbilityHandler {
+  handle(ability: AppAbility) {
+    return ability.can(AbilityAction.Read, 'Favorite');
+  }
+}
+
+@Injectable()
+export class CreateFavoriteAbilityHandler implements IAbilityHandler {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  async handle(ability: AppAbility, context: ExecutionContext) {
+    const gqlContext = GqlExecutionContext.create(context);
+    const args = gqlContext.getArgs();
+
+    const allowed = await relationAbilityChecker(
+      'Favorite',
+      ability,
+      this.prismaService.client,
+      args,
+    );
+
+    if (!allowed) {
+      return false;
+    }
+
+    return ability.can(AbilityAction.Create, 'Favorite');
+  }
+}
+
+@Injectable()
+export class DeleteFavoriteAbilityHandler implements IAbilityHandler {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  async handle(ability: AppAbility, context: ExecutionContext) {
+    const gqlContext = GqlExecutionContext.create(context);
+    const args = gqlContext.getArgs<FavoriteArgs>();
+    const favorite = await this.prismaService.client.favorite.findFirst({
+      where: args.where,
+    });
+    assert(favorite, '', NotFoundException);
+
+    return ability.can(AbilityAction.Delete, subject('Favorite', favorite));
+  }
+}

server/src/core/core.module.ts

@@ -13,6 +13,7 @@ import { ClientConfigModule } from './client-config/client-config.module';
 import { AttachmentModule } from './attachment/attachment.module';
 import { ActivityModule } from './activity/activity.module';
 import { ViewModule } from './view/view.module';
+import { FavoriteModule } from './favorite/favorite.module';
 
 @Module({
   imports: [
@@ -29,6 +30,7 @@ import { ViewModule } from './view/view.module';
     AttachmentModule,
     ActivityModule,
     ViewModule,
+    FavoriteModule,
   ],
   exports: [
     AuthModule,
@@ -40,6 +42,7 @@ import { ViewModule } from './view/view.module';
     WorkspaceModule,
     AnalyticsModule,
     AttachmentModule,
+    FavoriteModule,
   ],
 })
 export class CoreModule {}

server/src/core/favorite/favorite.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+
+import { FavoriteResolver } from './resolvers/favorite.resolver';
+import { FavoriteService } from './services/favorite.service';
+
+@Module({
+  providers: [FavoriteService, FavoriteResolver],
+  exports: [FavoriteService],
+})
+export class FavoriteModule {}

server/src/core/favorite/resolvers/favorite.resolver.ts

@@ -0,0 +1,143 @@
+import { Resolver, Query, Args, Mutation } from '@nestjs/graphql';
+import { UseGuards } from '@nestjs/common';
+import { InputType } from '@nestjs/graphql';
+import { Field } from '@nestjs/graphql';
+
+import { Workspace } from '@prisma/client';
+
+import {
+  PrismaSelect,
+  PrismaSelector,
+} from 'src/decorators/prisma-select.decorator';
+import { JwtAuthGuard } from 'src/guards/jwt.auth.guard';
+import { Favorite } from 'src/core/@generated/favorite/favorite.model';
+import { AbilityGuard } from 'src/guards/ability.guard';
+import { CheckAbilities } from 'src/decorators/check-abilities.decorator';
+import {
+  CreateFavoriteAbilityHandler,
+  DeleteFavoriteAbilityHandler,
+  ReadFavoriteAbilityHandler,
+} from 'src/ability/handlers/favorite.ability-handler';
+import { AuthWorkspace } from 'src/decorators/auth-workspace.decorator';
+import { FavoriteService } from 'src/core/favorite/services/favorite.service';
+import { FavoriteWhereInput } from 'src/core/@generated/favorite/favorite-where.input';
+
+@InputType()
+class FavoriteMutationForPersonArgs {
+  @Field(() => String)
+  personId: string;
+}
+
+@InputType()
+class FavoriteMutationForCompanyArgs {
+  @Field(() => String)
+  companyId: string;
+}
+
+@UseGuards(JwtAuthGuard)
+@Resolver(() => Favorite)
+export class FavoriteResolver {
+  constructor(private readonly favoriteService: FavoriteService) {}
+
+  @Query(() => [Favorite])
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(ReadFavoriteAbilityHandler)
+  async findFavorites(
+    @AuthWorkspace() workspace: Workspace,
+  ): Promise<Partial<Favorite>[]> {
+    const favorites = await this.favoriteService.findMany({
+      where: {
+        workspaceId: workspace.id,
+      },
+      include: {
+        person: true,
+        company: {
+          include: {
+            accountOwner: true,
+          },
+        },
+      },
+    });
+
+    return favorites;
+  }
+
+  @Mutation(() => Favorite, {
+    nullable: false,
+  })
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(CreateFavoriteAbilityHandler)
+  async createFavoriteForPerson(
+    @Args('data') args: FavoriteMutationForPersonArgs,
+    @AuthWorkspace() workspace: Workspace,
+    @PrismaSelector({ modelName: 'Favorite' })
+    prismaSelect: PrismaSelect<'Favorite'>,
+  ): Promise<Partial<Favorite>> {
+    //To avoid duplicates we first fetch all favorites assinged by workspace
+    const favorite = await this.favoriteService.findFirst({
+      where: { workspaceId: workspace.id, personId: args.personId },
+    });
+
+    if (favorite) return favorite;
+
+    return this.favoriteService.create({
+      data: {
+        person: {
+          connect: { id: args.personId },
+        },
+        workspaceId: workspace.id,
+      },
+      select: prismaSelect.value,
+    });
+  }
+
+  @Mutation(() => Favorite, {
+    nullable: false,
+  })
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(CreateFavoriteAbilityHandler)
+  async createFavoriteForCompany(
+    @Args('data') args: FavoriteMutationForCompanyArgs,
+    @AuthWorkspace() workspace: Workspace,
+    @PrismaSelector({ modelName: 'Favorite' })
+    prismaSelect: PrismaSelect<'Favorite'>,
+  ): Promise<Partial<Favorite>> {
+    //To avoid duplicates we first fetch all favorites assinged by workspace
+    const favorite = await this.favoriteService.findFirst({
+      where: { workspaceId: workspace.id, companyId: args.companyId },
+    });
+
+    if (favorite) return favorite;
+
+    return this.favoriteService.create({
+      data: {
+        company: {
+          connect: { id: args.companyId },
+        },
+        workspaceId: workspace.id,
+      },
+      select: prismaSelect.value,
+    });
+  }
+
+  @Mutation(() => Favorite, {
+    nullable: false,
+  })
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(DeleteFavoriteAbilityHandler)
+  async deleteFavorite(
+    @Args('where') args: FavoriteWhereInput,
+    @AuthWorkspace() workspace: Workspace,
+    @PrismaSelector({ modelName: 'Favorite' })
+    prismaSelect: PrismaSelect<'Favorite'>,
+  ): Promise<Partial<Favorite>> {
+    const favorite = await this.favoriteService.findFirst({
+      where: { ...args, workspaceId: workspace.id },
+    });
+
+    return this.favoriteService.delete({
+      where: { id: favorite?.id },
+      select: prismaSelect.value,
+    });
+  }
+}

server/src/core/favorite/services/favorite.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@nestjs/common';
+
+import { PrismaService } from 'src/database/prisma.service';
+
+@Injectable()
+export class FavoriteService {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  // Find
+  findFirst = this.prismaService.client.favorite.findFirst;
+  findFirstOrThrow = this.prismaService.client.favorite.findFirstOrThrow;
+
+  findUnique = this.prismaService.client.favorite.findUnique;
+  findUniqueOrThrow = this.prismaService.client.favorite.findUniqueOrThrow;
+
+  findMany = this.prismaService.client.favorite.findMany;
+
+  // Create
+  create = this.prismaService.client.favorite.create;
+  createMany = this.prismaService.client.favorite.createMany;
+
+  // Update
+  update = this.prismaService.client.favorite.update;
+  upsert = this.prismaService.client.favorite.upsert;
+  updateMany = this.prismaService.client.favorite.updateMany;
+
+  // Delete
+  delete = this.prismaService.client.favorite.delete;
+  deleteMany = this.prismaService.client.favorite.deleteMany;
+
+  // Aggregate
+  aggregate = this.prismaService.client.favorite.aggregate;
+
+  // Count
+  count = this.prismaService.client.favorite.count;
+
+  // GroupBy
+  groupBy = this.prismaService.client.favorite.groupBy;
+}

server/src/database/migrations/20230809143432_add_views_table/migration.sql

@@ -27,12 +27,6 @@ CREATE UNIQUE INDEX "views_workspaceId_type_objectId_name_key" ON "views"("works
 -- CreateIndex
 CREATE UNIQUE INDEX "viewFields_workspaceId_viewId_objectName_fieldName_key" ON "viewFields"("workspaceId", "viewId", "objectName", "fieldName");
 
--- AddForeignKey
-ALTER TABLE "pipeline_progresses" ADD CONSTRAINT "pipeline_progresses_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "companies"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "pipeline_progresses" ADD CONSTRAINT "pipeline_progresses_personId_fkey" FOREIGN KEY ("personId") REFERENCES "people"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-
 -- AddForeignKey
 ALTER TABLE "views" ADD CONSTRAINT "views_workspaceId_fkey" FOREIGN KEY ("workspaceId") REFERENCES "workspaces"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
 

server/src/database/migrations/20230810222531_add_favorites/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "favorites" (
+    "id" TEXT NOT NULL,
+    "workspaceId" TEXT,
+    "personId" TEXT,
+    "companyId" TEXT,
+    "workspaceMemberId" TEXT,
+
+    CONSTRAINT "favorites_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "favorites" ADD CONSTRAINT "favorites_personId_fkey" FOREIGN KEY ("personId") REFERENCES "people"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "favorites" ADD CONSTRAINT "favorites_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "companies"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "favorites" ADD CONSTRAINT "favorites_workspaceMemberId_fkey" FOREIGN KEY ("workspaceMemberId") REFERENCES "workspace_members"("id") ON DELETE SET NULL ON UPDATE CASCADE;

server/src/database/schema.prisma

@@ -205,8 +205,9 @@ model WorkspaceMember {
   /// @TypeGraphQL.omit(input: true, output: true)
   deletedAt DateTime?
 
-  createdAt DateTime @default(now())
+  createdAt DateTime   @default(now())
-  updatedAt DateTime @updatedAt
+  updatedAt DateTime   @updatedAt
+  Favorite  Favorite[]
 
   @@map("workspace_members")
 }
@@ -246,6 +247,7 @@ model Company {
   updatedAt        DateTime           @updatedAt
   ActivityTarget   ActivityTarget[]
   PipelineProgress PipelineProgress[]
+  Favorite         Favorite[]
 
   @@map("companies")
 }
@@ -282,7 +284,7 @@ model Person {
   /// @Validator.IsOptional()
   avatarUrl   String?
 
-  company                   Company?           @relation(fields: [companyId], references: [id])
+  company                   Company?           @relation(fields: [companyId], references: [id], onDelete: SetNull)
   companyId                 String?
   /// @TypeGraphQL.omit(input: true, output: true)
   workspace                 Workspace          @relation(fields: [workspaceId], references: [id])
@@ -297,6 +299,7 @@ model Person {
   updatedAt        DateTime           @updatedAt
   ActivityTarget   ActivityTarget[]
   PipelineProgress PipelineProgress[]
+  Favorite         Favorite[]
 
   @@map("people")
 }
@@ -407,10 +410,10 @@ model ActivityTarget {
   workspaceId     String
 
   personId String?
-  person   Person? @relation(fields: [personId], references: [id])
+  person   Person? @relation(fields: [personId], references: [id], onDelete: Cascade)
 
   companyId String?
-  company   Company? @relation(fields: [companyId], references: [id])
+  company   Company? @relation(fields: [companyId], references: [id], onDelete: Cascade)
 
   /// @TypeGraphQL.omit(input: true, output: true)
   deletedAt DateTime?
@@ -514,10 +517,10 @@ model PipelineProgress {
   updatedAt DateTime @updatedAt
 
   companyId String?
-  company   Company? @relation(fields: [companyId], references: [id])
+  company   Company? @relation(fields: [companyId], references: [id], onDelete: Cascade)
 
   personId String?
-  person   Person? @relation(fields: [personId], references: [id])
+  person   Person? @relation(fields: [personId], references: [id], onDelete: Cascade)
 
   @@map("pipeline_progresses")
 }
@@ -559,6 +562,22 @@ model Attachment {
   @@map("attachments")
 }
 
+model Favorite {
+  id                String           @id @default(uuid())
+  workspaceId       String?
+  /// @TypeGraphQL.omit(input: true, output: false)
+  person            Person?          @relation(fields: [personId], references: [id])
+  personId          String?
+  /// @TypeGraphQL.omit(input: true, output: false)
+  company           Company?         @relation(fields: [companyId], references: [id])
+  companyId         String?
+  /// @TypeGraphQL.omit(input: true, output: false)
+  workspaceMember   WorkspaceMember? @relation(fields: [workspaceMemberId], references: [id])
+  workspaceMemberId String?
+
+  @@map("favorites")
+}
+
 enum ViewType {
   Table
   Pipeline

server/src/utils/prisma-select/model-select-map.ts

@@ -16,6 +16,7 @@ export type ModelSelectMap = {
   PipelineStage: Prisma.PipelineStageSelect;
   PipelineProgress: Prisma.PipelineProgressSelect;
   Attachment: Prisma.AttachmentSelect;
+  Favorite: Prisma.FavoriteSelect;
   View: Prisma.ViewSelect;
   ViewSort: Prisma.ViewSortSelect;
   ViewField: Prisma.ViewFieldSelect;