diff --git a/Notemark/Components/Pages/Editor.razor b/Notemark/Components/Pages/Editor.razor index 977ef96..db1a694 100644 --- a/Notemark/Components/Pages/Editor.razor +++ b/Notemark/Components/Pages/Editor.razor @@ -82,7 +82,7 @@ @if (showPreview) { -
+
} @@ -156,11 +156,11 @@ await InvokeAsync(async () => await AutoSave()); }, null, 2000, Timeout.Infinite); // Increased to 2 seconds for production - // Don't show "Saving..." immediately, wait for actual save + // Only update status if it was previously "Saved" if (saveStatus == "Saved") { saveStatus = "Modified"; - await InvokeAsync(StateHasChanged); + StateHasChanged(); } } @@ -177,9 +177,11 @@ if (string.IsNullOrEmpty(sessionId) || !hasUnsavedChanges) return; + var previousStatus = saveStatus; + // Set saving status only when actually starting to save saveStatus = "Saving..."; - await InvokeAsync(StateHasChanged); + StateHasChanged(); // Use StateHasChanged instead of InvokeAsync try { @@ -194,7 +196,7 @@ catch (OperationCanceledException) { saveStatus = "Timeout"; - // Retry after 5 seconds + // Simplified retry - no immediate re-rendering _ = Task.Delay(5000).ContinueWith(async _ => { if (hasUnsavedChanges) @@ -206,7 +208,7 @@ catch (Exception) { saveStatus = "Error"; - // Retry after 3 seconds + // Simplified retry - no immediate re-rendering _ = Task.Delay(3000).ContinueWith(async _ => { if (hasUnsavedChanges) @@ -216,7 +218,11 @@ }); } - await InvokeAsync(StateHasChanged); + // Only trigger re-render if status actually changed + if (saveStatus != previousStatus) + { + StateHasChanged(); + } } private void TogglePreview() @@ -396,25 +402,33 @@ { if (!isDragging || containerWidth <= 0) return; - var newRatio = clientX / containerWidth; - splitRatio = Math.Max(0.2, Math.Min(0.8, newRatio)); // Clamp between 20% and 80% + var newRatio = Math.Max(0.2, Math.Min(0.8, clientX / containerWidth)); // Clamp between 20% and 80% - // Save to localStorage + // Update immediately for smooth dragging + splitRatio = newRatio; + + // Use StateHasChanged for immediate visual feedback + StateHasChanged(); + } + + [JSInvokable] + public async Task StopDragging() + { + if (!isDragging) return; + + isDragging = false; + + // Save split ratio to localStorage when dragging stops try { - await JSRuntime.InvokeVoidAsync("localStorage.setItem", "notemark-split-ratio", splitRatio.ToString()); + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "notemark-split-ratio", splitRatio.ToString("F2")); } catch { // Ignore localStorage errors } + // Single StateHasChanged at the end StateHasChanged(); } - - [JSInvokable] - public void StopDragging() - { - isDragging = false; - } } \ No newline at end of file diff --git a/Notemark/Components/Pages/Editor.razor.css b/Notemark/Components/Pages/Editor.razor.css index 1c026df..3d95185 100644 --- a/Notemark/Components/Pages/Editor.razor.css +++ b/Notemark/Components/Pages/Editor.razor.css @@ -438,11 +438,18 @@ justify-content: center; position: relative; flex-shrink: 0; - transition: background-color 0.2s ease; + transition: all 0.15s ease; } .splitter:hover { background-color: var(--accent); + width: 10px; +} + +.splitter.dragging { + background-color: var(--accent); + width: 12px; + box-shadow: 0 0 8px rgba(0, 122, 204, 0.3); } .splitter-handle { @@ -450,11 +457,19 @@ height: 40px; background-color: var(--secondary-text); border-radius: 1px; - transition: background-color 0.2s ease; + transition: all 0.15s ease; } .splitter:hover .splitter-handle { background-color: white; + width: 3px; + height: 50px; +} + +.splitter.dragging .splitter-handle { + background-color: white; + width: 4px; + height: 60px; } /* Mobile Responsive - Place at end to override desktop styles */ diff --git a/Notemark/wwwroot/js/theme.js b/Notemark/wwwroot/js/theme.js index 48c7240..04c70d2 100644 --- a/Notemark/wwwroot/js/theme.js +++ b/Notemark/wwwroot/js/theme.js @@ -59,9 +59,15 @@ window.startSplitterDrag = function(blazorInstance) { document.addEventListener('mousemove', handleSplitterMove); document.addEventListener('mouseup', handleSplitterUp); - // Prevent text selection + // Improve visual feedback during drag document.body.style.userSelect = 'none'; document.body.style.cursor = 'col-resize'; + + // Add dragging class for visual feedback + const splitter = document.querySelector('.splitter'); + if (splitter) { + splitter.classList.add('dragging'); + } }; function handleSplitterMove(e) { @@ -88,6 +94,12 @@ function handleSplitterUp(e) { document.body.style.cursor = ''; document.body.style.userSelect = ''; + // Remove dragging visual state + const splitter = document.querySelector('.splitter'); + if (splitter) { + splitter.classList.remove('dragging'); + } + // Notify Blazor that dragging stopped if (splitterState.blazorInstance) { splitterState.blazorInstance.invokeMethodAsync('StopDragging');