Repository: vscode
Issue: Explore a QuickPick-like experience close to what invoked it
Labels: quick-pick,under-discussion

Scenarios:
* The attach context in Chat:
![image](https://github.com/user-attachments/assets/a1692e9b-08bf-44c1-9e39-7392e13bcfbc)
* Git branch status bar item:
![image](https://github.com/user-attachments/assets/79d4bb11-be3e-432a-8436-38da1b85c59f)
* Language, Encoding, Tab Size status bar items:
![image](https://github.com/user-attachments/assets/7a0ed401-ecd2-4abc-907b-e33a0c9e760a)

All of these open Quick Picks that are aligned at the top... and we've gotten wishes that the quick pick could be rendered closer to these items.

# Explorations

## Explore simply moving the existing quick pick closer to what's invoking it

Hacked up in https://github.com/microsoft/vscode/commit/88f4209887aa16faa8253f77cc78a5ccb43dae97 if you click in the Chat input and click the paper clip, the quick pick renders closer to it:
![image](https://github.com/user-attachments/assets/cf9d1581-5478-42bf-8898-5e54e4e6443b)

another example if your cursor was in the Search:
![image](https://github.com/user-attachments/assets/7b7fc5cd-48d6-4a1f-8496-8adf6bab7ce7)

and another example if you use the branch picker:
![image](https://github.com/user-attachments/assets/925eeb25-98e7-4ce1-8581-118272dffc58)

There are a few things to iron out:
* this commit only renders things close to things if they're in the outer 30% of the screen. This would be modified to logic that says " always render close to the thing... if you're in the main editor part, render in the middle".. but requires additional layer work since WorkbenchLayerService is in `workbench` and quick pick is in `platform`
* Clicking on buttons does not take focus... so if my cursor was in the Search bar, and I clicked the Attach Context with my mouse, the quick pick will render close to Search
* current logic breaks D&D and that would need to come back

Those are things that could be solved with some work... but I think the big problem is that........ it just doesn't look that great. I was really expecting it to look and feel nicer, but I don't think it does. I wish that the quick pick felt more attached to the thing that is opening it... like the attach context, or the Git status bar item.

That inspired the 2nd exploration.

## Explore a new kind of widget

For the attach context and the status bar items, the wish is for something that really feels attached to that. Something like the label picker on GitHub:
![image](https://github.com/user-attachments/assets/3b456b09-16c1-4ea2-b03b-0e601a5c5e35)

but with a tail like a hover (like the Language Status Bar item):
![image](https://github.com/user-attachments/assets/c7f0bb13-b508-4917-a6fa-a22b357d3d03)

It could look something like this (please forgive my bad Figma skills):
![image](https://github.com/user-attachments/assets/e72f6883-faaf-4a40-bbfa-07ef01fccad9)

and in the branch picker:
![image](https://github.com/user-attachments/assets/fdd1b7d5-7032-4798-9306-7ac266045d48)


Writing down a loose idea from notes:

```
* make a QuickContextWidget that is similar to a quick pick, but smaller and attachable to a UI component (it could use shared code with QP)
* adopt this in Core for the attach context
* adopt this for all Core contributed Status Bar Items
* add a `showQuickContext(items: QuickContextItem[]): Promise<QuickContextItem | undefined>`
* adopt the `showQuickContext` in git extension
```

I think we need more mockups... open questions:
* What would the height of these be?
* Could we render the input at the bottom?
* What do InputBoxes look like (instead of QuickPicks)?