improve landing page quick action transition

Author: cyclotruc

app/templates/components/quick_actions.html

@@ -283,11 +283,20 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
         // Switch to new context
         workspaceManager.switchContext(contextId);
 
+        // Initialize the state to activate the agents category and check the specific agent
+        const state = workspaceManager.getState();
+        if (state) {
+            // Activate the agents category
+            state.setActionCategoryState('agents', true);
+            // Mark the specific agent as checked
+            state.setActionItemState('agents', agentName, true);
+        }
+        
         // Install agent using the same function as workspace sidebar
         installAgentInContext(agentName);
 
-        // Show workspace
-        showWorkspace();
+        // Show workspace with agents section in focus
+        showWorkspace('agents', agentName);
     } else {
         console.error('Failed to create new context');
     }
@@ -309,11 +318,20 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
         // Switch to new context
         workspaceManager.switchContext(contextId);
 
+        // Initialize the state to activate the MCPs category and check the specific MCP
+        const state = workspaceManager.getState();
+        if (state) {
+            // Activate the MCPs category
+            state.setActionCategoryState('mcps', true);
+            // Mark the specific MCP as checked
+            state.setActionItemState('mcps', mcpName, true);
+        }
+        
         // Install MCP using the same function as workspace sidebar
         installMCPInContext(mcpName);
 
-        // Show workspace
-        showWorkspace();
+        // Show workspace with MCPs section in focus
+        showWorkspace('mcps', mcpName);
     } else {
         console.error('Failed to create new context');
     }
@@ -335,11 +353,20 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
         // Switch to new context
         workspaceManager.switchContext(contextId);
 
+        // Initialize the state to activate the rules category and check the specific rule
+        const state = workspaceManager.getState();
+        if (state) {
+            // Activate the rules category
+            state.setActionCategoryState('rules', true);
+            // Mark the specific rule as checked
+            state.setActionItemState('rules', ruleName, true);
+        }
+        
         // Insert rule text directly into editor
         insertRuleInContext(ruleName);
 
-        // Show workspace
-        showWorkspace();
+        // Show workspace with rules section in focus
+        showWorkspace('rules', ruleName);
     } else {
         console.error('Failed to create new context');
     }
@@ -353,11 +380,21 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
         if (response.ok) {
             const result = await response.json();
 
-            // Add to virtual workspace
-            if (window.workspaceManager && window.workspaceManager.currentState) {
-                window.workspaceManager.currentState.addFile(result.path, result.content);
-                window.workspaceManager.saveState(window.workspaceManager.currentContextId);
-                window.workspaceManager.render();
+            if (window.workspaceManager) {
+                const state = window.workspaceManager.getState();
+                if (state) {
+                    // Store agent name to path mapping in metadata (for easier removal)
+                    if (!state.agentMappings) {
+                        state.agentMappings = {};
+                    }
+                    state.agentMappings[agentName] = result.path;
+                    
+                    // Mark the agent as checked in action state
+                    state.setActionItemState('agents', agentName, true);
+                }
+                
+                // Use includeFile which properly handles saving and rendering
+                window.workspaceManager.includeFile(result.path, result.content, true);
             }
         } else {
             const error = await response.json();
@@ -394,11 +431,14 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
         if (response.ok) {
             const result = await response.json();
 
-            // Add to virtual workspace
-            if (window.workspaceManager && window.workspaceManager.currentState) {
-                window.workspaceManager.currentState.addFile(result.path, result.content);
-                window.workspaceManager.saveState(window.workspaceManager.currentContextId);
-                window.workspaceManager.render();
+            if (window.workspaceManager) {
+                const state = window.workspaceManager.getState();
+                if (state && !result.was_removed) {
+                    // Mark the MCP as checked in action state
+                    state.setActionItemState('mcps', mcpName, true);
+                }
+                // Use includeFile which properly handles saving and rendering
+                window.workspaceManager.includeFile(result.path, result.content, true);
             }
         } else {
             const error = await response.json();
@@ -429,11 +469,14 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
             const ruleContent = result.content.trim();
             const newContent = currentContent + (currentContent ? '\n' : '') + ruleContent;
 
-            // Add to virtual workspace
-            if (window.workspaceManager && window.workspaceManager.currentState) {
-                window.workspaceManager.currentState.addFile('CLAUDE.md', newContent);
-                window.workspaceManager.saveState(window.workspaceManager.currentContextId);
-                window.workspaceManager.render();
+            if (window.workspaceManager) {
+                const state = window.workspaceManager.getState();
+                if (state) {
+                    // Mark the rule as checked in action state
+                    state.setActionItemState('rules', ruleName, true);
+                }
+                // Use includeFile which properly handles saving and rendering
+                window.workspaceManager.includeFile('CLAUDE.md', newContent, true);
             }
         } else {
             const error = await response.json();
@@ -444,8 +487,8 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
     }
 }
 
-// Show workspace with fade transition
-function showWorkspace() {
+// Show workspace with fade transition and focus on specific section
+function showWorkspace(focusSection = null, focusItem = null) {
     const quickActionsSection = document.getElementById('quick-actions-section');
     const workspaceSection = document.querySelector('.workspace-container');
     const backButtonContainer = document.getElementById('back-btn-container');
@@ -488,6 +531,11 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
 
             // Clear the editor and set focus
             clearEditorAndFocus();
+            
+            // Expand the relevant section if specified
+            if (focusSection) {
+                expandWorkspaceSection(focusSection, focusItem);
+            }
         }, 50);
     }, 300);
 }
@@ -539,6 +587,52 @@ <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
     }
 }
 
+// Expand the relevant workspace section and show it in priority
+function expandWorkspaceSection(sectionType, itemName) {
+    // Wait a bit for the workspace to be fully rendered
+    setTimeout(() => {
+        // First restore the action states to ensure UI is in sync
+        if (window.restoreActionStates) {
+            window.restoreActionStates();
+        }
+        
+        // Then wait a bit more for the UI to update before interacting
+        setTimeout(() => {
+            if (sectionType === 'agents') {
+                // Make sure the dropdown data is loaded for agents
+                if (window.loadDropdownData) {
+                    window.loadDropdownData('agents');
+                }
+            } else if (sectionType === 'mcps') {
+                // Make sure the dropdown data is loaded for MCPs
+                if (window.loadDropdownData) {
+                    window.loadDropdownData('mcps');
+                }
+            } else if (sectionType === 'rules') {
+                // Make sure the dropdown data is loaded for rules
+                if (window.loadDropdownData) {
+                    window.loadDropdownData('rules');
+                }
+            }
+            
+            // Scroll to the workspace actions panel to show it in priority
+            const workspaceActions = document.querySelector('.workspace-actions');
+            if (workspaceActions) {
+                // Get the position of the workspace actions panel
+                const rect = workspaceActions.getBoundingClientRect();
+                const currentScrollTop = window.pageYOffset;
+                const actionsTop = currentScrollTop + rect.top;
+                const navbarHeight = 64; // h-16 = 64px
+                const buffer = 20; // Small buffer below navbar
+                const targetScrollTop = Math.max(0, actionsTop - navbarHeight - buffer);
+                
+                // Smooth scroll to the actions panel
+                window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+            }
+        }, 100);
+    }, 200);
+}
+
 // Hide workspace with fade transition
 function hideWorkspace() {
     const quickActionsSection = document.getElementById('quick-actions-section');

app/templates/components/workspace_actions.html

@@ -428,6 +428,7 @@ <h4 class="text-sm font-bold text-black mb-2">Actions</h4>
 
 // Export for global use
 window.restoreActionStates = restoreActionStates;
+window.loadDropdownData = loadDropdownData;
 
 // Initialize on load
 document.addEventListener('DOMContentLoaded', function() {