fix: correct settings sidebar back navigation behavior

Avoid redirecting users through settings history entries by linking directly to workspace settings and detecting when back would stay inside settings to route to surveys instead.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/app/(app)/workspaces/[workspaceId]/components/MainNavigation.tsx

@@ -22,7 +22,7 @@ import {
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
@@ -110,6 +110,8 @@ export const MainNavigation = ({
 
   const isOwnerOrManager = isManager || isOwner;
   const isSettingsMode = pathname?.includes("/settings");
+  const [previousPathname, setPreviousPathname] = useState<string | null>(null);
+  const currentPathRef = useRef<string | null>(pathname ?? null);
 
   const toggleSidebar = () => {
     setIsCollapsed(!isCollapsed);
@@ -121,6 +123,15 @@ export const MainNavigation = ({
     setIsCollapsed(isCollapsedValueFromLocalStorage);
   }, []);
 
+  useEffect(() => {
+    if (!pathname || currentPathRef.current === pathname) {
+      return;
+    }
+
+    setPreviousPathname(currentPathRef.current);
+    currentPathRef.current = pathname;
+  }, [pathname]);
+
   useEffect(() => {
     const toggleTextOpacity = () => {
       setIsTextVisible(isCollapsed);
@@ -194,7 +205,7 @@ export const MainNavigation = ({
   const settingsNavigationItem = useMemo(
     () => ({
       name: t("common.settings"),
-      href: `/workspaces/${workspace.id}/settings`,
+      href: `/workspaces/${workspace.id}/settings/workspace/general`,
       icon: SettingsIcon,
       isActive: isSettingsMode,
       disabled: isMembershipPending || isBilling,
@@ -467,7 +478,11 @@ export const MainNavigation = ({
           {isSettingsMode ? (
             <div className="flex flex-col overflow-hidden">
               <div className="mb-2 px-3">
-                <GoBackButton />
+                <GoBackButton
+                  previousPath={previousPathname}
+                  settingsPathPrefix={`/workspaces/${workspace.id}/settings`}
+                  settingsFallbackUrl={`/workspaces/${workspace.id}/surveys`}
+                />
               </div>
 
               {/* Settings sidebar content */}

apps/web/app/(app)/workspaces/[workspaceId]/components/SettingsSidebarContent.tsx

@@ -335,7 +335,6 @@ export const SettingsSidebarContent = ({
       href: `${basePath}/organization/feedback-directories`,
       icon: <FoldersIcon className={iconClassName} />,
       hidden: isMember,
-      disabled: !isOwnerOrManager,
     },
     {
       id: "org-api-keys",

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/layout.tsx

@@ -1,11 +1,4 @@
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
-
-const AccountSettingsLayout = async (props: {
-  params: Promise<{ workspaceId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
+const AccountSettingsLayout = (props: { children: React.ReactNode }) => {
   return <>{props.children}</>;
 };
 

apps/web/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role.ts

@@ -1,12 +0,0 @@
-import { redirect } from "next/navigation";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getBillingFallbackPath } from "@/lib/membership/navigation";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
-
-export const redirectBillingRoleFromRestrictedSettings = async (workspaceId: string): Promise<void> => {
-  const { isBilling } = await getWorkspaceAuth(workspaceId);
-
-  if (isBilling) {
-    redirect(getBillingFallbackPath(workspaceId, IS_FORMBRICKS_CLOUD));
-  }
-};

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/api-keys/page.tsx

@@ -1,11 +1,3 @@
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
 import { APIKeysPage } from "@/modules/organization/settings/api-keys/page";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
-  const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
-
-  return APIKeysPage(props);
-};
-
-export default Page;
+export default APIKeysPage;

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/billing/page.tsx

@@ -1,18 +1,3 @@
-import { redirect } from "next/navigation";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { PricingPage } from "@/modules/ee/billing/page";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
-  const params = await props.params;
-  const { isBilling } = await getWorkspaceAuth(params.workspaceId);
-
-  if (isBilling && !IS_FORMBRICKS_CLOUD) {
-    redirect(getBillingFallbackPath(params.workspaceId, IS_FORMBRICKS_CLOUD));
-  }
-
-  return PricingPage(props);
-};
-
-export default Page;
+export default PricingPage;

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/domain/page.tsx

@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation";
 import { AuthenticationError } from "@formbricks/types/errors";
 import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
 import { PrettyUrlsTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/domain/components/pretty-urls-table";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
@@ -15,7 +14,6 @@ import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
 
 const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
   const t = await getTranslate();
 
   if (IS_FORMBRICKS_CLOUD) {

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/page.tsx

@@ -1,10 +1,9 @@
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
-import { notFound, redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import { EnterpriseLicenseFeaturesTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseFeaturesTable";
 import { EnterpriseLicenseStatus } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseStatus";
 import { ENTERPRISE_LICENSE_REQUEST_FORM_URL, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getTranslate } from "@/lingodotdev/server";
 import { GRACE_PERIOD_MS, getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import { Button } from "@/modules/ui/components/button";
@@ -15,16 +14,12 @@ import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
 const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
-  const { isBilling, isMember } = await getWorkspaceAuth(params.workspaceId);
-
-  if (isBilling && IS_FORMBRICKS_CLOUD) {
-    redirect(getBillingFallbackPath(params.workspaceId, IS_FORMBRICKS_CLOUD));
-  }
-
   if (IS_FORMBRICKS_CLOUD) {
     return notFound();
   }
 
+  const { isMember } = await getWorkspaceAuth(params.workspaceId);
+
   const isPricingDisabled = isMember;
 
   if (isPricingDisabled) {

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/feedback-directories/page.tsx

@@ -1,11 +1 @@
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
-import { FeedbackDirectoriesPage } from "@/modules/ee/feedback-directory/page";
-
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
-  const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
-
-  return FeedbackDirectoriesPage(props);
-};
-
-export default Page;
+export { FeedbackDirectoriesPage as default } from "@/modules/ee/feedback-directory/page";

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/page.tsx

@@ -1,4 +1,3 @@
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
 import { isInstanceAIConfigured } from "@/lib/ai/service";
 import {
   ENTERPRISE_LICENSE_REQUEST_FORM_URL,
@@ -29,7 +28,6 @@ import { SecurityListTip } from "./components/SecurityListTip";
 
 const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
   const t = await getTranslate();
 
   const { session, currentUserMembership, organization, isOwner, isManager } = await getWorkspaceAuth(

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/teams/page.tsx

@@ -1,11 +1,3 @@
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
 import { TeamsPage } from "@/modules/organization/settings/teams/page";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
-  const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
-
-  return TeamsPage(props);
-};
-
-export default Page;
+export default TeamsPage;

apps/web/app/(app)/workspaces/[workspaceId]/settings/page.tsx

@@ -1,9 +1,7 @@
 import { redirect } from "next/navigation";
-import { redirectBillingRoleFromRestrictedSettings } from "@/app/(app)/workspaces/[workspaceId]/settings/lib/redirect-billing-role";
 
 const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   const params = await props.params;
-  await redirectBillingRoleFromRestrictedSettings(params.workspaceId);
   return redirect(`/workspaces/${params.workspaceId}/settings/workspace/general`);
 };
 

apps/web/modules/ui/components/go-back-button/index.tsx

@@ -1,13 +1,34 @@
 "use client";
 
 import { ArrowLeftIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 
-export const GoBackButton = ({ url }: { url?: string }) => {
+interface GoBackButtonProps {
+  url?: string;
+  previousPath?: string | null;
+  settingsPathPrefix?: string;
+  settingsFallbackUrl?: string;
+}
+
+export const GoBackButton = ({
+  url,
+  previousPath,
+  settingsPathPrefix,
+  settingsFallbackUrl,
+}: Readonly<GoBackButtonProps>) => {
   const router = useRouter();
+  const pathname = usePathname();
   const { t } = useTranslation();
+
+  const shouldRedirectToSettingsFallback =
+    !!settingsFallbackUrl &&
+    !!settingsPathPrefix &&
+    !!previousPath &&
+    previousPath.startsWith(settingsPathPrefix) &&
+    previousPath !== pathname;
+
   return (
     <Button
       size="sm"
@@ -17,6 +38,12 @@ export const GoBackButton = ({ url }: { url?: string }) => {
           router.push(url);
           return;
         }
+
+        if (shouldRedirectToSettingsFallback) {
+          router.replace(settingsFallbackUrl);
+          return;
+        }
+
         router.back();
       }}>
       <ArrowLeftIcon />