[WIKI-494] Fix: feature flag for shared pages in sidebar (#3509)

* fix: shared pages feature flag

* fix: empty state

web/app/(all)/[workspaceSlug]/(pages)/pages/(pageType)/shared/empty-shared-pages.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Users, Crown } from "lucide-react";
+// plane imports
+import { EUserWorkspaceRoles, EUserPermissionsLevel } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+// assets
+import { useWorkspaceSubscription } from "@/plane-web/hooks/store";
+
+export const SharedPagesFallback = observer(() => {
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { togglePaidPlanModal } = useWorkspaceSubscription();
+
+  // derived values
+  const canUpgrade = allowPermissions([EUserWorkspaceRoles.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  return (
+    <div className="h-full bg-custom-background-100">
+      <div className="flex items-center justify-center h-full px-page-x">
+        <div className="flex w-full max-w-md flex-col items-center text-center">
+          <div className="w-20 h-20 bg-custom-background-80 rounded-xl flex items-center justify-center mb-6">
+            <Users className="w-10 h-10 text-custom-text-300" />
+          </div>
+
+          <h4 className="text-xl font-semibold mb-3">Upgrade for Page Sharing</h4>
+          <p className="text-custom-text-300 text-base mb-6">
+            Collaborate seamlessly by sharing pages with your team members. Grant different access levels and work
+            together on your documentation and knowledge base.
+          </p>
+
+          <div className="flex flex-col items-center space-y-1 text-sm mb-4">
+            <div className="flex items-center gap-3">
+              <span className="text-custom-text-200">Share pages with your team</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-custom-text-200">Control access levels (view, edit)</span>
+            </div>
+          </div>
+
+          {canUpgrade && (
+            <div className="flex justify-center gap-4 self-center mt-4">
+              <Button
+                size="sm"
+                className="bg-custom-primary hover:bg-custom-primary/90 focus:bg-custom-primary/90"
+                onClick={() => togglePaidPlanModal(true)}
+              >
+                <Crown className="w-3.5 h-3.5" />
+                Upgrade
+              </Button>
+              <a
+                href="https://plane.so/pricing"
+                target="_blank"
+                className={cn(getButtonStyling("link-primary", "sm"), "hover:underline")}
+              >
+                Talk custom pricing
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

web/app/(all)/[workspaceSlug]/(pages)/pages/(pageType)/shared/page.tsx

@@ -1,8 +1,22 @@
 "use client";
 
+import { useParams } from "next/navigation";
 // plane web components
+import { WithFeatureFlagHOC } from "@/plane-web/components/feature-flags";
 import { WikiPagesListLayoutRoot } from "@/plane-web/components/pages";
+// local components
+import { SharedPagesFallback } from "./empty-shared-pages";
 
 export default function SharedPagesList() {
-  return <WikiPagesListLayoutRoot pageType="shared" />;
+  const { workspaceSlug } = useParams();
+
+  return (
+    <WithFeatureFlagHOC
+      workspaceSlug={workspaceSlug?.toString()}
+      flag="SHARED_PAGES"
+      fallback={<SharedPagesFallback />}
+    >
+      <WikiPagesListLayoutRoot pageType="shared" />
+    </WithFeatureFlagHOC>
+  );
 }

web/ee/components/pages/sidebar/section/section-root.tsx

@@ -15,6 +15,7 @@ import { useAppTheme } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+import { useFlag } from "@/plane-web/hooks/store/use-flag";
 // local imports
 import { SectionHeader, SectionContent } from "./components";
 import { SECTION_DETAILS } from "./constants";
@@ -44,6 +45,14 @@ const WikiSidebarListSectionRootContent: React.FC<SectionRootProps> = observer((
     EPageStoreType.WORKSPACE
   );
 
+  // feature flag check for shared pages
+  const isSharedPagesEnabled = useFlag(workspaceSlug?.toString(), "SHARED_PAGES", false);
+
+  // Don't render shared section if feature flag is disabled
+  if (sectionType === "shared" && !isSharedPagesEnabled) {
+    return null;
+  }
+
   // Custom hooks
   const { isDropping } = useSectionDragAndDrop(listSectionRef, getPageById, sectionType);
   const { isLoading } = useSectionPages(sectionType);