feat: init

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

@@ -0,0 +1,133 @@
+"use client";
+import React from "react";
+// helpers
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
+import type { TButtonVariants } from "./types";
+
+export type DropdownButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string | React.ReactNode | null;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  variant: TButtonVariants;
+  renderToolTipByDefault?: boolean;
+};
+
+type ButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string | React.ReactNode | null;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+  const {
+    children,
+    className,
+    isActive,
+    tooltipContent,
+    renderToolTipByDefault = true,
+    tooltipHeading,
+    showTooltip,
+    variant,
+  } = props;
+  const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
+    ? BorderButton
+    : BACKGROUND_BUTTON_VARIANTS.includes(variant)
+      ? BackgroundButton
+      : TransparentButton;
+
+  return (
+    <ButtonToRender
+      className={className}
+      isActive={isActive}
+      tooltipContent={tooltipContent}
+      tooltipHeading={tooltipHeading}
+      showTooltip={showTooltip}
+      renderToolTipByDefault={renderToolTipByDefault}
+    >
+      {children}
+    </ButtonToRender>
+  );
+};
+
+const BorderButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, isActive, tooltipContent, renderToolTipByDefault, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton: React.FC<ButtonProps> = (props) => {
+  const { children, className, isActive, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={<>{tooltipContent}</>}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};

apps/web/core/components/dropdowns/constants.ts

@@ -0,0 +1,20 @@
+// types
+import type { TButtonVariants } from "./types";
+
+export const BORDER_BUTTON_VARIANTS: TButtonVariants[] = ["border-with-text", "border-without-text"];
+
+export const BACKGROUND_BUTTON_VARIANTS: TButtonVariants[] = ["background-with-text", "background-without-text"];
+
+export const TRANSPARENT_BUTTON_VARIANTS: TButtonVariants[] = ["transparent-with-text", "transparent-without-text"];
+
+export const BUTTON_VARIANTS_WITHOUT_TEXT: TButtonVariants[] = [
+  "border-without-text",
+  "background-without-text",
+  "transparent-without-text",
+];
+
+export const BUTTON_VARIANTS_WITH_TEXT: TButtonVariants[] = [
+  "border-with-text",
+  "background-with-text",
+  "transparent-with-text",
+];

apps/web/core/components/dropdowns/cycle/cycle-options.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+// components
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// icon
+import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// ui
+// store hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+type CycleOptionsProps = {
+  projectId: string;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+  canRemoveCycle: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
+  const { projectId, isOpen, referenceElement, placement, canRemoveCycle, currentCycleId } = props;
+  // i18n
+  const { t } = useTranslation();
+  //state hooks
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const cycleIds = (getProjectCycleIds(projectId) ?? [])?.filter((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    if (currentCycleId && currentCycleId === cycleId) return false;
+    return cycleDetails?.status ? (cycleDetails?.status.toLowerCase() != "completed" ? true : false) : true;
+  });
+
+  const onOpen = () => {
+    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = cycleIds?.map((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    const cycleStatus = cycleDetails?.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+
+    return {
+      value: cycleId,
+      query: `${cycleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
+          <span className="flex-grow truncate">{cycleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  if (canRemoveCycle) {
+    options?.unshift({
+      value: null,
+      query: t("cycle.no_cycle"),
+      content: (
+        <div className="flex items-center gap-2">
+          <CycleIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
+        </div>
+      ),
+    });
+  }
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("common.search.label")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
+                      active ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});

apps/web/core/components/dropdowns/cycle/index.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { ChevronDown } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CycleIcon } from "@plane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useDropdown } from "@/hooks/use-dropdown";
+// local components and constants
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { CycleOptions } from "./cycle-options";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | null) => void;
+  onClose?: () => void;
+  projectId: string | undefined;
+  value: string | null;
+  canRemoveCycle?: boolean;
+  renderByDefault?: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleDropdown: React.FC<Props> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+    canRemoveCycle = true,
+    renderByDefault = true,
+    currentCycleId,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getCycleNameById } = useCycle();
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  const selectedName = value ? getCycleNameById(value) : null;
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string | null) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full w-full outline-none hover:bg-custom-background-80",
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading={t("common.cycle")}
+            tooltipContent={selectedName ?? placeholder}
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
+              <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
+            )}
+            {dropdownArrow && (
+              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && projectId && (
+        <CycleOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+          canRemoveCycle={canRemoveCycle}
+          currentCycleId={currentCycleId}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,304 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import type { 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";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// ui
+import type { DateRange, Matcher } from "@plane/propel/calendar";
+import { Calendar } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
+import { cn, renderFormattedDate } from "@plane/utils";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+import { MergedDateDisplay } from "./merged-date";
+// types
+import type { TButtonVariants } from "./types";
+
+type Props = {
+  applyButtonText?: string;
+  bothRequired?: boolean;
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonFromDateClassName?: string;
+  buttonToDateClassName?: string;
+  buttonVariant: TButtonVariants;
+  cancelButtonText?: string;
+  className?: string;
+  clearIconClassName?: string;
+  disabled?: boolean;
+  hideIcon?: {
+    from?: boolean;
+    to?: boolean;
+  };
+  isClearable?: boolean;
+  mergeDates?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  onSelect?: (range: DateRange | undefined) => void;
+  placeholder?: {
+    from?: string;
+    to?: string;
+  };
+  placement?: Placement;
+  required?: boolean;
+  showTooltip?: boolean;
+  tabIndex?: number;
+  value: {
+    from: Date | undefined;
+    to: Date | undefined;
+  };
+  renderByDefault?: boolean;
+  renderPlaceholder?: boolean;
+  customTooltipContent?: React.ReactNode;
+  customTooltipHeading?: string;
+  defaultOpen?: boolean;
+  renderInPortal?: boolean;
+};
+
+export const DateRangeDropdown: React.FC<Props> = observer((props) => {
+  const { t } = useTranslation();
+  const {
+    buttonClassName,
+    buttonContainerClassName,
+    buttonFromDateClassName,
+    buttonToDateClassName,
+    buttonVariant,
+    className,
+    clearIconClassName = "",
+    disabled = false,
+    hideIcon = {
+      from: true,
+      to: true,
+    },
+    isClearable = false,
+    mergeDates,
+    minDate,
+    maxDate,
+    onSelect,
+    placeholder = {
+      from: t("project_cycles.add_date"),
+      to: t("project_cycles.add_date"),
+    },
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value,
+    renderByDefault = true,
+    renderPlaceholder = true,
+    customTooltipContent,
+    customTooltipHeading,
+    defaultOpen = false,
+    renderInPortal = false,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [dateRange, setDateRange] = useState<DateRange>(value);
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
+  const { handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onOpen,
+    setIsOpen,
+  });
+
+  const disabledDays: Matcher[] = [];
+  if (minDate) disabledDays.push({ before: minDate });
+  if (maxDate) disabledDays.push({ after: maxDate });
+
+  const clearDates = () => {
+    const clearedRange = { from: undefined, to: undefined };
+    setDateRange(clearedRange);
+    onSelect?.(clearedRange);
+  };
+
+  const hasDisplayedDates = dateRange.from || dateRange.to;
+
+  useEffect(() => {
+    setDateRange(value);
+  }, [value]);
+
+  const comboButton = (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-custom-text-200": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={customTooltipHeading ?? t("project_cycles.date_range")}
+        tooltipContent={
+          <>
+            {customTooltipContent ?? (
+              <>
+                {dateRange.from ? renderFormattedDate(dateRange.from) : ""}
+                {dateRange.from && dateRange.to ? " - " : ""}
+                {dateRange.to ? renderFormattedDate(dateRange.to) : ""}
+              </>
+            )}
+          </>
+        }
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {mergeDates ? (
+          // Merged date display
+          <div className="flex items-center gap-1.5 w-full">
+            {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
+            {dateRange.from || dateRange.to ? (
+              <MergedDateDisplay
+                startDate={dateRange.from}
+                endDate={dateRange.to}
+                className="flex-grow truncate text-xs"
+              />
+            ) : (
+              renderPlaceholder && (
+                <>
+                  <span className="text-custom-text-400">{placeholder.from}</span>
+                  {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>
+                </>
+              )
+            )}
+            {isClearable && !disabled && hasDisplayedDates && (
+              <X
+                className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  clearDates();
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          // Original separate date display
+          <>
+            <span
+              className={cn(
+                "h-full flex items-center justify-center gap-1 rounded-sm flex-grow",
+                buttonFromDateClassName
+              )}
+            >
+              {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.from ? renderFormattedDate(dateRange.from) : renderPlaceholder ? placeholder.from : ""}
+            </span>
+            <ArrowRight className="h-3 w-3 flex-shrink-0" />
+            <span
+              className={cn(
+                "h-full flex items-center justify-center gap-1 rounded-sm flex-grow",
+                buttonToDateClassName
+              )}
+            >
+              {!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
+            </span>
+            {isClearable && !disabled && hasDisplayedDates && (
+              <X
+                className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer ml-1", clearIconClassName)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  clearDates();
+                }}
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </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"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (!isOpen) handleKeyDown(e);
+        } else handleKeyDown(e);
+      }}
+      button={comboButton}
+      disabled={disabled}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && Options}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { CalendarDays, X } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// ui
+import type { Matcher } from "@plane/propel/calendar";
+import { Calendar } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
+import { cn, renderFormattedDate, getDate } from "@plane/utils";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+// constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  clearIconClassName?: string;
+  defaultOpen?: boolean;
+  optionsClassName?: string;
+  icon?: React.ReactNode;
+  isClearable?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  onChange: (val: Date | null) => void;
+  onClose?: () => void;
+  value: Date | string | null;
+  closeOnSelect?: boolean;
+  formatToken?: string;
+  renderByDefault?: boolean;
+};
+
+export const DateDropdown: React.FC<Props> = observer((props) => {
+  const {
+    buttonClassName = "",
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    clearIconClassName = "",
+    defaultOpen = false,
+    optionsClassName = "",
+    closeOnSelect = true,
+    disabled = false,
+    hideIcon = false,
+    icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
+    isClearable = true,
+    minDate,
+    maxDate,
+    onChange,
+    onClose,
+    placeholder = "Date",
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value,
+    formatToken,
+    renderByDefault = true,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const isDateSelected = value && value.toString().trim() !== "";
+
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    onOpen,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: Date | null) => {
+    onChange(val);
+    if (closeOnSelect) {
+      handleClose();
+      referenceElement?.blur();
+    }
+  };
+
+  const disabledDays: Matcher[] = [];
+  if (minDate) disabledDays.push({ before: minDate });
+  if (maxDate) disabledDays.push({ after: maxDate });
+
+  const comboButton = (
+    <button
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-custom-text-200": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      ref={setReferenceElement}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={placeholder}
+        tooltipContent={value ? renderFormattedDate(value, formatToken) : "None"}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && icon}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
+        )}
+        {isClearable && !disabled && isDateSelected && (
+          <X
+            className={cn("h-2.5 w-2.5 flex-shrink-0", clearIconClassName)}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onChange(null);
+            }}
+          />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (!isOpen) handleKeyDown(e);
+        } else handleKeyDown(e);
+      }}
+      button={comboButton}
+      disabled={disabled}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen &&
+        createPortal(
+          <Combobox.Options data-prevent-outside-click static>
+            <div
+              className={cn(
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30",
+                optionsClassName
+              )}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Calendar
+                className="rounded-md border border-custom-border-200 p-3"
+                captionLayout="dropdown"
+                selected={getDate(value)}
+                defaultMonth={getDate(value)}
+                onSelect={(date: Date | undefined) => {
+                  dropdownOnChange(date ?? null);
+                }}
+                showOutsideDays
+                initialFocus
+                disabled={disabledDays}
+                mode="single"
+                fixedWeeks
+                weekStartsOn={startOfWeek}
+              />
+            </div>
+          </Combobox.Options>,
+          document.body
+        )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,295 @@
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EEstimateSystem } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | undefined) => void;
+  onClose?: () => void;
+  projectId: string | undefined;
+  value: string | undefined | null;
+  renderByDefault?: boolean;
+};
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+export const EstimateDropdown: React.FC<Props> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+    renderByDefault = true,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentActiveEstimateIdByProjectId, getProjectEstimates, getEstimateById } = useProjectEstimates();
+  const { estimatePointIds, estimatePointById } = useEstimate(
+    projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined
+  );
+
+  const currentActiveEstimateId = projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined;
+
+  const currentActiveEstimate = currentActiveEstimateId ? getEstimateById(currentActiveEstimateId) : undefined;
+
+  const options: DropdownOptions = (estimatePointIds ?? [])
+    ?.map((estimatePoint) => {
+      const currentEstimatePoint = estimatePointById(estimatePoint);
+      if (currentEstimatePoint)
+        return {
+          value: currentEstimatePoint.id,
+          query: `${currentEstimatePoint?.value}`,
+          content: (
+            <div className="flex items-center gap-2">
+              <Triangle className="h-3 w-3 flex-shrink-0" />
+              <span className="flex-grow truncate">
+                {currentActiveEstimate?.type === EEstimateSystem.TIME
+                  ? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
+                  : currentEstimatePoint.value}
+              </span>
+            </div>
+          ),
+        };
+      else undefined;
+    })
+    .filter((estimatePointDropdownOption) => estimatePointDropdownOption != undefined) as DropdownOptions;
+  options?.unshift({
+    value: null,
+    query: t("project_settings.estimates.no_estimate"),
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3 flex-shrink-0" />
+        <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = value && estimatePointById ? estimatePointById(value) : undefined;
+
+  const onOpen = async () => {
+    if (!currentActiveEstimateId && workspaceSlug && projectId)
+      await getProjectEstimates(workspaceSlug.toString(), projectId);
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const dropdownOnChange = (val: string | undefined) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading={t("project_settings.estimates.label")}
+            tooltipContent={selectedEstimate ? selectedEstimate?.value : placeholder}
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
+            {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate">
+                {selectedEstimate
+                  ? currentActiveEstimate?.type === EEstimateSystem.TIME
+                    ? convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
+                    : selectedEstimate.value
+                  : placeholder}
+              </span>
+            )}
+            {dropdownArrow && (
+              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full w-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.placeholder")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {currentActiveEstimateId === undefined ? (
+                <div
+                  className={`flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`}
+                >
+                  {/* NOTE: This condition renders when estimates are not enabled for the project */}
+                  <div className="flex-grow flex items-center gap-2">
+                    <Triangle className="h-3 w-3 flex-shrink-0" />
+                    <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option key={option.value} value={option.value}>
+                          {({ active, selected }) => (
+                            <div
+                              className={cn(
+                                "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                                {
+                                  "bg-custom-background-80": active,
+                                  "text-custom-text-100": selected,
+                                  "text-custom-text-200": !selected,
+                                }
+                              )}
+                            >
+                              <span className="flex-grow truncate">{option.content}</span>
+                              {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                            </div>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <p className="px-1.5 py-1 italic text-custom-text-400">
+                        {t("common.search.no_matching_results")}
+                      </p>
+                    )
+                  ) : (
+                    <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { Check } from "lucide-react";
+// plane imports
+import { ISSUE_LAYOUT_MAP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EIssueLayoutTypes } from "@plane/types";
+import { Dropdown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+
+type TLayoutDropDown = {
+  onChange: (value: EIssueLayoutTypes) => void;
+  value: EIssueLayoutTypes;
+  disabledLayouts?: EIssueLayoutTypes[];
+};
+
+export const LayoutDropDown = observer((props: TLayoutDropDown) => {
+  const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
+  // plane i18n
+  const { t } = useTranslation();
+  // derived values
+  const availableLayouts = useMemo(
+    () => Object.values(ISSUE_LAYOUT_MAP).filter((layout) => !disabledLayouts.includes(layout.key)),
+    [disabledLayouts]
+  );
+
+  const options = useMemo(
+    () =>
+      availableLayouts.map((issueLayout) => ({
+        data: issueLayout.key,
+        value: issueLayout.key,
+      })),
+    [availableLayouts]
+  );
+
+  const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
+    const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
+    return (
+      <div className="flex gap-2 items-center text-custom-text-200">
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-custom-text-200`} />
+        <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
+      </div>
+    );
+  }, []);
+
+  const itemContent = useCallback((props: { value: string; selected: boolean }) => {
+    const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
+
+    return (
+      <div className={cn("flex gap-2 items-center text-custom-text-200 w-full justify-between")}>
+        <div className="flex gap-2 items-center">
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-custom-text-200`} />
+          <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
+        </div>
+        {props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+      </div>
+    );
+  }, []);
+
+  const keyExtractor = useCallback((option: any) => option.value, []);
+
+  return (
+    <Dropdown
+      onChange={onChange as (value: string) => void}
+      value={value?.toString()}
+      keyExtractor={keyExtractor}
+      options={options}
+      buttonContainerClassName="bg-custom-background-100 border border-custom-border-200 hover:bg-custom-background-90 focus:text-custom-text-300 focus:bg-custom-background-90 px-2 py-1.5  rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center relative"
+      buttonContent={buttonContent}
+      renderItem={itemContent}
+      disableSearch
+    />
+  );
+});

apps/web/core/components/dropdowns/member/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { observer } from "mobx-react";
+import type { LucideIcon } from "lucide-react";
+import { Users } from "lucide-react";
+// plane ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
+// plane utils
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type AvatarProps = {
+  showTooltip: boolean;
+  userIds: string | string[] | null;
+  icon?: LucideIcon;
+  size?: "sm" | "md" | "base" | "lg" | number;
+};
+
+export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
+  const { showTooltip, userIds, icon: Icon, size = "md" } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  if (Array.isArray(userIds)) {
+    if (userIds.length > 0)
+      return (
+        <AvatarGroup size={size} showTooltip={!showTooltip}>
+          {userIds.map((userId) => {
+            const userDetails = getUserDetails(userId);
+
+            if (!userDetails) return;
+            return <Avatar key={userId} src={getFileURL(userDetails.avatar_url)} name={userDetails.display_name} />;
+          })}
+        </AvatarGroup>
+      );
+  } else {
+    if (userIds) {
+      const userDetails = getUserDetails(userIds);
+      return (
+        <Avatar
+          src={getFileURL(userDetails?.avatar_url ?? "")}
+          name={userDetails?.display_name}
+          size={size}
+          showTooltip={!showTooltip}
+        />
+      );
+    }
+  }
+
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
+});

apps/web/core/components/dropdowns/member/base.tsx

@@ -0,0 +1,184 @@
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import type { LucideIcon } from "lucide-react";
+import { ChevronDown } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IUserLite } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { ButtonAvatars } from "./avatar";
+import { MemberOptions } from "./member-options";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownBaseProps = {
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  icon?: LucideIcon;
+  memberIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((props) => {
+  const { t } = useTranslation();
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getUserDetails,
+    hideIcon = false,
+    icon,
+    memberIds,
+    multiple,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    optionsClassName = "",
+    placeholder = t("members"),
+    placement,
+    renderByDefault = true,
+    showTooltip = false,
+    showUserDetails = false,
+    tabIndex,
+    tooltipContent,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const comboboxProps = {
+    value,
+    onChange,
+    disabled,
+    multiple,
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const getDisplayName = (value: string | string[] | null, showUserDetails: boolean, placeholder: string = "") => {
+    if (Array.isArray(value)) {
+      if (value.length > 0) {
+        if (value.length === 1) {
+          return getUserDetails(value[0])?.display_name || placeholder;
+        } else {
+          return showUserDetails ? `${value.length} ${t("members").toLocaleLowerCase()}` : "";
+        }
+      } else {
+        return placeholder;
+      }
+    } else {
+      if (showUserDetails && value) {
+        return getUserDetails(value)?.display_name || placeholder;
+      } else {
+        return placeholder;
+      }
+    }
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          <DropdownButton
+            className={cn("text-xs", buttonClassName)}
+            isActive={isOpen}
+            tooltipHeading={placeholder}
+            tooltipContent={
+              tooltipContent ?? `${value?.length ?? 0} ${value?.length !== 1 ? t("assignees") : t("assignee")}`
+            }
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate leading-5">
+                {getDisplayName(value, showUserDetails, placeholder)}
+              </span>
+            )}
+            {dropdownArrow && (
+              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      {...comboboxProps}
+      className={cn("h-full", className)}
+      onChange={dropdownOnChange}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <MemberOptions
+          getUserDetails={getUserDetails}
+          isOpen={isOpen}
+          memberIds={memberIds}
+          onDropdownOpen={onDropdownOpen}
+          optionsClassName={optionsClassName}
+          placement={placement}
+          referenceElement={referenceElement}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/member/dropdown.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { LucideIcon } from "lucide-react";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { MemberDropdownBase } from "./base";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownProps = {
+  icon?: LucideIcon;
+  memberIds?: string[];
+  onClose?: () => void;
+  optionsClassName?: string;
+  projectId?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdown: React.FC<TMemberDropdownProps> = observer((props) => {
+  const { memberIds: propsMemberIds, projectId } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds, fetchProjectMembers },
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const memberIds = propsMemberIds
+    ? propsMemberIds
+    : projectId
+      ? getProjectMemberIds(projectId, false)
+      : workspaceMemberIds;
+
+  const onDropdownOpen = () => {
+    if (!memberIds && projectId && workspaceSlug) fetchProjectMembers(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <MemberDropdownBase
+      {...props}
+      getUserDetails={getUserDetails}
+      memberIds={memberIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

apps/web/core/components/dropdowns/member/member-options.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { SuspendedUserIcon } from "@plane/propel/icons";
+import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
+import type { IUserLite } from "@plane/types";
+import { Avatar } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+interface Props {
+  className?: string;
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  isOpen: boolean;
+  memberIds?: string[];
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+}
+
+export const MemberOptions: React.FC<Props> = observer((props: Props) => {
+  const {
+    getUserDetails,
+    isOpen,
+    memberIds,
+    onDropdownOpen,
+    optionsClassName = "",
+    placement,
+    referenceElement,
+  } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    workspace: { isUserSuspended },
+  } = useMember();
+  const { isMobile } = usePlatformOS();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      onDropdownOpen?.();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options = memberIds
+    ?.map((userId) => {
+      const userDetails = getUserDetails(userId);
+      return {
+        value: userId,
+        query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
+        content: (
+          <div className="flex items-center gap-2">
+            <div className="w-4">
+              {isUserSuspended(userId, workspaceSlug?.toString()) ? (
+                <SuspendedUserIcon className="h-3.5 w-3.5 text-custom-text-400" />
+              ) : (
+                <Avatar name={userDetails?.display_name} src={getFileURL(userDetails?.avatar_url ?? "")} />
+              )}
+            </div>
+            <span
+              className={cn(
+                "flex-grow truncate",
+                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-custom-text-400" : ""
+              )}
+            >
+              {currentUser?.id === userId ? t("you") : userDetails?.display_name}
+            </span>
+          </div>
+        ),
+      };
+    })
+    .filter((o) => !!o);
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
+
+  return createPortal(
+    <Combobox.Options data-prevent-outside-click static>
+      <div
+        className={cn(
+          "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-30",
+          optionsClassName
+        )}
+        ref={setPopperElement}
+        style={{
+          ...styles.popper,
+        }}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("search")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map(
+                (option) =>
+                  option && (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        cn(
+                          "flex w-full select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                          active && "bg-custom-background-80",
+                          selected ? "text-custom-text-100" : "text-custom-text-200",
+                          isUserSuspended(option.value, workspaceSlug?.toString())
+                            ? "cursor-not-allowed"
+                            : "cursor-pointer"
+                        )
+                      }
+                      disabled={isUserSuspended(option.value, workspaceSlug?.toString())}
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          {isUserSuspended(option.value, workspaceSlug?.toString()) && (
+                            <Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
+                              Suspended
+                            </Pill>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  )
+              )
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>,
+    document.body
+  );
+});

apps/web/core/components/dropdowns/member/types.d.ts

@@ -0,0 +1,22 @@
+import type { TDropdownProps } from "../types";
+
+export type MemberDropdownProps = TDropdownProps & {
+  button?: React.ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  placeholder?: string;
+  tooltipContent?: string;
+  onClose?: () => void;
+  showUserDetails?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { observer } from "mobx-react";
+// helpers
+import { formatDateRange, getDate } from "@plane/utils";
+
+type Props = {
+  startDate: Date | string | null | undefined;
+  endDate: Date | string | null | undefined;
+  className?: string;
+};
+
+/**
+ * Formats merged date range display with smart formatting
+ * - Single date: "Jan 24, 2025"
+ * - Same year, same month: "Jan 24 - 28, 2025"
+ * - Same year, different month: "Jan 24 - Feb 6, 2025"
+ * - Different year: "Dec 28, 2024 - Jan 4, 2025"
+ */
+export const MergedDateDisplay: React.FC<Props> = observer((props) => {
+  const { startDate, endDate, className = "" } = props;
+
+  // Parse dates
+  const parsedStartDate = getDate(startDate);
+  const parsedEndDate = getDate(endDate);
+
+  const displayText = formatDateRange(parsedStartDate, parsedEndDate);
+
+  if (!displayText) {
+    return null;
+  }
+
+  return <span className={className}>{displayText}</span>;
+});

apps/web/core/components/dropdowns/module/base.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IModule } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { ModuleButtonContent } from "./button-content";
+import { ModuleOptions } from "./module-options";
+
+type TModuleDropdownBaseProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  getModuleById: (moduleId: string) => IModule | null;
+  itemClassName?: string;
+  moduleIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showCount?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdownBase: React.FC<TModuleDropdownBaseProps> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getModuleById,
+    hideIcon = false,
+    itemClassName = "",
+    moduleIds,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    renderByDefault = true,
+    showCount = false,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const comboboxProps = {
+    value,
+    onChange: dropdownOnChange,
+    disabled,
+    multiple,
+  };
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full w-full outline-none hover:bg-custom-background-80",
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading={t("common.module")}
+            tooltipContent={
+              Array.isArray(value)
+                ? `${value
+                    .map((moduleId) => getModuleById(moduleId)?.name)
+                    .toString()
+                    .replaceAll(",", ", ")}`
+                : ""
+            }
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            <ModuleButtonContent
+              disabled={disabled}
+              dropdownArrow={dropdownArrow}
+              dropdownArrowClassName={dropdownArrowClassName}
+              hideIcon={hideIcon}
+              hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
+              placeholder={placeholder}
+              showCount={showCount}
+              showTooltip={showTooltip}
+              value={value}
+              onChange={onChange as any}
+              className={itemClassName}
+            />
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+      {...comboboxProps}
+    >
+      {isOpen && projectId && (
+        <ModuleOptions
+          isOpen={isOpen}
+          placement={placement}
+          referenceElement={referenceElement}
+          multiple={multiple}
+          getModuleById={getModuleById}
+          moduleIds={moduleIds}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/module/button-content.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { ChevronDown, X } from "lucide-react";
+// plane imports
+import { ModuleIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type ModuleButtonContentProps = {
+  disabled: boolean;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon: boolean;
+  hideText: boolean;
+  onChange: (moduleIds: string[]) => void;
+  placeholder?: string;
+  showCount: boolean;
+  showTooltip?: boolean;
+  value: string | string[] | null;
+  className?: string;
+};
+
+export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) => {
+  const {
+    disabled,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon,
+    hideText,
+    onChange,
+    placeholder,
+    showCount,
+    showTooltip = false,
+    value,
+    className,
+  } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  if (Array.isArray(value))
+    return (
+      <>
+        {showCount ? (
+          <div className="relative flex items-center max-w-full gap-1">
+            {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 flex-grow truncate">
+                {value.length > 0
+                  ? value.length === 1
+                    ? `${getModuleById(value[0])?.name || "module"}`
+                    : `${value.length} Module${value.length === 1 ? "" : "s"}`
+                  : placeholder}
+              </div>
+            )}
+          </div>
+        ) : value.length > 0 ? (
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5 ">
+            {value.map((moduleId) => {
+              const moduleDetails = getModuleById(moduleId);
+              return (
+                <div
+                  key={moduleId}
+                  className={cn(
+                    "flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200",
+                    className
+                  )}
+                >
+                  {!hideIcon && <ModuleIcon className="h-2.5 w-2.5 flex-shrink-0" />}
+                  {!hideText && (
+                    <Tooltip
+                      tooltipHeading="Title"
+                      tooltipContent={moduleDetails?.name}
+                      disabled={!showTooltip}
+                      isMobile={isMobile}
+                      renderByDefault={false}
+                    >
+                      <span className="max-w-40 flex-grow truncate text-xs font-medium">{moduleDetails?.name}</span>
+                    </Tooltip>
+                  )}
+                  {!disabled && (
+                    <Tooltip
+                      tooltipContent="Remove"
+                      disabled={!showTooltip}
+                      isMobile={isMobile}
+                      renderByDefault={false}
+                    >
+                      <button
+                        type="button"
+                        className="flex-shrink-0"
+                        onClick={() => {
+                          const newModuleIds = value.filter((m) => m !== moduleId);
+                          onChange(newModuleIds);
+                        }}
+                      >
+                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                      </button>
+                    </Tooltip>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <>
+            {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
+            <span className="flex-grow truncate text-left">{placeholder}</span>
+          </>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+  else
+    return (
+      <>
+        {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+};

apps/web/core/components/dropdowns/module/dropdown.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+// types
+import type { TDropdownProps } from "../types";
+// local imports
+import { ModuleDropdownBase } from "./base";
+
+type TModuleDropdownProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  projectId: string | undefined;
+  showCount?: boolean;
+  onClose?: () => void;
+  renderByDefault?: boolean;
+  itemClassName?: string;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdown: React.FC<TModuleDropdownProps> = observer((props) => {
+  const { projectId } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById, getProjectModuleIds, fetchModules } = useModule();
+  // derived values
+  const moduleIds = projectId ? getProjectModuleIds(projectId) : [];
+
+  const onDropdownOpen = () => {
+    if (!moduleIds && projectId && workspaceSlug) fetchModules(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <ModuleDropdownBase
+      {...props}
+      getModuleById={getModuleById}
+      moduleIds={moduleIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

apps/web/core/components/dropdowns/module/module-options.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ModuleIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+interface Props {
+  getModuleById: (moduleId: string) => IModule | null;
+  isOpen: boolean;
+  moduleIds?: string[];
+  multiple: boolean;
+  onDropdownOpen?: () => void;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+}
+
+export const ModuleOptions = observer((props: Props) => {
+  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement } = props;
+  // refs
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = () => {
+    onDropdownOpen?.();
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = moduleIds?.map((moduleId) => {
+    const moduleDetails = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: `${moduleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{moduleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  if (!multiple)
+    options?.unshift({
+      value: null,
+      query: t("module.no_module"),
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("module.no_module")}</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("common.search.label")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                      {
+                        "bg-custom-background-80": active,
+                        "text-custom-text-100": selected,
+                        "text-custom-text-200": !selected,
+                      }
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});

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

@@ -0,0 +1,507 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Fragment, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Search, SignalHigh } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// types
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TIssuePriorities } from "@plane/types";
+// ui
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// constants
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  highlightUrgent?: boolean;
+  onChange: (val: TIssuePriorities) => void;
+  onClose?: () => void;
+  value: TIssuePriorities | undefined | null;
+  renderByDefault?: boolean;
+};
+
+type ButtonProps = {
+  className?: string;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  highlightUrgent: boolean;
+  placeholder: string;
+  priority: TIssuePriorities | undefined;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+    renderToolTipByDefault = true,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
+    high: "bg-orange-500/20 text-orange-950 border-orange-500",
+    medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
+    low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
+    none: "hover:bg-custom-background-80 border-custom-border-300",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltipHeading={t("priority")}
+      tooltipContent={priorityDetails?.title ?? t("common.none")}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                  priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+    renderToolTipByDefault = true,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-red-600/20 text-red-600",
+    high: "bg-orange-500/20 text-orange-950",
+    medium: "bg-yellow-500/20 text-yellow-950",
+    low: "bg-blue-500/20 text-blue-950",
+    none: "bg-custom-background-80",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltipHeading={t("priority")}
+      tooltipContent={t(priorityDetails?.key ?? "none")}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                  priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+    renderToolTipByDefault = true,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "text-red-950",
+    high: "text-orange-950",
+    medium: "text-yellow-950",
+    low: "text-blue-950",
+    none: "hover:text-custom-text-300",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltipHeading={t("priority")}
+      tooltipContent={priorityDetails?.title ?? t("common.none")}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full w-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
+            "bg-custom-background-80": isActive,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "bg-red-600/20 p-0.5 rounded border border-red-600":
+                  priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+export const PriorityDropdown: React.FC<Props> = (props) => {
+  //hooks
+  const { t } = useTranslation();
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    highlightUrgent = true,
+    onChange,
+    onClose,
+    placeholder = t("common.priority"),
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value = "none",
+    renderByDefault = true,
+  } = props;
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  // next-themes
+  // TODO: remove this after new theming implementation
+  const { resolvedTheme } = useTheme();
+
+  const options = ISSUE_PRIORITIES.map((priority) => ({
+    value: priority.key,
+    query: priority.key,
+    content: (
+      <div className="flex items-center gap-2">
+        <PriorityIcon priority={priority.key} size={14} withContainer />
+        <span className="flex-grow truncate">{priority.title}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const dropdownOnChange = (val: TIssuePriorities) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
+    ? BorderButton
+    : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
+      ? BackgroundButton
+      : TransparentButton;
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          <ButtonToRender
+            priority={value ?? undefined}
+            className={cn(buttonClassName, {
+              "text-custom-text-200": resolvedTheme?.includes("dark") || resolvedTheme === "custom",
+            })}
+            highlightUrgent={highlightUrgent}
+            dropdownArrow={dropdownArrow && !disabled}
+            dropdownArrowClassName={dropdownArrowClassName}
+            hideIcon={hideIcon}
+            placeholder={placeholder}
+            showTooltip={showTooltip}
+            hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
+            renderToolTipByDefault={renderByDefault}
+          />
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn(
+        "h-full",
+        {
+          "bg-custom-background-80": isOpen,
+        },
+        className
+      )}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("search")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        <span className="flex-grow truncate">{option.content}</span>
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+};

apps/web/core/components/dropdowns/project/base.tsx

@@ -0,0 +1,289 @@
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ProjectIcon } from "@plane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { Logo } from "@/components/common/logo";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import type { TProject } from "@/plane-web/types";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  currentProjectId?: string;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  getProjectById: (projectId: string | null | undefined) => Partial<TProject> | undefined;
+  onClose?: () => void;
+  projectIds: string[];
+  renderByDefault?: boolean;
+  renderCondition?: (projectId: string) => boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
+
+export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    currentProjectId,
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getProjectById,
+    hideIcon = false,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "Project",
+    placement,
+    projectIds,
+    renderByDefault = true,
+    renderCondition,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // store hooks
+  const options = projectIds?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+    if (renderCondition && !renderCondition(projectId)) return;
+    return {
+      value: projectId,
+      query: `${projectDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          {projectDetails?.logo_props && (
+            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+              <Logo logo={projectDetails?.logo_props} size={12} />
+            </span>
+          )}
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const filteredOptions =
+    query === ""
+      ? options?.filter((o) => o?.value !== currentProjectId)
+      : options?.filter((o) => o?.value !== currentProjectId && o?.query.toLowerCase().includes(query.toLowerCase()));
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const getDisplayName = (value: string | string[] | null, placeholder: string = "") => {
+    if (Array.isArray(value)) {
+      const firstProject = getProjectById(value[0]);
+      return value.length ? (value.length === 1 ? firstProject?.name : `${value.length} projects`) : placeholder;
+    } else {
+      return value ? (getProjectById(value)?.name ?? placeholder) : placeholder;
+    }
+  };
+
+  const getProjectIcon = (value: string | string[] | null) => {
+    const renderIcon = (logoProps: TProject["logo_props"]) => (
+      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+        <Logo logo={logoProps} size={14} />
+      </span>
+    );
+
+    if (Array.isArray(value)) {
+      return (
+        <div className="flex items-center gap-0.5">
+          {value.length > 0 ? (
+            value.map((projectId) => {
+              const projectDetails = getProjectById(projectId);
+              return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
+            })
+          ) : (
+            <ProjectIcon className="size-3 text-custom-text-300" />
+          )}
+        </div>
+      );
+    } else {
+      const projectDetails = getProjectById(value);
+      return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
+    }
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading="Project"
+            tooltipContent={value?.length ? `${value.length} project${value.length !== 1 ? "s" : ""}` : placeholder}
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {!hideIcon && getProjectIcon(value)}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="truncate max-w-40">{getDisplayName(value, placeholder)}</span>
+            )}
+            {dropdownArrow && (
+              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+      multiple={multiple}
+    >
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("search")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => {
+                    if (!option) return;
+                    return (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                            active ? "bg-custom-background-80" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className="flex-grow truncate">{option.content}</span>
+                            {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    );
+                  })
+                ) : (
+                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/project/dropdown.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import type { TDropdownProps } from "../types";
+import { ProjectDropdownBase } from "./base";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onClose?: () => void;
+  renderCondition?: (projectId: string) => boolean;
+  renderByDefault?: boolean;
+  currentProjectId?: string;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
+
+export const ProjectDropdown: React.FC<Props> = observer((props) => {
+  // store hooks
+  const { joinedProjectIds, getProjectById } = useProject();
+
+  return <ProjectDropdownBase {...props} getProjectById={getProjectById} projectIds={joinedProjectIds} />;
+});

apps/web/core/components/dropdowns/state/base.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { ChevronDown, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState } from "@plane/types";
+import { ComboDropDown, Spinner } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { DropdownButton } from "@/components/dropdowns/buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "@/components/dropdowns/constants";
+import type { TDropdownProps } from "@/components/dropdowns/types";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import { StateOption } from "@/plane-web/components/workflow";
+
+export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
+  alwaysAllowStateChange?: boolean;
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  filterAvailableStateIds?: boolean;
+  getStateById: (stateId: string | null | undefined) => IState | undefined;
+  iconSize?: string;
+  isForWorkItemCreation?: boolean;
+  isInitializing?: boolean;
+  onChange: (val: string) => void;
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showDefaultState?: boolean;
+  stateIds: string[];
+  value: string | undefined | null;
+};
+
+export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getStateById,
+    hideIcon = false,
+    iconSize = "size-4",
+    isInitializing = false,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    placement,
+    renderByDefault = true,
+    showDefaultState = true,
+    showTooltip = false,
+    stateIds,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const statesList = stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state);
+  const defaultState = statesList?.find((state) => state?.default);
+  const stateValue = !!value ? value : showDefaultState ? defaultState?.id : undefined;
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // dropdown init
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen: onDropdownOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  // derived values
+  const options = statesList?.map((state) => ({
+    value: state?.id,
+    query: `${state?.name}`,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon
+          stateGroup={state?.group ?? "backlog"}
+          color={state?.color}
+          className={cn("flex-shrink-0", iconSize)}
+          percentage={state?.order}
+        />
+        <span className="flex-grow truncate text-left">{state?.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedState = stateValue ? getStateById(stateValue) : undefined;
+
+  const dropdownOnChange = (val: string) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          tabIndex={tabIndex}
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading={t("state")}
+            tooltipContent={selectedState?.name ?? t("state")}
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {isInitializing ? (
+              <Spinner className="h-3.5 w-3.5" />
+            ) : (
+              <>
+                {!hideIcon && (
+                  <StateGroupIcon
+                    stateGroup={selectedState?.group ?? "backlog"}
+                    color={selectedState?.color ?? "rgba(var(--color-text-300))"}
+                    className={cn("flex-shrink-0", iconSize)}
+                    percentage={selectedState?.order}
+                  />
+                )}
+                {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+                  <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
+                )}
+                {dropdownArrow && (
+                  <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+                )}
+              </>
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={stateValue}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.label")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <StateOption
+                      {...props}
+                      key={option.value}
+                      option={option}
+                      selectedValue={value}
+                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/state/dropdown.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+// local imports
+import type { TWorkItemStateDropdownBaseProps } from "./base";
+import { WorkItemStateDropdownBase } from "./base";
+
+type TWorkItemStateDropdownProps = Omit<
+  TWorkItemStateDropdownBaseProps,
+  "stateIds" | "getStateById" | "onDropdownOpen" | "isInitializing"
+> & {
+  stateIds?: string[];
+};
+
+export const StateDropdown: React.FC<TWorkItemStateDropdownProps> = observer((props) => {
+  const { projectId, stateIds: propsStateIds } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  // store hooks
+  const { fetchProjectStates, getProjectStateIds, getStateById } = useProjectState();
+  // derived values
+  const stateIds = propsStateIds ?? getProjectStateIds(projectId);
+
+  // fetch states if not provided
+  const onDropdownOpen = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && workspaceSlug && projectId) {
+      setStateLoader(true);
+      await fetchProjectStates(workspaceSlug.toString(), projectId);
+      setStateLoader(false);
+    }
+  };
+
+  return (
+    <WorkItemStateDropdownBase
+      {...props}
+      getStateById={getStateById}
+      isInitializing={stateLoader}
+      stateIds={stateIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

apps/web/core/components/dropdowns/types.d.ts

@@ -0,0 +1,22 @@
+import type { Placement } from "@popperjs/core";
+
+export type TButtonVariants =
+  | "border-with-text"
+  | "border-without-text"
+  | "background-with-text"
+  | "background-without-text"
+  | "transparent-with-text"
+  | "transparent-without-text";
+
+export type TDropdownProps = {
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonVariant: TButtonVariants;
+  className?: string;
+  disabled?: boolean;
+  hideIcon?: boolean;
+  placeholder?: string;
+  placement?: Placement;
+  showTooltip?: boolean;
+  tabIndex?: number;
+};