code cleanup

src/main/resources/static/js/components.js

@@ -5,7 +5,6 @@ async function loadComponent(componentPath, targetId, customizations = {}) {
 
         let html = await response.text();
 
-        // Apply customizations
         Object.entries(customizations).forEach(([placeholder, value]) => {
             html = html.replace(new RegExp(`{{${placeholder}}}`, 'g'), value);
         });
@@ -19,7 +18,6 @@ async function loadComponent(componentPath, targetId, customizations = {}) {
     }
 }
 
-// Page configurations
 const PAGE_CONFIGS = {
     editor: {
         header: `
@@ -48,7 +46,6 @@ const PAGE_CONFIGS = {
     }
 };
 
-// Initialize page components
 async function initPage(pageType) {
     const config = PAGE_CONFIGS[pageType];
     if (!config) {
@@ -56,21 +53,17 @@ async function initPage(pageType) {
         return;
     }
 
-    // Load header
     await loadComponent('/components/header.html', 'headerContainer', {
         HEADER_CONTENT: config.header
     });
 
-    // Load modal if needed
     if (config.needsModal) {
         await loadComponent('/components/modal.html', 'modalContainer');
     }
 
-    // Initialize theme
     if (typeof initializeTheme === 'function') {
         initializeTheme();
     }
 
-    // Ensure theme switch state is correct after components load
     updateThemeSwitchState();
 }

src/main/resources/static/js/script.js

@@ -6,20 +6,16 @@ let currentNoteModifiedAt = null;
 let versionCheckInterval = null;
 const VERSION_CHECK_INTERVAL_MS = 5000;
 
-// Theme management
 function initializeTheme() {
-    // Get saved theme preference or default to dark
     const savedTheme = localStorage.getItem('theme') || 'dark';
     const body = document.body;
 
-    // Apply theme to body first (this works even if switch isn't loaded yet)
     if (savedTheme === 'light') {
         body.setAttribute('data-theme', 'light');
     } else {
         body.removeAttribute('data-theme');
     }
 
-    // Update theme switch if it exists
     const themeSwitch = document.getElementById('themeSwitch');
     if (themeSwitch) {
         if (savedTheme === 'light') {
@@ -51,38 +47,29 @@ function toggleTheme() {
 
     if (!themeSwitch) return;
 
-    // Toggle between light and dark themes
     const currentTheme = body.getAttribute('data-theme');
 
     if (currentTheme === 'light') {
-        // Switch to dark theme
         body.removeAttribute('data-theme');
         themeSwitch.classList.add('dark');
         localStorage.setItem('theme', 'dark');
     } else {
-        // Switch to light theme
         body.setAttribute('data-theme', 'light');
         themeSwitch.classList.remove('dark');
         localStorage.setItem('theme', 'light');
     }
 
-    // Update theme color for mobile browsers
     updateThemeColor();
 }
 
 function init() {
-    // Initialize theme first
     initializeTheme();
-
-    // Mobile-specific optimizations
     setupMobileOptimizations();
 
-    // Extract note ID from URL path (e.g., /01KDECFWYDMS857DZMCR680MCY)
     const pathname = window.location.pathname;
     const pathParts = pathname.split('/');
     let idFromUrl = null;
 
-    // Look for a 26-character alphanumeric string (ULID pattern)
     for (const part of pathParts) {
         if (part && /^[A-Za-z0-9]{26}$/.test(part)) {
             idFromUrl = part;
@@ -90,7 +77,6 @@ function init() {
         }
     }
 
-    // Only load/create notes if we're on the note editor page (has noteContent element)
     const noteContent = document.getElementById('noteContent');
     if (noteContent) {
         if (idFromUrl) {
@@ -98,14 +84,9 @@ function init() {
         } else {
             newNote();
         }
-    }
-
-    // Set up auto-save on content change
-    if (noteContent) {
         noteContent.addEventListener('input', handleContentChange);
     }
 
-    // Handle Enter key in ID input
     const noteIdInput = document.getElementById('noteIdInput');
     if (noteIdInput) {
         noteIdInput.addEventListener('keypress', function(e) {
@@ -116,47 +97,37 @@ function init() {
     }
 }
 
-// Mobile-specific optimizations
 function setupMobileOptimizations() {
-    // Prevent iOS zoom on input focus by ensuring font-size is at least 16px
     const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
     if (isMobile) {
-        // Handle virtual keyboard on mobile
         const noteContent = document.getElementById('noteContent');
         if (noteContent) {
             noteContent.addEventListener('focus', function() {
-                // Small delay to let the virtual keyboard appear
                 setTimeout(() => {
                     this.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 }, 300);
             });
 
-            // Prevent losing focus when scrolling on mobile
             noteContent.addEventListener('touchmove', function(e) {
                 e.stopPropagation();
             }, { passive: true });
         }
 
-        // Update theme color based on current theme
         updateThemeColor();
     }
 
-    // Handle orientation change
     window.addEventListener('orientationchange', function() {
-        // Fix viewport height issues on mobile browsers
         setTimeout(() => {
             const vh = window.innerHeight * 0.01;
             document.documentElement.style.setProperty('--vh', `${vh}px`);
         }, 100);
     });
 
-    // Set initial viewport height
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 }
 
-// Update theme color meta tag based on current theme
 function updateThemeColor() {
     const themeColorMeta = document.querySelector('meta[name="theme-color"]');
     const currentTheme = document.body.getAttribute('data-theme');
@@ -170,16 +141,14 @@ function updateThemeColor() {
     }
 }
 
-// Handle content change for auto-save
 function handleContentChange() {
     const noteContent = document.getElementById('noteContent');
     if (!noteContent) {
-        console.error('Element with ID "noteContent" not found in handleContentChange');
+        console.error('Element with ID "noteContent" not found');
         return;
     }
     const content = noteContent.value;
 
-    // Clear existing timeout
     if (autoSaveTimeout) {
         clearTimeout(autoSaveTimeout);
     }
@@ -196,7 +165,6 @@ async function autoSave(content) {
 
     try {
         if (currentNoteId) {
-            // Update existing note
             const response = await fetch(`${API_BASE}/${currentNoteId}`, {
                 method: 'PUT',
                 headers: {
@@ -209,11 +177,9 @@ async function autoSave(content) {
 
             if (response.ok) {
                 const updatedNote = await response.json();
-                // Update version tracking after successful save
                 setCurrentNoteVersion(updatedNote.modifiedAt);
             }
         } else {
-            // Create new note
             const response = await fetch(API_BASE, {
                 method: 'POST',
                 headers: {
@@ -228,14 +194,10 @@ async function autoSave(content) {
                 const note = await response.json();
                 currentNoteId = note.id;
 
-                // Update URL with new note ID (path-based)
                 const newUrl = `/${note.id}`;
                 window.history.replaceState({}, '', newUrl);
 
-                // Show note ID in header
                 showNoteId(note.id);
-
-                // Set version tracking for new note
                 setCurrentNoteVersion(note.modifiedAt);
             }
         }
@@ -247,7 +209,6 @@ async function autoSave(content) {
 }
 
 async function loadNoteById(id) {
-    // Stop any existing version polling
     stopVersionPolling();
 
     try {
@@ -257,31 +218,24 @@ async function loadNoteById(id) {
             const note = await response.json();
             currentNoteId = note.id;
 
-            // Update content
             const noteContent = document.getElementById('noteContent');
             if (noteContent) {
                 noteContent.value = note.content;
                 lastSavedContent = note.content;
             } else {
-                console.error('Element with ID "noteContent" not found in loadNoteById');
+                console.error('Element with ID "noteContent" not found');
             }
 
-            // Update URL (path-based)
             const newUrl = `/${note.id}`;
             window.history.replaceState({}, '', newUrl);
 
-            // Show note ID in header
             showNoteId(note.id);
-
-            // Set current version and start polling for updates
             setCurrentNoteVersion(note.modifiedAt);
         } else {
-            // Note not found (404) or other error - create a new note instead
             console.warn(`Note with ID ${id} not found (${response.status}), creating new note`);
             await newNote();
         }
     } catch (error) {
-        // Network error or other failure - create a new note instead
         console.error('Failed to load note:', error, 'creating new note instead');
         await newNote();
     }
@@ -293,7 +247,7 @@ function showNoteId(id) {
         noteIdDisplay.textContent = id;
         noteIdDisplay.style.display = 'inline-block';
     } else {
-        console.error('Element with ID "noteIdDisplay" not found in showNoteId');
+        console.error('Element with ID "noteIdDisplay" not found');
     }
 }
 
@@ -305,18 +259,13 @@ async function copyNoteLink() {
             return;
         }
 
-        // Get the current URL
         const currentUrl = window.location.href;
-
-        // Copy to clipboard
         await navigator.clipboard.writeText(currentUrl);
 
-        // Visual feedback - temporarily show "Copied!" text
         const originalText = noteIdDisplay.textContent;
         noteIdDisplay.textContent = 'Copied!';
         noteIdDisplay.style.color = 'var(--accent-primary)';
 
-        // Restore original text after 2 seconds
         setTimeout(() => {
             noteIdDisplay.textContent = originalText;
             noteIdDisplay.style.color = '';
@@ -325,7 +274,6 @@ async function copyNoteLink() {
     } catch (error) {
         console.error('Failed to copy note link:', error);
 
-        // Fallback for older browsers - try to select the URL
         const noteIdDisplay = document.getElementById('noteIdDisplay');
         if (noteIdDisplay) {
             const originalText = noteIdDisplay.textContent;
@@ -338,7 +286,6 @@ async function copyNoteLink() {
 }
 
 async function newNote() {
-    // Stop any existing version polling
     stopVersionPolling();
 
     try {
@@ -357,23 +304,18 @@ async function newNote() {
             currentNoteId = note.id;
             lastSavedContent = '';
 
-            // Clear content and focus on content area
             const noteContent = document.getElementById('noteContent');
             if (noteContent) {
                 noteContent.value = '';
                 noteContent.focus();
             } else {
-                console.error('Element with ID "noteContent" not found in newNote');
+                console.error('Element with ID "noteContent" not found');
             }
 
-            // Update URL with new note ID (path-based)
             const newUrl = `/${note.id}`;
             window.history.replaceState({}, '', newUrl);
 
-            // Show note ID in header
             showNoteId(note.id);
-
-            // Set current version and start polling for updates
             setCurrentNoteVersion(note.modifiedAt);
         }
     } catch (error) {
@@ -387,14 +329,10 @@ function showIdInput() {
 
     if (idInputOverlay) {
         idInputOverlay.classList.remove('hidden');
-    } else {
-        console.error('Element with ID "idInputOverlay" not found in showIdInput');
     }
 
     if (noteIdInput) {
         noteIdInput.focus();
-    } else {
-        console.error('Element with ID "noteIdInput" not found in showIdInput');
     }
 }
 
@@ -404,14 +342,10 @@ function hideIdInput() {
 
     if (idInputOverlay) {
         idInputOverlay.classList.add('hidden');
-    } else {
-        console.error('Element with ID "idInputOverlay" not found in hideIdInput');
     }
 
     if (noteIdInput) {
         noteIdInput.value = '';
-    } else {
-        console.error('Element with ID "noteIdInput" not found in hideIdInput');
     }
 }
 
@@ -426,10 +360,9 @@ function loadNoteFromInput() {
     }
 }
 
-// Version checking and polling
 async function checkForNoteUpdates() {
     if (!currentNoteId || !currentNoteModifiedAt) {
-        return; // No active note to check
+        return;
     }
 
     try {
@@ -441,7 +374,6 @@ async function checkForNoteUpdates() {
             const localModifiedAt = new Date(currentNoteModifiedAt).getTime();
 
             if (serverModifiedAt > localModifiedAt) {
-                // Note has been updated elsewhere - auto-reload it
                 await autoReloadNote();
             }
         }
@@ -451,7 +383,6 @@ async function checkForNoteUpdates() {
 }
 
 function startVersionPolling() {
-    // Clear any existing polling
     stopVersionPolling();
 
     if (currentNoteId) {
@@ -476,7 +407,6 @@ function showUpdateToast() {
     if (toast) {
         toast.classList.remove('hidden');
 
-        // Hide after 2 seconds
         setTimeout(() => {
             toast.classList.add('hidden');
         }, 2000);
@@ -485,13 +415,8 @@ function showUpdateToast() {
 
 async function autoReloadNote() {
     if (currentNoteId) {
-        // Temporarily stop polling to avoid conflicts during reload
         stopVersionPolling();
-
-        // Reload the note
         await loadNoteById(currentNoteId);
-
-        // Show brief update message
         showUpdateToast();
     }
 }