fix: ensure empty state group header is visible (#6606)

web/core/components/project-states/group-item.tsx

@@ -3,11 +3,13 @@
 import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, Plus } from "lucide-react";
+// plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IState, TStateGroups } from "@plane/types";
-// components
 import { StateGroupIcon } from "@plane/ui";
 import { cn } from "@plane/utils";
+// components
 import { StateList, StateCreate } from "@/components/project-states";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
@@ -34,17 +36,18 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
     handleExpand,
     handleGroupCollapse,
   } = props;
+  // refs
+  const dropElementRef = useRef<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { allowPermissions } = useUserPermissions();
   // state
   const [createState, setCreateState] = useState(false);
-
   // derived values
   const currentStateExpanded = groupsExpanded.includes(groupKey);
-  // refs
-  const dropElementRef = useRef<HTMLDivElement | null>(null);
-
   const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+  const shouldShowEmptyState = states.length === 0 && currentStateExpanded && !createState;
 
   return (
     <div
@@ -80,7 +83,14 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
         </div>
       </div>
 
-      {groupedStates[groupKey].length > 0 && currentStateExpanded && (
+      {shouldShowEmptyState && (
+        <div className="flex flex-col justify-center items-center h-full py-4 text-sm text-custom-text-300">
+          <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
+          {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
+        </div>
+      )}
+
+      {currentStateExpanded && (
         <div id="group-droppable-container">
           <StateList
             workspaceSlug={workspaceSlug}