Title mapping: drag-and-drop is not discoverable and breaks on mobile #2

New issue

Open

opened 2026-05-27 10:06:15 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-05-27 10:06:15 -07:00

Owner

Problem

The drag-and-drop interaction for mapping disc titles to Sonarr/Radarr items has two issues:

Discoverability — there is no visual affordance indicating that dragging is required. New users stall at this step because clicking a disc title and clicking a search result both look like they should "do something" but nothing happens. The ⌨ Keyboard fallback exists but is also not obvious.

Mobile — drag-and-drop is unreliable on touch devices. The two-column layout (disc titles left, arr search right) compresses on small viewports and makes drag targets hard to hit accurately. Horizontal drag across the columns is especially awkward.

What good looks like

A few approaches to consider (not mutually exclusive):

Click-to-select + click-to-assign — first click on a disc title selects it (highlighted state), second click on an arr result assigns it. No drag needed. Drag remains as an optional power-user shortcut.
Inline dropdown — each disc title row has a small dropdown/combobox that searches Sonarr or Radarr inline. No separate panel needed.
Visual drag hint — add a drag handle icon (⠿ or ≡) to each disc title card with a tooltip/label: "Drag to assign" on first load, fading after first use.
Mobile-specific flow — on narrow viewports, replace the two-column layout with a stepper: select title → search → confirm. Avoids cross-column drag entirely.

See #1 for the broader mobile layout improvements.

## Problem The drag-and-drop interaction for mapping disc titles to Sonarr/Radarr items has two issues: **Discoverability** — there is no visual affordance indicating that dragging is required. New users stall at this step because clicking a disc title and clicking a search result both look like they should "do something" but nothing happens. The ⌨ Keyboard fallback exists but is also not obvious. **Mobile** — drag-and-drop is unreliable on touch devices. The two-column layout (disc titles left, arr search right) compresses on small viewports and makes drag targets hard to hit accurately. Horizontal drag across the columns is especially awkward. ## What good looks like A few approaches to consider (not mutually exclusive): 1. **Click-to-select + click-to-assign** — first click on a disc title selects it (highlighted state), second click on an arr result assigns it. No drag needed. Drag remains as an optional power-user shortcut. 2. **Inline dropdown** — each disc title row has a small dropdown/combobox that searches Sonarr or Radarr inline. No separate panel needed. 3. **Visual drag hint** — add a drag handle icon (⠿ or ≡) to each disc title card with a tooltip/label: "Drag to assign" on first load, fading after first use. 4. **Mobile-specific flow** — on narrow viewports, replace the two-column layout with a stepper: select title → search → confirm. Avoids cross-column drag entirely. ## Related See #1 for the broader mobile layout improvements.

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Circuit-Forge/discarr#2

No description provided.