Fix bugs around mass selection/single selection/drag and drop (#11942)

Closes: enso-org/cloud-v2#1633

This PR:

1. Refactors the Selection Brush component - improve visuals, improved performance, added support for scrolling containers
2. Now dragging can only be started over a selected row.
3. If a row is not selected, Brush selection is applied
4. This PR isolates the root view from Portals, this guaranties that portals will always be over the root view
5. Adds new utilities and hooks.
6. Fixes floating bug when selection doesn't happen on click
7. Changes the behavior of unselection: from blacklist (everything except a few elements) to whitelist (if user clicks on Special component - unselect). Special component can be placed anywhere we want. clicks on other elements are ignored

Author: MrFlashAccount

app/common/src/services/Backend.ts

@@ -73,6 +73,7 @@ export const S3ObjectVersionId = newtype.newtypeConstructor<S3ObjectVersionId>()
 
 /** Unique identifier for an arbitrary asset. */
 export type AssetId = IdType[keyof IdType]
+export const AssetId = newtype.newtypeConstructor<AssetId>()
 
 /** Unique identifier for a payment checkout session. */
 export type CheckoutSessionId = newtype.Newtype<string, 'CheckoutSessionId'>

app/gui/integration-test/dashboard/actions/DrivePageActions.ts

@@ -212,6 +212,7 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
       dragRowToRow(from: number, to: number) {
         return self.step(`Drag drive table row #${from} to row #${to}`, async (page) => {
           const rows = locateAssetRows(page)
+          rows.nth(from).click()
           await rows.nth(from).dragTo(rows.nth(to), {
             sourcePosition: ASSET_ROW_SAFE_POSITION,
             targetPosition: ASSET_ROW_SAFE_POSITION,

app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx

@@ -28,7 +28,7 @@ import { DIALOG_BACKGROUND } from './variants'
 const MotionDialog = motion(aria.Dialog)
 
 const OVERLAY_STYLES = tv({
-  base: 'fixed inset-0 isolate flex items-center justify-center bg-primary/20 z-tooltip',
+  base: 'fixed inset-0 isolate flex items-center justify-center bg-primary/20',
   variants: {
     isEntering: { true: 'animate-in fade-in duration-200 ease-out' },
     isExiting: { true: 'animate-out fade-out duration-200 ease-in' },

app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx

@@ -29,7 +29,7 @@ export interface PopoverProps
 }
 
 export const POPOVER_STYLES = twv.tv({
-  base: 'shadow-xl w-full overflow-clip z-tooltip',
+  base: 'shadow-xl w-full overflow-clip',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200',

app/gui/src/dashboard/components/AriaComponents/Tooltip/Tooltip.tsx

@@ -12,7 +12,7 @@ import * as text from '../Text'
 // =================
 
 export const TOOLTIP_STYLES = twv.tv({
-  base: 'group flex justify-center items-center text-center text-balance [overflow-wrap:anywhere] z-tooltip',
+  base: 'group flex justify-center items-center text-center text-balance [overflow-wrap:anywhere]',
   variants: {
     variant: {
       custom: '',

app/gui/src/dashboard/components/Badge/Badge.tsx

@@ -15,7 +15,7 @@ export interface BadgeProps extends VariantProps<typeof BADGE_STYLES> {
 }
 
 export const BADGE_STYLES = tv({
-  base: 'flex items-center justify-center px-[5px] border-[0.5px]',
+  base: 'flex items-center justify-center px-[5px] border-[0.5px] min-w-6',
   variants: {
     variant: {
       solid: 'border-transparent bg-[var(--badge-bg-color)] text-[var(--badge-text-color)]',