[WEB-4885] feat: new filters architecture and UI components

apps/web/core/components/dropdowns/date-range.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { ArrowRight, CalendarCheck2, CalendarDays, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -59,6 +60,8 @@ type Props = {
   renderPlaceholder?: boolean;
   customTooltipContent?: React.ReactNode;
   customTooltipHeading?: string;
+  defaultOpen?: boolean;
+  renderInPortal?: boolean;
 };
 
 export const DateRangeDropdown: React.FC<Props> = observer((props) => {
@@ -93,9 +96,11 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
     renderPlaceholder = true,
     customTooltipContent,
     customTooltipHeading,
+    defaultOpen = false,
+    renderInPortal = false,
   } = props;
   // states
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const [dateRange, setDateRange] = useState<DateRange>(value);
   // hooks
   const { data } = useUserProfile();
@@ -193,7 +198,9 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
               renderPlaceholder && (
                 <>
                   <span className="text-custom-text-400">{placeholder.from}</span>
-                  <ArrowRight className="h-3 w-3 flex-shrink-0 text-custom-text-400" />
+                  {placeholder.from && placeholder.to && (
+                    <ArrowRight className="h-3 w-3 flex-shrink-0 text-custom-text-400" />
+                  )}
                   <span className="text-custom-text-400">{placeholder.to}</span>
                 </>
               )
@@ -247,6 +254,34 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
     </button>
   );
 
+  const comboOptions = (
+    <Combobox.Options data-prevent-outside-click static>
+      <div
+        className="my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <Calendar
+          className="rounded-md border border-custom-border-200 p-3"
+          captionLayout="dropdown"
+          selected={dateRange}
+          onSelect={(val: DateRange | undefined) => {
+            onSelect?.(val);
+          }}
+          mode="range"
+          disabled={disabledDays}
+          showOutsideDays
+          fixedWeeks
+          weekStartsOn={startOfWeek}
+          initialFocus
+        />
+      </div>
+    </Combobox.Options>
+  );
+
+  const Options = renderInPortal ? createPortal(comboOptions, document.body) : comboOptions;
+
   return (
     <ComboDropDown
       as="div"
@@ -262,31 +297,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
       disabled={disabled}
       renderByDefault={renderByDefault}
     >
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <Calendar
-              className="rounded-md border border-custom-border-200 p-3"
-              captionLayout="dropdown"
-              selected={dateRange}
-              onSelect={(val: DateRange | undefined) => {
-                onSelect?.(val);
-              }}
-              mode="range"
-              disabled={disabledDays}
-              showOutsideDays
-              fixedWeeks
-              weekStartsOn={startOfWeek}
-              initialFocus
-            />
-          </div>
-        </Combobox.Options>
-      )}
+      {isOpen && Options}
     </ComboDropDown>
   );
 });

apps/web/core/components/dropdowns/date.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
@@ -21,6 +23,7 @@ import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
+  defaultOpen?: boolean;
   optionsClassName?: string;
   icon?: React.ReactNode;
   isClearable?: boolean;
@@ -41,6 +44,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
     buttonVariant,
     className = "",
     clearIconClassName = "",
+    defaultOpen = false,
     optionsClassName = "",
     closeOnSelect = true,
     disabled = false,
@@ -60,7 +64,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
     renderByDefault = true,
   } = props;
   // states
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   // hooks

apps/web/core/components/rich-filters/add-filters-button.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { ListFilter } from "lucide-react";
+// plane imports
+import { IFilterInstance } from "@plane/shared-state";
+import { LOGICAL_OPERATOR, TExternalFilter, TFilterProperty } from "@plane/types";
+import { CustomSearchSelect, getButtonStyling, TButtonVariant } from "@plane/ui";
+import { cn, getOperatorForPayload } from "@plane/utils";
+
+export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {
+  buttonConfig?: {
+    label?: string;
+    variant?: TButtonVariant;
+    className?: string;
+    defaultOpen?: boolean;
+    iconConfig?: {
+      shouldShowIcon: boolean;
+      iconComponent?: React.ReactNode;
+    };
+    isDisabled?: boolean;
+  };
+  filter: IFilterInstance<P, E>;
+  onFilterSelect?: (id: string) => void;
+};
+
+export const AddFilterButton = observer(
+  <P extends TFilterProperty, E extends TExternalFilter>(props: TAddFilterButtonProps<P, E>) => {
+    const { filter, buttonConfig, onFilterSelect } = props;
+    const {
+      label = "Filters",
+      variant = "link-neutral",
+      className,
+      defaultOpen = false,
+      iconConfig = { shouldShowIcon: true },
+      isDisabled = false,
+    } = buttonConfig || {};
+
+    // Transform available filter configs to CustomSearchSelect options format
+    const filterOptions = filter.configManager.allAvailableConfigs.map((config) => ({
+      value: config.id,
+      content: (
+        <div className="flex items-center gap-2 text-custom-text-200 transition-all duration-200 ease-in-out">
+          {config.icon && (
+            <config.icon className="size-4 text-custom-text-300 transition-transform duration-200 ease-in-out" />
+          )}
+          <span>{config.label}</span>
+        </div>
+      ),
+      query: config.label.toLowerCase(),
+    }));
+
+    // If all filters are applied, show disabled options
+    const allFiltersApplied = filterOptions.length === 0;
+    const displayOptions = allFiltersApplied
+      ? [
+          {
+            value: "all_filters_applied",
+            content: <div className="text-custom-text-400 italic">All filters applied</div>,
+            query: "all filters applied",
+            disabled: true,
+          },
+        ]
+      : filterOptions;
+
+    const handleFilterSelect = (property: P) => {
+      const config = filter.configManager.getConfigByProperty(property);
+      if (config && config.firstOperator) {
+        const { operator, isNegation } = getOperatorForPayload(config.firstOperator);
+        filter.addCondition(
+          LOGICAL_OPERATOR.AND,
+          {
+            property: config.id,
+            operator,
+            value: undefined,
+          },
+          isNegation
+        );
+        onFilterSelect?.(property);
+      }
+    };
+
+    if (isDisabled) return null;
+    return (
+      <div className="relative transition-all duration-200 ease-in-out">
+        <CustomSearchSelect
+          defaultOpen={defaultOpen}
+          value={""}
+          onChange={handleFilterSelect}
+          options={displayOptions}
+          optionsClassName="w-56"
+          maxHeight="full"
+          placement="bottom-start"
+          disabled={isDisabled}
+          customButtonClassName={cn(getButtonStyling(variant, "sm"), className)}
+          customButton={
+            <div className="flex items-center gap-1">
+              {iconConfig.shouldShowIcon &&
+                (iconConfig.iconComponent || <ListFilter className="size-4 text-custom-text-200" />)}
+              {label}
+            </div>
+          }
+        />
+      </div>
+    );
+  }
+);