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');