New view picker (#4610)

* Implement new view picker * Complete feature * Fixes according to review
2024-03-22 15:04:17 +01:00
parent d876b40056
commit 4a493b6ecf
61 changed files with 1216 additions and 422 deletions
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@ -0,0 +1,100 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { IconChevronDown, IconList } from '@/ui/display/icon';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
+import { ViewPickerCreateOrEditContent } from '@/views/view-picker/components/ViewPickerCreateOrEditContent';
+import { ViewPickerCreateOrEditContentEffect } from '@/views/view-picker/components/ViewPickerCreateOrEditContentEffect';
+import { ViewPickerListContent } from '@/views/view-picker/components/ViewPickerListContent';
+import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
+import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+
+import { useViewStates } from '../../hooks/internal/useViewStates';
+
+const StyledDropdownLabelAdornments = styled.span`
+  align-items: center;
+  color: ${({ theme }) => theme.grayScale.gray35};
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledViewName = styled.span`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  display: inline-block;
+  max-width: 130px;
+  @media (max-width: 375px) {
+    max-width: 90px;
+  }
+  @media (min-width: 376px) and (max-width: ${MOBILE_VIEWPORT}px) {
+    max-width: 110px;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+`;
+
+export const ViewPickerDropdown = () => {
+  const theme = useTheme();
+
+  const { entityCountInCurrentViewState } = useViewStates();
+
+  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+
+  const entityCountInCurrentView = useRecoilValue(
+    entityCountInCurrentViewState,
+  );
+
+  const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
+    VIEW_PICKER_DROPDOWN_ID,
+  );
+
+  const { viewPickerMode, setViewPickerMode } = useViewPickerMode();
+
+  const { getIcon } = useIcons();
+  const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon);
+
+  return (
+    <Dropdown
+      dropdownId={VIEW_PICKER_DROPDOWN_ID}
+      dropdownHotkeyScope={{ scope: ViewsHotkeyScope.ListDropdown }}
+      dropdownOffset={{ x: 0, y: 8 }}
+      dropdownMenuWidth={200}
+      onClickOutside={() => setViewPickerMode('list')}
+      clickableComponent={
+        <StyledDropdownButtonContainer isUnfolded={isViewsListDropdownOpen}>
+          {currentViewWithCombinedFiltersAndSorts && CurrentViewIcon ? (
+            <CurrentViewIcon size={theme.icon.size.md} />
+          ) : (
+            <IconList size={theme.icon.size.md} />
+          )}
+          <StyledViewName>
+            {currentViewWithCombinedFiltersAndSorts?.name ?? 'All'}
+          </StyledViewName>
+          <StyledDropdownLabelAdornments>
+            · {entityCountInCurrentView}{' '}
+            <IconChevronDown size={theme.icon.size.sm} />
+          </StyledDropdownLabelAdornments>
+        </StyledDropdownButtonContainer>
+      }
+      dropdownComponents={
+        viewPickerMode === 'list' ? (
+          <ViewPickerListContent />
+        ) : (
+          <>
+            <ViewPickerCreateOrEditContent />
+            <ViewPickerCreateOrEditContentEffect />
+          </>
+        )
+      }
+    />
+  );
+};