Redesign Model Manager Installation Queue

[joshistoast]

Summary

Completely redesigns the model manager's install queue panel. The new design gives proper hierarchy and organization to the model queue items and their statuses, actions and data.

Compared with the previous version:

Related Issues / Discussions

QA Instructions

Merge Plan

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

[joshistoast]

In a perfect world, individual queue items get a prune button

[DustyShoe]

1. What was the intention behind combining all bulk action buttons into a single dropdown? In my opinion, this results in poor UX.
2. How do we resume individual download? I’d suggest making the Pause button a toggle (Pause/Resume).

3. In the updated version, the “Backend disconnected” message feels more prominent and somewhat out of place compared to the previous layout.

[joshistoast]

1. What was the intention behind combining all bulk action buttons into a single dropdown? In my opinion, this results in poor UX.

Most invoke bulk actions are in a dropdown.

2. How do we resume individual download? I’d suggest making the Pause button a toggle (Pause/Resume).

It is a toggle. Also the pausing feature doesn't work for me so if that portion of the UI is broken you'll need to let me know how to fix it.

3. In the updated version, the “Backend disconnected” message feels more prominent and somewhat out of place compared to the previous layout.

Prominent is good.

[DustyShoe]

Also, if my opinion matters, i'm voting on separate bulk buttons and changing backend status message.

[joshistoast]

I don't think the backend status needs to even be here, it's already shown in the sidebar and there's nothing special about the queue that would warrant it getting a special badge for it and not the models page, generation page, etc.

[DustyShoe]

I don't think the backend status needs to even be here, it's already shown in the sidebar and there's nothing special about the queue that would warrant it getting a special badge for it and not the models page, generation page, etc.

“Backend disconnected” was added to address a specific UX gap:

1. When the backend is stopped/crashes (for example via Ctrl+C), installs are paused server-side.
2. During that disconnect window, the frontend can still show stale “In Progress” states.
3. The banner makes it explicit that the data source is currently unavailable and queue status may be outdated.
4. Once the backend reconnects and resync runs, statuses are refreshed.

So this prevents a false impression that downloads are still progressing normally.

Sure, we have a tiny triangle in the sidebar signaling the same thing, but it’s barely noticeable.

[DustyShoe]

The popup could be more descriptive. What exactly is disconnected? The server? The backend?
I would still prefer to have separate bulk Pause/Resume buttons.
Combining all options into a single dropdown could lead to poor UX.
Users would have to guess that “Resume All / Pause All” options are available.

[joshistoast]

The popup could be more descriptive. What exactly is disconnected? The server? The backend? I would still prefer to have separate bulk Pause/Resume buttons. Combining all options into a single dropdown could lead to poor UX. Users would have to guess that “Resume All / Pause All” options are available.

Hmm, those are supposed to be inline. Fair point on the description, I'll add that.

Tucking away the lower priority actions isn't bad UX, it's good UI. Under that alternative precedent, the rest of the UI would get VERY messy.

[DustyShoe]

Tucking away the lower priority actions isn't bad UX, it's good UI. Under that alternative precedent, the rest of the UI would get VERY messy.

I'd argue that claim. Resume all and Pause all are higher priority than Prune.
We shouldn't sacrifice good UX for the sake of good UI. Having three separate buttons for each action is not messy.

[joshistoast]

Tucking away the lower priority actions isn't bad UX, it's good UI. Under that alternative precedent, the rest of the UI would get VERY messy.

I'd argue that claim. Resume all and Pause all are higher priority than Prune. We shouldn't sacrifice good UX for the sake of good UI. Having three separate buttons for each action is not messy.

I'll sit and study some other queuing UIs to get a feel for what actions are priority

[joshistoast]

How about this:

[Pause All] [Resume All] [...]
                         [Prune]
                         [Cancel All]

If There are no items to resume, the resume button is hidden. Likewise for pause all, so it feels like more of a toggle in some situations. But in situations where some are paused and some are running both would be visible.

[DustyShoe]

How about this:

[Pause All] [Resume All] [...]
[Prune]
If There are no items to resume, the resume button is hidden. Likewise for pause all, so it feels like more of a toggle in some situations. But in situations where some are paused and some are running both would be visible.

That sounds like a much better solution!

[joshistoast]

@DustyShoe You'll probably need to test the pause/resume since that functionality doesn't work for me at all.

[DustyShoe]

Pause All and Resume All working as they should.

Hidden Prune button is even more confusing now. Maybe leave it visible with Cancel All being hidden behind dropdown as it was before?

Also there's some inconsistency in Pause and Resume button width. Wouldn't it be better to make them look the same?

Status labels can be moved further to the left to leave more breathing room. Longer Pause button makes them jump to the left by few pixels.

[joshistoast]

Hidden Prune button is even more confusing now. Maybe leave it visible with Cancel All being hidden behind dropdown as it was before?

The goal is to hide destructive elements into the dropdown. When there's no non-destructive bulk actions avaulable, prune becomes the only option available up there in place of the pause/resume.

Also there's some inconsistency in Pause and Resume button width. Wouldn't it be better to make them look the same?

No

Status labels can be moved further to the left to leave more breathing room. Longer Pause button makes them jump to the left by few pixels.

I can adjust that a tad