better install menu

Author: cyclotruc

app/static/js/auto_share.js

@@ -59,6 +59,9 @@ class AutoShareManager {
     markDirty() {
         this.dirty = true;
 
+        // Immediately gray out the UI to show context has changed
+        this.setUnsyncedState();
+        
         // Clear existing timer
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
@@ -179,6 +182,21 @@ class AutoShareManager {
         return JSON.stringify(payload);
     }
 
+    setUnsyncedState() {
+        // Gray out only the script input immediately when content changes
+        if (this.linkInput) {
+            this.linkInput.classList.add('opacity-50');
+            this.linkInput.disabled = true;
+            if (this.currentShareUrl) {
+                this.linkInput.value = this.currentShareUrl + ' (updating...)';
+            }
+        }
+        // Keep copy button enabled but just disable if no URL
+        if (this.copyButton) {
+            this.copyButton.disabled = !this.currentShareUrl;
+        }
+    }
+    
     setState(newState) {
         this.state = newState;
 
@@ -211,8 +229,9 @@ class AutoShareManager {
                     this.linkInput.disabled = true;
                 }
                 if (this.copyButton) {
-                    this.copyButton.disabled = true;
-                    this.copyButton.classList.add('opacity-50');
+                    this.copyButton.disabled = !this.currentShareUrl;
+                    // Don't gray out the copy button
+                    this.copyButton.classList.remove('opacity-50');
                 }
                 break;
 

app/templates/components/hero.html

@@ -1,7 +1,7 @@
 <div class="mb-8">
     <div class="w-full flex sm:flex-row flex-col justify-center sm:items-center relative">
         <h1 class="landing-page-title">
-            <span class="block">Instant rules</span>
+            <span class="block">Composable rules</span>
             <span class="block">for coding agents</span>
         </h1>
         <!-- Decorative logos positioned relative to the centered content -->

app/templates/components/workspace_actions.html

@@ -5,7 +5,6 @@ <h3 class="text-lg font-black text-black mb-4">Add tools</h3>
 
         <!-- QuickAction Section - Search Bar -->
         <div class="mb-4">
-            <h4 class="text-sm font-bold text-black mb-2">Quick Action</h4>
             <div class="search-container">
                 <input 
                     type="text" 

app/templates/components/workspace_editor.html

@@ -23,16 +23,62 @@ <h3 class="text-lg font-black text-black">Context editor</h3>
             <div class="w-full h-full bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-0"></div>
             <div id="workspace-monaco-editor" 
                  class="relative z-10 border-2 border-black bg-white h-full" 
-                 style="min-height: 350px;"></div>
+                 style="min-height: 320px;"></div>
         </div>
 
-        <!-- Install in one click bar -->
-        <div id="auto-share-panel" class="flex gap-2 items-center justify-center py-2 border-t-2 border-gray-200">
-            <label class="text-sm font-bold text-black">Install in one click</label>
-            <input id="share-link-input" type="text" readonly class="px-3 py-1 bg-white border-2 border-black text-black font-mono text-xs shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:outline-none" style="width: 320px; cursor: text;" value="Waiting for first save...">
-            <button id="copy-share-link" class="px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                Copy
-            </button>
+        <!-- Install in one click card with tabs -->
+        <div class="flex justify-center">
+            <div class="relative inline-block">
+                <!-- Tabs for the card -->
+                <div class="flex gap-0">
+                    <button id="share-tab-install" class="share-tab-button active px-3 py-1 bg-pink-400 border-2 border-black border-b-0 text-black font-bold text-xs shadow-[2px_0px_0px_0px_rgba(0,0,0,1)] relative z-10">
+                        macOS/Linux
+                    </button>
+                    <button id="share-tab-other" class="share-tab-button px-3 py-1 bg-gray-100 border-2 border-gray-400 border-b-0 text-gray-500 font-medium text-xs shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)] relative z-5" disabled>
+                        Windows (soon)
+                    </button>
+                </div>
+                
+                <!-- Card content -->
+                <div id="auto-share-panel" class="bg-pink-400 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] p-3 relative z-0" style="margin-top: -2px;">
+                    <div class="flex gap-2 items-center">
+                        <input id="share-link-input" type="text" readonly class="px-3 py-1 bg-white border-2 border-black text-black font-mono text-xs shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:outline-none" style="min-width: 450px; cursor: text;" value="Waiting for first save...">
+                        <button id="copy-share-link" class="px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-xs disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                            Copy
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-</div>
+</div>
+
+<!-- Tab switching for share panel -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const shareTabs = document.querySelectorAll('.share-tab-button');
+    
+    shareTabs.forEach(tab => {
+        tab.addEventListener('click', function() {
+            // Skip if tab is disabled
+            if (this.disabled) return;
+            
+            // Remove active state from all tabs
+            shareTabs.forEach(t => {
+                if (!t.disabled) {
+                    t.classList.remove('active', 'bg-pink-400', 'border-black', 'text-black', 'font-bold', 'z-10');
+                    t.classList.add('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
+                    t.classList.remove('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
+                    t.classList.add('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
+                }
+            });
+            
+            // Add active state to clicked tab
+            this.classList.add('active', 'bg-pink-400', 'border-black', 'text-black', 'font-bold', 'z-10');
+            this.classList.remove('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
+            this.classList.remove('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
+            this.classList.add('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
+        });
+    });
+});
+</script>