Fix Drive table

.prettierrc.yaml

@@ -19,7 +19,6 @@ overrides:
       printWidth: 100
       trailingComma: "all"
       arrowParens: "always"
-      organizeImportsSkipDestructiveCodeActions: true
       experimentalTernaries: true
       tailwindConfig: ./app/gui/tailwind.config.ts
 

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

@@ -10,7 +10,7 @@ import {
 } from 'react'
 
 import * as aria from '#/components/aria'
-import { Text, useVisualTooltip } from '#/components/AriaComponents/Text'
+import { useVisualTooltip } from '#/components/AriaComponents/Text'
 import { Tooltip, TooltipTrigger } from '#/components/AriaComponents/Tooltip'
 import { Icon as IconComponent } from '#/components/Icon'
 import { StatelessSpinner } from '#/components/StatelessSpinner'
@@ -337,9 +337,7 @@ const ButtonContent = memo(function ButtonContent(props: ButtonContentProps) {
         styles={styles}
         hideLoader={hideLoader}
       />
-      <Text color="inherit" truncate="1" className={styles.text()}>
-        {children}
-      </Text>
+      {children}
       {hasAddon(addonEnd) && <div className={styles.addonEnd()}>{addonEnd}</div>}
     </>
   )

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

@@ -1,6 +1,4 @@
 /** @file A button that copies text to the clipboard. */
-import * as React from 'react'
-
 import Error from '#/assets/cross.svg'
 import CopyIcon from '#/assets/duplicate.svg'
 import Done from '#/assets/tick.svg'
@@ -12,10 +10,6 @@ import * as textProvider from '#/providers/TextProvider'
 import { Button } from './Button'
 import type { ButtonProps } from './types'
 
-// ==================
-// === CopyButton ===
-// ==================
-
 /** Props for a {@link CopyButton}. */
 export interface CopyButtonProps<IconType extends string>
   extends Omit<ButtonProps<IconType>, 'icon' | 'loading' | 'onPress'> {

app/gui/src/dashboard/components/AriaComponents/Button/types.ts

@@ -1,53 +1,46 @@
-/**
- * @file
- *
- * Reusable types for the Button component
- */
-import type * as aria from '#/components/aria'
+/** @file Types for a `Button`. */
+import type {
+  ButtonProps as AriaButtonProps,
+  ButtonRenderProps as AriaButtonRenderProps,
+  LinkRenderProps as AriaLinkRenderProps,
+  LinkProps,
+  Placement,
+  PressEvent,
+} from '#/components/aria'
 import type { ExtractFunction } from '#/utilities/tailwindVariants'
 import type { ReactElement, ReactNode } from 'react'
 import type { Addon, IconProp, TestIdProps } from '../types'
 import type { BUTTON_STYLES, ButtonVariants } from './variants'
 
-/**
- * Position of a joined button
- */
+/** Position of a joined button. */
 export type PrivateJoinedButtonPosition = ButtonVariants['position']
 
-/**
- * Whether the button is joined
- */
+/** Whether the button is joined. */
 export type PrivateJoinedButton = ButtonVariants['isJoined']
 
-/**
- * Props for a joined button unlike other button props,
- */
+/** Props for a joined button unlike other button props. */
 export interface PrivateJoinedButtonProps {
   readonly position: PrivateJoinedButtonPosition
   readonly isJoined: NonNullable<PrivateJoinedButton>
 }
 
-/**
- * Render props for a button.
- */
-export interface ButtonRenderProps extends aria.ButtonRenderProps {
+/** Render props for a button. */
+export interface ButtonRenderProps extends AriaButtonRenderProps {
   readonly isLoading: boolean
 }
 
-/**
- * Render props for a link.
- */
-export interface LinkRenderProps extends aria.LinkRenderProps {
+/** Render props for a link. */
+export interface LinkRenderProps extends AriaLinkRenderProps {
   readonly isLoading: boolean
 }
 
 /** Props for a Button. */
 export type ButtonProps<IconType extends string = string> =
   | (BaseButtonProps<IconType, ButtonRenderProps> &
-      Omit<aria.ButtonProps, 'children' | 'isPending' | 'onPress'> &
+      Omit<AriaButtonProps, 'children' | 'isPending' | 'onPress'> &
       PropsWithoutHref)
   | (BaseButtonProps<IconType, LinkRenderProps> &
-      Omit<aria.LinkProps, 'children' | 'onPress'> &
+      Omit<LinkProps, 'children' | 'onPress'> &
       PropsWithHref)
 
 /** Props for a button with an href. */
@@ -68,7 +61,7 @@ export interface BaseButtonProps<IconType extends string, Render>
   readonly hideLoader?: boolean
   /** Falls back to `aria-label`. Pass `false` to explicitly disable the tooltip. */
   readonly tooltip?: ReactElement | string | false | null
-  readonly tooltipPlacement?: aria.Placement
+  readonly tooltipPlacement?: Placement
   /** The icon to display in the button */
   readonly icon?: IconProp<IconType, Render>
   /** When `true`, icon will be shown only when hovered. */
@@ -81,7 +74,7 @@ export interface BaseButtonProps<IconType extends string, Render>
   // prettier-ignore
   readonly onPress?:
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-    | ((event: aria.PressEvent) => Promise<unknown> | unknown)
+    | ((event: PressEvent) => Promise<unknown> | unknown)
     | null
     | undefined
   readonly contentClassName?: string
@@ -100,16 +93,12 @@ export interface BaseButtonProps<IconType extends string, Render>
   readonly addonEnd?: Addon<Render>
 }
 
-/**
- * A type that makes all properties of a type optional
- */
+/** A new type `undefined` added to all properties of a type. */
 type WithUndefined<T> = {
   [K in keyof T]: T[K] | undefined
 }
 
-/**
- * Props that are shared between buttons in a button group.
- */
+/** Props that are shared between buttons in a button group. */
 export interface ButtonGroupSharedButtonProps extends WithUndefined<ButtonVariants> {
   readonly isDisabled?: boolean | undefined
   readonly isLoading?: boolean | undefined

app/gui/src/dashboard/components/AriaComponents/Button/variants.ts

@@ -204,7 +204,6 @@ export const BUTTON_STYLES = tv({
     wrapper: 'relative block max-w-full',
     loader: 'absolute inset-0 flex items-center justify-center',
     content: 'flex items-center',
-    text: 'w-full max-w-full',
     icon: 'h-[1.906cap] w-[1.906cap] flex-none aspect-square flex items-center justify-center',
     addonStart: 'flex items-center justify-center macos:-mb-0.5',
     addonEnd: 'flex items-center justify-center macos:-mb-0.5',

app/gui/src/dashboard/components/AriaComponents/IconDisplay/IconDisplay.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { IconDisplay, type IconDisplayProps } from './IconDisplay'
+
+type Props = IconDisplayProps<string>
+type Story = StoryObj<Props>
+
+export default {
+  title: 'Components/IconDisplay',
+  component: IconDisplay,
+  render: (args) => <IconDisplay {...args} />,
+  tags: ['autodocs'],
+  args: { icon: 'time', children: 'aaaaaaaa' } satisfies Props,
+  // `text-primary` is required to make icons show up.
+  decorators: [(Story, context) => <div className="text-primary">{Story(context)}</div>],
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<Props>
+
+export const Default: Story = {}
+
+export const Overflowing: Story = {
+  args: {
+    icon: 'sort',
+    children: 'very long example label that overflows the max width',
+  } satisfies Props,
+}

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

@@ -0,0 +1,81 @@
+/** @file A text display with an icon. */
+import { Icon } from '#/components/Icon'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
+import { Text, WithVisualTooltip, type IconProp, type TextProps, type TooltipElementType } from '..'
+
+const ICON_DISPLAY_STYLES = tv({
+  base: 'flex items-center gap-2 max-w-48 min-w-4 px-1',
+  slots: {
+    icon: '-mb-0.5',
+    // For some reason `min-w-0` is required for the ellipsis to appear.
+    container: 'flex mx-auto min-w-0',
+    text: 'block truncate',
+  },
+  variants: {
+    variant: {
+      custom: '',
+      link: 'inline-block px-0 py-0 rounded-sm text-primary/50 underline border-0',
+      primary: 'bg-primary text-white',
+      accent: 'bg-accent text-white',
+      ghost: 'text-primary',
+      submit: 'bg-invite text-white opacity-80',
+      outline: 'border-0.5 rounded-full border-primary/20 text-primary',
+    },
+  },
+  defaultVariants: {
+    variant: 'custom',
+  },
+})
+
+/** Render props for {@link IconDisplay}. */
+export interface IconDisplayRenderProps {
+  /** Defaults to `true`. */
+  readonly isCurrent?: boolean
+  /** Defaults to `false`. */
+  readonly isDisabled?: boolean
+}
+
+/** Props for an {@link IconDisplay}. */
+export interface IconDisplayProps<IconType extends string>
+  extends Omit<TextProps, 'children' | 'variant' | 'variants'>,
+    IconDisplayRenderProps,
+    VariantProps<typeof ICON_DISPLAY_STYLES> {
+  readonly icon: IconProp<IconType, Required<IconDisplayRenderProps>>
+  readonly children:
+    | TooltipElementType
+    | ((renderProps: Required<IconDisplayRenderProps>) => TooltipElementType)
+}
+
+/** A text display with an icon. */
+export function IconDisplay<IconType extends string>(props: IconDisplayProps<IconType>) {
+  const {
+    icon,
+    isCurrent = true,
+    isDisabled = false,
+    children,
+    variant,
+    variants = ICON_DISPLAY_STYLES,
+    tooltip,
+    ...textProps
+  } = props
+  const renderProps = { isCurrent, isDisabled }
+
+  const styles = variants({ variant })
+
+  const renderedChildren = typeof children === 'function' ? children(renderProps) : children
+
+  return (
+    <div className={styles.base()}>
+      <WithVisualTooltip tooltip={tooltip} tooltipPlacement="left">
+        <Icon className={styles.icon()} size="medium" renderProps={renderProps}>
+          {icon}
+        </Icon>
+      </WithVisualTooltip>
+      <div className={styles.container()}>
+        <Text className={styles.text()} truncate="1" {...textProps} tooltip={renderedChildren}>
+          {renderedChildren}
+        </Text>
+      </div>
+    </div>
+  )
+}

app/gui/src/dashboard/components/AriaComponents/IconDisplay/index.ts

@@ -0,0 +1,2 @@
+/** Barrel file for `IconDisplay`. */
+export * from './IconDisplay'

app/gui/src/dashboard/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx

@@ -61,7 +61,7 @@ const DATE_PICKER_STYLES = tv({
     dateInput: 'flex justify-start grow order-2',
     dateSegment: 'rounded placeholder-shown:text-primary/30 focus:bg-primary/10 px-[0.5px]',
     calendarButton: 'order-1 rotate-90',
-    resetButton: '',
+    resetButton: 'order-2',
     calendarPopover: '',
     calendarDialog: 'text-primary text-xs mx-2',
     calendarContainer: '',
@@ -80,6 +80,43 @@ const DATE_PICKER_STYLES = tv({
   },
 })
 
+/** Return the date segment using English placeholders. */
+function normalizeDateSegment(segment: DateSegmentType): DateSegmentType {
+  if (segment.text !== segment.placeholder) {
+    return segment
+  }
+  switch (segment.type) {
+    case 'era': {
+      return { ...segment, text: 'AD', placeholder: 'AD' }
+    }
+    case 'year': {
+      return { ...segment, text: 'yyyy', placeholder: 'yyyy' }
+    }
+    case 'month': {
+      return { ...segment, text: 'mm', placeholder: 'mm' }
+    }
+    case 'day': {
+      return { ...segment, text: 'dd', placeholder: 'dd' }
+    }
+    case 'hour': {
+      return { ...segment, text: 'HH', placeholder: 'HH' }
+    }
+    case 'minute': {
+      return { ...segment, text: 'MM', placeholder: 'MM' }
+    }
+    case 'second': {
+      return { ...segment, text: 'SS', placeholder: 'SS' }
+    }
+    case 'timeZoneName': {
+      return { ...segment, text: 'UTC+XX', placeholder: 'UTC+XX' }
+    }
+    case 'dayPeriod':
+    case 'literal': {
+      return segment
+    }
+  }
+}
+
 /** Props for a {@link DatePicker}. */
 export interface DatePickerProps<
   Schema extends TSchema,
@@ -175,7 +212,7 @@ export const DatePicker = forwardRef(function DatePicker<
                     segments[segment.type] === false ?
                       <></>
                     : <DateSegment
-                        segment={segment}
+                        segment={normalizeDateSegment(segment)}
                         className={styles.dateSegment({
                           className:
                             segment.type === 'literal' && segment.text === ' ' ? 'w-1.5' : '',

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

@@ -1,23 +1,17 @@
-/**
- * @file
- *
- * The separator component.
- */
-import * as React from 'react'
-
-import * as aria from '#/components/aria'
-
-import * as twv from '#/utilities/tailwindVariants'
+/** @file A visual separator. */
+import {
+  Separator as AriaSeparator,
+  type SeparatorProps as AriaSeparatorProps,
+} from '#/components/aria'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 
 /** The props for {@link Separator} component. */
-export interface SeparatorProps
-  extends aria.SeparatorProps,
-    twv.VariantProps<typeof SEPARATOR_STYLES> {
+export interface SeparatorProps extends AriaSeparatorProps, VariantProps<typeof SEPARATOR_STYLES> {
   readonly className?: string | undefined
 }
 
 /** The styles for the {@link Separator} component. */
-export const SEPARATOR_STYLES = twv.tv({
+export const SEPARATOR_STYLES = tv({
   base: 'rounded-full border-none',
   variants: {
     size: {
@@ -75,7 +69,7 @@ export const SEPARATOR_STYLES = twv.tv({
   ],
 })
 
-/** A separator component. */
+/** A visual separator. */
 export function Separator(props: SeparatorProps) {
   const {
     orientation = 'horizontal',
@@ -88,5 +82,5 @@ export function Separator(props: SeparatorProps) {
 
   const styles = variants({ orientation, variant, size, className })
 
-  return <aria.Separator orientation={orientation} className={styles} {...rest} />
+  return <AriaSeparator orientation={orientation} className={styles} {...rest} />
 }