feat: disable note moving for others while dragging #2891 #5410
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ffischbach-ino
force-pushed
the
ff/disable-note-moving-for-others-while-dragging-#2891
branch
from
0bb8014 to
c2942e0
Compare
Schwehn42
reviewed
Sep 16, 2025
Schwehn42
reviewed
Oct 7, 2025
Member
Schwehn42
left a comment
Schwehn42
left a comment
There was a problem hiding this comment.
Locks aren't sent to users who join after it was created:
- User A: start dragging a note (can be done on mobile to keep the lock)
- User B: reload page
- result: lock is not displayed for User B
Schwehn42
approved these changes
Oct 9, 2025
Member
Schwehn42
left a comment
Schwehn42
left a comment
There was a problem hiding this comment.
looks good to me all in all!
only comment I have is, currently the websocket handler for incoming messages is part of draglocks itself. would it make sense to abstract/generalize in order to make it usable for other use cases as well?
Collaborator
|
I would like to revist the backend implementation for this feature. |
Planlos5000
force-pushed
the
ff/disable-note-moving-for-others-while-dragging-#2891
branch
6 times, most recently
from
9e4670c to
0a86128
Compare
Planlos5000
force-pushed
the
ff/disable-note-moving-for-others-while-dragging-#2891
branch
from
e12cb40 to
02c1af4
Compare
Prevent multiple users from simultaneously dragging the same card by implementing a real-time locking system with visual feedback. - Add NOTE_DRAG_START and NOTE_DRAG_END WebSocket events - Create dragLocks Redux slice for state management - Add API endpoints for broadcasting drag events - Implement visual indicators showing which user is dragging - Display user avatar and name on locked cards - Disable drag interactions on locked cards - Add proper styling with DragLockIndicator.scss This prevents conflicting drag operations and provides clear visual feedback about who is currently moving each card.
Extract remaining inline styles from Sortable.tsx to Sortable.scss for better maintainability and separation of concerns. All styling is now properly organized in CSS files with BEM methodology.
Revert shouldCombine class name to maintain compatibility with existing Note.scss styling that depends on .shouldCombine selector for visual feedback during note stacking operations.
Remove console.log and console.warn statements from drag lock implementation to resolve ESLint warnings while maintaining silent error handling for better user experience.
- Implement in-memory drag lock management with automatic cleanup - Add configurable timeout and cleanup intervals with sensible defaults - Support concurrent access with RWMutex for thread safety - Include background cleanup goroutine for expired locks - Provide dependency injection interface for testability
- Create drag_locks table with note_id as primary key - Add foreign key constraints to notes, users, and boards - Include indexes for performance optimization - Support atomic lock operations across multiple pods
- Add PostgreSQL-based drag lock management with raw SQL - Support atomic lock acquisition using INSERT ON CONFLICT - Include automatic cleanup of expired locks (30 seconds) - Broadcast lock events via NATS for multi-pod coordination - Follow established patterns from reactions service
- Remove in-memory implementation from service.go - Keep only interface and factory function - Configure main.go to use database service - Enable multi-pod drag lock coordination
- Replace separate drag-start/drag-end endpoints with unified drag-state - Implement lock acquisition with HTTP 409 conflict responses - Integrate with drag lock service for coordination - Broadcast realtime events for drag state changes
- Add updateNoteDragState API method with boolean drag state - Update Redux thunks to use new unified endpoint - Maintain backward compatibility with existing drag thunks - Prepare for enhanced error handling and conflict detection
- Remove created_at index as table will have minimal rows (~50-100) - Keep board_id index for GetLocksForBoard queries - Reduce index maintenance overhead for short-lived locks
- Add drag_locks table to track note dragging state - Include foreign key constraints for data integrity - Add proper indexes for performance optimization
- Add WebSocket message handling for drag lock operations - Implement acquire and release lock functionality - Add automatic lock cleanup on user disconnect - Include comprehensive test coverage for database operations
- Add missing context parameter to BroadcastToBoard calls in drag locks - Add handleWebSocketMessage function to route drag lock WebSocket messages - Integrate drag lock message handling in board WebSocket connection - Release user drag locks when WebSocket connection closes
- Update mock Publish method to expect 3 parameters instead of 2 - Fixes test failures due to updated realtime broker interface - Affects database service and websocket handler test suites
- Add nil dragLocks parameter to New() function call in board templates test - Fixes test compilation error due to updated router signature - Required for API integration tests to pass
Update sendWebSocketMessage parameter type from 'any' to 'string' to improve type safety and align with WebSocket API expectations.
Add DragLockMessage interface and ClientMessage union type to support type-safe client-to-server WebSocket messaging for drag lock operations.
Update sendWebSocketMessage function to accept ClientMessage type instead of generic string parameter, ensuring type safety for WebSocket client messages.
- Add DragOverlay.scss for subtle column color tinting of dragged notes - Update CustomDndContext to pass colorClassName to dragged note - Apply background color and border styling based on original column - Include dark theme support with appropriate color variants
- Move indicator to bottom-right outside the note (-12px positioning) - Increase z-index for better visibility - Simplify styles by removing custom pill styling - Add enhanced shadow for prominence in both light and dark themes
- Replace custom drag indicator with note-author__container--self styling - Import and reuse NoteAuthorList.scss for consistent design - Switch from Avatar to UserAvatar component for proper prop support - Maintain semantic structure with figure and aria attributes - Apply column color theming through existing CSS variables
- Rename shadowed variable 'note' to 'targetNote' - Replace unsafe non-null assertion with safe fallback for user ID
- Create dedicated DragIndicatorPill component for drag indicators - Replace complex inline note-author structure in Sortable component - Simplify DragLockIndicator.scss to only handle positioning - Add proper TypeScript types with AvataaarProps - Enable automatic column color theming through CSS variables - Improve code maintainability and component reusability
- Import AvataaarProps from 'types/avatar' instead of 'avataaars' - Align with codebase conventions used in other components
- Add flexbox centering properties to avatar container - Ensure avatar is perfectly centered horizontally and vertically - Improve visual alignment of user avatars in drag indicators
- Change avatar dimensions from spacing-md to icon-medium - Use semantic icon sizing constants for better consistency - Maintain visual proportions while following design system conventions
- Add 'isMovingThis' translation key for English and German - Prepare translation infrastructure for drag indicator messages - Translation values need completion in follow-up
- Reduce opacity of locked notes from 0.7 to 0.4 - Make it more obvious when notes are being dragged by other users - Enhance user experience by clearly indicating non-interactive state
Planlos5000
force-pushed
the
ff/disable-note-moving-for-others-while-dragging-#2891
branch
from
02c1af4 to
e42bb46
Compare
Planlos5000
force-pushed
the
ff/disable-note-moving-for-others-while-dragging-#2891
branch
from
e42bb46 to
5e48481
Compare
|
The deployment to the dev cluster was successful. You can find the deployment here: https://5410.development.scrumlr.fra.ics.inovex.io Deployed Images
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This feature implements real-time card locking to prevent multiple users from simultaneously dragging the same card, eliminating conflicting drag operations. When a user starts dragging a card, other users see visual indicators showing who is currently moving it and are prevented from interfering with the drag operation.
Changelog
Added real-time collaborative drag locking system that displays user avatars and names on cards being moved by other participants, preventing drag conflicts and improving the collaborative editing experience. The system includes WebSocket-based event broadcasting, Redux state management, and comprehensive visual feedback with proper error handling for network failures
Checklist
(Optional) Visual Changes