[WEB-1215] chore: display favorite module filter in applied filter section. (#4402)

* [WEB-1215] chore: display `favorite module` filter in applied filter section.

* fix: build errors.

web/components/modules/applied-filters/root.tsx

@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { TModuleFilters } from "@plane/types";
+import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
 import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
 // helpers
@@ -8,19 +8,30 @@ import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 
 type Props = {
   appliedFilters: TModuleFilters;
+  isFavoriteFilterApplied?: boolean;
   handleClearAllFilters: () => void;
+  handleDisplayFiltersUpdate?: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
   handleRemoveFilter: (key: keyof TModuleFilters, value: string | null) => void;
   alwaysAllowEditing?: boolean;
+  isArchived?: boolean;
 };
 
 const MEMBERS_FILTERS = ["lead", "members"];
 const DATE_FILTERS = ["start_date", "target_date"];
 
 export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
-  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  const {
+    appliedFilters,
+    isFavoriteFilterApplied,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    handleDisplayFiltersUpdate,
+    alwaysAllowEditing,
+    isArchived = false,
+  } = props;
 
-  if (!appliedFilters) return null;
-  if (Object.keys(appliedFilters).length === 0) return null;
+  if (!appliedFilters && !isFavoriteFilterApplied) return null;
+  if (Object.keys(appliedFilters).length === 0 && !isFavoriteFilterApplied) return null;
 
   const isEditingAllowed = alwaysAllowEditing;
 
@@ -73,6 +84,33 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
           </div>
         );
       })}
+      {!isArchived && isFavoriteFilterApplied && (
+        <div
+          key="module_display_filters"
+          className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+        >
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-xs text-custom-text-300">Modules</span>
+            <div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+              Favorite
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  onClick={() =>
+                    handleDisplayFiltersUpdate &&
+                    handleDisplayFiltersUpdate({
+                      favorites: !isFavoriteFilterApplied,
+                    })
+                  }
+                >
+                  <X size={10} strokeWidth={2} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
       {isEditingAllowed && (
         <button
           type="button"

web/components/modules/archived-modules/root.tsx

@@ -64,6 +64,7 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
             handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
             handleRemoveFilter={handleRemoveFilter}
             alwaysAllowEditing
+            isArchived
           />
         </div>
       )}

web/components/modules/module-view-header.tsx

@@ -84,7 +84,7 @@ export const ModuleViewHeader: FC = observer(() => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
   });
 
-  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
 
   return (
     <div className="hidden h-full sm:flex items-center gap-3 self-end">

web/components/modules/modules-list-view.tsx

@@ -4,13 +4,7 @@ import { useRouter } from "next/router";
 // components
 import { ListLayout } from "@/components/core/list";
 import { EmptyState } from "@/components/empty-state";
-import {
-  ModuleCardItem,
-  ModuleListItem,
-  ModulePeekOverview,
-  ModuleViewHeader,
-  ModulesListGanttChartView,
-} from "@/components/modules";
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
@@ -73,12 +67,6 @@ export const ModulesListView: React.FC = observer(() => {
 
   return (
     <>
-      <div className="h-[50px] flex-shrink-0 w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
-        <div className="flex items-center">
-          <span className="block text-sm font-medium">Module name</span>
-        </div>
-        <ModuleViewHeader />
-      </div>
       {displayFilters?.layout === "list" && (
         <div className="h-full overflow-y-auto">
           <div className="flex h-full w-full justify-between">