From bec3fa2dbd574dc1e5d65ffda30c954588f3d52c Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Fri, 24 Apr 2026 12:57:48 +0200
Subject: [PATCH] feat: make Add charts a primary dashboard action

Promote Add charts to a labeled primary button in the dashboard control bar and keep secondary actions in the icon toolbar for clearer chart-creation affordance.

Made-with: Cursor
---
 .../components/dashboard-control-bar.tsx      | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/web/modules/ee/analysis/dashboards/components/dashboard-control-bar.tsx b/apps/web/modules/ee/analysis/dashboards/components/dashboard-control-bar.tsx
index 1b80946449..230090c00c 100644
--- a/apps/web/modules/ee/analysis/dashboards/components/dashboard-control-bar.tsx
+++ b/apps/web/modules/ee/analysis/dashboards/components/dashboard-control-bar.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { deleteDashboardAction } from "@/modules/ee/analysis/dashboards/actions";
 import { AddExistingChartsDialog } from "@/modules/ee/analysis/dashboards/components/add-existing-charts-dialog";
+import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { IconBar } from "@/modules/ui/components/iconbar";
 
@@ -84,12 +85,6 @@ export const DashboardControlBar = ({
   ];
 
   const viewModeActions = [
-    {
-      icon: PlusIcon,
-      tooltip: t("common.add_charts"),
-      onClick: () => setIsAddExistingDialogOpen(true),
-      isVisible: !isReadOnly,
-    },
     {
       icon: RefreshCwIcon,
       tooltip: t("common.refresh"),
@@ -112,7 +107,19 @@ export const DashboardControlBar = ({
 
   return (
     <>
-      <IconBar actions={isEditing ? editModeActions : viewModeActions} />
+      {isEditing ? (
+        <IconBar actions={editModeActions} />
+      ) : (
+        <div className="flex items-center gap-2">
+          {!isReadOnly && (
+            <Button onClick={() => setIsAddExistingDialogOpen(true)}>
+              <PlusIcon />
+              {t("common.add_charts")}
+            </Button>
+          )}
+          <IconBar actions={viewModeActions} />
+        </div>
+      )}
       <DeleteDialog
         deleteWhat={t("workspace.analysis.dashboards.dashboard")}
         open={isDeleteDialogOpen}