Skip to content

Feat/draggable job queue widget#558

Merged
cristian-tamblay merged 3 commits into
developfrom
feat/draggable-job-queue-widget
Apr 20, 2026
Merged

Feat/draggable job queue widget#558
cristian-tamblay merged 3 commits into
developfrom
feat/draggable-job-queue-widget

Conversation

@Creylay
Copy link
Copy Markdown
Collaborator

@Creylay Creylay commented Apr 17, 2026

Summary

Add draggable functionality to JobQueueWidget with smart positioning and localStorage persistence.

The Job Queue widget can now be moved around the screen by dragging its header. When positioned in the lower half of the viewport, the widget intelligently expands upward to avoid being cut off. Position is automatically persisted to localStorage and restored on page reload. Users can reset to the default position by double-clicking the drag icon.


Type of Change

  • Backend change
  • Frontend change
  • CI / Workflow change
  • Build / Packaging change
  • Bug fix
  • Documentation

Changes (by file)

  • DashAI/front/src/components/jobs/JobQueueWidget.jsx:
    • Added drag functionality with handleDragStart, handleMouseMove event listeners
    • Implemented smart positioning logic: uses bottom CSS property when widget is in lower half of screen to prevent content cutoff
    • Added localStorage persistence of widget position with JSON serialization
    • Added double-click on drag icon to reset position to default
    • Added DragIndicatorIcon to header with tooltip "Drag to move · Double-click to reset"
    • Added opacity and brightness transitions for visual feedback
    • Used refs (dragRef, isDragging) to track drag state without re-renders
    • Maintained existing auto-expand/collapse behavior on job state changes

Testing (optional)

  • Drag the widget header to different positions on screen
  • Verify widget expands upward when dragged to bottom half
  • Verify position persists after page reload
  • Double-click drag icon to verify position resets to default
  • Verify auto-expand still works when jobs are added/completed while dragged

Notes (optional)

  • Drag detection ignores clicks on buttons/icons within the header to prevent accidental triggers
  • Uses viewport dimensions (window.innerHeight, window.innerWidth) for responsive smart positioning
  • localStorage operations wrapped in try-catch to handle potential quota/security errors
  • All strings translated with i18n support

@cristian-tamblay cristian-tamblay merged commit c5deec6 into develop Apr 20, 2026
19 checks passed
@cristian-tamblay cristian-tamblay deleted the feat/draggable-job-queue-widget branch April 20, 2026 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants