Remove status indicator

Author: diegochine

AGENTS.md

@@ -35,18 +35,6 @@ This template provides:
 
 ## Key Conventions
 
-### Status Messages
-
-Use these exact status messages for consistency:
-
-- "Ready" - Application loaded successfully
-- "Loading..." - Data is being loaded
-- "Saving..." - Data is being saved
-- "Changes saved" - Auto-save completed successfully
-- "Save failed (will retry)" - Server save failed, will retry
-- "Failed to load data" - Data loading failed
-- "Auto-save initialized" - Auto-save system started
-
 ### File Naming
 
 - CSS files: kebab-case (e.g., `my-app.css`)
@@ -95,7 +83,7 @@ npm install
 For detailed information about:
 - Design System usage and components
 - CSS implementation guidelines
-- JavaScript API (HelpModal, status management)
+- JavaScript API (HelpModal)
 - Component reference and examples
 - Customization options
 
@@ -124,7 +112,7 @@ When working on applications built with this template:
 
 1. **Always reference BESPOKE-TEMPLATE.md** for template-specific
    implementation details
-2. **Follow the conventions** listed above for status messages and file naming
+2. **Follow the conventions** listed above for file naming
 3. **Use Design System components** directly - see BESPOKE-TEMPLATE.md for
    component classes and usage
 4. **Maintain consistency** with the template's structure and patterns

BESPOKE-TEMPLATE.md

@@ -84,11 +84,6 @@ Every application should include these files in the following order:
       - content: your help content (string or loaded from file)
       - theme: `'auto'`
 
-2. STATUS MANAGEMENT:
-   a) Use the provided setStatus() function for status updates
-   b) Update status for: loading, saving, errors, user actions
-   c) Keep status messages concise and informative
-
 ## Error Handling Requirements
 
 1. WRAP all async operations in try-catch blocks
@@ -98,18 +93,6 @@ Every application should include these files in the following order:
 5. HANDLE localStorage quota exceeded errors
 6. VALIDATE data before saving operations
 
-## Status Message Conventions
-
-Use these EXACT status messages for consistency:
-
-- "Ready" - Application loaded successfully
-- "Loading..." - Data is being loaded
-- "Saving..." - Data is being saved
-- "Changes saved" - Auto-save completed successfully
-- "Save failed (will retry)" - Server save failed, will retry
-- "Failed to load data" - Data loading failed
-- "Auto-save initialized" - Auto-save system started
-
 ## File Naming Conventions
 
 1. CSS files: kebab-case (e.g., my-app.css, task-manager.css)
@@ -155,7 +138,6 @@ when the design system adds them.
 <div class="bespoke">
   <header class="header">
     <h1>My App</h1>
-    <div class="status">Ready</div>
     <button class="button button-text">Help</button>
   </header>
 
@@ -188,7 +170,6 @@ when the design system adds them.
 ```html
 <header class="header">
   <h1>App Title</h1>
-  <div class="status">Status message</div>
   <button class="button button-text">Help</button>
 </header>
 ```
@@ -394,7 +375,6 @@ between light and dark themes. No additional configuration is needed.
   <header class="header">
     <h1>DB Schema Designer</h1>
     <button id="btn-save" class="button button-primary">Save</button>
-    <div class="status">Ready</div>
     <button class="button button-text">Help</button>
   </header>
 

README.md

@@ -14,7 +14,7 @@ This template uses the CodeSignal Design System located in `client/design-system
 ### 2. `client/bespoke-template.css`
 Template-specific CSS providing:
 - Layout components (header, sidebar, main-layout)
-- Utility classes (row, spacer, status)
+- Utility classes (row, spacer)
 - Temporary components (modals, form elements) - will be replaced when design system adds them
 
 ### 3. `client/index.html`

client/app.js

@@ -1,16 +1,9 @@
 // app.js
 import Modal from './design-system/components/modal/modal.js';
 
-const status = document.getElementById('status');
 let websocket = null;
 let helpModal = null;
 
-function setStatus(msg) {
-  if (status) {
-    status.textContent = msg;
-  }
-}
-
 // Initialize WebSocket connection
 function initializeWebSocket() {
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -22,7 +15,6 @@ function initializeWebSocket() {
 
     websocket.onopen = function(event) {
       console.log('WebSocket connected');
-      setStatus('Ready (WebSocket connected)');
     };
 
     websocket.onmessage = function(event) {
@@ -38,8 +30,6 @@ function initializeWebSocket() {
 
     websocket.onclose = function(event) {
       console.log('WebSocket disconnected');
-      setStatus('Ready (WebSocket disconnected)');
-
       // Attempt to reconnect after 3 seconds
       setTimeout(() => {
         console.log('Attempting to reconnect WebSocket...');
@@ -49,53 +39,39 @@ function initializeWebSocket() {
 
     websocket.onerror = function(error) {
       console.error('WebSocket error:', error);
-      setStatus('Ready (WebSocket error)');
     };
-
   } catch (error) {
     console.error('Failed to create WebSocket connection:', error);
-    setStatus('Ready (WebSocket unavailable)');
   }
 }
 
 // Load help content and initialize modal
 async function initializeHelpModal() {
   try {
-    const response = await fetch('./help-content-template.html');
+    const response = await fetch('./help-content.html');
     const helpContent = await response.text();
 
-    // Create help modal with actual content
     helpModal = Modal.createHelpModal({
       title: 'Help / User Guide',
       content: helpContent
     });
 
-    // Bind help button click handler
     const helpButton = document.getElementById('btn-help');
     if (helpButton) {
       helpButton.addEventListener('click', () => {
         helpModal.open();
       });
     }
-
-    setStatus('Ready');
   } catch (error) {
     console.error('Failed to load help content:', error);
-    // Fallback to placeholder content
     helpModal = Modal.createHelpModal({
       title: 'Help / User Guide',
-      content: '<p>Help content could not be loaded. Please check that help-content-template.html exists.</p>'
+      content: '<p>Help content could not be loaded. Please check that help-content.html exists.</p>'
     });
-
-    // Bind help button click handler
     const helpButton = document.getElementById('btn-help');
     if (helpButton) {
-      helpButton.addEventListener('click', () => {
-        helpModal.open();
-      });
+      helpButton.addEventListener('click', () => helpModal.open());
     }
-
-    setStatus('Ready (help content unavailable)');
   }
 }
 

client/bespoke-template.css

@@ -37,11 +37,6 @@
   color: var(--Colors-Text-Body-Strongest);
 }
 
-.bespoke .header .status {
-  font-size: var(--Fonts-Body-Default-xs);
-  color: var(--Colors-Text-Body-Medium);
-}
-
 /* Main Layout */
 .bespoke .main-layout {
   display: grid;

client/example-app/example-app.js

@@ -3,23 +3,15 @@
 
 import Modal from '../design-system/components/modal/modal.js';
 
-const status = document.getElementById('status');
-
 // App state
 let counterValue = 0;
 let incrementAmount = 1;
 let counterLabel = 'Counter';
 let dropdownInstance = null;
 let helpModal = null;
 
-  function setStatus(msg) {
-    if (status) {
-      status.textContent = msg;
-    }
-  }
-
-  // Update counter display
-  function updateCounterDisplay() {
+// Update counter display
+function updateCounterDisplay() {
     const counterDisplay = document.getElementById('counter-value');
     const labelDisplay = document.getElementById('display-label');
     const labelValueDisplay = document.getElementById('display-label-value');
@@ -43,10 +35,10 @@ let helpModal = null;
 
     // Update status tags
     updateStatusTags();
-  }
+}
 
-  // Update status tags based on counter value
-  function updateStatusTags() {
+// Update status tags based on counter value
+function updateStatusTags() {
     const primaryTag = document.getElementById('status-tag-primary');
     const positiveTag = document.getElementById('status-tag-positive');
     const negativeTag = document.getElementById('status-tag-negative');
@@ -64,31 +56,28 @@ let helpModal = null;
       if (positiveTag) positiveTag.style.display = 'none';
       if (negativeTag) negativeTag.style.display = 'none';
     }
-  }
+}
 
-  // Increment counter
-  function incrementCounter() {
+// Increment counter
+function incrementCounter() {
     counterValue += incrementAmount;
     updateCounterDisplay();
-    setStatus('Counter incremented');
-  }
+}
 
-  // Decrement counter
-  function decrementCounter() {
+// Decrement counter
+function decrementCounter() {
     counterValue -= incrementAmount;
     updateCounterDisplay();
-    setStatus('Counter decremented');
-  }
+}
 
-  // Reset counter
-  function resetCounter() {
+// Reset counter
+function resetCounter() {
     counterValue = 0;
     updateCounterDisplay();
-    setStatus('Counter reset');
-  }
+}
 
-  // Initialize dropdown component
-  function initializeDropdown() {
+// Initialize dropdown component
+function initializeDropdown() {
     if (typeof window.Dropdown === 'undefined') {
       console.error('Dropdown class not found. Make sure dropdown.js is loaded.');
       return;
@@ -109,16 +98,15 @@ let helpModal = null;
         onSelect: (value) => {
           incrementAmount = parseInt(value, 10);
           updateCounterDisplay();
-          setStatus(`Increment amount set to ${incrementAmount}`);
         }
       });
     } catch (error) {
       console.error('Error initializing dropdown:', error);
     }
-  }
+}
 
-  // Initialize event listeners
-  function initializeEventListeners() {
+// Initialize event listeners
+function initializeEventListeners() {
     // Sidebar controls
     const btnIncrement = document.getElementById('btn-increment');
     const btnDecrement = document.getElementById('btn-decrement');
@@ -145,13 +133,12 @@ let helpModal = null;
       counterLabelInput.addEventListener('input', (e) => {
         counterLabel = e.target.value || 'Counter';
         updateCounterDisplay();
-        setStatus('Label updated');
       });
     }
-  }
+}
 
-  // Initialize help modal
-  async function initializeHelpModal() {
+// Initialize help modal
+async function initializeHelpModal() {
     try {
       const response = await fetch('./help-content.html');
       const helpContent = await response.text();
@@ -185,28 +172,20 @@ let helpModal = null;
         });
       }
     }
-  }
-
-  // Initialize everything when DOM is ready
-  async function initialize() {
-    setStatus('Loading...');
-
-    // Initialize event listeners
-    initializeEventListeners();
-
-    // Initialize help modal
-    await initializeHelpModal();
-
-    // Initialize dropdown after a short delay to ensure Dropdown class is loaded
-    setTimeout(() => {
-      initializeDropdown();
-      updateCounterDisplay();
-      setStatus('Ready');
-    }, 100);
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initialize);
-  } else {
-    initialize();
-  }
+}
+
+// Initialize everything when DOM is ready
+async function initialize() {
+  initializeEventListeners();
+  await initializeHelpModal();
+  setTimeout(() => {
+    initializeDropdown();
+    updateCounterDisplay();
+  }, 100);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initialize);
+} else {
+  initialize();
+}

client/example-app/index.html

@@ -31,7 +31,6 @@
   <header class="header">
     <h1>Component Showcase</h1>
     <div class="spacer"></div>
-    <div id="status" class="status">Ready</div>
     <button id="btn-help" class="button button-text">Help</button>
   </header>
 

client/help-content.html

@@ -112,7 +112,7 @@ <h2>Troubleshooting / FAQ</h2>
 
   <details>
     <summary>Is my work automatically saved?</summary>
-    <p>Yes, the app automatically saves your work. You'll see status messages indicating when saves occur.</p>
+    <p>Yes, the app saves your work automatically in the background.</p>
   </details>
 </section>
 

client/index.html

@@ -32,7 +32,6 @@
     <h1>APP NAME</h1>
     <!-- APP_SPECIFIC_HEADER_CONTENT -->
     <div class="spacer"></div>
-    <div id="status" class="status">Ready</div>
     <button id="btn-help" class="button button-text">Help</button>
   </header>