Make smart picker button more prominent

[juliusknorr]

We have the smart picker button in the link menu but it is too hidden, so we should show it more prominent next to the assistant button (below as a tertiary button) in addition.

[max-nextcloud]

@juliusknorr I added a quick sketch to the issue description. Did I get it right?

My first intuition would be that this can be used to insert geometrical shapes. Maybe a ➕ would be more appropriate to indicate this adds something to the document.

@nextcloud/designers What do you think?

[marcoambrosini]

I agree that a plus works best. Also I would move it to the left so that it's closer to the blinking cursor, which is where you're looking at when you're creating a new block.
This is an Anytype screenshot for reference. There I'm hovering the current block even though you don't see the pointer

[max-nextcloud]

There I'm hovering the current block even though you don't see the pointer

@marcoambrosini
When would this show?

• only for empty blocks or also for blocks that have text?
• on hover or independent of mouse position?
• for the current line or independent of cursor position?

Since the original discussion was to put it next to the assistant that would kind of imply it showing for the block the current cursor is on independent of mouse position and content.

I tend to only show it for empty blocks - because that avoids conflicts with the preview menu that shows on blocks that contain only a link or a link preview.
And I think i would show it for the block with the cursor and on hovering an empty block.

[marcoambrosini]

@max-nextcloud I think it should show

• On all blocks, clicking it on a non empty block will automatically trigger the smart picker in the next block
• On hover only
• For the current line

Since the original discussion was to put it next to the assistant that would kind of imply it showing for the block the current cursor is on independent of mouse position and content.

I think this is a bit different because the assistant currently targets the whole text with its actions (right?), whilst this smart picker would be a "position dependent" button, as it would insert a block in a specific location.

because that avoids conflicts with the preview menu that shows on blocks that contain only a link or a link preview.

This is not a problem, I'd follow Notion and Anytype UX here, where the plus button sits just to the left of a context action menu, which also serves as an drag button if long pressed.
In our case we would have this 3 dot menu just for the link for now, but moving forward I think it would be interesting to have this block menu for every block.
What do you think @max-nextcloud & @juliusknorr?

[max-nextcloud]

@marcoambrosini I see where you are going and I agree with the overall direction.

At the same time we want to ship something with this release and what you have in mind is more involved to implement.

So now I focus on the fact that it should only be in the current line and used the FloatingMenu approach that we are also using for the assistant - but on the left. By default it only shows on empty lines which works fairly nicely as a start.

I will first make sure i have somehting that works and could be merged and then tweak. I'll follow this list and see how far i get:

• display + button on the left on empty lines.
• actually open smart picker from the button.
• also show the button on lines with three dot menu - but moved to the left so they both fit.
• only show the button on hover. (using https://vueuse.org/core/useElementHover/ probably)

[max-nextcloud]

Current state is in the description of the PR. Let's move the discussion there.