feat: disable note moving for others while dragging #2891

[ffischbach-ino]

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

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• The light- and dark-theme are both supported and tested
• The design was implemented and is responsive for all devices and screen sizes
• The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

[Schwehn42]

Locks aren't sent to users who join after it was created:

1. User A: start dragging a note (can be done on mobile to keep the lock)
2. User B: reload page
3. result: lock is not displayed for User B

[Schwehn42]

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?

[Planlos5000]

I would like to revist the backend implementation for this feature.
I currently found out that nats can provide a key value store with a ttl (https://docs.nats.io/nats-concepts/jetstream/key-value-store) and so can redis. Since we already use nats or redis for messaging, this could be a better fit for this feature to store the lock.

[Schwehn42]

dragging a note results in error {"level":"error","ts":1765883370.748571,"caller":"cache/nats.go:109","msg":"key does not exist","requestID":"ffaa04ed1986/SDosvy3TId-000057","key":"a4dcee40-05bc-4352-88ee-3b2cf5a11c85","error":"nats: key not found"}.

one time it even crashed the server, saying {"level":"error","ts":1765883359.650216,"caller":"notes/service.go:444","msg":"failed to get lock","requestID":"ffaa04ed1986/SDosvy3TId-000052","err":"nats: key not found"}, though I couldn't consistently reproduce that.

[github-actions]

The deployment to the dev cluster was successful. You can find the deployment here: https://5410.development.scrumlr.fra.ics.inovex.io
This deployment is only for testing purposes and will be deleted after 1 week.
To redeploy rerun the workflow.
DO NOT STORE IMPORTANT DATA ON THIS DEPLOYMENT

Deployed Images

• ghcr.io/inovex/scrumlr.io/scrumlr-frontend:sha-66afb59

• ghcr.io/inovex/scrumlr.io/scrumlr-server:sha-66afb59

[Planlos5000]

Currenly we sometimes get the following error when draging notes

{"level":"debug","ts":1767889890.2045777,"msg":"received message","requestID":"florian-inovex/mcy26hRnNi-000015","message":"eyJ0eXBlIjoiRFJBR19MT0NLX01FU1NBR0UiLCJkYXRhIjp7ImFjdGlvbiI6IkFDUVVJUkUiLCJub3RlSWQiOiJmOTY3NzU2Yy0zNDc3LTQyMDItYTBmOS04NmM3NTQ2MTE2OTcifX0="}
{"level":"debug","ts":1767889890.2171407,"msg":"broadcasting to board","requestID":"florian-inovex/mcy26hRnNi-000015","board":"6cf3b717-02fd-4ce0-a97b-e2a2dc4084a6","msg":"NOTE_DRAG_START"}
{"level":"debug","ts":1767889890.2183917,"msg":"message received","message":{"type":"NOTE_DRAG_START","data":{"noteId":"f967756c-3477-4202-a0f9-86c754611697","userId":"3b029f15-33a3-4037-9cd5-abcfd7422de2"}}}
{"level":"debug","ts":1767889890.6444461,"msg":"received message","requestID":"florian-inovex/mcy26hRnNi-000015","message":"eyJ0eXBlIjoiRFJBR19MT0NLX01FU1NBR0UiLCJkYXRhIjp7ImFjdGlvbiI6IlJFTEVBU0UiLCJub3RlSWQiOiJmOTY3NzU2Yy0zNDc3LTQyMDItYTBmOS04NmM3NTQ2MTE2OTcifX0="}
{"level":"debug","ts":1767889890.6471694,"msg":"broadcasting to board","requestID":"florian-inovex/mcy26hRnNi-000015","board":"6cf3b717-02fd-4ce0-a97b-e2a2dc4084a6","msg":"NOTE_DRAG_END"}
{"level":"debug","ts":1767889890.6473963,"msg":"received message","requestID":"florian-inovex/mcy26hRnNi-000015","message":"eyJ0eXBlIjoiRFJBR19MT0NLX01FU1NBR0UiLCJkYXRhIjp7ImFjdGlvbiI6IlJFTEVBU0UiLCJub3RlSWQiOiJmOTY3NzU2Yy0zNDc3LTQyMDItYTBmOS04NmM3NTQ2MTE2OTcifX0="}
{"level":"debug","ts":1767889890.6478271,"msg":"message received","message":{"type":"NOTE_DRAG_END","data":{"noteId":"f967756c-3477-4202-a0f9-86c754611697","userId":"3b029f15-33a3-4037-9cd5-abcfd7422de2"}}}
{"level":"debug","ts":1767889890.6498935,"msg":"broadcasting to board","requestID":"florian-inovex/mcy26hRnNi-000015","board":"6cf3b717-02fd-4ce0-a97b-e2a2dc4084a6","msg":"NOTE_DRAG_END"}
{"level":"debug","ts":1767889890.6506217,"msg":"message received","message":{"type":"NOTE_DRAG_END","data":{"noteId":"f967756c-3477-4202-a0f9-86c754611697","userId":"3b029f15-33a3-4037-9cd5-abcfd7422de2"}}}
{"level":"debug","ts":1767889901.3898916,"msg":"received message","requestID":"florian-inovex/mcy26hRnNi-000015","message":"eyJ0eXBlIjoiRFJBR19MT0NLX01FU1NBR0UiLCJkYXRhIjp7ImFjdGlvbiI6IkFDUVVJUkUiLCJub3RlSWQiOiI2MDUxYWUzOC0yNTRkLTRkNjUtOWE5Mi1lMTUwOGQwMDJjNWEifX0="}
panic: concurrent write to websocket connection

goroutine 160 [running]:
github.com/gorilla/websocket.(*messageWriter).flushFrame(0xc000bf43c0, 0x1, {0x0, 0x0, 0x0})
	/home/florian/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:617 +0x985
github.com/gorilla/websocket.(*messageWriter).Close(0xc000bf43c0)
	/home/florian/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:731 +0x5e
github.com/gorilla/websocket.(*Conn).beginMessage(0xc0004ee000, 0xc00074e390, 0x1)
	/home/florian/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:480 +0x68
github.com/gorilla/websocket.(*Conn).NextWriter(0xc0004ee000, 0x1)
	/home/florian/go/pkg/mod/github.com/gorilla/[email protected]/conn.go:520 +0xa5
github.com/gorilla/websocket.(*Conn).WriteJSON(0xc0004ee000, {0x19f90e0, 0xc000a0c340})