Dashboard UX improvements

app/.vscode/launch.json

@@ -5,88 +5,88 @@
       "type": "node",
       "request": "launch",
       "name": "Dashboard",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-dashboard", "dev"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-dashboard", "dev"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "dev"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["dev:gui"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI (Storybook)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "story:dev"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-gui2", "story:dev"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Dashboard (Build)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "build:cloud"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["build:gui"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Dashboard (E2E UI)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-dashboard", "test:e2e:debug"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-dashboard", "test:e2e:debug"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI (E2E UI)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "test:e2e", "--", "--ui"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-gui2", "test:e2e", "--", "--ui"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Dashboard (All tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-dashboard", "test"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-dashboard", "test"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Dashboard (E2E tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-dashboard", "test:e2e"],
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-dashboard", "test:e2e"],
       "outputCapture": "std"
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Dashboard (Unit tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-dashboard", "test:unit"],
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-dashboard", "test:unit"],
       "outputCapture": "std"
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI (All tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "test"]
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-gui2", "test"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI (E2E tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "test:e2e"],
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-gui2", "test:e2e"],
       "outputCapture": "std"
     },
     {
       "type": "node",
       "request": "launch",
       "name": "GUI (Unit tests)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "--workspace=enso-gui2", "test:unit", "--", "run"],
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "--filter", "enso-gui2", "test:unit", "--", "run"],
       "outputCapture": "std"
     }
   ]

app/dashboard/package.json

@@ -31,6 +31,7 @@
     "@aws-amplify/auth": "5.6.5",
     "@aws-amplify/core": "5.8.5",
     "@hookform/resolvers": "^3.4.0",
+    "@internationalized/date": "^3.5.5",
     "@monaco-editor/react": "4.6.0",
     "@sentry/react": "^7.74.0",
     "@stripe/react-stripe-js": "^2.7.1",
@@ -40,26 +41,26 @@
     "ajv": "^8.12.0",
     "clsx": "^2.1.1",
     "enso-common": "workspace:*",
+    "framer-motion": "11.3.0",
     "is-network-error": "^1.0.1",
     "monaco-editor": "0.48.0",
     "react": "^18.3.1",
-    "react-aria": "^3.33.0",
-    "react-aria-components": "^1.2.0",
+    "react-aria": "^3.34.3",
+    "react-aria-components": "^1.3.3",
     "react-dom": "^18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "^7.51.4",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1",
-    "react-stately": "^3.31.0",
+    "react-stately": "^3.32.2",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "0.2.1",
     "tiny-invariant": "^1.3.3",
     "ts-results": "^3.3.0",
     "validator": "^13.12.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.4",
-    "framer-motion": "11.3.0"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@fast-check/vitest": "^0.0.8",

app/dashboard/src/components/AriaComponents/Alert/Alert.tsx

@@ -1,14 +1,15 @@
 /** @file Alert component. */
-import * as React from 'react'
+import { type ForwardedRef, type HTMLAttributes, type PropsWithChildren } from 'react'
 
-import * as mergeRefs from '#/utilities/mergeRefs'
-import * as twv from '#/utilities/tailwindVariants'
+import { mergeRefs } from '#/utilities/mergeRefs'
+import { forwardRef } from '#/utilities/react'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 
 // =================
 // === Constants ===
 // =================
 
-export const ALERT_STYLES = twv.tv({
+export const ALERT_STYLES = tv({
   base: 'flex flex-col items-stretch',
   variants: {
     fullWidth: { true: 'w-full' },
@@ -51,14 +52,14 @@ export const ALERT_STYLES = twv.tv({
 
 /** Props for an {@link Alert}. */
 export interface AlertProps
-  extends React.PropsWithChildren,
-    twv.VariantProps<typeof ALERT_STYLES>,
-    React.HTMLAttributes<HTMLDivElement> {}
+  extends PropsWithChildren,
+    VariantProps<typeof ALERT_STYLES>,
+    HTMLAttributes<HTMLDivElement> {}
 
 /** Alert component. */
-export const Alert = React.forwardRef(function Alert(
+export const Alert = forwardRef(function Alert(
   props: AlertProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const { children, className, variant, size, rounded, fullWidth, ...containerProps } = props
 
@@ -70,7 +71,7 @@ export const Alert = React.forwardRef(function Alert(
   return (
     <div
       className={ALERT_STYLES({ variant, size, className, rounded, fullWidth })}
-      ref={mergeRefs.mergeRefs(ref, (e) => {
+      ref={mergeRefs(ref, (e) => {
         if (variant === 'error') {
           e?.focus()
         }

app/dashboard/src/components/AriaComponents/Button/Button.tsx

@@ -10,7 +10,8 @@ import SvgMask from '#/components/SvgMask'
 
 import * as twv from '#/utilities/tailwindVariants'
 
-import * as text from '../Text'
+import { forwardRef } from '#/utilities/react'
+import { TEXT_STYLE } from '../Text'
 
 // ==============
 // === Button ===
@@ -106,7 +107,7 @@ export const BUTTON_STYLES = twv.tv({
       custom: { base: '', extraClickZone: '', icon: 'h-full' },
       hero: { base: 'px-8 py-4 text-lg font-bold', content: 'gap-[0.75em]' },
       large: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'semibold',
@@ -117,7 +118,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-6px]',
       },
       medium: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'semibold',
@@ -128,7 +129,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-8px]',
       },
       small: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'medium',
@@ -139,7 +140,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-10px]',
       },
       xsmall: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           weight: 'medium',
@@ -151,7 +152,7 @@ export const BUTTON_STYLES = twv.tv({
         extraClickZone: 'after:inset-[-12px]',
       },
       xxsmall: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           variant: 'body',
           color: 'custom',
           className: 'flex px-[3px] pt-[0.5px] pb-[2.5px] leading-[16px]',
@@ -166,7 +167,7 @@ export const BUTTON_STYLES = twv.tv({
     },
     iconOnly: {
       true: {
-        base: text.TEXT_STYLE({
+        base: TEXT_STYLE({
           disableLineHeightCompensation: true,
           className: 'border-0 outline-offset-[5px]',
         }),
@@ -203,6 +204,9 @@ export const BUTTON_STYLES = twv.tv({
       },
       ghost:
         'text-primary hover:text-primary/80 hover:bg-white focus-visible:text-primary/80 focus-visible:bg-white',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'ghost-fading':
+        'text-primary opacity-80 hover:opacity-100 hover:bg-white focus-visible:bg-white',
       submit: 'bg-invite text-white opacity-80 hover:opacity-100',
       outline: 'border-primary/40 text-primary hover:border-primary hover:bg-primary/5',
       bar: 'border-primary/20 hover:bg-primary/5',
@@ -282,7 +286,7 @@ export const BUTTON_STYLES = twv.tv({
 })
 
 /** A button allows a user to perform an action, with mouse, touch, and keyboard interactions. */
-export const Button = React.forwardRef(function Button(
+export const Button = forwardRef(function Button(
   props: ButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {

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

@@ -57,6 +57,12 @@ const DIALOG_STYLES = twv.tv({
         header: 'px-4 pt-[5px] pb-1.5 min-h-12',
       },
     },
+    fitContent: {
+      true: {
+        base: 'min-w-max',
+        content: 'min-w-max',
+      },
+    },
     hideCloseButton: { true: { closeButton: 'hidden' } },
     closeButton: {
       normal: { base: '', closeButton: '' },
@@ -127,6 +133,7 @@ export function Dialog(props: DialogProps) {
     testId = 'dialog',
     size,
     rounded,
+    fitContent,
     ...ariaDialogProps
   } = props
 
@@ -148,14 +155,15 @@ export function Dialog(props: DialogProps) {
   const overlayState = React.useRef<aria.OverlayTriggerState | null>(null)
   const root = portal.useStrictPortalContext()
 
-  const dialogSlots = DIALOG_STYLES({
+  const styles = DIALOG_STYLES({
     className,
     type,
     rounded,
     hideCloseButton,
     closeButton,
     scrolledToTop: isScrolledToTop,
     size,
+    fitContent,
   })
 
   utlities.useInteractOutside({
@@ -216,25 +224,23 @@ export function Dialog(props: DialogProps) {
                     element.dataset.testId = testId
                   }
                 })}
-                className={dialogSlots.base()}
+                className={styles.base()}
                 {...ariaDialogProps}
               >
                 {(opts) => {
                   return (
                     <dialogProvider.DialogProvider value={{ close: opts.close, dialogId }}>
-                      <aria.Header
-                        className={dialogSlots.header({ scrolledToTop: isScrolledToTop })}
-                      >
+                      <aria.Header className={styles.header({ scrolledToTop: isScrolledToTop })}>
                         <ariaComponents.CloseButton
-                          className={dialogSlots.closeButton()}
+                          className={styles.closeButton()}
                           onPress={opts.close}
                         />
 
                         {title != null && (
                           <ariaComponents.Text.Heading
                             slot="title"
                             level={2}
-                            className={dialogSlots.heading()}
+                            className={styles.heading()}
                             weight="semibold"
                           >
                             {title}
@@ -248,7 +254,7 @@ export function Dialog(props: DialogProps) {
                             handleScroll(ref.scrollTop)
                           }
                         }}
-                        className={dialogSlots.content()}
+                        className={styles.content()}
                         onScroll={(event) => {
                           handleScroll(event.currentTarget.scrollTop)
                         }}

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

@@ -40,6 +40,7 @@ export const POPOVER_STYLES = twv.tv({
       true: 'animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150',
     },
     size: {
+      auto: { base: 'w-[unset]', dialog: 'p-2.5' },
       xsmall: { base: 'max-w-xs', dialog: 'p-2.5' },
       small: { base: 'max-w-sm', dialog: 'p-3.5' },
       medium: { base: 'max-w-md', dialog: 'p-3.5' },