feat(calendar): unify calendar name input and calendar search input fields

public/index.html

@@ -13,23 +13,19 @@
       <!-- Merge Form -->
       <div class="form-card">
         <form id="merge-form">
-          <!-- Find Existing Calendar Section -->
+
+          <!-- Unified Calendar Collection Section -->
+          <h2>Calendar Collection Name</h2>
           <div class="input-group">
-            <h2>Find Existing Calendar</h2>
             <div class="search-container">
-              <input type="text" id="calendar-search" placeholder="Enter calendar name">
+              <input type="text" 
-              <button type="button" id="search-btn" class="button primary-btn">Search</button>
+                     id="link-group-name" 
+                     placeholder="Enter collection name (existing or new)"
+                     class="input-field">
+              <button type="button" id="search-btn" class="button secondary-btn">Search</button>
             </div>
             <div id="search-result"></div>
-          </div>
+            <div class="collection-status" id="collection-status"></div>
-
-          <!-- Merge Calendars Section -->
-          <h2>Merge Calendars</h2>
-          <div class="input-group">
-            <input type="text" 
-                   id="link-group-name" 
-                   placeholder="Enter collection name"
-                   class="input-field">
           </div>
 
           <!-- Global Settings -->

public/script.js

@@ -60,44 +60,70 @@ function extractCalendarName(input) {
 // Event listener for the search button
 if (searchBtn) {
     searchBtn.addEventListener('click', searchCalendar);
-    
-    // Also search when pressing Enter in the search field
-    if (calendarSearch) {
-        calendarSearch.addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                searchCalendar();
-            }
-        });
-    }
 }
 
-// Function to search for a calendar
+// Event listener for the unified input field
+const linkGroupNameInput = document.getElementById('link-group-name');
+if (linkGroupNameInput) {
+    // Search when pressing Enter
+    linkGroupNameInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault(); // Prevent form submission
+            searchCalendar();
+        }
+    });
+    
+    // Clear status when user starts typing
+    linkGroupNameInput.addEventListener('input', function() {
+        // Clear search results when user modifies the input
+        if (searchResult) {
+            searchResult.innerHTML = '';
+        }
+        // Reset editing state when input changes significantly
+        if (isEditing && this.value.trim() !== currentCalendarName) {
+            isEditing = false;
+            currentCalendarName = '';
+        }
+    });
+}
+
+// Function to search for a calendar using the unified input
 function searchCalendar() {
-    let calendarName = calendarSearch.value.trim();
+    let calendarName = document.getElementById('link-group-name').value.trim();
     if (!calendarName) {
-        searchResult.innerHTML = '<div class="alert alert-warning">Please enter a calendar name</div>';
+        searchResult.innerHTML = '<div class="alert alert-warning">Please enter a collection name</div>';
         return;
     }
     
     // Extract just the calendar name if a URL was entered
     calendarName = extractCalendarName(calendarName);
     
+    // Update the input field with the extracted name
+    document.getElementById('link-group-name').value = calendarName;
+    
     searchResult.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
     
     // Check if calendar exists
     fetch(`/calendar-config/${calendarName}`)
         .then(response => response.json())
         .then(data => {
+            const statusElement = document.getElementById('collection-status');
             if (data.exists) {
-                searchResult.innerHTML = `<div class="alert alert-success">Calendar found!</div>`;
+                // Clear search result
+                searchResult.innerHTML = '';
                 loadCalendarConfig(data.config, calendarName);
-            } else {
+                } else {
-                searchResult.innerHTML = `<div class="alert alert-danger">Calendar not found</div>`;
+                // Clear search result for new collections
+                searchResult.innerHTML = '';
+                // Reset to creation mode
+                isEditing = false;
+                currentCalendarName = '';
             }
         })
         .catch(error => {
             console.error('Error searching for calendar:', error);
-            searchResult.innerHTML = `<div class="alert alert-danger">Error searching for calendar</div>`;
+            searchResult.innerHTML = `<div class="alert alert-danger">Error checking collection</div>`;
+            document.getElementById('collection-status').innerHTML = '';
         });
 }
 
@@ -213,27 +239,29 @@ form.addEventListener('submit', (event) => {
         })        
         .then((data) => {
             mergedUrl = data.url;
-
+        
             // Hide the info text when showing results
             if (resultInfo) {
                 resultInfo.style.display = 'none';
             }
-            
+
+            const statusElement = document.getElementById('collection-status');
+
             if (isEditing) {
-                result.innerHTML = `Updated calendar URL: <a href="${data.url}">${data.url}</a>`;
+                result.innerHTML = `Collection updated successfully! <br>URL: <a href="${data.url}" target="_blank">${data.url}</a>`;
-                
+
                 // Update the search result
                 if (searchResult) {
                     searchResult.innerHTML = `<div class="alert alert-success">Calendar updated successfully!</div>`;
                 }
-                
+
                 // Reset editing state
                 isEditing = false;
                 currentCalendarName = '';
             } else {
-                result.innerHTML = `Merged calendar URL: <a href="${data.url}">${data.url}</a>`;
+                result.innerHTML = `New collection created! <br>URL: <a href="${data.url}" target="_blank">${data.url}</a>`;
             }
-            
+
             console.log('Operation completed successfully!');
         })
         .catch((error) => {

public/styles.css

@@ -33,7 +33,6 @@
   .input-group {
     display: grid;
     gap: 1rem;
-    margin-bottom: 1.5rem;
   }
   
   /* Calendar Entry Styling */

src/app.js

@@ -1,6 +1,6 @@
 import server from './server.js';
 
-const port = process.env.NODE_PORT || 3012;
+const port = process.env.NODE_PORT || 3013;
 server.listen(port, () => {
     console.log(`Server started on port ${port}`);
 });