From 39c8489e8f3582e6b8c7a2099323b608fb627354 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 17 May 2026 00:14:16 +0800
Subject: [PATCH] fix: restore style pro toolbar entry

---
 .../[id]/CanvasEditorLegacyPageClient.tsx     | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx b/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
index 965214ee7..889e88a73 100644
--- a/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
+++ b/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
@@ -1976,9 +1976,19 @@ export default function CanvasEditorLegacyPage({ params }: PageProps) {
     canvasToolbarConfig,
     "styleMode"
   );
+  const isStyleProFeatureEnabled = siteSettingsData?.styleProEnabled !== false;
   const isStyleProToolbarEnabled =
     isCanvasToolbarItemEnabled(canvasToolbarConfig, "stylePro") &&
-    siteSettingsData?.styleProEnabled !== false;
+    isStyleProFeatureEnabled;
+  const shouldUseStyleModeButtonForStylePro =
+    !isAgentWorkspaceEnabled &&
+    isStyleProFeatureEnabled &&
+    isStyleModeToolbarEnabled;
+  const shouldShowStyleModeToolbarButton =
+    isStyleModeToolbarEnabled &&
+    (isAgentWorkspaceEnabled || shouldUseStyleModeButtonForStylePro);
+  const shouldShowStandaloneStyleProToolbarButton =
+    isStyleProToolbarEnabled && !shouldUseStyleModeButtonForStylePro;
   const sanitizedWorkflowSelections = useMemo(
     () =>
       sanitizeAgentWorkflowSelections({
@@ -2830,6 +2840,23 @@ export default function CanvasEditorLegacyPage({ params }: PageProps) {
     setPanelMode("chat");
   }, [agentProjectId, isAgentMode, updateCanvasSearchParams]);
 
+  const handleStyleModeToolbarClick = useCallback(() => {
+    if (isAgentWorkspaceEnabled) {
+      handleToggleAgentMode();
+      return;
+    }
+
+    if (isStyleProFeatureEnabled) {
+      router.push(`/canvas/${id}/style-pro`);
+    }
+  }, [
+    handleToggleAgentMode,
+    id,
+    isAgentWorkspaceEnabled,
+    isStyleProFeatureEnabled,
+    router,
+  ]);
+
   const buildCurrentWorkflowPersistedState =
     useCallback((): AgentWorkflowPersistedState => {
       const persistedMaterials = appearanceRecognitionEnabled
@@ -10184,9 +10211,7 @@ export default function CanvasEditorLegacyPage({ params }: PageProps) {
               </Tooltip>
             ) : null}
 
-            {isAgentWorkspaceEnabled &&
-            isStyleModeToolbarEnabled &&
-            !isVideoMode ? (
+            {shouldShowStyleModeToolbarButton && !isVideoMode ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -10194,19 +10219,26 @@ export default function CanvasEditorLegacyPage({ params }: PageProps) {
                       isVideoMode
                         ? VIDEO_CANVAS_TOOLBAR_BUTTON_CLASS
                         : "h-9 w-9 rounded-xl",
-                      isAgentMode &&
+                      isAgentWorkspaceEnabled &&
+                        isAgentMode &&
                         (isVideoMode
                           ? VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS
                           : "bg-primary text-primary-foreground hover:bg-primary/90")
                     )}
-                    onClick={handleToggleAgentMode}
+                    onClick={handleStyleModeToolbarClick}
                     size="icon"
-                    variant={isAgentMode ? "secondary" : "ghost"}
+                    variant={
+                      isAgentWorkspaceEnabled && isAgentMode
+                        ? "secondary"
+                        : "ghost"
+                    }
                   >
                     <CanvasToolbarIcon
-                      active={isAgentMode}
+                      active={isAgentWorkspaceEnabled && isAgentMode}
                       className="h-4 w-4"
-                      fallback={Wand2}
+                      fallback={
+                        shouldUseStyleModeButtonForStylePro ? Sparkles : Wand2
+                      }
                       item={getCanvasToolbarItem(
                         canvasToolbarConfig,
                         "styleMode"
@@ -10220,7 +10252,7 @@ export default function CanvasEditorLegacyPage({ params }: PageProps) {
               </Tooltip>
             ) : null}
 
-            {isStyleProToolbarEnabled && !isVideoMode ? (
+            {shouldShowStandaloneStyleProToolbarButton && !isVideoMode ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button