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 -->
-          <div class="input-group">
-            <h2>Find Existing Calendar</h2>
-            <div class="search-container">
-              <input type="text" id="calendar-search" placeholder="Enter calendar name">
-              <button type="button" id="search-btn" class="button primary-btn">Search</button>
-            </div>
-            <div id="search-result"></div>
-          </div>
 
-          <!-- Merge Calendars Section -->
+          <!-- Unified Calendar Collection Section -->
-          <h2>Merge Calendars</h2>
+          <h2>Calendar Collection Name</h2>
           <div class="input-group">
+            <div class="search-container">
               <input type="text" 
                      id="link-group-name" 
-                   placeholder="Enter collection 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 class="collection-status" id="collection-status"></div>
           </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
+// Event listener for the unified input field
-    if (calendarSearch) {
+const linkGroupNameInput = document.getElementById('link-group-name');
-        calendarSearch.addEventListener('keypress', function(e) {
+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
+// 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 {
-                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 = '';
         });
 }
 
@@ -219,8 +245,10 @@ form.addEventListener('submit', (event) => {
                 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) {
@@ -231,7 +259,7 @@ form.addEventListener('submit', (event) => {
                 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!');

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}`);
 });