snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { Button } from "@plane/propel/button";
+import { Tooltip } from "@makeplane/propel/components/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;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  variant: TButtonVariants;
+  renderToolTipByDefault?: boolean;
+};
+
+type ButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+export function DropdownButton(props: DropdownButtonProps) {
+  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>
+  );
+}
+
+function BorderButton(props: ButtonProps) {
+  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
+
+function BackgroundButton(props: ButtonProps) {
+  const { children, className, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
+
+function TransparentButton(props: ButtonProps) {
+  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-1.5",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// 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,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// icon
+import { CycleGroupIcon } from "@plane/propel/icons";
+import { CyclesOutline, SearchOutline, TickOutline } from "@makeplane/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 = observer(function CycleOptions(props: CycleOptionsProps) {
+  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">
+          <CyclesOutline 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 as="ul" className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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
+                  as="li"
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                      active ? "bg-layer-transparent-hover" : ""
+                    } ${selected ? "text-primary" : "text-secondary"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matches_found")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});

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

@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { ChevronDownOutline, CyclesOutline } from "@makeplane/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 = observer(function CycleDropdown(props: 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-layer-1", 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-layer-1",
+        {
+          "cursor-not-allowed text-secondary": 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 && <CyclesOutline className="h-3 w-3 flex-shrink-0" />}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
+          <span className="max-w-40 truncate">{selectedName ?? placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline 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,303 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { ArrowNarrowRightOutline, CalendarOutline, CloseOutline, DueDateOutline } from "@makeplane/propel/icons";
+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?: string;
+  customTooltipHeading?: string;
+  defaultOpen?: boolean;
+  renderInPortal?: boolean;
+};
+
+export const DateRangeDropdown = observer(function DateRangeDropdown(props: 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-secondary": 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 w-full items-center gap-1.5">
+            {!hideIcon.from && <CalendarOutline className="h-3 w-3 flex-shrink-0" />}
+            {dateRange.from || dateRange.to ? (
+              <MergedDateDisplay
+                startDate={dateRange.from}
+                endDate={dateRange.to}
+                className="flex-grow truncate text-11"
+              />
+            ) : (
+              renderPlaceholder && (
+                <>
+                  <span className="text-placeholder">{placeholder.from}</span>
+                  {placeholder.from && placeholder.to && (
+                    <ArrowNarrowRightOutline className="h-3 w-3 flex-shrink-0 text-placeholder" />
+                  )}
+                  <span className="text-placeholder">{placeholder.to}</span>
+                </>
+              )
+            )}
+            {isClearable && !disabled && hasDisplayedDates && (
+              <CloseOutline
+                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(
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
+                buttonFromDateClassName
+              )}
+            >
+              {!hideIcon.from && <CalendarOutline className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.from ? renderFormattedDate(dateRange.from) : renderPlaceholder ? placeholder.from : ""}
+            </span>
+            <ArrowNarrowRightOutline className="h-3 w-3 flex-shrink-0" />
+            <span
+              className={cn(
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
+                buttonToDateClassName
+              )}
+            >
+              {!hideIcon.to && <DueDateOutline className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
+            </span>
+            {isClearable && !disabled && hasDisplayedDates && (
+              <CloseOutline
+                className={cn("ml-1 h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  clearDates();
+                }}
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  const comboOptions = (
+    <Combobox.Options as="ul" data-prevent-outside-click static>
+      <div
+        className="z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <Calendar
+          className="rounded-md border border-subtle p-3 text-12"
+          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,214 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { CalendarOutline, CloseOutline } from "@makeplane/propel/icons";
+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;
+  labelClassName?: string;
+};
+
+export const DateDropdown = observer(function DateDropdown(props: Props) {
+  const {
+    buttonClassName = "",
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    clearIconClassName = "",
+    defaultOpen = false,
+    optionsClassName = "",
+    closeOnSelect = true,
+    disabled = false,
+    hideIcon = false,
+    icon = <CalendarOutline className="h-3 w-3 flex-shrink-0" />,
+    isClearable = true,
+    minDate,
+    maxDate,
+    onChange,
+    onClose,
+    placeholder = "Date",
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value,
+    formatToken,
+    renderByDefault = true,
+    labelClassName = "",
+  } = 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-secondary": 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={cn("flex-grow truncate text-left text-body-xs-medium", labelClassName)}>
+            {value ? renderFormattedDate(value, formatToken) : placeholder}
+          </span>
+        )}
+        {isClearable && !disabled && isDateSelected && (
+          <CloseOutline
+            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 as="ul" data-prevent-outside-click static>
+            <div
+              className={cn(
+                "z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
+                optionsClassName
+              )}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Calendar
+                className="rounded-md border border-subtle 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,299 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline, EstimateOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+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 = observer(function EstimateDropdown(props: 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">
+              <EstimateOutline 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">
+        <EstimateOutline 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-secondary": 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 && <EstimateOutline className="h-3 w-3 flex-shrink-0" />}
+        {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className="truncate">
+            {selectedEstimate ? (
+              currentActiveEstimate?.type === EEstimateSystem.TIME ? (
+                convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
+              ) : (
+                selectedEstimate.value
+              )
+            ) : (
+              <span className="text-placeholder">{placeholder}</span>
+            )}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline 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 as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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 items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`}
+                >
+                  {/* NOTE: This condition renders when estimates are not enabled for the project */}
+                  <div className="flex flex-grow items-center gap-2">
+                    <EstimateOutline 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 as="li" key={option.value} value={option.value}>
+                          {({ active, selected }) => (
+                            <div
+                              className={cn(
+                                "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                                {
+                                  "bg-layer-transparent-hover": active,
+                                  "text-primary": selected,
+                                  "text-secondary": !selected,
+                                }
+                              )}
+                            >
+                              <span className="flex-grow truncate">{option.content}</span>
+                              {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                            </div>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
+                    )
+                  ) : (
+                    <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { IntakeStateGroupIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { IIntakeState } 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 "@/components/workflow";
+
+export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
+  alwaysAllowStateChange?: boolean;
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  filterAvailableStateIds?: boolean;
+  getStateById: (stateId: string | null | undefined) => IIntakeState | 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 = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
+  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) || statesList[0];
+  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">
+        <IntakeStateGroupIcon
+          stateGroup={state?.group ?? "triage"}
+          color={state?.color}
+          className={cn("flex-shrink-0", iconSize)}
+        />
+        <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-secondary": 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 && (
+              <IntakeStateGroupIcon
+                stateGroup={selectedState?.group ?? "triage"}
+                color={selectedState?.color ?? "var(--text-color-tertiary)"}
+                className={cn("flex-shrink-0", iconSize)}
+              />
+            )}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
+            )}
+            {dropdownArrow && (
+              <ChevronDownOutline
+                className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                aria-hidden="true"
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    // oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <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 as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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 items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 IntakeStateDropdown = observer(function IntakeStateDropdown(props: TWorkItemStateDropdownProps) {
+  const { projectId, stateIds: propsStateIds } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  // store hooks
+  const { fetchProjectIntakeState, getProjectIntakeStateIds, getIntakeStateById } = useProjectState();
+  // derived values
+  const stateIds = propsStateIds ?? getProjectIntakeStateIds(projectId);
+
+  // fetch states if not provided
+  const onDropdownOpen = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && workspaceSlug && projectId) {
+      setStateLoader(true);
+      await fetchProjectIntakeState(workspaceSlug.toString(), projectId);
+      setStateLoader(false);
+    }
+  };
+
+  return (
+    <WorkItemStateDropdownBase
+      {...props}
+      getStateById={getIntakeStateById}
+      isInitializing={stateLoader}
+      stateIds={stateIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

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

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ISSUE_LAYOUT_MAP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TickOutline } from "@makeplane/propel/icons";
+import { EIssueLayoutTypes } from "@plane/types";
+import { getButtonStyling } from "@plane/propel/button";
+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(function LayoutDropDown(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 items-center gap-2 text-secondary">
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
+        <span className="text-11 font-medium">{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 w-full items-center justify-between gap-2 text-secondary")}>
+        <div className="flex items-center gap-2">
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
+          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
+        </div>
+        {props.selected && <TickOutline 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={cn(getButtonStyling("secondary", "lg"))}
+      buttonContent={buttonContent}
+      renderItem={itemContent}
+      disableSearch
+    />
+  );
+});

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

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { ComponentType, SVGProps } from "react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import type { AvatarGroupSize } from "@makeplane/propel/components/avatar-group";
+import { MembersOutline } from "@makeplane/propel/icons";
+import { cn, getFileURL } from "@plane/utils";
+// plane utils
+// helpers
+// hooks
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
+import { useMember } from "@/hooks/store/use-member";
+
+type AvatarProps = {
+  showTooltip: boolean;
+  userIds: string | string[] | null;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  size?: AvatarGroupSize;
+};
+
+export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps) {
+  const { userIds, icon: Icon, size = "xs" } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  if (Array.isArray(userIds)) {
+    if (userIds.length > 0)
+      return (
+        <AvatarGroupOverflow size={size}>
+          {userIds.map((userId) => {
+            const userDetails = getUserDetails(userId);
+
+            if (!userDetails) return;
+            return (
+              <Avatar
+                key={userId}
+                src={getFileURL(userDetails.avatar_url)}
+                alt={userDetails.display_name}
+                fallback={userDetails.display_name?.[0]?.toUpperCase()}
+              />
+            );
+          })}
+        </AvatarGroupOverflow>
+      );
+  } else {
+    if (userIds) {
+      const userDetails = getUserDetails(userIds);
+      return (
+        <Avatar
+          src={getFileURL(userDetails?.avatar_url ?? "")}
+          alt={userDetails?.display_name}
+          fallback={userDetails?.display_name?.[0]?.toUpperCase()}
+          size={size}
+        />
+      );
+    }
+  }
+
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <MembersOutline className={cn("mx-[4px] h-3 w-3 flex-shrink-0")} />
+  );
+});

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

@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import type { ComponentType, SVGProps } from "react";
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+// plane imports
+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?: ComponentType<SVGProps<SVGSVGElement>>;
+  memberIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdownBase = observer(function MemberDropdownBase(props: TMemberDropdownBaseProps) {
+  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-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <DropdownButton
+        className={cn("text-11", 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 text-left text-body-xs-medium leading-5">
+            {getDisplayName(value, showUserDetails, placeholder)}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline 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}
+          value={value}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { ComponentType, SVGProps } from "react";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { MemberDropdownBase } from "./base";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownProps = {
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  memberIds?: string[];
+  onClose?: () => void;
+  optionsClassName?: string;
+  projectId?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdown = observer(function MemberDropdown(props: TMemberDropdownProps) {
+  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,206 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { Combobox } from "@headlessui/react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import { DeactivatedUserOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
+import type { IUserLite } from "@plane/types";
+import { cn, getFileURL, sortByCurrentUserThenSelected } 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;
+  value?: string[] | string | null;
+}
+
+export const MemberOptions = observer(function MemberOptions(props: Props) {
+  const {
+    getUserDetails,
+    isOpen,
+    memberIds,
+    onDropdownOpen,
+    optionsClassName = "",
+    placement,
+    referenceElement,
+    value,
+  } = 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()) ? (
+                <DeactivatedUserOutline className="h-3.5 w-3.5 text-placeholder" />
+              ) : (
+                <Avatar
+                  alt={userDetails?.display_name}
+                  fallback={userDetails?.display_name?.[0]?.toUpperCase()}
+                  src={getFileURL(userDetails?.avatar_url ?? "")}
+                  size="xs"
+                />
+              )}
+            </div>
+            <span
+              className={cn(
+                "flex-grow truncate",
+                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-placeholder" : ""
+              )}
+            >
+              {currentUser?.id === userId ? t("you") : userDetails?.display_name}
+            </span>
+          </div>
+        ),
+      };
+    })
+    .filter((o) => !!o);
+
+  const filteredOptions = sortByCurrentUserThenSelected(
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase())),
+    value,
+    currentUser?.id
+  );
+
+  return createPortal(
+    <Combobox.Options as="ul" data-prevent-outside-click static>
+      <div
+        className={cn(
+          "z-30 my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
+          optionsClassName
+        )}
+        ref={setPopperElement}
+        style={{
+          ...styles.popper,
+        }}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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
+                      as="li"
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        cn(
+                          "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                          active && "bg-layer-transparent-hover",
+                          selected ? "text-primary" : "text-secondary",
+                          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 && <TickOutline 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 text-placeholder italic">{t("no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{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,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function MergedDateDisplay(props: 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,197 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function ModuleDropdownBase(props: TModuleDropdownBaseProps) {
+  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-layer-1", 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-layer-1",
+        {
+          "cursor-not-allowed text-secondary": 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}
+          value={value}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ChevronDownOutline, CloseOutline, ModuleOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/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 function ModuleButtonContent(props: ModuleButtonContentProps) {
+  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 max-w-full items-center gap-1">
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 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-sm bg-layer-1 py-1 text-secondary",
+                    className
+                  )}
+                >
+                  {!hideIcon && <ModuleOutline className="h-2.5 w-2.5 flex-shrink-0" />}
+                  {!hideText && (
+                    <Tooltip
+                      label={`Title: ${moduleDetails?.name ?? ""}`}
+                      layout="stacked"
+                      disabled={!showTooltip || isMobile}
+                    >
+                      <span className="max-w-40 truncate text-11 font-medium">{moduleDetails?.name}</span>
+                    </Tooltip>
+                  )}
+                  {!disabled && (
+                    <Tooltip label="Remove" disabled={!showTooltip || isMobile}>
+                      <button
+                        type="button"
+                        className="flex-shrink-0"
+                        onClick={() => {
+                          const newModuleIds = value.filter((m) => m !== moduleId);
+                          onChange(newModuleIds);
+                        }}
+                      >
+                        <CloseOutline className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
+                      </button>
+                    </Tooltip>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <>
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            <span className="flex-grow truncate text-left">{placeholder}</span>
+          </>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+  else
+    return (
+      <>
+        {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline 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,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function ModuleDropdown(props: TModuleDropdownProps) {
+  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,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ModuleOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import type { IModule } from "@plane/types";
+import { cn, sortBySelectedFirst } 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;
+  value?: string[] | string | null;
+}
+
+export const ModuleOptions = observer(function ModuleOptions(props: Props) {
+  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement, value } = 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">
+          <ModuleOutline 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">
+          <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("module.no_module")}</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions = sortBySelectedFirst(
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase())),
+    value
+  );
+
+  return (
+    <Combobox.Options as="ul" className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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
+                  as="li"
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                      {
+                        "bg-layer-transparent-hover": active,
+                        "text-primary": selected,
+                        "text-secondary": !selected,
+                      }
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});

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

@@ -0,0 +1,500 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { usePopper } from "react-popper";
+import { 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 { ChevronDownOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/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;
+};
+
+function BorderButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-layer-2 border-priority-urgent px-1",
+    high: "bg-layer-2 border-priority-high",
+    medium: "bg-layer-2 border-priority-medium",
+    low: "bg-layer-2 border-priority-low",
+    none: "bg-layer-2 border-strong",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      label={`${t("priority")}: ${priorityDetails?.title ?? t("common.none")}`}
+      disabled={!showTooltip || isMobile}
+    >
+      <div
+        className={cn(
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] 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
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": 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={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+function BackgroundButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-layer-2",
+    high: "bg-layer-2",
+    medium: "bg-layer-2",
+    low: "bg-layer-2",
+    none: "bg-layer-2",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={`${t("priority")}: ${t(priorityDetails?.key ?? "none")}`} disabled={!showTooltip || isMobile}>
+      <div
+        className={cn(
+          "flex h-full items-center gap-1.5 rounded-sm 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
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": 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={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+function TransparentButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      label={`${t("priority")}: ${priorityDetails?.title ?? t("common.none")}`}
+      disabled={!showTooltip || isMobile}
+    >
+      <div
+        className={cn(
+          "flex h-full w-full items-center gap-1.5 rounded-sm px-2 hover:bg-layer-transparent-hover",
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+            "bg-layer-1": isActive,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": 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={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+export function PriorityDropdown(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,
+        },
+      },
+    ],
+  });
+
+  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-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <ButtonToRender
+        priority={value ?? undefined}
+        className={buttonClassName}
+        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-layer-1": isOpen,
+        },
+        className
+      )}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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
+                    as="li"
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      cn(
+                        `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
+                      )
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        <span className="flex-grow truncate">{option.content}</span>
+                        {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+}

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

@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ChevronDownOutline, ProjectsOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+import { cn, sortBySelectedFirst } from "@plane/utils";
+// components
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import type { TProject } from "@plane/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 = observer(function ProjectDropdownBase(props: 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 h-4 w-4 flex-shrink-0 place-items-center">
+              <Logo logo={projectDetails?.logo_props} size={12} />
+            </span>
+          )}
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const filteredOptions = sortBySelectedFirst(
+    (query === ""
+      ? options?.filter((o) => o?.value !== currentProjectId)
+      : options?.filter((o) => o?.value !== currentProjectId && o?.query.toLowerCase().includes(query.toLowerCase()))
+    )?.filter((o): o is NonNullable<typeof o> => o !== undefined),
+    value
+  );
+
+  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 h-4 w-4 flex-shrink-0 place-items-center">
+        <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;
+            })
+          ) : (
+            <ProjectsOutline className="size-3 text-tertiary" />
+          )}
+        </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-secondary": 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="max-w-40 truncate">{getDisplayName(value, placeholder)}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline 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 as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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
+                        as="li"
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                            active ? "bg-layer-transparent-hover" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className="flex-grow truncate">{option.content}</span>
+                            {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    );
+                  })
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function ProjectDropdown(props: 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,261 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, SearchOutline } from "@makeplane/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 "@/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 = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
+  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-secondary": 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 ?? "var(--text-color-tertiary)"}
+                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 && (
+              <ChevronDownOutline
+                className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                aria-hidden="true"
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    // oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <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 as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder 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 items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function StateDropdown(props: TWorkItemStateDropdownProps) {
+  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;
+};