chore: wip

Author: chrisbbreuer

examples/homepage.ts

@@ -27,6 +27,9 @@ let iconDragStartY = 0;
 let iconDragThresholdMet = false;
 let hasMove = false;
 let selectedIcon: HTMLElement | null = null;
+let activeEditInput: HTMLInputElement | null = null;
+let activeEditLabel: HTMLElement | null = null;
+let activeEditOriginalName: string = '';
 const DRAG_THRESHOLD = 5; // pixels to move before drag starts
 
 // Selection rectangle
@@ -55,6 +58,9 @@ function initializeIcons() {
   const desktopIcons = document.querySelector('.desktop-icons');
   desktopIcons?.addEventListener('click', (e) => {
     if ((e.target as HTMLElement).classList.contains('desktop-icons')) {
+      // Exit edit mode if active
+      exitEditMode();
+
       if (selectedIcon) {
         selectedIcon.classList.remove('selected');
         selectedIcon = null;
@@ -192,16 +198,27 @@ function initializeIcons() {
     // Immediately show selection on first click
     const wasAlreadySelected = selectedIcon === icon && icon.classList.contains('selected');
 
+    // Exit edit mode if clicking on a different icon
     if (selectedIcon && selectedIcon !== icon) {
+      exitEditMode();
       selectedIcon.classList.remove('selected');
     }
+
     icon.classList.add('selected');
     selectedIcon = icon as HTMLElement;
 
-    // Set timeout to check for label editing
-    clickTimeout = window.setTimeout(() => {
-      clickCount = 0;
-    }, 250);
+    // If clicking on an already selected icon, enter edit mode after short delay
+    if (wasAlreadySelected) {
+      clickTimeout = window.setTimeout(() => {
+        enterEditMode(icon as HTMLElement);
+        clickCount = 0;
+      }, 500);
+    } else {
+      // Set timeout to reset click count
+      clickTimeout = window.setTimeout(() => {
+        clickCount = 0;
+      }, 250);
+    }
   });
 
   icon.addEventListener('dblclick', (e) => {
@@ -266,22 +283,26 @@ function initializeIcons() {
 }
 
 // Call initialization when DOM is ready
+// window management
+let activewindow = null;
+let windowZIndex = 100;
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
     initializeIcons();
+    // Set the welcome window as active initially
+    activewindow = document.getElementById('window-welcome');
     // Update taskbar to show welcome window
     updateTaskbar();
   });
 } else {
   initializeIcons();
+  // Set the welcome window as active initially
+  activewindow = document.getElementById('window-welcome');
   // Update taskbar to show welcome window
   updateTaskbar();
 }
 
-// window management
-let activewindow = null;
-let windowZIndex = 100;
-
 function openWindow(windowId, fromTaskbarButton = null) {
   console.log('Opening window:', windowId);
   const windowEl = document.getElementById(`window-${windowId}`);
@@ -597,13 +618,14 @@ function updateTaskbar() {
 }
 
 // Keyboard shortcuts for window management
-document.addEventListener('keydown', (e) => {
-  // Cmd+W (Mac) or Ctrl+W (Windows/Linux) to close active window
-  if ((e.metaKey || e.ctrlKey) && e.key === 'w') {
-    e.preventDefault(); // Prevent browser from closing the tab
+document.addEventListener('keydown', (e: KeyboardEvent) => {
+  // Escape key to close active window
+  if (e.key === 'Escape' || e.key === 'Esc') {
+    const openWindow = document.querySelector('.window.active:not(.minimized)');
 
-    if (activewindow) {
-      const windowId = activewindow.id.replace('window-', '');
+    if (openWindow) {
+      e.preventDefault();
+      const windowId = openWindow.id.replace('window-', '');
       closeWindow(windowId);
     }
   }
@@ -1074,6 +1096,76 @@ function openIconFromMenu() {
   }
 }
 
+function exitEditMode(save: boolean = true) {
+  if (!activeEditInput || !activeEditLabel) return;
+
+  if (save) {
+    const newName = activeEditInput.value.trim();
+    if (newName) {
+      activeEditLabel.textContent = newName;
+    } else {
+      activeEditLabel.textContent = activeEditOriginalName;
+    }
+  } else {
+    activeEditLabel.textContent = activeEditOriginalName;
+  }
+
+  activeEditInput = null;
+  activeEditLabel = null;
+  activeEditOriginalName = '';
+}
+
+function enterEditMode(icon: HTMLElement) {
+  // Exit any existing edit mode first
+  exitEditMode();
+
+  const labelElement = icon.querySelector('.desktop-icon-label') as HTMLElement;
+  if (!labelElement) return;
+
+  const currentName = labelElement.textContent || '';
+
+  // Store edit state
+  activeEditLabel = labelElement;
+  activeEditOriginalName = currentName;
+
+  // Create an input element
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = currentName;
+  input.style.cssText = `
+    width: 100%;
+    background: white;
+    border: 1px solid #0066cc;
+    padding: 2px 4px;
+    font-family: 'Segoe UI', Tahoma, sans-serif;
+    font-size: 11px;
+    text-align: center;
+    outline: none;
+  `;
+
+  activeEditInput = input;
+
+  // Replace label with input
+  labelElement.textContent = '';
+  labelElement.appendChild(input);
+  input.focus();
+  input.select();
+
+  // Handle finish editing
+  const finishEdit = () => {
+    exitEditMode(true);
+  };
+
+  input.addEventListener('blur', finishEdit);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      exitEditMode(true);
+    } else if (e.key === 'Escape') {
+      exitEditMode(false);
+    }
+  });
+}
+
 function renameIcon() {
   if (!contextMenuIcon) return;