invoke-ai/InvokeAI

[enhancement]: Attach "Queue handling" button to the left collapsed side pane.

Open

#5606 opened on Jan 30, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,358 stars) (2,164 forks)batch import
enhancementgood first issueweb ui

Description

Is there an existing issue for this?

  • I have searched the existing issues

Contact Details

No response

What should this feature add?

I'd like the "Queue handling" button (1st. picture) attached to the collapsed left side pane, instead of the currently present second (lower) "Cancel Current Item" button (2nd picture). The button could be a simple copy of the button already existing in the left side pane, including all its functionality and the queue items count label. That would be really convenient with my workflow.

Queue handling button Screenshot

Alternatives

The currently available solution ([Shift]+[Left Mouseclick] on the lower button of the collapsed left side pane, to Cancel and clear all queued items, sure is already a good solution, but I think my solution is easier to implement (since it could be a simple copy of the button already existing in the left side panel) and more convenient at the same time.

Additional Content

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Reactbasic UI developmentInvokeAI codebase navigation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Identify the components for the collapsed left side pane and the existing 'Queue handling' button. The button likely has its own component with functionality and queue count label. Replicate that component in the left side pane, replacing the lower 'Cancel Current Item' button. Refer to the UI component files under the frontend directory, such as `src/features/queue/` or similar. The maintainer may have further guidance on placement and styling.