Implement "Command Palette" for editing multiple resources

[marcellamaki]

This issue is part of the Studio Usability Enhancement work. The scope of this issue is to create a top bar of icons (the "command palette") for use in quick editing multiple resources.

Scope

• Create a mobile-responsive top bar using <KIconButton/>s
• Conditionally displaying the number of icons, based on screen size
• Top bar should only appear when at least one resource has been selected for edit using the checkbox selection
• Icons for edit functions that are not available should be disabled
• Button clicks should be set up to emit events that the corresponding form will be listening for

Out of scope

• Implementing the forms that correspond to each edit
• Adding the icons to KDS

Specs

IMPORTANT: Please review the figma specs related to responsive design guidance for full details

Reference guidelines for tooltips, icon names, and interactivity

Acceptance Criteria

• Layout should match Figma specifications, including mobile layout
• Correct enabling and disabling of icon buttons on: selecting resources, selecting folders, selecting both
• Each button emits an event on click that can be used by the corresponding form
• KIconButtons and command palette are keyboard navigable, and have the correct labelling for screen reader users

[manavagr1108]

Hey @marcellamaki, I find this issue intresting. Can I take up this issue?

[AlexVelezLl]

Implemented in #4446